/* ===========================================================================
   perfiles digitales — portada

   Va aparte de app.css a propósito: la portada la ve quien todavía no tiene
   perfil, y el perfil lo ve quien ya escaneó un QR. Son dos páginas con dos
   trabajos, y meter el maquillaje de una en la hoja que carga la otra le
   cobra peso a la que más importa —la que se abre con mala señal y a veces
   en una emergencia.

   El hero va en tinta y el cuerpo en claro. No es un capricho: marca dónde
   termina la promesa y empieza el cómo funciona, y de paso hace que el
   teléfono de la demo se vea como lo que es, una pantalla encendida.
   =========================================================================== */

body.portada{ background:var(--paper-2); }


/* ---------- Barra del sitio ----------

   Pegajosa, translúcida y delgada. Se queda arriba porque estas páginas son
   largas —el catálogo mide cuatro pantallas— y obligar a subir hasta el
   principio para cambiar de sección es hacerle perder el tiempo a la gente.

   En pantalla ancha los enlaces van en fila. En una angosta se pliegan tras
   una hamburguesa, pero solo cuando el JavaScript de menu.php pone la clase
   .barra--plegable. Sin esa clase el panel se ve siempre, que es el caso en
   el que el script no corrió: preferimos un menú de dos renglones a un botón
   que no abre nada. */

.barra{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:50;
  background:color-mix(in srgb, var(--paper-2) 88%, transparent);
  border-bottom:1px solid var(--line);
}

/* Mismo ancho y mismo respiro que .pagina--ancha y que .hero .dentro, para
   que el logotipo caiga en la columna del titular. Antes la barra llevaba el
   padding ella misma y el logotipo arrancaba en el filo de la ventana: en una
   pantalla de 1280 eso son 112px de desfase contra el contenido. */
/* El respiro lateral lo pone .barra y la columna la pone .barra-dentro, en
   ese orden. Es exactamente cómo está armado el hero (.hero pad + .dentro
   max-width), y era la única forma de que las dos coincidieran: poniendo el
   respiro dentro de la columna, el logotipo caía 32px más adentro que el
   titular. */
.barra{ padding:0 1.25rem; }
@media (min-width:900px){ .barra{ padding:0 2rem; } }

.barra-dentro{
  max-width:1080px; margin:0 auto;
  display:flex; align-items:center; gap:.5rem .75rem; flex-wrap:wrap;
  padding:.7rem 0;
}
@supports (backdrop-filter:blur(8px)){
  .barra{ backdrop-filter:blur(10px); }
}

.barra-marca{ flex:none; display:flex; align-items:center; }
/* El logotipo apila «perfiles» sobre «digitales» y lleva debajo el «by domco»:
   son tres renglones dentro de la misma imagen, así que a 34px el tercero no
   se leía. A 46 sí. */
.barra-marca img{ height:46px; width:auto; display:block; }

.barra-panel{
  margin-left:auto;
  display:flex; align-items:center; gap:.35rem;
}

.barra-nav{ display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.barra-nav a{
  padding:.45rem .7rem; border-radius:999px;
  font-size:.92rem; font-weight:550; color:var(--muted);
  white-space:nowrap;
}
.barra-nav a:hover{ color:var(--ink); background:var(--paper-3); }

/* La sección abierta se marca con color y peso, no solo con color: en una
   pantalla al sol un gris oscuro y un gris medio son el mismo gris. */
.barra-nav a[aria-current="page"]{ color:var(--ink); font-weight:700; }

.barra-cta{
  flex:none; margin-left:.35rem;
  padding:.5rem 1.05rem; border-radius:999px;
  background:var(--grad-pro); color:#fff;
  font-size:.92rem; font-weight:600; white-space:nowrap;
  transition:filter .12s ease;
}
.barra-cta:hover{ filter:brightness(1.12); }


/* ---- La hamburguesa ---- */

.barra-boton{
  display:none;
  margin-left:auto;
  align-items:center; gap:.5rem;
  padding:.45rem .8rem .45rem .7rem;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line); border-radius:999px;
  font-family:inherit; font-size:.9rem; font-weight:600;
  cursor:pointer;
}
.barra-boton[hidden]{ display:none; }
.barra--plegable .barra-boton:not([hidden]){ display:inline-flex; }
.barra-boton:hover{ background:var(--paper-3); }

/* Tres rayas dibujadas, no un carácter: ☰ cambia de forma y de peso en cada
   sistema, y en algunos ni siquiera existe. */
.barra-rayas{ display:grid; gap:4px; width:17px; }
.barra-rayas i{
  display:block; height:2px; border-radius:2px; background:currentColor;
  transition:transform .18s ease, opacity .12s ease;
}
/* Abierta, las rayas se cruzan: dice "esto cierra" sin escribirlo. */
.barra--abierta .barra-rayas i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.barra--abierta .barra-rayas i:nth-child(2){ opacity:0; }
.barra--abierta .barra-rayas i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
@media (prefers-reduced-motion:reduce){
  .barra-rayas i{ transition:none; }
}


/* ---- Plegado ----

   Solo con .barra--plegable, o sea solo cuando el script confirmó que puede
   volver a abrirlo. El panel se despega de la barra para caer encima de la
   página en vez de empujarla. */

.barra--plegable .barra-panel{
  /* Cuelga de la barra entera y no del contenedor interior: el panel tiene que
     cruzar la pantalla de filo a filo, como su fondo. */
  position:absolute; left:0; right:0; top:100%;
  margin:0;
  flex-direction:column; align-items:stretch; gap:.2rem;
  padding:.6rem 1rem 1rem;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  box-shadow:0 14px 28px rgba(14,17,22,.10);

  /* Cerrado: fuera del flujo del teclado y del lector de pantalla, no solo
     invisible. Un enlace que no se ve pero se enfoca con Tab es peor que uno
     que no está. */
  display:none;
}
.barra--plegable.barra--abierta .barra-panel{ display:flex; }

