/* ============================================================================
   Jardinería El Roble — hoja de estilos única
   Intención: "El jardín sigue vivo mientras usted no está."
   Sin frameworks, sin build. Tokens arriba, componentes abajo.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */

:root{
  /* Color — leído de un jardín de la costa: sombra, cal, agua, sol */
  --umbria:#14261C;        /* verde de sombra profunda: texto y bandas oscuras */
  --umbria-hondo:#0D1911;  /* pie de página */
  --musgo:#3B4E3C;         /* texto secundario */
  --olivo:#5C7059;         /* filetes y grafismo */
  --caliza:#E6E4DA;        /* fondo de página: piedra al sol */
  --papel:#F2F1E9;         /* tarjetas y bloques elevados */
  --albero:#D6CFBE;        /* bordes, arena */
  --agua:#17635A;          /* acento: el riego. Enlaces, activos */
  --agua-viva:#3E9C8C;     /* acento sobre fondo oscuro */
  --sol:#C98A2E;           /* SOLO calor y "ahora" en el año del jardín */
  --sol-hondo:#8A5714;     /* el mismo calor, legible sobre fondo claro */

  /* Tipografía — Petrona + Asap: dos familias pensadas en español */
  --display:"Petrona",Georgia,"Times New Roman",serif;
  --texto:"Asap","Helvetica Neue",Arial,sans-serif;

  --t-xxl:clamp(2.45rem,1.55rem + 3.9vw,4.4rem);
  --t-xl:clamp(1.9rem,1.35rem + 2.2vw,2.85rem);
  --t-l:clamp(1.32rem,1.15rem + .8vw,1.7rem);
  --t-m:clamp(1.12rem,1.05rem + .35vw,1.28rem);
  --t-base:clamp(1.0625rem,1.02rem + .2vw,1.125rem);
  --t-s:.95rem;
  --t-etq:.875rem;

  /* Espacio — base 4px */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem;
  --seccion:clamp(3.5rem,7vw,6.5rem);
  --ancho:70rem;

  --r:4px;
  --linea:1px solid var(--albero);
  --linea-clara:1px solid rgba(230,228,218,.18);
  --curva:cubic-bezier(.2,.6,.3,1);
  --transicion:180ms var(--curva);
}

/* --- 2. Base ------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--caliza);
  color:var(--umbria);
  font-family:var(--texto);
  font-size:var(--t-base);
  line-height:1.65;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.015em;
  margin:0 0 var(--s4);
  color:var(--umbria);
  text-wrap:balance;
}
h1{font-size:var(--t-xxl);line-height:1.04;letter-spacing:-.025em}
h2{font-size:var(--t-xl)}
h3{font-size:var(--t-l)}
h4{font-size:var(--t-m)}

p{margin:0 0 var(--s4);max-width:64ch}
p:last-child{margin-bottom:0}

figure{margin:0}

a{color:var(--agua);text-decoration-thickness:1px;text-underline-offset:.18em;transition:color var(--transicion)}
a:hover{color:var(--umbria)}

strong{font-weight:600}
em{font-style:italic}

img{max-width:100%;height:auto;display:block}

:focus-visible{
  outline:3px solid var(--agua);
  outline-offset:3px;
  border-radius:2px;
}

::selection{background:var(--agua-viva);color:var(--umbria-hondo)}

/* --- 3. Utilidades ------------------------------------------------------- */

.envoltorio{
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:clamp(1.25rem,4vw,3rem);
}

.visualmente-oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

.saltar{
  position:absolute;left:var(--s4);top:-100px;z-index:200;
  background:var(--umbria);color:var(--papel);
  padding:var(--s3) var(--s5);border-radius:var(--r);
  font-weight:600;text-decoration:none;
  transition:top var(--transicion);
}
.saltar:focus{top:var(--s3);color:var(--papel)}

.lead{
  font-size:var(--t-m);
  line-height:1.6;
  color:var(--musgo);
  max-width:56ch;
}

.etiqueta{
  font-size:var(--t-etq);
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--agua);
  margin:0 0 var(--s3);
  max-width:none;
}

.regla{
  display:block;
  height:2px;
  width:min(180px,38%);
  background:var(--agua);
  transform-origin:left center;
  margin:0 0 var(--s5);
}

