/* Registro de la Guía · Lic. Lizeth Napa · página de entrada (lizethnapa.com)
   Recortado de ../diario-v2/estilos.css (la página de venta que ella escogió: Opción 2 con las fotos de la Opción 1).
   Marca: socios/lizeth-napa/marca/REGLAS-DEL-MANUAL-LIZETH.md (manual v4). Colores, letras y elementos salen de ahí. */

:root{
  --marino:#043158;         /* R40 títulos, iconos, logo, botón principal */
  --grafito:#373739;        /* R41 texto de lectura */
  --enlace:#17708F;         /* R42 enlaces y el «Lic.» del logo */
  --celeste-titulo:#1B93C2; /* R43 palabra destacada en títulos grandes */
  --celeste:#45B7CF;        /* R44 formas (barras, líneas del lema); nunca texto sobre claro */
  --pastel:#D3F1FC;         /* R47 círculo de iconos, botón secundario */
  --aire:#EEF8FC;           /* R39 fondos de sección */
  --blanco:#FFFFFF;         /* R38 fondo principal y tarjetas */
  --linea:#C2CEDB;          /* R48 líneas */
  --f-titulo:"Poppins","Avenir Next","Segoe UI",sans-serif;
  --f-texto:"Atkinson Hyperlegible Next","Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  --f-acento:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --f-lema:"Dancing Script","Snell Roundhand",cursive;
  --ancho:1180px;
  --gutter:clamp(16px,4vw,48px);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:#C88E59;-webkit-text-size-adjust:100%}
body{margin:0;background:#C88E59 url("img/madera.webp") center top/624px auto repeat;color:var(--grafito);font-family:var(--f-texto);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,figure{margin:0}
::selection{background:var(--pastel);color:var(--marino)}
a{color:var(--enlace);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--marino);outline-offset:3px;border-radius:6px}

/* ---------- Cabecera blanca con su nombre (R122, R70, R72, R78) ---------- */
.cabecera{background:var(--blanco);box-shadow:0 1px 0 var(--linea),0 10px 24px -18px rgba(4,49,88,.35);position:relative;z-index:5}
.cabecera .dentro{max-width:var(--ancho);margin:0 auto;padding:12px var(--gutter);display:flex;align-items:center;gap:12px;min-height:64px}
.ln{width:var(--t,44px);height:var(--t,44px);color:var(--marino);flex:none;--mw:7.5;--mc:3.6}
.marca-bloque{display:flex;align-items:baseline;gap:12px}
.marca{font:600 clamp(20px,1.2vw + 14px,24px)/1 var(--f-titulo);color:var(--marino);letter-spacing:-.02em;white-space:nowrap}
.lic{font-family:var(--f-acento);font-style:italic;font-weight:500;color:var(--enlace);letter-spacing:0;margin-right:.2em;font-size:.82em}
.cabecera .desc{font:400 16px/1.2 var(--f-texto);color:var(--grafito);white-space:nowrap}
.cabecera .punto{color:var(--marino);font-weight:600}
@media (max-width:520px){
  .cabecera .dentro{min-height:58px}
  .marca-bloque{display:grid;gap:4px}
  .cabecera .desc{font-size:14px}
  .cabecera .punto{display:none}
}

/* ---------- La mesa y el Diario (igual que la página de venta) ---------- */
.mesa{position:relative;isolation:isolate;padding-bottom:clamp(40px,8vw,120px)}
.tramo{position:relative;max-width:calc(var(--ancho) + 2*var(--gutter));margin:0 auto;padding:clamp(4px,1.6vw,22px) var(--gutter) 0}
.mesa-arriba{position:relative;z-index:0;margin:0 calc(-1 * var(--gutter));overflow:hidden;pointer-events:none;max-height:clamp(64px,22vw,150px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(180deg,#000 0,#000 72%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(180deg,#000 0,#000 72%,transparent 100%);mask-composite:intersect}
.mesa-arriba img{width:100%;height:auto;scale:1.1;margin-top:calc(-1 * clamp(0px,6vw,90px))}
.mesa-arriba + .diario{margin-top:calc(-1 * clamp(18px,4.2vw,40px))}
@media (min-width:900px){.mesa-arriba{margin:0 auto;max-width:1240px}}

/* El Diario es la foto real del cuaderno abierto, montada en nueve partes. En el teléfono, una sola página. */
.diario{position:relative;z-index:1;background:#FAF8F3 padding-box;border-style:solid;border-width:14px 14px 20px 18px;
  border-image:url("img/diario-hoja.webp") 24 34 34 30 fill / 14px 14px 20px 18px stretch;
  filter:drop-shadow(0 20px 18px rgba(74,46,18,.30)) drop-shadow(0 3px 3px rgba(74,46,18,.18))}
.paginas{position:relative;z-index:1}
.paginas::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:rgba(238,248,252,.8);
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
@media (min-width:900px){
  .diario{border-width:20px 26px 28px;border-image:url("img/diario-pliego.webp") 24 30 34 30 fill / 20px 26px 28px stretch}
  .paginas{display:grid;grid-template-columns:1fr 1fr}
  .paginas::before{right:50%;background:var(--aire);-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
}

/* ---------- Página izquierda: el registro ---------- */
.izq{padding:clamp(24px,4vw,48px) clamp(18px,4.4vw,64px) clamp(28px,3.6vw,44px);min-width:0}
.cabeza{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center;margin-bottom:20px}
.pre{position:relative;padding-left:16px;font:400 clamp(16px,.3vw + 15px,18px)/1.4 var(--f-texto);color:var(--grafito);max-width:40ch}
.pre::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:3px;border-radius:3px;background:var(--celeste)}
.quien{display:grid;gap:4px}
.quien .nombre{font:600 20px/1.15 var(--f-titulo);color:var(--marino);letter-spacing:-.02em;white-space:nowrap} /* «Lic.» a 16,4 px: R73 */
.quien .oficio{font:400 16px/1.3 var(--f-texto);color:var(--grafito)}
.foto-movil{width:clamp(84px,24vw,140px);margin:8px 0 0}
.h1{margin-top:16px;font:700 clamp(32px,2.4vw + 22px,46px)/1.06 var(--f-titulo);letter-spacing:-.035em;color:var(--marino);text-wrap:balance}
.destaca{color:var(--celeste-titulo)}
.bajada{margin-top:14px;font:500 clamp(20px,.5vw + 16px,22px)/1.4 var(--f-titulo);color:var(--marino);max-width:30ch}

/* Foto de ella en el Diario, con clip (R01, R03, R11) */
.sujeta{position:relative;background:#fff;padding:10px;border-radius:4px;box-shadow:0 2px 3px rgba(4,49,88,.12),0 22px 38px -16px rgba(60,40,20,.42);transform:rotate(var(--r,1.6deg))}
.sujeta .marco{border:1.5px solid var(--marino);padding:6px;background:#fff}
.sujeta img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%}
.sujeta .clip{position:absolute;top:-26px;left:62%;width:26px;height:64px;color:#8F9AA6;filter:drop-shadow(0 2px 1px rgba(0,0,0,.18))}
.foto-movil .sujeta{padding:6px;--r:3deg}
.foto-movil .sujeta .marco{padding:4px}
.foto-movil .clip{width:18px;height:46px;top:-20px}

/* ---------- Ficha del formulario: tarjeta blanca (R38), campos con borde grafito (R124) ---------- */
.ficha{margin-top:24px;background:var(--blanco);border-radius:18px;padding:22px 20px 24px;box-shadow:0 1px 2px rgba(4,49,88,.10),0 18px 34px -22px rgba(4,49,88,.45);max-width:480px}
.campo + .campo{margin-top:16px}
.campo label{display:block;margin-bottom:6px;font:600 16px/1.3 var(--f-texto);color:var(--grafito)}
.campo .opc{font-weight:400}
.campo input:not([type=checkbox]){display:block;width:100%;min-height:52px;padding:12px 14px;border:1.5px solid var(--grafito);border-radius:12px;background:var(--blanco);
  font:400 17px/1.3 var(--f-texto);color:var(--grafito);-webkit-appearance:none;appearance:none}
.campo input:not([type=checkbox]):focus{outline:3px solid var(--marino);outline-offset:2px;border-color:var(--marino)}
.campo input[aria-invalid="true"]{border:2.5px solid var(--marino);background:var(--aire)}
.ayuda{margin-top:6px;font-size:14px;line-height:1.4;color:var(--grafito)}
.campo .casilla-wa{display:flex;align-items:center;gap:12px;min-height:44px;margin:10px 0 0;padding:4px 0;cursor:pointer;font:400 16.5px/1.35 var(--f-texto);color:var(--grafito)}
.casilla-wa input{width:24px;height:24px;margin:0;flex:none;accent-color:var(--marino);cursor:pointer}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Aviso de errores: marino sobre celeste aire (sin rojo: R51; sin coral: R49) */
.aviso{margin-top:18px;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:14px 16px;border-radius:14px;background:var(--aire);border:2px solid var(--marino);
  font:600 16px/1.45 var(--f-texto);color:var(--marino)}
.aviso:empty{display:none}
.aviso::before{content:"!";display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--pastel);font:700 17px/1 var(--f-titulo);color:var(--marino)}

/* Botones (R122, R124): principal marino; apagado mientras envía */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:14px 30px;border-radius:999px;border:0;text-decoration:none;cursor:pointer;
  font:600 clamp(17px,.4vw + 15.5px,20px)/1.15 var(--f-titulo);letter-spacing:-.005em;transition:background-color .2s ease,transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}
.btn-1{background:var(--marino);color:#fff;box-shadow:0 10px 22px -10px rgba(4,49,88,.6),inset 0 -2px 0 rgba(0,0,0,.18)}
.btn-1:hover{transform:translateY(-1px);box-shadow:0 14px 26px -10px rgba(4,49,88,.7),inset 0 -2px 0 rgba(0,0,0,.18)} /* R42: el azul enlace no va en botones */
.btn-1:active{transform:translateY(1px)}
.btn[disabled]{background:var(--aire);color:var(--grafito);box-shadow:inset 0 0 0 1.5px var(--linea);cursor:progress;transform:none}
.ficha .btn{width:100%;margin-top:20px}
.btn svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

.despues{margin-top:16px;font-size:16.5px;line-height:1.5;max-width:44ch}
.despues strong{color:var(--marino);font-weight:600}
.privacidad{margin-top:10px;font-size:14px;line-height:1.45;color:var(--grafito);max-width:52ch}

/* Lema (R54, R55, R121): solo en portada y cierre */
.lema{display:flex;align-items:center;gap:14px;margin-top:28px;font:600 clamp(26px,1vw + 22px,30px)/1.2 var(--f-lema);color:var(--marino)}
.lema::before,.lema::after{content:"";flex:1;max-width:60px;height:1.5px;background:var(--celeste);border-radius:2px}

/* ---------- Página derecha (escritorio): su foto grande ---------- */
.der{display:none}
@media (min-width:900px){
  .cabeza{display:none} /* en escritorio su foto y su nombre van en la página derecha */
  /* que el botón quede cerca de la primera pantalla (1440 × 900) */
  .mesa-arriba{max-height:110px}
  .mesa-arriba img{margin-top:-90px}
  .mesa-arriba + .diario{margin-top:-30px}
  .izq{padding-top:22px}
  .h1{margin-top:14px;font-size:42px}
  .bajada{margin-top:10px;max-width:none}
  .ficha{margin-top:20px;max-width:520px;display:grid;grid-template-columns:1fr 1fr;column-gap:14px;padding:20px 22px 22px}
  .ficha > *{grid-column:1/-1}
  .ficha > .campo:nth-child(1){grid-column:1}
  .ficha > .campo:nth-child(2){grid-column:2;margin-top:0}
  .ficha .btn{margin-top:16px}
  .campo .casilla-wa{margin-top:6px}
  .der{position:relative;display:flex;flex-direction:column;align-items:center;padding:clamp(40px,5vw,72px) clamp(24px,4vw,56px) 40px}
  .der .sujeta{width:min(100%,360px);margin-top:16px}
  .der .pie{margin-top:22px;text-align:center;display:grid;gap:4px}
  .der .pie .nombre{font:600 24px/1.15 var(--f-titulo);color:var(--marino);letter-spacing:-.02em}
  .der .pie .oficio{margin-top:4px;font:400 17px/1.3 var(--f-texto);color:var(--grafito)}
  .der .lapiz{width:min(60%,260px);margin:34px 0 0 18%;transform:rotate(4deg)}
  .der .lapiz img{filter:drop-shadow(0 10px 10px rgba(60,40,20,.2))}
}

/* ---------- Gracias ---------- */
.gracias .h1{margin-top:20px}
.gracias .texto{margin-top:14px;font-size:clamp(16.5px,.25vw + 15.5px,18px);max-width:44ch}
.gracias .texto + .texto{margin-top:10px}
.gracias .btn-abrir{margin-top:22px;width:min(100%,420px)}
.gracias .micro{margin-top:10px;font-size:14px}
.abre{margin-top:30px;padding-top:24px;border-top:1px solid var(--linea);max-width:480px}
.abre .abre-linea{margin-top:16px;font:600 clamp(19px,.6vw + 16px,22px)/1.38 var(--f-titulo);color:var(--marino)}
.firma{margin-top:16px;font:600 20px/1.3 var(--f-texto);color:var(--grafito)}

/* Logo del curso (R81–R84): «Mi hijo» marino, «no habla» celeste título, globos a la izquierda, su nombre a un tercio */
.logo-curso{display:grid;grid-template-columns:auto auto;column-gap:12px;align-items:center;justify-content:start;--gw:50px;--lcs:38px}
.logo-curso .burbujas{width:var(--gw);height:calc(var(--gw) * 100 / 140);grid-row:1/3}
.lc-nombre{align-self:end;white-space:nowrap;font:700 var(--lcs)/.95 var(--f-titulo);letter-spacing:-.03em;color:var(--marino)}
.lc-nombre span{color:var(--celeste-titulo)}
.lc-firma{align-self:start;margin-top:6px;font:500 calc(var(--lcs) / 3)/1.2 var(--f-titulo);color:var(--grafito);white-space:nowrap}
.lc-firma .lic{font-size:1em}
@media (min-width:900px){.logo-curso{--gw:62px;--lcs:48px}}
@media (max-width:899px){.lc-firma .lic{display:none}} /* R73: «Lic.» en itálica solo desde 16 px */

/* ---------- Teléfono ---------- */
@media (max-width:899px){
  body{font-size:16.5px;background-size:640px auto}
  .tramo{padding-top:0}
  .diario{padding:7px;border-radius:10px}
  .paginas{border-radius:6px}
}
@media (max-width:420px){
  :root{--gutter:12px}
  .izq{padding:20px 16px 26px}
  .h1{font-size:30px;line-height:1.08}
  .bajada{font-size:20px;margin-top:10px} /* R65: 20 a 24 px */
  .ficha{margin-top:20px}
  .mesa-arriba{max-height:56px}
  .ficha{padding:20px 16px 22px}
  .btn{padding:14px 18px}
  .lema{font-size:27px;gap:10px}
  .lema::before,.lema::after{max-width:22px}
}
@media (max-width:359px){.quien .nombre{white-space:normal}}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}