.barra--plegable .barra-nav{ flex-direction:column; align-items:stretch; gap:.1rem; }
.barra--plegable .barra-nav a{
  padding:.8rem .75rem; border-radius:10px;
  font-size:1rem; color:var(--ink);
}
.barra--plegable .barra-cta{
  margin:.5rem 0 0; text-align:center;
  padding:.85rem 1rem; font-size:1rem;
}

/* Desplegado, todos los enlaces son del mismo color, así que la sección
   abierta necesita algo más que negritas para distinguirse. */
.barra--plegable .barra-nav a[aria-current="page"]{
  background:var(--paper-3);
  box-shadow:inset 3px 0 0 var(--acento);
}

/* Sin script y en pantalla angosta: los enlaces bajan a su propio renglón y
   se reparten. Es el menú de dos renglones de antes. */
@media (max-width:680px){
  .barra{ padding:0 1.25rem; }
  .barra-dentro{ padding:.55rem 0; }
  .barra-marca img{ height:40px; }
  .barra:not(.barra--plegable) .barra-panel{
    order:3; width:100%; margin-left:0; justify-content:space-between;
  }
  .barra:not(.barra--plegable) .barra-nav{ flex:1; justify-content:space-between; }
  .barra:not(.barra--plegable) .barra-nav a{ padding:.35rem .5rem; font-size:.84rem; }
  .barra:not(.barra--plegable) .barra-cta{ padding:.42rem .85rem; font-size:.85rem; }
}

/* El hero ya no empieza en el filo de la ventana: la barra ocupa ese lugar. */
.barra + .hero{ padding-top:1.5rem; }


/* ---------- Hero ---------- */

.hero{
  /* clip y no hidden: hidden en un ancestro convierte a los position:sticky de
     adentro en inertes, y aquí no hay ninguno, pero la regla se hereda a quien
     copie este bloque. */
  overflow-x:clip;
  padding:2rem 1.25rem 3.5rem;
  /* Fondo claro. El teléfono tiene marco oscuro, así que aquí el contraste lo
     pone el objeto y no el fondo: sobre tinta era una silueta oscura dentro de
     un rectángulo oscuro, y sobre papel se recorta solo.
     El degradado es un velo del acento, apenas perceptible, para que la zona
     no sea un bloque plano de gris. */
  background:
    radial-gradient(90% 70% at 82% 8%, rgba(46,79,163,.09) 0%, transparent 62%),
    radial-gradient(70% 60% at 8% 0%, rgba(20,67,79,.06) 0%, transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, var(--paper-2) 100%);
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
.hero .dentro{ max-width:1080px; margin:0 auto; }

/* El logotipo salió del hero: la barra de arriba ya lo lleva, y repetirlo
   dos veces en la misma pantalla le quitaba el primer golpe al titular. */

/* min-width:0 en los hijos: sin eso, un hijo de grid no se encoge por debajo
   de su contenido y el titular empujaba la columna más allá de la pantalla.
   Es el mismo tropiezo de las tarjetas con ilustración, y por tercera vez. */
.hero .reja{ display:grid; grid-template-columns:minmax(0, 1fr); gap:3rem; align-items:center; }
.hero .reja > *{ min-width:0; }
@media (min-width:900px){
  .hero{ padding:2.5rem 2rem 4.5rem; }
  .hero .reja{ grid-template-columns:minmax(0, 1fr) minmax(300px, 380px); gap:4rem; }
}

.hero .dicho .ojo{
  margin:0 0 1.25rem;
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--acento);
}
/* Va a .dicho y no a .hero a secas: dentro del hero también vive el teléfono,
   y ahí adentro hay un <h1> —el nombre del perfil— que es del producto y no
   del titular. Sin el .dicho, el titular se lo comía. */
/* La palabra en degradado del titular. Es el gesto de la versión anterior,
   con nuestro azul en lugar de su morado.

   background-clip:text no se hereda ni se degrada solo: si el navegador no lo
   entiende, el degradado pintaría un bloque de color encima de la letra. Por
   eso va dentro de un @supports y fuera de él la palabra es simplemente
   azul. */
.hero .dicho h1 .luz{ color:var(--acento); }
@supports (-webkit-background-clip:text) or (background-clip:text){
  .hero .dicho h1 .luz{
    background:var(--grad-pro);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    /* Sin esto, las letras con descendente (la j, la g) se cortan al pintar
       el fondo sobre la caja del texto. */
    padding-bottom:.08em;
  }
}

.hero .dicho h1{
  margin:0 0 1.25rem;
  /* El mínimo baja a 2rem: a 2.4rem la palabra «incluido.» no cabe en 320px y
     se salía del hero. El máximo se queda, que es donde el titular pega. */
  font-size:clamp(2rem, 1.1rem + 4.4vw, 4rem);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:800;
  text-wrap:balance;
  /* Y por si algún día el titular trae una palabra más larga. */
  overflow-wrap:break-word;
}
.hero .dicho .bajada{
  margin:0 0 1.1rem;
  font-size:clamp(1rem, .95rem + .4vw, 1.15rem);
  line-height:1.55;
  color:var(--muted);
  max-width:38ch;
}
.hero .dicho .bajada strong{ color:var(--ink); font-weight:650; }