/* Filete de goteo: la línea del riego, usada como separador */
.gota{
  position:relative;
  height:11px;
  margin:0;
}
.gota::before{
  content:"";position:absolute;left:0;right:0;bottom:50%;
  height:1px;background:var(--albero);
}
.gota::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle,var(--agua) 0 1.7px,transparent 2px);
  background-size:26px 11px;
  background-position:center;
  background-repeat:repeat-x;
}

/* --- 4. Secciones -------------------------------------------------------- */

.seccion{padding-block:var(--seccion)}
.seccion--papel{background:var(--papel)}

.seccion--oscura{
  background:var(--umbria);
  color:var(--caliza);
}
.seccion--oscura h1,
.seccion--oscura h2,
.seccion--oscura h3,
.seccion--oscura h4{color:var(--papel)}
.seccion--oscura .lead{color:rgba(230,228,218,.80)}
.seccion--oscura .etiqueta{color:var(--agua-viva)}
.seccion--oscura .regla{background:var(--agua-viva)}
.seccion--oscura a{color:var(--agua-viva)}
.seccion--oscura a:hover{color:var(--papel)}
.seccion--oscura :focus-visible{outline-color:var(--sol)}
.seccion--oscura .gota::before{background:rgba(230,228,218,.20)}
.seccion--oscura .gota::after{
  background-image:radial-gradient(circle,var(--agua-viva) 0 1.7px,transparent 2px);
}

.cabezal{margin-bottom:var(--s7);max-width:42rem}
.cabezal--ancho{max-width:none}

[id]{scroll-margin-top:88px}

/* --- 5. Cabecera y navegación -------------------------------------------- */

.cabecera{
  position:sticky;top:0;z-index:100;
  background:var(--caliza);
  border-bottom:var(--linea);
}
.cabecera__interior{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);
  min-height:66px;
  padding-block:var(--s2);
}

.marca{
  display:block;
  text-decoration:none;
  color:var(--umbria);
  line-height:1;
  flex-shrink:0;
}
.marca__oficio{
  display:block;
  font-family:var(--texto);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--musgo);
  margin-bottom:3px;
}
.marca__nombre{
  display:block;
  font-family:var(--display);
  font-size:1.32rem;
  font-weight:600;
  letter-spacing:-.01em;
}
.marca__punto{
  display:inline-block;width:6px;height:6px;
  background:var(--agua);margin-left:4px;vertical-align:.08em;
}
.marca:hover .marca__nombre{color:var(--agua)}

.nav{display:flex;align-items:center;gap:clamp(.6rem,2vw,1.6rem)}
.nav a{
  position:relative;
  display:inline-flex;align-items:center;
  min-height:44px;padding:0 .25rem;
  font-size:.9375rem;font-weight:500;
  white-space:nowrap;
  color:var(--musgo);
  text-decoration:none;
}

/* Móviles estrechos: la marca y los tres enlaces tienen que caber en una fila
   sin partirse. Se aprieta la marca, nunca los objetivos táctiles. */
@media (max-width:479px){
  .cabecera__interior{gap:var(--s3)}
  .marca__oficio{font-size:.625rem;letter-spacing:.18em}
  .marca__nombre{font-size:1.15rem}
  .nav{gap:.55rem}
  .nav a{font-size:.875rem;padding:0 .15rem}
}
.nav a:hover{color:var(--umbria)}
.nav a[aria-current="page"]{color:var(--umbria);font-weight:600}
.nav a[aria-current="page"]::after{
  content:"";position:absolute;left:.25rem;right:.25rem;bottom:6px;
  height:2px;background:var(--agua);
}

.cabecera__wa{display:none}

/* --- 6. Botones ---------------------------------------------------------- */

.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:54px;padding:.9rem 1.5rem;
  font-family:var(--texto);font-size:1.05rem;font-weight:600;line-height:1.2;
  text-align:center;text-decoration:none;
  border:1px solid transparent;border-radius:var(--r);
  cursor:pointer;
  transition:background var(--transicion),color var(--transicion),
             transform var(--transicion),border-color var(--transicion);
}
.boton svg{flex-shrink:0}

