/* ============================================================
   TUP Salud - comunidad gratuita
   Identidad: brandkit de Tengo un Plan (ambar #FDB400, Poppins,
   canon visual de /reto-21-dias/: luz ambar radial, boton r14,
   tarjeta glass sin sombra, titulares Bold con ls negativo).

   Ritmo de pagina: NO todo va en modulo. El heroe va a sangre,
   como en las otras landings del dominio, y los pasos y las
   preguntas van planos sobre el fondo. Los bloques redondeados
   quedan para lo que si tiene que destacar: la frase en ambar,
   las tarjetas, la foto ancha y el cierre.
   ============================================================ */

:root{
  --ambar:#FDB400;
  --ambar-claro:#FFC94F;
  --ambar-oscuro:#F08A00;
  --neg:#0A0A0A;
  --neg-alt:#131313;
  --neg-calido:#1A1410;
  --blanco:#FFFFFF;
  --suave:#C8C8C8;
  --mudo:#8A8A8A;

  --borde:rgba(255,255,255,.08);
  --glass:rgba(255,255,255,.035);

  --r-bloque:28px;
  --r-tarjeta:20px;
  --r-boton:14px;
  --r-chip:999px;

  --ancho:1180px;
  --canal:14px;
  --paso:clamp(56px,7vw,104px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Red de seguridad: si algun dia algo se pasa de ancho, que no arrastre la
   pagina entera a un scroll lateral. No sustituye a arreglar la causa. */
html,body{overflow-x:hidden}
body{
  margin:0;
  background:var(--neg);
  color:var(--blanco);
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------- piezas de marca ---------- */

.eyebrow{
  font-size:.74rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ambar);margin:0;
}
.eyebrow--pill{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem 1rem;border-radius:var(--r-chip);
  border:1.5px solid rgba(253,180,0,.38);
  background:rgba(253,180,0,.08);
}
.eyebrow--pill::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--ambar);box-shadow:0 0 0 4px rgba(253,180,0,.18);
}

h1,h2,h3{font-weight:700;letter-spacing:-.02em;line-height:1.08;margin:0;text-wrap:balance}
/* El cuerpo esta calculado para que "con la comunidad de", que es el tramo mas
   largo, quepa entero en la columna de texto del heroe. Si se sube, se parte. */
h1{font-size:clamp(2.4rem,4.6vw,3.5rem)}

/* El titular se parte EXACTAMENTE en tres, no donde caiga. A partir de 881px
   cada tramo es su propia linea; por debajo se deja fluir, que en movil el
   titular va a ancho completo y partirlo a mano produce huecos feos. */
.titular .hl{color:var(--ambar)}
@media (min-width:881px){
  .titular{text-wrap:initial}
  .titular span{display:block}
}
h2{font-size:clamp(1.9rem,3.8vw,2.9rem)}
h3{font-size:1.18rem;line-height:1.3}
p{margin:0}
.lead{font-size:clamp(1rem,1.4vw,1.14rem);color:var(--suave);max-width:54ch}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  height:62px;padding:0 1.9rem;border:0;border-radius:var(--r-boton);
  font-family:inherit;font-size:1.08rem;font-weight:700;letter-spacing:-.01em;
  background:linear-gradient(165deg,var(--ambar-claro),var(--ambar) 55%,var(--ambar-oscuro));
  color:var(--neg);cursor:pointer;text-decoration:none;
  transition:transform .18s ease,filter .18s ease;
}
/* Hover de la casa: el boton sube 2 px y enciende su propia sombra ambar;
   al pulsar se hunde un pelo. Mismo gesto que en la pagina de venta y en el Reto. */
.btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 14px 36px rgba(253,180,0,.4)}
.btn:active{transform:scale(.985)}
.btn:focus-visible{outline:3px solid var(--blanco);outline-offset:3px}
.btn:disabled{opacity:.6;cursor:progress;transform:none;box-shadow:none}
.btn--bloque{width:100%}

/* ---------- contenedores ---------- */

.envoltura{max-width:calc(var(--ancho) + var(--canal)*2);margin-inline:auto;padding-inline:var(--canal)}
.bloque{border-radius:var(--r-bloque);overflow:hidden;position:relative}
.bloque + .bloque{margin-top:var(--canal)}
.interior{padding:var(--paso) clamp(20px,4vw,64px)}

/* seccion plana: sin modulo, respira sobre el fondo de la pagina */
.plana{padding:var(--paso) 0}
/* Sin inset lateral: asi el contenido de las secciones planas queda alineado
   con el BORDE de los bloques (la frase ambar, la foto ancha, el cierre). Con
   inset se veia un escalon de 20 px entre unas secciones y otras. */