/* Los tres renglones. Van debajo del titular y a tamaño de lista: tres frases
   del peso de un titular se leen como enumeración y ninguna pega. Arriba la
   promesa, abajo el detalle — y cada renglón con el color de su modo, que es
   la primera vez que la página dice que son tres cosas distintas. */
.tres{
  list-style:none; margin:0 0 1.4rem; padding:0;
  display:grid; gap:.6rem;
}
.tres li{
  display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:center;
  font-size:clamp(1.02rem, .95rem + .45vw, 1.2rem);
  font-weight:550; color:var(--ink-2);
}
.tres li:nth-child(1) .tic{ color:var(--acento); }
.tres li:nth-child(2) .tic{ color:var(--alerta); }
.tres li:nth-child(3) .tic{ color:#1E5F4B; }
.tres .tic{ width:22px; height:22px; }

/* Bajo los botones: aquí ya no vende, tranquiliza. */
.garantias{
  margin:1.1rem 0 0;
  font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
}

#emergencia, #mascota{ scroll-margin-top:1.5rem; }

.botones{ display:flex; flex-wrap:wrap; gap:.7rem; }

.cta{
  display:inline-block;
  padding:.9rem 1.6rem;
  border-radius:var(--radio-sm);
  background:var(--grad-pro); color:#fff;
  font-size:.95rem; font-weight:650;
  text-decoration:none;
  border:0;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
  box-shadow:0 1px 2px rgba(14,17,22,.12);
}
/* El hover aclara el degradado en vez de cambiarlo por otro color: así el
   botón sigue siendo el mismo objeto y no parpadea a otra tinta. */
.cta:hover{ transform:translateY(-1px); filter:brightness(1.12);
            box-shadow:0 8px 20px -8px rgba(14,17,22,.45); }

.cta--fantasma{ background:transparent; color:var(--ink);
                border:1px solid var(--line); box-shadow:none; }
.cta--fantasma:hover{ border-color:var(--ink); box-shadow:none; filter:none; }

/* Queda por si hace falta un botón en tinta; hoy ninguno lo usa. */
.cta--tinta{ background:var(--grad-tinta); }

.cta--chico{ padding:.75rem 1.25rem; font-size:.9rem; }
.cta--em{ background:var(--grad-em); }
.cta--masc{ background:var(--grad-masc); }


/* ---------- El teléfono de la demo ----------
   Dentro va el perfil de verdad, con las clases reales de app.css. Si el
   producto cambia, esto cambia con él: no hay una maqueta que mantener al
   día, que es como las portadas terminan enseñando algo que ya no existe. */

/* Medidas fijas y no porcentajes: dentro va el perfil real, que está escrito
   para el ancho de un teléfono. Se dibuja a 390px —el ancho de un iPhone— y se
   encoge entero con transform, en vez de reescribir su tipografía para que
   quepa. Así lo que se ve aquí es exactamente lo que se ve en la mano. */
.demo{
  --ancho:320px;      /* lo que mide la pantalla ya encogida */
  --nativo:390px;     /* el ancho para el que está escrito el perfil */
  /* 320/390, escrito a mano: CSS no sabe dividir dos longitudes para sacar un
     número sin unidad, y calc(320px/390px) no es un factor de escala válido.
     Falla en silencio, que es la peor forma de fallar. */
  --z:.8205;
  justify-self:center;
  width:calc(var(--ancho) + 18px);
  max-width:100%;
}

/* En teléfonos angostos el aparato se encoge entero —pantalla y escala juntas—
   en vez de recortarse contra el borde. Los dos valores van a mano porque CSS
   no sabe dividir dos longitudes para sacar el factor. */
@media (max-width:379px){
  .demo{ --ancho:258px; --z:.6615; }   /* 258/390 */
  .pantalla{ height:460px; }
  /* Tres etiquetas en 280px: «Tu emergencia» se cortaba. Se cae el «Tu». */
  .mando span{ font-size:.74rem; padding:.55rem .3rem; }
  .mando .largo{ display:none; }
  .mando .corto{ display:inline; }
  .mando{ padding:.22rem; gap:.2rem; }
}

.mando{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.25rem;
  width:100%;
  padding:.3rem;
  background:var(--paper-3); border-radius:99px;
  margin-bottom:1.25rem;
}
.mando label{ position:relative; }
.mando input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.mando span{
  display:block; padding:.55rem .5rem;
  text-align:center; border-radius:99px;
  font-size:.78rem; font-weight:550; color:var(--muted);
  white-space:nowrap;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.mando label:has(input:checked) span{ background:var(--ink); color:#fff; font-weight:650;
                                      box-shadow:0 1px 3px rgba(14,17,22,.25); }
.mando label:nth-child(2):has(input:checked) span{ background:var(--alerta); color:#fff; }
.mando label:nth-child(3):has(input:checked) span{ background:#1E5F4B; color:#fff; }
.mando label:has(input:focus-visible) span{ outline:2px solid var(--acento); outline-offset:2px; }
.mando b{ font-weight:inherit; }
.mando .corto{ display:none; }

/* El teléfono. En perspectiva y con luz propia, porque plano sobre tinta se
   perdía: un rectángulo oscuro dentro de un fondo oscuro no se lee como un
   objeto. El resplandor sale del color del modo —verde petróleo o rojo—, así
   que además de separarlo del fondo dice de qué modo estamos hablando. */

.escenario{ perspective:1400px; perspective-origin:50% 40%; }

.telefono{
  position:relative;
  border-radius:38px;
  padding:10px;
  background:linear-gradient(150deg, #4A5666 0%, #232C3A 42%, #394454 100%);
  transform:rotateY(-13deg) rotateX(5deg) rotateZ(-1deg);
  transform-style:preserve-3d;
  box-shadow:
    0 2px 0 rgba(255,255,255,.18) inset,
    -18px 30px 50px -16px rgba(14,17,22,.45),
    0 0 0 1px rgba(14,17,22,.08);
  transition:transform .5s cubic-bezier(.22,.9,.3,1);
}
.demo:hover .telefono{ transform:rotateY(-7deg) rotateX(3deg); }

/* El resplandor va detrás y desenfocado. Es lo que hace que el aparato
   parezca encendido en vez de recortado. */
.telefono::before{
  content:"";
  position:absolute; inset:14% -12% -10% -12%;
  z-index:-1;
  border-radius:50%;
  background:var(--tema, #14434F);
  filter:blur(56px);
  /* Sobre papel el resplandor deja de ser luz y pasa a ser sombra de color:
     más discreto, pero sigue diciendo de qué modo estamos hablando. */
  opacity:.28;
  transition:background .3s ease;
}
/* Y el filo de luz de arriba, que es lo que en un objeto real devuelve el
   reflejo de la ventana. */
.telefono::after{
  content:"";
  position:absolute; inset:0;
  border-radius:38px;
  pointer-events:none;
  background:linear-gradient(115deg,
    rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 32%,
    rgba(255,255,255,0) 72%, rgba(255,255,255,.08) 100%);
}

.pantalla{
  position:relative;
  width:var(--ancho); height:540px; overflow:hidden;
  border-radius:28px;
  background:var(--paper);
  color:var(--ink);
  /* El color del tema que usa la tapa y el botón principal del perfil. */
  --tema:#14434F;
}
.vista{
  position:absolute; top:0; left:0;
  width:var(--nativo);
  transform:scale(var(--z)); transform-origin:0 0;
}

/* El interruptor de los tres modos. Tres radios y :has(), sin JavaScript. */
.vista--em, .vista--masc{ display:none; }

.demo:has(input[value="em"]:checked) .vista--pro,
.demo:has(input[value="masc"]:checked) .vista--pro{ display:none; }

.demo:has(input[value="em"]:checked) .vista--em{ display:block; }
.demo:has(input[value="masc"]:checked) .vista--masc{ display:block; }

/* El resplandor del teléfono toma el color del modo: además de despegarlo del
   fondo, dice de cuál de los tres estamos hablando antes de leer nada. */
.demo .telefono{ --tema:#14434F; }
.demo:has(input[value="em"]:checked) .telefono{ --tema:#C81E1E; }
.demo:has(input[value="masc"]:checked) .telefono{ --tema:#1E5F4B; }
.demo:has(input[value="em"]:checked) .pantalla{ --tema:var(--alerta); }
.demo:has(input[value="masc"]:checked) .pantalla{ --tema:#1E5F4B; }

/* La demo no es interactiva: son botones dibujados, no ligas. Si tuvieran
   href, quien viene a entender el producto acabaría en una llamada. */
.pantalla .boton{ cursor:default; }
.pantalla .rotulo-em{
  font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .25rem;
}

/* Sin :has() —navegadores viejos— se queda el profesional y nadie se entera
   de que había un interruptor que no servía. */
@supports not selector(:has(*)){
  .mando{ display:none; }
}

/* Flota apenas: lo justo para que se lea como un objeto en el aire y no como
   una figura pegada al fondo. Quien pidió menos movimiento no lo ve. */
@keyframes flota{ 50%{ transform:rotateY(-13deg) rotateX(5deg) rotateZ(-1deg) translateY(-10px); } }
@media (prefers-reduced-motion: no-preference){
  .telefono{ animation:flota 7s ease-in-out infinite; }
  .demo:hover .telefono{ animation-play-state:paused; }
}

.pie-demo{ margin:1rem 0 0; text-align:center; font-size:.85rem; color:var(--muted); }
.pie-demo .solo-em, .pie-demo .solo-masc{ display:none; }
.demo:has(input[value="em"]:checked) .solo-pro,
.demo:has(input[value="masc"]:checked) .solo-pro{ display:none; }
.demo:has(input[value="em"]:checked) .solo-em{ display:inline; }
.demo:has(input[value="masc"]:checked) .solo-masc{ display:inline; }

/* Sin :has() —navegadores viejos— se queda el profesional y nadie se entera
   de que había un interruptor que no servía. */
@supports not selector(:has(*)){
  .mando{ display:none; }
}


/* ---------- Cuerpo claro ---------- */

/* 1080 de columna MÁS el respiro, no 1080 contándolo.

   Con box-sizing:border-box, max-width:1080px + padding 2rem dejaba la
   columna en 1016 y empezando 32px más adentro que la del hero, que sí mide
   1080 limpios. Las dos páginas se veían alineadas por separado y
   desalineadas al pasar de una a otra. */
.pagina--ancha{ max-width:calc(1080px + 2.5rem); padding:3.5rem 1.25rem 4rem; }
@media (min-width:900px){
  .pagina--ancha{ max-width:calc(1080px + 4rem); padding:5rem 2rem 5rem; }
}

.pagina--ancha h2{
  font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height:1.15; letter-spacing:-.03em; font-weight:700;
  margin:0 0 .75rem;
  text-wrap:balance;
}


/* ---------- Las dos puertas ---------- */

.puertas{ display:grid; gap:1rem; }
@media (min-width:760px){ .puertas{ grid-template-columns:1fr 1fr; gap:1.25rem; } }
@media (min-width:1040px){ .puertas{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

/* min-width:0 no es un detalle: un hijo de grid no se encoge por debajo de su
   contenido, y el SVG de la ilustración mide 400px de ancho intrínseco. Sin
   esto, en un teléfono de 390 la tarjeta medía 462 y la página se iba de
   lado. */
.puerta{
  position:relative;
  min-width:0;
  /* Columna flexible para que el botón pueda irse al fondo con margin-top:auto.
     Los tres textos miden distinto —la puerta de emergencia lleva además su
     línea de cierre— así que sin esto cada botón cae donde lo deja su propio
     contenido y los tres quedan a tres alturas. */
  display:flex; flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radio);
  padding:2rem 1.75rem 2.25rem;
  overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
}

/* El empujón: todo lo que sobra de alto se acumula aquí y el botón queda
   pegado abajo, a la misma altura en las tres.
   align-self para que no se estire a lo ancho de la tarjeta: es un botón, no
   una barra. */
.puerta > .cta{ margin-top:auto; align-self:flex-start; }

/* El filo de color es lo único que distingue una puerta de la otra. Con eso
   basta: el contenido ya dice de qué va cada una, y pintarlas enteras las
   convertiría en tres anuncios peleándose.

   Va como ::before y no como border-top porque un borde no admite degradado:
   se pinta de un color liso o de nada. Esta barra sí, y así el filo, el rótulo
   y el botón de una misma puerta son el mismo degradado. */
.puerta::before{
  content:''; position:absolute; inset:0 0 auto 0; height:4px;
  background:var(--grad-pro);
}
.puerta--em::before{ background:var(--grad-em); }
.puerta--masc::before{ background:var(--grad-masc); }

/* Al pasar por encima la tarjeta se levanta un poco y la sombra toma el color
   de su puerta. Es el mismo gesto que ya hacen los botones. */
.puerta:hover{ transform:translateY(-3px); box-shadow:0 18px 36px -20px rgba(46,79,163,.45); }
.puerta--em:hover{ box-shadow:0 18px 36px -20px rgba(200,30,30,.45); }
.puerta--masc:hover{ box-shadow:0 18px 36px -20px rgba(30,95,75,.45); }

@media (prefers-reduced-motion:reduce){
  .puerta{ transition:none; }
  .puerta:hover{ transform:none; }
}

/* El rótulo lleva el degradado de su puerta. Igual que en el titular del
   hero, dentro de @supports: sin esa guarda, un navegador que no entienda
   background-clip pintaría una barra de color encima de las letras. */
.marca-puerta{
  display:block; width:fit-content; margin-bottom:.75rem;
  font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--acento);
}
.puerta--em .marca-puerta{ color:var(--alerta); }
.puerta--masc .marca-puerta{ color:#1E5F4B; }

@supports (-webkit-background-clip:text) or (background-clip:text){
  .marca-puerta{
    background-image:var(--grad-pro);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
  /* background-image y no el atajo background: el atajo reinicia
     background-clip a border-box, y el degradado deja de recortarse contra
     las letras para pintar una barra de color maciza encima del rótulo.
     Pasó exactamente eso con la puerta roja y la verde. */
  .puerta--em .marca-puerta{ background-image:var(--grad-em); }
  .puerta--masc .marca-puerta{ background-image:var(--grad-masc); }
}
/* La línea que sigue al titular: es parte del titular, no del párrafo. Por eso
   va en tinta y con peso, no en gris como el texto de apoyo. */
.puerta .sub{
  margin:-.35rem 0 1rem;
  font-size:1.02rem; font-weight:600; letter-spacing:-.01em;
  color:var(--ink-2);
}
.puerta > p{ margin:0 0 1.5rem; color:var(--muted); line-height:1.6; font-size:.97rem; }
.puerta > p strong{ color:var(--ink); font-weight:650; }
.puerta > p.sub{ margin:-.35rem 0 1rem; color:var(--ink-2); }

.lista{ list-style:none; margin:0 0 1.75rem; padding:0; display:grid; gap:.7rem; }
.lista li{
  display:grid; grid-template-columns:auto 1fr; gap:.65rem; align-items:start;
  font-size:.93rem; color:var(--ink-2); line-height:1.45;
}
.tic{ width:18px; height:18px; color:var(--acento); margin-top:.1rem; }

/* El renglón que cierra una puerta, antes del botón. Va separado por una línea
   y no por un espacio: es una idea aparte —a quién más le sirve esto— y sin la
   línea se lee como el cuarto punto de la lista. */
.puerta .cierre{
  margin:0 0 1.5rem;
  padding-top:1.1rem;
  border-top:1px solid var(--line);
  font-size:.9rem; line-height:1.55; color:var(--muted);
}
.puerta--em .tic{ color:var(--alerta); }
.puerta--masc .tic{ color:#1E5F4B; }


/* ---------- Ilustraciones de las puertas ----------
   Proporción fija y borde con el color de su puerta. El día que entren fotos
   de verdad, el hueco ya tiene su forma y la página no se mueve. */

/* Sin grid y sin aspect-ratio: el SVG ya trae su proporción en el viewBox y
   con width:100% + height:auto la da él solo. La versión con grid y
   aspect-ratio dimensionaba la pista al ancho intrínseco del dibujo —400px— y
   la tarjeta se iba 110px fuera de la pantalla en un teléfono. */
.lienzo{
  margin:-2rem -1.75rem 1.5rem;
  border-radius:var(--radio) var(--radio) 0 0;
  overflow:hidden;
  background:linear-gradient(165deg, #1A2230 0%, #0E1116 100%);
  font-size:0;
}
.lienzo--em{ background:linear-gradient(165deg, #2A1416 0%, #0E1116 100%); }
.lienzo--masc{ background:linear-gradient(165deg, #14261F 0%, #0E1116 100%); }
.dibujo{ width:100%; height:auto; display:block; }

/* La foto de la puerta manda su propia proporción (1.338). Recortarla a la
   de los dibujos le cortaba la cabeza al teléfono, que es justo lo que hay
   que ver. */
.foto-puerta{ width:100%; height:auto; display:block; }

/* La foto llena el recuadro entero. Así no hay que retocarle el fondo a
   ninguna —la de la tarjeta es blanca y las otras tres negras— porque no
   queda panel a la vista con el que puedan pelearse. El producto está
   centrado en las cuatro, así que recortar arriba y abajo no le quita nada. */
.foto-producto{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:center;
}


/* ---------- Qué incluye ---------- */

.incluye{ margin-top:4.5rem; }
.incluye .entrada{ max-width:54ch; margin:0 0 2rem; }

/* El único enlace de texto de la portada: se subraya, porque un enlace que
   solo cambia de color no se ve en una pantalla al sol. */
.incluye .entrada a{
  color:inherit; font-weight:600;
  text-decoration:underline; text-decoration-thickness:2px;
  text-underline-offset:3px; text-decoration-color:var(--acento);
}
.incluye .entrada a:hover,
.incluye .entrada a:focus-visible{ text-decoration-color:currentColor; }

.planes{ display:grid; gap:1rem; }
@media (min-width:900px){ .planes{ grid-template-columns:repeat(3,1fr); } }

.plan{
  min-width:0;
  display:flex; flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radio);
  padding:1.75rem 1.5rem 1.75rem;
}
.plan--gratis{ border-color:var(--ink); box-shadow:var(--sombra); }

.plan header{ margin-bottom:1.25rem; }
/* .tipo y no .etiqueta: app.css ya usa .etiqueta para las calcomanías de la
   hoja de impresión, con su borde punteado de troquel — y ese borde salía aquí
   alrededor del rótulo. Los nombres de clase genéricos chocan tarde o
   temprano; este chocó el mismo día. */
.plan .tipo{
  display:block; margin-bottom:.4rem;
  font-size:.7rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted);
}
.plan--em .tipo{ color:var(--alerta); }
.plan--nfc .tipo{ color:var(--acento); }
.plan .precio{
  margin:0; font-size:1.6rem; font-weight:700; letter-spacing:-.03em; line-height:1.1;
}
.plan .precio span{
  display:block; margin-top:.2rem;
  font-size:.83rem; font-weight:400; letter-spacing:0; color:var(--muted);
}
/* Cuando en lugar de un precio va una frase: baja un punto y equilibra el
   salto de línea, porque "El producto que nos hace falta" a 1.6rem le come
   la tarjeta entera a los puntos de abajo. */
.plan .precio--frase{ font-size:1.3rem; text-wrap:balance; }

.plan .desc{
  margin:0 0 1.25rem; font-size:.92rem; line-height:1.55; color:var(--muted);
}
.plan .desc + .desc{ margin-top:-.6rem; }
.plan ul{
  list-style:none; margin:0 0 1.5rem; padding:0;
  display:grid; gap:.85rem;
  flex:1;
}
.plan li{ display:grid; grid-template-columns:auto 1fr; gap:.65rem; align-items:start; }
.plan li strong{ display:block; font-size:.92rem; font-weight:600; }
.plan li div{ font-size:.85rem; color:var(--muted); line-height:1.45; }
.plan .cta{ text-align:center; }
/* La tarjeta del perfil gratis conserva su botón en tinta: es la única que no
   cobra, y que se vea distinta de las dos que sí es información, no adorno. */
.plan--gratis .cta{ background:var(--grad-tinta); }

.incluye .nota{
  margin:2rem auto 0; max-width:62ch; text-align:center;
  font-size:.93rem; color:var(--muted); line-height:1.65;
}
.incluye .nota strong{ color:var(--ink); }


/* ---------- Una llave, un modo ---------- */

.idea{ margin-top:4rem; }
.idea .entrada{ max-width:52ch; margin:0 0 2rem; }

.llaves{ display:grid; gap:.6rem; }
@media (min-width:700px){ .llaves{ grid-template-columns:1fr 1fr; } }

.llave{
  min-width:0;
  display:grid; gap:.2rem;
  padding:1.1rem 1.25rem;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radio-sm);
}
.llave .ruta{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.82rem; letter-spacing:.02em; color:var(--muted);
}
.llave strong{ font-size:.98rem; font-weight:600; }
.llave .abre{
  justify-self:start; margin-top:.35rem;
  padding:.15rem .5rem; border-radius:99px;
  font-size:.74rem; font-weight:650;
}
.abre--pro{ background:#EEF2FB; color:var(--acento); }
.abre--em{ background:#FDECEC; color:var(--alerta); }

.idea .nota{
  margin:1.5rem 0 0; max-width:56ch;
  font-size:.92rem; color:var(--muted); line-height:1.6;
}


/* ---------- Pasos ---------- */

.pasos-seccion{ margin-top:4rem; }
.pasos{ counter-reset:p; display:grid; gap:1.25rem; margin:1.75rem 0 0; padding:0; list-style:none; }
@media (min-width:820px){ .pasos{ grid-template-columns:repeat(3,1fr); gap:1.5rem; } }
.pasos li{ display:grid; gap:.75rem; align-content:start; }
/* El número en un disco con degradado, como en la versión anterior. Antes era
   un aro gris con la cifra dentro y se perdía entre el texto. */
.pasos li::before{
  counter-increment:p; content:counter(p);
  width:36px; height:36px; display:grid; place-items:center;
  border-radius:50%;
  background:var(--grad-pro); color:#fff;
  font-size:.95rem; font-weight:700;
  box-shadow:0 4px 12px -4px rgba(46,79,163,.55);
}
.pasos strong{ display:block; margin-bottom:.2rem; font-size:1rem; }
.pasos span{ color:var(--muted); font-size:.92rem; line-height:1.55; }


/* ---------- Activar ---------- */

.activar{
  margin-top:4rem;
  background:var(--ink); color:#fff;
  border-radius:var(--radio);
  padding:2.25rem 1.75rem;
}
.activar h2{ color:#fff; margin-bottom:.4rem; }
.activar > p{ margin:0 0 1.5rem; color:#AEB8C6; font-size:.95rem; }
.activar form{ display:flex; gap:.6rem; flex-wrap:wrap; max-width:460px; }
.activar input{
  flex:1; min-width:160px;
  padding:.85rem 1rem;
  border:0; border-radius:var(--radio-sm);
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:1rem; letter-spacing:.2em; text-transform:uppercase;
}
.activar input::placeholder{ color:#9AA4B2; }
.activar button{
  padding:.85rem 1.5rem;
  border:0; border-radius:var(--radio-sm);
  background:#fff; color:var(--ink);
  font-family:inherit; font-size:.95rem; font-weight:650;
  cursor:pointer;
}
.activar button:hover{ background:#E7EAEE; }


/* ---------- Catálogo ----------

   Una fila por producto, no una rejilla de cuatro tarjetas. Son objetos
   distintos entre sí —uno se pega, otro se cuelga, otro se pone en la
   muñeca— y en cuatro columnas iguales el ojo los lee como variantes del
   mismo. En fila, cada uno tiene su dibujo grande a un lado y se explica
   solo. */

.migas{ margin:0 0 2rem; }
.migas a{
  display:inline-flex; align-items:center; gap:.45rem;
  color:var(--muted); font-size:.92rem; font-weight:500;
}
.migas a:hover{ color:var(--ink); }
.tic--atras{ transform:rotate(180deg); }

.cabeza-catalogo{ max-width:56ch; margin:0 0 3rem; }
.cabeza-catalogo .ojo{
  display:block; margin-bottom:.5rem;
  font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--acento);
}
.cabeza-catalogo h1{
  margin:0 0 .75rem;
  font-size:clamp(1.9rem,1.4rem+2.2vw,2.8rem);
  letter-spacing:-.035em; font-weight:800; line-height:1.08;
  text-wrap:balance;
}
.cabeza-catalogo .bajada{ margin:0; color:var(--muted); font-size:1.05rem; line-height:1.6; }
.cabeza-catalogo .bajada strong{ color:var(--ink); font-weight:650; }

.catalogo{ display:grid; gap:1.25rem; }

.producto{
  min-width:0;                      /* si no, el SVG de 400px manda */
  display:grid; gap:0;
  background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radio);
  box-shadow:var(--sombra);
  overflow:hidden;
}
@media (min-width:820px){
  .producto{ grid-template-columns:minmax(0,360px) minmax(0,1fr); align-items:stretch; }
}

.producto .lienzo{
  margin:0; border-radius:0; border:0; border-bottom:1px solid var(--line);
  /* En una sola columna la foto es cuadrada; al lado del texto se estira a
     lo alto de la tarjeta, que es lo que mantiene parejas las cuatro filas. */
  aspect-ratio:1;
}
@media (min-width:820px){
  .producto .lienzo{
    border-bottom:0; border-right:1px solid var(--line);
    aspect-ratio:auto; height:100%;
  }
}

.producto-cuerpo{
  min-width:0;
  display:flex; flex-direction:column;
  padding:1.75rem 1.5rem;
}
.producto-cuerpo .tipo{
  font-size:.74rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.45rem;
}
.producto--em  .producto-cuerpo .tipo{ color:var(--alerta); }
.producto--masc .producto-cuerpo .tipo{ color:#1E5F4B; }
.producto--pro .producto-cuerpo .tipo{ color:var(--acento); }

.producto-cuerpo h2{
  margin:0 0 .6rem;
  font-size:1.5rem; font-weight:700; letter-spacing:-.03em; line-height:1.15;
}
.producto .sugiere{
  margin:0 0 1.15rem; max-width:52ch;
  color:var(--muted); font-size:.96rem; line-height:1.6;
}

.incluye-lista{
  list-style:none; margin:0 0 1.5rem; padding:0;
  display:grid; gap:.5rem;
  font-size:.9rem;
}
.incluye-lista li{ display:flex; align-items:flex-start; gap:.6rem; min-width:0; }
.incluye-lista .tic{ flex:none; width:16px; height:16px; margin-top:.18rem; color:var(--acento); }
.producto--em .incluye-lista .tic{ color:var(--alerta); }
.producto--masc .incluye-lista .tic{ color:#1E5F4B; }

/* El pie se pega abajo para que el precio y el botón queden alineados de una
   tarjeta a la siguiente, aunque los textos midan distinto. */
.producto-pie{
  margin-top:auto; padding-top:.25rem;
  display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap;
}
.producto-pie .precio{
  margin:0; font-size:1.7rem; font-weight:700; letter-spacing:-.03em; line-height:1;
}
.producto-pie .precio span{
  margin-left:.3rem; font-size:.8rem; font-weight:500; letter-spacing:0; color:var(--muted);
}
.producto-pie .cta{ margin-left:auto; }

.nota-catalogo{ margin-top:3rem; }
.nota-catalogo h2{ font-size:1.15rem; margin-bottom:1rem; }
.nota-catalogo ul{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1rem;
}
@media (min-width:820px){
  .nota-catalogo ul{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.5rem; }
}
.nota-catalogo li{ display:flex; align-items:flex-start; gap:.7rem; min-width:0; }
.nota-catalogo .tic{ flex:none; width:18px; height:18px; margin-top:.15rem; color:var(--acento); }
.nota-catalogo strong{ display:block; margin-bottom:.2rem; font-weight:650; }
.nota-catalogo div{ font-size:.9rem; line-height:1.55; color:var(--muted); }


/* ---------- Crea tu tarjeta ----------

   La mesa a la izquierda y el pedido a la derecha, y en un teléfono la mesa
   arriba, pegada: quien mueve el tamaño del logo tiene que seguir viendo la
   tarjeta mientras lo mueve. */

.taller{ display:grid; gap:2rem; }
@media (min-width:980px){
  .taller{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:2.5rem; }
  .taller-vista{ position:sticky; top:1.5rem; }
}

.mesa{
  background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radio);
  box-shadow:var(--sombra);
  padding:1.75rem 1.5rem 1.25rem;
}

/* La tarjeta. 85.6 × 54 mm es el formato CR80, el mismo de una de banco:
   1.586. Si el dibujo no respeta esa proporción, lo que el cliente aprueba
   no es lo que le llega. */
.ntarjeta{
  position:relative;
  aspect-ratio:1.586;
  border-radius:calc(var(--radio) * .85);
  display:flex; align-items:center;
  padding:9%;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(14,17,22,.14), 0 14px 32px rgba(14,17,22,.18);
  transition:background .2s ease;
}
@media (prefers-reduced-motion:reduce){ .ntarjeta{ transition:none; } }

/* Blanca, siempre. El degradado apenas se nota y solo está para que el
   plástico no parezca un rectángulo de papel. */
.ntarjeta{ background:linear-gradient(145deg,#FFFFFF,#E9ECF1); color:#9AA4B2; }

.ntarjeta[data-lugar="centro"]   { justify-content:center; }
.ntarjeta[data-lugar="izquierda"]{ justify-content:flex-start; }

/* El logo se dibuja contenido, nunca recortado ni estirado: el cliente subió
   su marca y deformársela es la única falta que no perdona. */
.ntarjeta img{
  max-width:var(--escala,60%);
  max-height:72%;
  width:auto; height:auto;
  object-fit:contain;
}

.ntarjeta-vacia{
  font-size:.85rem; font-weight:500; letter-spacing:.02em;
  border:1px dashed currentColor; border-radius:8px;
  padding:.6rem 1rem;
}

.ntarjeta-nfc{
  position:absolute; right:7%; bottom:8%;
  width:22px; height:22px; opacity:.5;
}

.mesa-pie{ margin:1rem 0 0; text-align:center; font-size:.82rem; color:var(--muted); }

.mandos{ margin-top:1.25rem; display:grid; gap:1.1rem; }
.mandos fieldset{ border:0; margin:0; padding:0; }
.mandos legend{
  padding:0; margin-bottom:.4rem;
  font-size:.85rem; font-weight:600;
}
.opciones{ display:flex; gap:.5rem; flex-wrap:wrap; }
.opcion{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem .9rem;
  background:var(--paper); border:1px solid var(--line); border-radius:999px;
  font-size:.9rem; cursor:pointer;
}
.opcion:has(input:checked){
  border-color:var(--ink); background:var(--ink); color:#fff;
}
.opcion input{ margin:0; }
/* Sin esto "A la izquierda" se parte en dos renglones y la píldora crece el
   doble de alto que su vecina. */
.opcion span{ white-space:nowrap; }

.taller-datos{ display:grid; gap:1.25rem; }

.cierre-pedido{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radio);
  box-shadow:var(--sombra);
  padding:1.25rem 1.5rem;
}
.cierre-pedido > div{ display:grid; }
.etiqueta-total{
  font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
}
.cierre-pedido strong{ font-size:1.6rem; font-weight:700; letter-spacing:-.03em; }

.letra-chica{ margin:0; text-align:center; font-size:.85rem; color:var(--muted); }

.acciones-fin{ display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:3rem; }


/* ---------- Preguntas frecuentes ----------

   <details> y nada de JavaScript. El navegador ya sabe abrir y cerrar esto,
   lo hace accesible con el teclado solo, y el buscador encuentra el texto de
   las respuestas aunque estén cerradas.

   Una sola columna angosta: son preguntas para leer, no tarjetas para
   comparar. En dos columnas el ojo no sabe si sigue a la derecha o abajo. */

.faq{ margin-top:4rem; max-width:62ch; }
.faq h2{ margin-bottom:1.25rem; }

.faq details{
  border-top:1px solid var(--line);
}
.faq details:last-of-type{ border-bottom:1px solid var(--line); }

.faq summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:flex-start; gap:1rem;
  padding:1.05rem 0;
  font-weight:600; line-height:1.4;
}
.faq summary::-webkit-details-marker{ display:none; }

/* El signo lo dibujamos nosotros para que gire, y para que no dependa del
   triangulito que cada navegador pinta distinto. */
.faq summary::after{
  content:''; flex:none; margin-left:auto;
  width:11px; height:11px; margin-top:.4rem;
  border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);
  transform:rotate(45deg);
  transition:transform .18s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg); }
.faq summary:hover{ color:var(--acento); }
.faq summary:hover::after{ border-color:var(--acento); }

.faq details > p{
  margin:0 0 1.15rem;
  padding-right:2rem;
  color:var(--muted); line-height:1.65; font-size:.95rem;
}

@media (prefers-reduced-motion:reduce){
  .faq summary::after{ transition:none; }
}


/* ---------- Pie ---------- */

.firma{ text-align:center; color:var(--muted); font-size:.8rem; margin-top:.75rem; }