.boton--wa{
  background:var(--umbria);
  color:var(--papel);
  box-shadow:0 12px 24px -18px rgba(20,38,28,.95);
}
.boton--wa:hover{background:var(--agua);color:var(--papel)}
.boton--wa:active{transform:translateY(1px)}

.seccion--oscura .boton--wa{background:var(--papel);color:var(--umbria);box-shadow:none}
.seccion--oscura .boton--wa:hover{background:var(--agua-viva);color:var(--umbria-hondo)}

.boton--grande{min-height:64px;font-size:1.15rem;padding:1rem 2rem}
.boton--bloque{width:100%}

.boton--linea{
  background:transparent;color:var(--umbria);
  border-color:var(--olivo);
}
.boton--linea:hover{background:var(--umbria);color:var(--papel);border-color:var(--umbria)}

.enlace-flecha{
  display:inline-flex;align-items:center;gap:.45rem;
  min-height:44px;
  font-weight:600;text-decoration:none;
  border-bottom:2px solid currentColor;
  padding-bottom:1px;
}
.enlace-flecha .flecha{transition:transform var(--transicion)}
.enlace-flecha:hover .flecha{transform:translateX(4px)}

/* Apunte: la línea pequeña que acompaña a una acción principal */
.apunte{
  margin:var(--s4) 0 0;
  font-size:var(--t-s);
  color:var(--musgo);
}
.apunte a{color:var(--musgo);text-decoration-color:var(--olivo)}
.apunte a:hover{color:var(--agua)}
.seccion--oscura .apunte{color:rgba(230,228,218,.72)}
.seccion--oscura .apunte a{color:rgba(230,228,218,.9)}

/* --- 7. Portada (inicio) ------------------------------------------------- */

.portada{
  position:relative;
  overflow:hidden;
  background-image:
    radial-gradient(90% 55% at 88% -8%,rgba(201,138,46,.14),transparent 62%),
    radial-gradient(70% 45% at 2% 104%,rgba(23,99,90,.10),transparent 66%);
}
.portada__interior{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s7);
  padding-block:clamp(2.75rem,6vw,5rem) clamp(3.25rem,7vw,6rem);
}

.localizador{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  font-size:var(--t-etq);font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--musgo);
  margin:0 0 var(--s5);
  max-width:none;
}
.localizador span{display:inline-flex;align-items:center;gap:.55rem}
.localizador span::after{
  content:"";width:4px;height:4px;border-radius:50%;background:var(--agua);
}
.localizador span:last-child::after{display:none}

.portada h1{margin-bottom:var(--s5)}
.acento{
  font-style:italic;
  font-weight:500;
  color:var(--agua);
}

.portada__acciones{margin-top:var(--s6)}

/* El parte: versión de bolsillo del año del jardín */
.parte{
  background:var(--papel);
  border:var(--linea);
  border-radius:var(--r);
  padding:var(--s5);
  box-shadow:0 24px 44px -40px rgba(20,38,28,.7);
}
.parte__ahora{
  font-family:var(--display);
  font-size:1.22rem;
  line-height:1.35;
  color:var(--umbria);
  margin:0 0 var(--s5);
  min-height:2.7em;
}
.parte__mes{color:var(--sol-hondo);font-weight:600;font-style:italic}
.parte__mini{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  align-items:end;
  gap:3px;
  height:56px;
  border-bottom:1px solid var(--albero);
  margin-bottom:var(--s4);
}
.parte__mini span{
  display:block;
  height:calc(8px + (var(--carga) * .42px));
  border-radius:2px 2px 0 0;
  background:var(--olivo);
  background:color-mix(in oklab,var(--agua-viva),var(--sol) calc(var(--carga) * 1%));
  opacity:.55;
}
.parte__mini span.es-hoy{opacity:1;box-shadow:0 0 0 1px var(--papel),0 0 0 2px var(--sol)}

/* --- 8. Dos maneras de trabajar ------------------------------------------ */

.trabajo{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s6);
}

.contrato{
  background:var(--papel);
  border:var(--linea);
  border-left:4px solid var(--agua);
  border-radius:var(--r);
  padding:clamp(1.5rem,3.5vw,2.5rem);
}
.contrato h3{margin-bottom:var(--s3)}
.contrato__nota{
  font-size:var(--t-etq);font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--agua);
  margin:0 0 var(--s3);
}