.plana .interior{padding:0}
/* dos planas seguidas no suman sus dos paddings: quedaria un hueco enorme */
.plana + .plana{padding-top:0}

/* ---------- heroe a sangre ---------- */

.hero{
  position:relative;overflow:hidden;
  /* Sin borde abajo: el heroe se funde con el fondo de la pagina. El calido
     se apaga hacia --neg en el ultimo tramo para que no quede un escalon de
     color donde antes habia una linea. */
  background:linear-gradient(to bottom,var(--neg-calido) 0%,var(--neg-calido) 62%,var(--neg) 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(56% 150% at 50% -20%,rgba(253,180,0,.26),transparent 68%);
}
.hero__rejilla{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:29px 29px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 30%,#000,transparent);
          mask-image:radial-gradient(70% 70% at 50% 30%,#000,transparent);
}
.hero__barra{position:relative;padding-top:26px}
.hero__barra img{width:132px;height:auto}
.hero__interior{
  position:relative;display:grid;align-items:center;
  gap:clamp(32px,4vw,56px);
  /* La columna de texto manda: tiene que caber el titular en tres lineas. */
  grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  /* padding-block y no el atajo: el atajo pondria a 0 el padding lateral que
     trae .envoltura y la foto se iria al borde de la pantalla en movil. */
  padding-block:clamp(44px,6vw,86px) clamp(56px,7vw,96px);
}
.hero__texto{display:flex;flex-direction:column;gap:1.4rem;align-items:flex-start}
.hero__foto{margin:0;border-radius:var(--r-tarjeta);overflow:hidden;border:1px solid var(--borde)}
.hero__foto img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}

/* ---------- formulario (sin etiquetas visibles) ---------- */

.form{width:100%;max-width:430px;display:flex;flex-direction:column;gap:.6rem;position:relative}
.form input{
  height:58px;padding:0 1.05rem;border-radius:var(--r-boton);
  border:1px solid var(--borde);background:rgba(255,255,255,.04);
  color:var(--blanco);font-family:inherit;font-size:1rem;
  transition:border-color .18s ease,background .18s ease;
}
.form input::placeholder{color:var(--mudo)}
.form input:hover{background:rgba(255,255,255,.06)}
.form input:focus{outline:none;border-color:rgba(253,180,0,.65);background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px rgba(253,180,0,.14)}
.form__trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.micro{font-size:.84rem;color:var(--mudo);margin:0}
.form .micro{margin-top:.25rem}
.aviso{font-size:.9rem;font-weight:600;margin:0;min-height:1.2em}
/* Mientras no hay mensaje no ocupa nada: si no, deja un hueco muerto entre el
   boton y la letra pequena. Solo aparece (y empuja) cuando hay algo que decir. */
.aviso:empty{display:none}
.aviso--mal{color:#F87171}
.aviso--bien{color:#4ADE80}

/* ---------- bloque ambar ----------
   Canon: sobre ambar el realce es NEGRO PLENO y el resto al 60%. */

.declara{background:linear-gradient(165deg,var(--ambar-claro),var(--ambar) 55%,var(--ambar-oscuro))}
.declara .interior{text-align:center}
.declara p{
  margin-inline:auto;max-width:24ch;
  font-size:clamp(1.6rem,3.4vw,2.5rem);font-weight:700;letter-spacing:-.02em;line-height:1.16;
  color:rgba(10,10,10,.6);
}
.declara b{color:var(--neg);font-weight:700}

/* ---------- cabeceras de seccion ---------- */

.seccion{background:var(--neg-alt)}
.cabecera{display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center;margin-bottom:clamp(36px,5vw,60px)}
.cabecera .lead{margin-inline:auto;text-align:center}

/* ---------- tarjetas ---------- */

.rejilla3{display:grid;gap:var(--canal);grid-template-columns:repeat(3,minmax(0,1fr))}
.tarjeta{
  background:var(--glass);border:1px solid var(--borde);border-radius:var(--r-tarjeta);
  padding:clamp(22px,2.6vw,30px);min-height:272px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:.6rem;
  transition:transform .18s ease,border-color .18s ease;
}
.tarjeta:hover{transform:translateY(-3px);border-color:rgba(253,180,0,.55)}
/* Iconos de Lucide, el set de la casa. Trazo 1,75 y caja algo mas grande: a
   trazo 2 en caja pequena se empastan y parecen dibujados a mano. */
.tarjeta__icono{
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:rgba(253,180,0,.10);border:1px solid rgba(253,180,0,.22);
  margin-bottom:auto;color:var(--ambar);
  transition:background .18s ease,border-color .18s ease;
}
.tarjeta__icono svg{width:25px;height:25px}
.tarjeta:hover .tarjeta__icono{background:rgba(253,180,0,.16);border-color:rgba(253,180,0,.45)}
.tarjeta p{color:var(--suave);font-size:.96rem}

/* ---------- pasos: planos, solo un filete arriba ---------- */

.pasos{display:grid;gap:clamp(24px,3vw,44px);grid-template-columns:repeat(3,minmax(0,1fr))}
.paso{display:flex;flex-direction:column;gap:.55rem;padding-top:1.4rem;border-top:1px solid var(--borde);
  transition:border-top-color .18s ease}
.paso:hover{border-top-color:var(--ambar)}
.paso__num{font-size:1rem;font-weight:700;letter-spacing:.14em;line-height:1;color:var(--ambar)}
.paso h3{margin-top:.2rem}
.paso p{color:var(--suave);font-size:.96rem}

/* ---------- banda de foto ---------- */

.banda{position:relative;min-height:clamp(300px,42vw,470px);display:grid}
.banda img{grid-area:1/1;width:100%;height:100%;object-fit:cover}
.banda__capa{grid-area:1/1;display:flex;align-items:flex-end;padding:clamp(24px,4vw,54px);
  background:linear-gradient(to top,rgba(10,10,10,.9),rgba(10,10,10,.2) 62%,transparent)}
.banda__capa h2{max-width:18ch}

/* ---------- preguntas: filas, no tarjetas ---------- */

.faq{max-width:780px;margin-inline:auto;border-top:1px solid var(--borde)}
.faq details{border-bottom:1px solid var(--borde)}
.faq summary{list-style:none;cursor:pointer;padding:1.25rem .2rem;font-weight:600;font-size:1.02rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  transition:color .18s ease}
.faq summary:hover{color:var(--ambar)}
.faq summary:focus-visible{outline:2px solid var(--ambar);outline-offset:4px;border-radius:6px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ambar);font-size:1.5rem;font-weight:700;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq p{padding:0 .2rem 1.4rem;color:var(--suave);font-size:.96rem;max-width:62ch}

/* ---------- cierre ---------- */

.cierre{background:var(--neg-calido)}
.cierre::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(78% 80% at 50% 112%,rgba(253,180,0,.24),transparent 68%);
}
.cierre .interior{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.4rem}

.pie{padding:30px var(--canal) 44px;max-width:calc(var(--ancho) + var(--canal)*2);margin-inline:auto;
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;align-items:center;
  color:var(--mudo);font-size:.82rem}
.pie a{color:var(--suave);text-decoration:none}
.pie a:hover{color:var(--ambar)}

/* ---------- movil ---------- */

@media (max-width:880px){
  /* El canal de 14px se queda corto en un movil: el contenido parece pegado al
     borde. Aqui manda el margen, aunque eso separe un poco mas los bloques. */
  :root{--canal:20px}
  /* minmax(0,1fr) y NO 1fr: "1fr" es minmax(auto,1fr) y el minimo automatico
     es el contenido, asi que un hijo ancho (la foto trae width=900 en el HTML)
     puede estirar la columna por encima de la pantalla. Es el desbordamiento
     lateral clasico de CSS grid, y algunos navegadores lo resuelven distinto. */
  .hero__interior{grid-template-columns:minmax(0,1fr);padding-block-start:clamp(28px,5vw,44px)}
  .hero__texto,.hero__foto{min-width:0}
  /* En movil el titular baja de cuerpo: con el de escritorio se come el margen
     en pantallas de 360-390px. */
  h1{font-size:clamp(1.95rem,7.6vw,2.6rem)}
  /* en movil la foto va DESPUES del titular y del formulario: lo primero que
     se ve tiene que ser el mensaje y el campo donde escribir.
     Cuadrada y anclada arriba: el original es vertical (3/4) y forzar un 4/3
     le cortaba la cabeza. Con 1/1 y object-position al 12% entra entera. */
  .hero__foto img{aspect-ratio:1/1;object-position:50% 12%}
  .rejilla3{grid-template-columns:1fr}
  .pasos{grid-template-columns:1fr;gap:26px}
  .tarjeta{min-height:0}
  .form{max-width:none}
}
/* En tactil no hay puntero: el hover se queda "pegado" tras tocar, asi que se
   anulan los desplazamientos. Mismo criterio que en la pagina de venta. */
@media (hover:none){
  .btn:hover,.tarjeta:hover{transform:none;box-shadow:none}
  .tarjeta:hover{border-color:var(--borde)}
  .paso:hover{border-top-color:var(--borde)}
  .faq summary:hover{color:inherit}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}