/* MÉXICO Y SUS CAUSAS · sistema visual
   Talavera poblana: cobalto sobre esmalte blanco, ocre en las esquinas.
   El azulejo es la suma: cuatro pétalos en cruz. */

:root{
  --cobalto:#1B3A8C;
  --cobalto-hondo:#11276A;
  --cobalto-tenue:#C9D3EC;
  --ocre:#E3A72F;
  --ocre-hondo:#B07E14;
  --ocre-tenue:#F2DFB5;
  --esmalte:#FFFFFF;
  --lavado:#EEF2FA;
  --tinta:#142046;
  --gris:#4B5677;
  --letra:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ancho:600px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--esmalte);color:var(--tinta);font-family:var(--letra);
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.05;text-wrap:balance}
h1{font-size:clamp(2.35rem,10.5vw,3.7rem)}
h2{font-size:clamp(1.75rem,7vw,2.4rem)}
h3{font-size:1.28rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 .9em}
:focus-visible{outline:3px solid var(--ocre);outline-offset:3px}
.saltar{position:absolute;left:-9999px}
.saltar:focus{left:.5rem;top:.5rem;z-index:50;background:var(--ocre);padding:.6rem 1rem}

/* Barra */
.barra{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.65rem 1.1rem;padding-top:max(.65rem,env(safe-area-inset-top));
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--cobalto-tenue)}
.marca{display:flex;align-items:center;gap:.55rem;text-decoration:none;font-weight:800;font-size:1.02rem;letter-spacing:-.01em}
.barra-boton{text-decoration:none;font-weight:700;font-size:.95rem;background:var(--ocre);color:var(--tinta);
  padding:.45rem 1rem;border-radius:10px;box-shadow:0 3px 0 var(--ocre-hondo)}

/* Botones: esmaltados, con canto como pieza de cerámica */
.boton{display:inline-block;text-decoration:none;font-family:var(--letra);font-weight:800;font-size:1.06rem;
  background:var(--ocre);color:var(--tinta);border:0;cursor:pointer;
  padding:1rem 1.6rem;border-radius:14px;box-shadow:0 4px 0 var(--ocre-hondo);
  transition:transform .08s,box-shadow .08s}
.boton:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ocre-hondo)}
.boton-claro{background:var(--cobalto);color:var(--esmalte);box-shadow:0 4px 0 var(--cobalto-hondo)}
.boton-claro:active{box-shadow:0 1px 0 var(--cobalto-hondo)}