.lista-gotas{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;gap:var(--s3)}
.lista-gotas li{
  position:relative;
  padding-left:1.6rem;
  color:var(--musgo);
}
.lista-gotas li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:8px;height:8px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  background:var(--agua);
}
.seccion--oscura .lista-gotas li{color:rgba(230,228,218,.85)}
.seccion--oscura .lista-gotas li::before{background:var(--agua-viva)}

.puntuales{padding-top:var(--s2)}
.puntuales h3{margin-bottom:var(--s5)}
.puntuales__lista{list-style:none;margin:0 0 var(--s6);padding:0}
.puntuales__lista li{
  padding:var(--s4) 0;
  border-top:var(--linea);
}
.puntuales__lista li:last-child{border-bottom:var(--linea)}
.puntuales__nombre{
  display:block;
  font-family:var(--display);
  font-size:1.16rem;font-weight:600;
  margin-bottom:2px;
}
.puntuales__que{display:block;color:var(--musgo);font-size:var(--t-s);max-width:44ch}

/* --- 9. El año del jardín (elemento firma) ------------------------------- */

.anyo__meses{
  list-style:none;
  margin:var(--s7) 0 var(--s3);
  padding:0;
  display:grid;
  grid-template-columns:1fr;
}

.mes{
  display:flex;
  align-items:center;
  gap:var(--s3);
  padding:.6rem 0;
  border-bottom:var(--linea-clara);
}
.mes__nombre{
  order:1;
  flex:0 0 3.4rem;
  font-family:var(--display);
  font-size:1.02rem;font-weight:600;
  color:var(--papel);
}
.mes__trabajo{
  order:2;
  flex:1 1 auto;
  min-width:0;
  font-size:var(--t-s);
  color:rgba(230,228,218,.78);
}
.mes__grafico{
  order:3;
  flex:0 0 24%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.mes__tallo{
  display:block;
  height:8px;
  width:calc(6% + (var(--carga) * .94%));
  border-radius:0 4px 4px 0;
  background:var(--agua-viva);
  background:color-mix(in oklab,var(--agua-viva),var(--sol) calc(var(--carga) * 1%));
}
.mes__ahora{
  order:4;
  flex:0 0 auto;
  font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--umbria-hondo);background:var(--sol);
  padding:3px 8px;border-radius:2px;
}
.mes--hoy .mes__nombre{color:var(--sol)}

.anyo__pie{
  font-size:var(--t-s);
  color:rgba(230,228,218,.65);
  margin:0 0 var(--s8);
  max-width:none;
}

.fases{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s5);
}
.fase{
  border-top:2px solid rgba(230,228,218,.22);
  padding-top:var(--s4);
}
.fase__cuando{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  font-size:var(--t-etq);font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--agua-viva);
  margin:0 0 var(--s3);
}
.fase__ahora{
  font-size:.7rem;letter-spacing:.12em;
  color:var(--umbria-hondo);background:var(--sol);
  padding:2px 7px;border-radius:2px;
}
.fase h3{font-size:1.28rem;margin-bottom:var(--s3);color:var(--papel)}
.fase p{font-size:var(--t-s);color:rgba(230,228,218,.78);max-width:38ch}
.fase--activa{border-top-color:var(--sol)}

/* --- 10. Confianza: los anillos ------------------------------------------ */

.confianza{position:relative;overflow:hidden}
.anillos{
  position:absolute;
  right:-14%;
  top:50%;
  transform:translateY(-50%);
  width:min(560px,58%);
  height:auto;
  color:var(--olivo);
  opacity:.16;
  pointer-events:none;
}
.confianza__interior{position:relative;z-index:1}
.confianza p{max-width:52ch}

.hechos{
  list-style:none;
  margin:var(--s7) 0 0;padding:0;
  display:grid;grid-template-columns:1fr;gap:var(--s4);
  max-width:46rem;
}
.hechos li{
  border-top:2px solid var(--agua);
  padding-top:var(--s3);
}
.hechos__cifra{
  display:block;
  font-family:var(--display);
  font-size:1.55rem;font-weight:600;line-height:1.1;
  margin-bottom:2px;
}
.hechos__que{display:block;font-size:var(--t-s);color:var(--musgo)}

/* --- 11. Antes y después ------------------------------------------------- */

