/* Codart — portada. CSS propio, sin framework ni build.
   Tipografía del sistema: nada que descargar, carga instantánea. */

:root {
  --tinta: #0f172a;
  --tinta-suave: #475569;
  --tinta-tenue: #94a3b8;
  --fondo: #ffffff;
  --fondo-alt: #f8fafc;
  --borde: #e2e8f0;
  /* Rojo del logo (codart_tarjeta.ai). --marca es fondo de botones (blanco encima
     da 4.9:1); --marca-texto es para texto rojo sobre el fondo de la página. */
  --marca: #da2227;
  --marca-fuerte: #b71c20;
  --marca-texto: #da2227;
  --radio: 14px;
  --ancho: 1080px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--tinta);
  background: var(--fondo);
  font-family:
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 20px;
}

/* ── Cabecera ─────────────────────────────────────────── */

.cabecera {
  border-bottom: 1px solid var(--borde);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.marca__logo {
  display: block;
  height: 28px;
  width: auto;
}

.enlace-sobrio {
  color: var(--tinta-suave);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}

.enlace-sobrio:hover {
  color: var(--marca-texto);
}

/* ── Portada ──────────────────────────────────────────── */

.portada {
  /* Menos aire abajo que arriba: acerca las tarjetas al pliegue. */
  padding-block: clamp(48px, 9vw, 96px) clamp(36px, 6vw, 64px);
  background:
    radial-gradient(60% 120% at 50% 0%, #fdeeee 0%, transparent 70%), var(--fondo);
  text-align: center;
}

.portada h1 {
  font-size: clamp(1.9rem, 5.2vw, 3.1rem);
  letter-spacing: -0.02em;
}

.portada__bajada {
  margin-top: 18px;
  margin-inline: auto;
  max-width: 62ch;
  color: var(--tinta-suave);
  font-size: clamp(1rem, 2.2vw, 1.15rem);
}

.portada__acciones {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.portada__fila {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}

.portada__foto {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin-inline: auto;
  /* Más apaisada en celular, para no alejar tanto las tarjetas. */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 35%;
  border-radius: 20px;
  box-shadow: 0 24px 48px -24px rgba(15, 23, 42, 0.35);
}

/* En pantalla ancha, texto a la izquierda y foto a la derecha. En celular la
   foto va debajo de los botones. */
@media (min-width: 900px) {
  .portada {
    text-align: left;
  }

  .portada__fila {
    grid-template-columns: 1.1fr 1fr;
  }

  .portada__foto {
    aspect-ratio: 4 / 3;
  }

  .portada__bajada {
    margin-inline: 0;
  }

  .portada__acciones {
    justify-content: flex-start;
  }
}

/* ── Botones ──────────────────────────────────────────── */

.boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.boton--principal {
  background: var(--marca);
  color: #fff;
}

.boton--principal:hover {
  background: var(--marca-fuerte);
}

.boton--sobrio {
  border: 1px solid var(--borde);
  background: #fff;
  color: var(--tinta);
}

.boton--sobrio:hover {
  border-color: var(--tinta-tenue);
}

/* ── Secciones ────────────────────────────────────────── */

.seccion {
  padding-block: clamp(44px, 7vw, 80px);
}

.seccion--clara {
  background: var(--fondo-alt);
  border-block: 1px solid var(--borde);
}

.seccion__titulo {
  font-size: clamp(1.4rem, 3.2vw, 1.9rem);
  letter-spacing: -0.015em;
  margin-bottom: 28px;
  text-align: center;
}

/* ── Tarjetas de producto ─────────────────────────────── */

.rejilla {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .rejilla {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 4 tarjetas: 1 columna en celular, 2×2 en tablet, 4 en fila en pantallas anchas
   (a 1000px con 3 columnas la cuarta tarjeta quedaría sola en una fila, desalineada). */
@media (min-width: 1200px) {
  .rejilla {
    grid-template-columns: repeat(4, 1fr);
  }
}

.tarjeta {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  border: 1px solid var(--borde);
  border-top: 3px solid var(--acento);
  border-radius: var(--radio);
  background: #fff;
  overflow: hidden;
  transition:
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.tarjeta:hover {
  box-shadow: 0 10px 28px -12px rgba(15, 23, 42, 0.18);
  transform: translateY(-2px);
}

/* La foto ocupa todo el ancho de la tarjeta: los márgenes negativos anulan el
   padding, y el `overflow: hidden` de .tarjeta recorta las esquinas. */
.tarjeta__foto {
  display: block;
  width: calc(100% + 48px);
  max-width: none;
  height: auto;
  aspect-ratio: 76 / 46;
  object-fit: cover;
  margin: -26px -24px 22px;
  background: var(--acento-suave);
}

.tarjeta__cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tarjeta__icono {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--acento-suave);
  font-size: 1.35rem;
  flex-shrink: 0;
}

.tarjeta__titulo {
  font-size: 1.22rem;
  letter-spacing: -0.01em;
}

.tarjeta__resumen {
  margin-top: 14px;
  color: var(--tinta-suave);
  font-size: 0.97rem;
}

.tarjeta__lista {
  margin: 18px 0 24px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
  font-size: 0.94rem;
  color: var(--tinta-suave);
}

.tarjeta__lista li {
  position: relative;
  padding-left: 22px;
}

.tarjeta__lista li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acento);
}

.tarjeta__boton {
  /* `auto` empuja el botón al fondo: las tarjetas tienen distinto número de
     viñetas y la rejilla las iguala en altura, así que sin esto el botón de la
     más corta queda flotando a media tarjeta. */
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 9px;
  background: var(--acento);
  color: #fff;
  font-weight: 600;
  font-size: 0.94rem;
  text-decoration: none;
  transition: filter 0.15s ease;
}

.tarjeta__boton:hover {
  filter: brightness(0.92);
}

/* ── Rasgos comunes ───────────────────────────────────── */

.rasgos {
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .rasgos {
    grid-template-columns: repeat(3, 1fr);
  }
}

.rasgo h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.rasgo p {
  color: var(--tinta-suave);
  font-size: 0.95rem;
}

/* ── Contacto ─────────────────────────────────────────── */

.contacto {
  text-align: center;
}

.contacto h2 {
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  letter-spacing: -0.015em;
}

.contacto p {
  margin: 14px auto 26px;
  max-width: 56ch;
  color: var(--tinta-suave);
}

/* ── Pie ──────────────────────────────────────────────── */

.pie {
  border-top: 1px solid var(--borde);
  padding-block: 26px;
  font-size: 0.9rem;
  color: var(--tinta-suave);
}

.pie__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.pie__enlaces a {
  text-decoration: none;
}

.pie__enlaces a:hover {
  color: var(--marca-texto);
}

.pie__marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.pie__logo {
  display: block;
  height: 20px;
  width: auto;
}

/* ── Foco visible para navegación por teclado ─────────── */

a:focus-visible {
  outline: 2px solid var(--marca-texto);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Modo oscuro del sistema ──────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #e2e8f0;
    --tinta-suave: #94a3b8;
    --tinta-tenue: #64748b;
    --fondo: #0b1220;
    --fondo-alt: #0f172a;
    --borde: #1e293b;
    --marca-texto: #f87171;
  }

  .cabecera {
    background: rgba(11, 18, 32, 0.85);
  }

  .portada {
    background:
      radial-gradient(60% 120% at 50% 0%, #2a1420 0%, transparent 70%), var(--fondo);
  }

  .tarjeta,
  .boton--sobrio {
    background: #0f172a;
  }

  .tarjeta__icono {
    background: rgba(255, 255, 255, 0.06);
  }

  .tarjeta:hover {
    box-shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.6);
  }

  .portada__foto {
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .tarjeta,
  .boton {
    transition: none;
  }
}

/* ── Contenido legal (/privacidad): acotado a .legal para no afectar las .seccion de la portada ── */

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin-block: 18px;
  font-size: 0.92rem;
}

.legal th,
.legal td {
  border: 1px solid var(--borde);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.legal th[scope="row"] {
  font-weight: 600;
  white-space: nowrap;
}

.legal blockquote {
  margin: 18px 0;
  padding: 14px 18px;
  border-left: 3px solid var(--marca);
  background: var(--fondo-alt);
  color: var(--tinta-suave);
}

.legal code {
  font-size: 0.9em;
  background: var(--fondo-alt);
  padding: 2px 5px;
  border-radius: 4px;
}

.legal h2 {
  margin-top: 34px;
  font-size: 1.25rem;
}

.legal h3 {
  margin-top: 22px;
  font-size: 1.05rem;
}

/* ── Contenedor angosto (formularios, contenido de lectura) ──────────── */

.contenedor--angosta {
  max-width: 640px;
}

/* ── Formulario de contacto (/contacto) ───────────────────────────────── */

.contacto-pagina__intro {
  margin: 0 0 28px;
  color: var(--tinta-suave);
  text-align: center;
}

.contacto-pagina__fallback {
  margin: 0 0 20px;
  padding: 16px 18px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-alt);
  text-align: center;
}

.formulario {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* `.formulario { display: flex }` tiene la misma especificidad que la regla `[hidden]` del
   navegador y viene después en la hoja, así que la gana: sin esto, `form.hidden = true` (JS) no
   ocultaba realmente el formulario. */
.formulario[hidden] {
  display: none;
}

.formulario__campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.formulario__campo label,
.formulario__consentimiento label {
  font-weight: 600;
  font-size: 0.93rem;
}

.formulario__campo input,
.formulario__campo select,
.formulario__campo textarea {
  padding: 11px 13px;
  border: 1px solid var(--borde);
  border-radius: 9px;
  background: var(--fondo);
  color: var(--tinta);
  font: inherit;
  font-size: 0.97rem;
}

.formulario__campo textarea {
  resize: vertical;
  min-height: 110px;
}

.formulario__campo input:focus-visible,
.formulario__campo select:focus-visible,
.formulario__campo textarea:focus-visible,
.formulario__consentimiento input:focus-visible {
  outline: 2px solid var(--marca-texto);
  outline-offset: 2px;
}

.formulario__campo input[aria-invalid="true"],
.formulario__campo textarea[aria-invalid="true"] {
  border-color: #b91c1c;
}

.formulario__campo input:disabled,
.formulario__campo select:disabled,
.formulario__campo textarea:disabled,
.formulario__consentimiento input:disabled {
  opacity: 0.6;
}

.formulario__pista {
  margin: -8px 0 0;
  font-size: 0.85rem;
  color: var(--tinta-suave);
}

.formulario__error {
  margin: 0;
  font-size: 0.85rem;
  color: #b91c1c;
}

.formulario__error[hidden] {
  display: none;
}

.formulario__consentimiento {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.formulario__consentimiento input {
  margin-top: 3px;
  flex-shrink: 0;
}

.formulario__consentimiento label {
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--tinta-suave);
}

/* Honeypot anti-bots (api-contract §4.3, campo `website`): oculto fuera de la pantalla visible,
   nunca `display:none`/`visibility:hidden` (algunos lectores de pantalla y bots lo detectan
   igual). `aria-hidden="true"` en el contenedor + `tabindex="-1"` en el input (ver contacto/
   index.html) lo sacan del árbol de accesibilidad y del tab order. Mismo patrón que el widget
   (apps/widget/src/ui/styles.ts, clase `.lc-lead-honeypot`, en el repo landingchat). */
.formulario__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  left: -9999px;
  top: auto;
}

.formulario__status {
  padding: 12px 16px;
  border-radius: 9px;
  font-size: 0.93rem;
}

.formulario__status[hidden] {
  display: none;
}

.formulario__status--exito {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

.formulario__status--error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

.formulario button[type="submit"] {
  align-self: flex-start;
  border: none;
  cursor: pointer;
}

.formulario button[type="submit"]:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

@media (prefers-color-scheme: dark) {
  .contacto-pagina__fallback {
    background: var(--fondo-alt);
  }

  .formulario__campo input,
  .formulario__campo select,
  .formulario__campo textarea {
    background: #0f172a;
  }

  .formulario__status--exito {
    background: #052e16;
    border-color: #14532d;
    color: #86efac;
  }

  .formulario__status--error {
    background: #2a1210;
    border-color: #7f1d1d;
    color: #fca5a5;
  }
}

/* ── LandingChat (landingchat.codart.pe): todo acotado a .lc-producto,
   así no afecta nada de codart.pe ─────────────────────────────────── */

.lc-producto .portada__acciones {
  align-items: center;
}

.lc-producto .boton--sobrio .lc-boton__icono {
  font-size: 1.05em;
}

/* Pasos ("cómo funciona") */

.lc-pasos {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  counter-reset: paso;
}

@media (min-width: 720px) {
  .lc-pasos {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1080px) {
  .lc-pasos {
    grid-template-columns: repeat(4, 1fr);
  }
}

.lc-paso {
  padding: 22px 20px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: #fff;
  counter-increment: paso;
}

.lc-paso__numero {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--marca);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
}

.lc-paso__numero::before {
  content: counter(paso);
}

.lc-paso h3 {
  font-size: 1.02rem;
  margin-bottom: 8px;
}

.lc-paso p {
  color: var(--tinta-suave);
  font-size: 0.94rem;
}

/* Qué hace / qué no incluye */

.lc-detalles {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  .lc-detalles {
    grid-template-columns: 1fr 1fr;
  }
}

.lc-detalles__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.lc-detalles__lista li {
  position: relative;
  padding-left: 24px;
  color: var(--tinta-suave);
}

.lc-detalles__lista li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--marca);
}

.lc-detalles__lista--no li::before {
  background: var(--tinta-tenue);
}

.lc-detalles h3 {
  font-size: 1.05rem;
  margin-bottom: 12px;
}

/* Planes y precios */

.lc-precios {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .lc-precios {
    grid-template-columns: repeat(3, 1fr);
  }
}

.lc-precio {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  border: 1px solid var(--borde);
  border-top: 3px solid var(--marca);
  border-radius: var(--radio);
  background: #fff;
}

.lc-precio__nombre {
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.lc-precio__valor {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}

.lc-precio__monto {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.lc-precio__periodo {
  color: var(--tinta-suave);
  font-size: 0.9rem;
}

.lc-precio__nota {
  margin-bottom: 18px;
  color: var(--tinta-suave);
  font-size: 0.85rem;
}

.lc-precio__lista {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
  font-size: 0.93rem;
  color: var(--tinta-suave);
  flex-grow: 1;
}

.lc-precio__lista li {
  position: relative;
  padding-left: 20px;
}

.lc-precio__lista li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--marca);
}

.lc-precio__implementacion {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
  font-size: 0.88rem;
  color: var(--tinta-suave);
}

/* Instalación */

.lc-codigo {
  margin: 0;
  padding: 18px 20px;
  border-radius: var(--radio);
  background: var(--tinta);
  color: #e2e8f0;
  font-size: 0.86rem;
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre;
}

/* FAQ (usa <details>/<summary> nativos: sin JS) */

.lc-faq {
  display: grid;
  gap: 12px;
}

.lc-faq__item {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: #fff;
  padding: 4px 20px;
}

.lc-faq__item summary {
  padding: 14px 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.lc-faq__item summary::-webkit-details-marker {
  display: none;
}

.lc-faq__item summary::after {
  content: "+";
  float: right;
  font-weight: 400;
  color: var(--tinta-suave);
}

.lc-faq__item[open] summary::after {
  content: "−";
}

.lc-faq__item summary:focus-visible {
  outline: 2px solid var(--marca-texto);
  outline-offset: 3px;
  border-radius: 4px;
}

.lc-faq__item p {
  margin: 0 0 16px;
  color: var(--tinta-suave);
}

@media (prefers-color-scheme: dark) {
  .lc-paso,
  .lc-precio,
  .lc-faq__item {
    background: #0f172a;
  }

  .lc-codigo {
    background: #060b16;
  }
}