/* Portada */
.portada{background:var(--cobalto);color:var(--esmalte);padding:0 0 2.6rem;overflow:hidden}
.friso{display:grid;grid-template-columns:repeat(6,1fr);max-width:720px;margin:0 auto}
.friso-pieza{background:var(--esmalte);aspect-ratio:1}
.friso-pieza .azulejo{width:100%;height:100%}
.portada-texto{max-width:var(--ancho);margin:0 auto;padding:2.2rem 1.25rem 0}
.portada h1{margin-bottom:1rem}
.frase{display:block}
.bajada{font-size:1.12rem;color:#DCE3F5;max-width:34ch;margin-bottom:1.7rem}
.origen{margin:1.5rem 0 0;font-size:.95rem;color:#B9C6EA}

@media (prefers-reduced-motion:no-preference){
  .friso-pieza{animation:colocar .55s cubic-bezier(.2,.8,.3,1.2) both;animation-delay:calc(var(--i) * 90ms + 150ms)}
  @keyframes colocar{from{opacity:0;transform:scale(.55) rotate(-12deg)}to{opacity:1;transform:none}}
}

/* Bloques */
.bloque{max-width:var(--ancho);margin:0 auto;padding:3rem 1.25rem}
.bloque h2{margin-bottom:.7rem}
.nota{color:var(--gris);max-width:40ch}

/* Causas */
.causas{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
.causas li{display:grid;grid-template-columns:46px 1fr;column-gap:.65rem;align-items:center}
.causas .azulejo{grid-row:span 2;width:46px;height:46px;border-radius:8px;border:1px solid var(--cobalto-tenue);background:var(--esmalte)}
.causas .es-activa .azulejo{border:2px solid var(--cobalto)}
.causa-nombre{font-weight:700;font-size:.97rem;line-height:1.15;align-self:end}
.causa-estado{align-self:start}
.causa-estado{font-size:.82rem;color:var(--gris)}
.es-activa .causa-estado{color:var(--cobalto);font-weight:700}

.actual{margin-top:2rem;background:var(--lavado);border-radius:16px;padding:1.4rem 1.25rem}
.actual h3{font-size:1.45rem}
.actual-aliado{color:var(--cobalto);font-weight:600;margin:.2rem 0 .8rem}
.enlace{font-weight:700;color:var(--cobalto);text-underline-offset:3px;text-decoration-thickness:2px}

/* Formas de sumarte */
.bloque-formas{padding-top:1rem}
.forma{padding:1.5rem 0;border-top:1px solid var(--cobalto-tenue)}
.forma:last-child{border-bottom:1px solid var(--cobalto-tenue)}
.forma h3{margin-bottom:.4rem}
.forma p{color:var(--gris)}
.forma strong{color:var(--tinta)}
.forma .boton{margin-top:.3rem}

/* Registro */
.bloque-registro{max-width:none;background:var(--lavado);padding-left:0;padding-right:0}
.bloque-registro > *{max-width:var(--ancho);margin-left:auto;margin-right:auto;padding-left:1.25rem;padding-right:1.25rem}
.firma{font-weight:600;color:var(--cobalto);margin-bottom:1.6rem}
.aviso{background:#FBE9E9;color:#8A1C1C;border-radius:12px;padding:.9rem 1.1rem;margin-bottom:1.4rem}
.registro{display:flex;flex-direction:column;gap:1.05rem}
.campo{display:flex;flex-direction:column;gap:.35rem;font-weight:600;font-size:.97rem}
.opcional{font-weight:400;color:var(--gris);font-size:.88rem}
.campo input,.campo select{font:inherit;font-weight:400;font-size:17px;color:var(--tinta);background:var(--esmalte);
  min-height:52px;padding:.7rem .9rem;border:1.5px solid var(--cobalto-tenue);border-radius:12px;width:100%}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--cobalto);box-shadow:0 0 0 3px rgba(27,58,140,.18)}
.opciones{border:0;padding:0;margin:.2rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
.opciones legend{font-weight:600;font-size:.97rem;margin-bottom:.55rem;padding:0}
.opciones label{display:flex;align-items:center;gap:.45rem;background:var(--esmalte);border:1.5px solid var(--cobalto-tenue);
  border-radius:999px;padding:.55rem .95rem;font-size:.95rem;cursor:pointer}
.opciones label:has(input:checked){border-color:var(--cobalto);background:#DCE4F6}
.opciones input,.permisos input{width:20px;height:20px;accent-color:var(--cobalto);margin:0;flex:0 0 auto}
.permisos{display:flex;flex-direction:column;gap:.75rem;margin:.3rem 0 .4rem}
.permisos label{display:flex;gap:.65rem;align-items:flex-start;font-size:.95rem;line-height:1.4}
.permisos input{margin-top:.1rem}
.registro .boton{width:100%;font-size:1.15rem}
.trampa{position:absolute;left:-9999px}

/* Gracias */
.gracias .azulejo{width:84px;margin-bottom:1.2rem}
.gracias .boton{width:100%;text-align:center;margin-top:.8rem}
.siguientes{margin-top:1.4rem}

/* Legal */
.legal h2{font-size:1.25rem;margin:1.8rem 0 .5rem}
.legal p,.legal li{color:var(--gris);font-size:.97rem}

/* Pie */
.pie{background:var(--cobalto-hondo);color:#C9D3EC;padding:2rem 1.25rem calc(2rem + env(safe-area-inset-bottom));font-size:.92rem;text-align:center}
.pie p{margin:.35rem 0}
.pie-origen{color:var(--esmalte);font-weight:700}

@media (min-width:760px){
  .friso{grid-template-columns:repeat(6,120px);justify-content:center;max-width:none;
    background:url("../assets/azulejo-tenue.svg") repeat-x;background-size:120px 120px;background-position:calc(50% + 60px) 0}
  .causas{grid-template-columns:repeat(3,1fr)}
  .portada-texto{padding-top:3rem;text-align:left}
}