.pareja{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s6);
  padding-block:var(--s6);
  border-top:var(--linea);
}
.pareja:first-of-type{border-top:0;padding-top:var(--s2)}
.pareja__texto h3{margin-bottom:var(--s3)}
.pareja__fotos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s3);
}

/* Hueco de foto: plancha reservada, dirigida de arte, nunca una foto de stock */
.hueco{
  position:relative;
  display:grid;
  grid-template-rows:auto 1fr;
  aspect-ratio:4/5;
  padding:var(--s3);
  border:1px solid var(--albero);
  border-radius:var(--r);
  background-color:var(--papel);
  background-image:
    linear-gradient(var(--agua),var(--agua)),
    linear-gradient(var(--agua),var(--agua)),
    linear-gradient(var(--agua),var(--agua)),
    linear-gradient(var(--agua),var(--agua)),
    repeating-linear-gradient(135deg,transparent 0 9px,rgba(92,112,89,.10) 9px 10px);
  background-repeat:no-repeat;
  background-size:20px 2px,2px 20px,20px 2px,2px 20px,auto;
  background-position:
    12px 12px,12px 12px,
    right 12px bottom 12px,right 12px bottom 12px,
    0 0;
}
.hueco--ancho{aspect-ratio:3/2}
.hueco__marca{
  justify-self:start;
  font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--papel);background:var(--umbria);
  padding:4px 9px;border-radius:2px;
  margin-left:var(--s5);
}
.hueco__pendiente{
  align-self:center;
  justify-self:center;
  margin:0;
  font-size:var(--t-s);
  color:var(--musgo);
  text-align:center;
}

.nota{
  font-size:var(--t-s);
  color:var(--musgo);
  border-left:2px solid var(--albero);
  padding-left:var(--s4);
  margin-top:var(--s6);
  max-width:48ch;
}

/* Panel: el lado derecho de un servicio cuando no lleva foto */
.panel{
  background:var(--papel);
  border:var(--linea);
  border-radius:var(--r);
  padding:clamp(1.15rem,2.5vw,1.75rem);
}
.panel h3{
  font-family:var(--texto);
  font-size:var(--t-etq);font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--agua);
  margin:0;
}

/* --- 12. Servicios (página) ---------------------------------------------- */

.indice{
  list-style:none;margin:var(--s6) 0 0;padding:0;
  display:grid;grid-template-columns:1fr;gap:0;
  max-width:34rem;
}
.indice li{border-top:var(--linea-clara)}
.indice li:last-child{border-bottom:var(--linea-clara)}
.indice a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  min-height:52px;padding:var(--s2) 0;
  font-family:var(--display);font-size:1.14rem;font-weight:500;
  text-decoration:none;
}
.indice a .flecha{opacity:.65;transition:transform var(--transicion)}
.indice a:hover .flecha{transform:translateX(4px)}

.servicio{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s5);
  padding-block:var(--s7);
  border-top:var(--linea);
}
.servicio:first-of-type{border-top:0}
.servicio__numero{
  font-family:var(--display);
  font-size:var(--t-etq);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--agua);
  margin:0 0 var(--s2);
}
.servicio h2{font-size:var(--t-l);margin-bottom:var(--s4)}
.servicio--destacado{
  background:var(--papel);
  border:var(--linea);
  border-top:4px solid var(--agua);
  border-radius:var(--r);
  padding:clamp(1.5rem,3.5vw,2.5rem);
  margin-bottom:var(--s7);
}
.servicio--destacado h2{font-size:var(--t-l);margin-bottom:var(--s4)}

.seccion--oscura .indice a{color:var(--papel)}
.seccion--oscura .indice a:hover{color:var(--agua-viva)}

/* --- 13. Preguntas ------------------------------------------------------- */

.preguntas{list-style:none;margin:0;padding:0;max-width:46rem}
.pregunta{
  padding:var(--s5) 0;
  border-top:var(--linea);
}
.pregunta:last-child{border-bottom:var(--linea)}
.pregunta h3{
  font-size:1.18rem;
  margin-bottom:var(--s2);
}
.pregunta p{color:var(--musgo);margin:0}

/* --- 14. Corredor de trabajo --------------------------------------------- */

.corredor{
  list-style:none;
  margin:var(--s6) 0 0;padding:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--s5) var(--s4);
  max-width:46rem;
}
.corredor li{
  position:relative;
  padding-top:var(--s4);
  border-top:1px solid var(--albero);
  font-family:var(--display);
  font-size:1.14rem;font-weight:600;
}
.corredor li::before{
  content:"";position:absolute;top:-5px;left:0;
  width:9px;height:9px;border-radius:50%;
  background:var(--agua);
}
.corredor__nota{
  display:block;
  font-family:var(--texto);
  font-size:.85rem;font-weight:400;
  color:var(--musgo);
  letter-spacing:.02em;
}
.seccion--oscura .corredor li{border-top-color:rgba(230,228,218,.22);color:var(--papel)}
.seccion--oscura .corredor li::before{background:var(--agua-viva)}
.seccion--oscura .corredor__nota{color:rgba(230,228,218,.7)}

/* --- 15. Contacto -------------------------------------------------------- */

.dos{display:grid;grid-template-columns:1fr;gap:var(--s7)}
@media (min-width:900px){
  .dos{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8);align-items:start}
}

.contacto-caja{
  background:var(--papel);
  border:var(--linea);
  border-top:4px solid var(--agua);
  border-radius:var(--r);
  padding:clamp(1.5rem,4vw,2.75rem);
  max-width:34rem;
  box-shadow:0 26px 48px -44px rgba(20,38,28,.8);
}
.contacto-caja p{margin-bottom:var(--s5)}

.canales{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:34rem}
.canales li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s4);
  padding:var(--s4) 0;
  border-top:var(--linea);
}
.canales li:last-child{border-bottom:var(--linea)}
.canales__que{
  flex:0 0 7.5rem;
  font-size:var(--t-etq);font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--musgo);
}
.canales__dato{font-size:1.08rem;font-weight:500;word-break:break-word}
.canales__dato a{text-decoration-color:var(--albero)}

.pendiente{
  display:inline-block;
  font-size:var(--t-s);
  color:var(--musgo);
  background:var(--albero);
  padding:2px 8px;border-radius:2px;
  font-weight:500;
}

/* --- 16. Pie ------------------------------------------------------------- */

.pie{
  background:var(--umbria-hondo);
  color:rgba(230,228,218,.78);
  padding-block:var(--s8) var(--s6);
  font-size:var(--t-s);
}
.pie a{color:rgba(230,228,218,.88);text-decoration-color:rgba(230,228,218,.35)}
.pie a:hover{color:var(--agua-viva)}
.pie .gota::before{background:rgba(230,228,218,.20)}
.pie .gota::after{
  background-image:radial-gradient(circle,var(--agua-viva) 0 1.7px,transparent 2px);
}
.pie .marca__nombre{color:var(--papel)}
.pie .marca__oficio{color:rgba(230,228,218,.6)}
.pie .marca:hover .marca__nombre{color:var(--agua-viva)}

.pie__rejilla{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s6);
  padding-top:var(--s6);
}
.pie h2{
  font-family:var(--texto);
  font-size:var(--t-etq);font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(230,228,218,.6);
  margin:0 0 var(--s4);
}
.pie__lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.pie__lista a{display:inline-flex;align-items:center;min-height:40px;text-decoration:none}
.pie__lista a:hover{text-decoration:underline}
.pie__sobre{margin:var(--s4) 0 0;max-width:34ch;color:rgba(230,228,218,.7)}
.pie__legal{
  margin-top:var(--s7);
  padding-top:var(--s4);
  border-top:var(--linea-clara);
  display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;
  font-size:.85rem;
  color:rgba(230,228,218,.55);
}
.pie__legal p{margin:0;max-width:none}

/* --- 17. Barra móvil ----------------------------------------------------- */

.barra-movil{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:90;
  background:var(--caliza);
  border-top:var(--linea);
  padding:var(--s3) clamp(1rem,4vw,1.5rem);
  padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom,0px));
  box-shadow:0 -10px 30px -24px rgba(20,38,28,.9);
}

/* --- 18. Movimiento ------------------------------------------------------ */

.js .revelar{
  opacity:0;
  transform:translateY(12px);
  transition:opacity 640ms var(--curva),transform 640ms var(--curva);
}
.js .revelar.revelado{opacity:1;transform:none}
.js .revelar[data-retraso="1"]{transition-delay:110ms}
.js .revelar[data-retraso="2"]{transition-delay:220ms}
.js .revelar[data-retraso="3"]{transition-delay:330ms}
.js .revelar[data-retraso="4"]{transition-delay:440ms}

.js .regla{transform:scaleX(0);transition:transform 760ms var(--curva) 140ms}
.js .revelar.revelado .regla{transform:scaleX(1)}

/* La banda usa .revelar sólo para que el observador la vea: quien se mueve
   son los doce meses, uno detrás de otro. El contenedor no se desvanece. */
.js .anyo__meses.revelar{opacity:1;transform:none}
.js .mes{
  opacity:0;
  transform:translateY(10px);
  transition:opacity 520ms ease,transform 520ms var(--curva);
  transition-delay:calc(var(--i,0) * 45ms);
}
.js .anyo__meses.revelado .mes{opacity:1;transform:none}

@keyframes latir{
  0%{box-shadow:0 0 0 0 rgba(201,138,46,.55)}
  70%{box-shadow:0 0 0 10px rgba(201,138,46,0)}
  100%{box-shadow:0 0 0 0 rgba(201,138,46,0)}
}
.js .anyo__meses.revelado .mes--hoy .mes__ahora{
  animation:latir 1500ms ease 780ms 1 both;
}

/* --- 19. Adaptación ------------------------------------------------------ */

@media (min-width:600px){
  .hechos{grid-template-columns:repeat(3,1fr);gap:var(--s5)}
  .corredor{grid-template-columns:repeat(4,1fr)}
  .fases{grid-template-columns:repeat(2,1fr);gap:var(--s6)}
}

@media (min-width:760px){
  .pie__rejilla{grid-template-columns:1.4fr 1fr 1.2fr;gap:var(--s7)}
  .pareja{grid-template-columns:1fr;gap:var(--s6)}
  .servicio{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--s7);align-items:start}
}

@media (min-width:900px){
  .portada__interior{
    grid-template-columns:minmax(0,1.38fr) minmax(0,.85fr);
    gap:clamp(2.5rem,5vw,4.5rem);
    align-items:center;
  }
  .trabajo{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s8);align-items:start}
  .fases{grid-template-columns:repeat(4,1fr);gap:var(--s5)}
  .pareja{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--s7);align-items:center}
  .pareja--invertida .pareja__texto{order:2}
  .pareja--invertida .pareja__fotos{order:1}

  .cabecera__wa{display:inline-flex;min-height:44px;padding:.55rem 1.15rem;font-size:.95rem}
  .barra-movil{display:none}
}

/* La banda del año se pone de pie: doce tallos sobre la línea de tierra.
   Sólo a partir de 1000px, que es donde cada mes tiene sitio para su nombre. */
@media (min-width:1000px){
  .anyo__meses{grid-template-columns:repeat(12,1fr)}
  .mes{
    display:flex;flex-direction:column;align-items:center;
    gap:0;padding:0;border-bottom:0;
  }
  .mes__grafico{
    order:1;
    flex:0 0 auto;
    width:100%;height:168px;
    display:flex;align-items:flex-end;justify-content:center;
    border-bottom:1px solid rgba(230,228,218,.28);
  }
  .mes__tallo{
    width:4px;
    height:calc(22px + (var(--carga) * 1.28px));
    border-radius:3px 3px 0 0;
  }
  .mes__nombre{order:2;flex:0 0 auto;padding-top:var(--s3);font-size:1rem}
  .mes__trabajo{
    order:3;flex:0 0 auto;
    padding:2px .3rem 0;
    min-height:2.6em;
    font-size:.78rem;line-height:1.3;text-align:center;
    color:rgba(230,228,218,.62);
  }
  .mes__ahora{order:4;margin-top:var(--s2)}
  .mes--hoy .mes__tallo{width:8px}
  .anyo__pie{margin-top:var(--s5)}
}

@media (max-width:899px){
  body{padding-bottom:96px}
}

/* --- 20. Movimiento reducido --------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
  }
  .js .revelar,
  .js .mes{opacity:1 !important;transform:none !important}
  .js .regla{transform:none !important}
}