/* =========================================================================
   Gustavo Pozzo Garden — hoja de estilo única
   Orden: 1 Fuentes · 2 Tokens · 3 Reset · 4 Tipografía · 5 Utilidades
          6 Botones · 7 Header · 8 Hero · 9 Confianza · 10 Separadores
          11 Footer · 12 Movimiento
   ========================================================================= */

/* ---------- 1. Fuentes autoalojadas (sin Google, sin fuga de IPs) -------- */
@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../assets/fonts/schibsted-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../assets/fonts/schibsted-latin-ext.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2. Tokens ---------------------------------------------------- */
:root {
  /* ---- Color: verde dominante con bloques crema, como la referencia ----
     La web vive en verde oscuro y respira en crema, no al reves. El lima
     es el acento: va en los botones y en la palabra destacada del titular.
     Contrastes medidos:
       bone sobre pine 13.4:1 · lima sobre pine 10.4:1 · pine sobre lima 10.4:1
       bone-dim sobre pine 8.4:1 · pine sobre bone 13.9:1
     -------------------------------------------------------------------- */
  --pine:       #1A2619;   /* el campo dominante */
  --pine-deep:  #121C12;   /* mas hondo: velo del hero y pie */
  --pine-soft:  #44523E;   /* texto secundario sobre crema */
  --pine-line:  #33402F;
  --bone:       #F2EFE7;   /* los bloques que respiran */
  --bone-deep:  #E6E1D4;
  --bone-dim:   #BFC4B4;   /* texto secundario sobre verde */
  --lima:       #B8E04C;   /* el acento vivo */
  --lima-deep:  #A3C93F;   /* su version para hover */

  /* Alias del sistema anterior */
  --moss:        var(--pine);
  --moss-deep:   var(--pine-deep);
  --moss-line:   var(--pine-line);
  --paper:       var(--bone);
  --paper-warm:  var(--bone-deep);
  --paper-dim:   var(--bone-dim);
  --clay:        var(--lima);
  --clay-ink:    var(--lima);
  --clay-deep:   var(--lima-deep);
  --sage:        var(--bone-dim);
  --sage-light:  var(--bone-dim);
  --olive:       var(--pine-soft);
  --ink:         var(--pine);
  --ink-soft:    var(--pine-soft);

  /* Tipografía: la serif va en negrita, que es lo que le da el peso */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-display:  clamp(2rem, 0.35rem + 5.6vw, 5.2rem);
  --fs-h2:       clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem);
  --fs-lead:     clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  --fs-body:     1.0625rem;
  --fs-small:    0.875rem;

  --fs-mega:     var(--fs-display);
  --fs-h3:       var(--fs-lead);
  --fs-eyebrow:  var(--fs-small);

  /* Ritmo */
  --space-section: clamp(4.5rem, 3rem + 7vw, 9rem);
  --gutter:        clamp(1.25rem, 0.5rem + 3vw, 4rem);
  --measure:       62ch;
  --max:           1280px;

  /* Tonos que dependen del campo, no de la seccion */
  --texto-2:    var(--pine-soft);        /* texto secundario */
  --linea:      rgba(26, 38, 25, 0.18);  /* separacion, cuando toca */
  --acento:     var(--pine);             /* sobre crema el acento es el verde */

  --radius:      14px;
  --radius-lg:   22px;
  --arch:        200px;

  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);   /* hovers y cambios de color */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);      /* lo que entra: arranca rápido */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);      /* menú móvil y aviso de cookies */
}

/* ---------- 3. Reset mínimo --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  background: var(--bone);
  color: var(--pine);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grano de papel. SVG generado en línea: no pesa ni una petición de red. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
}

/* display:grid o flex ganan a [hidden] si no se fuerza */
[hidden] { display: none !important; }

/* Móvil: sin el destello gris al tocar (cada control tiene su propio estado
   de pulsación) y sin seleccionar el texto de un botón al mantenerlo. */
a, button, summary, label, input[type='range'] { -webkit-tap-highlight-color: transparent; }
.btn, button { -webkit-user-select: none; user-select: none; touch-action: manipulation; }

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

button, input, select, textarea { font: inherit; color: inherit; }

/* Foco visible en todo lo interactivo. Obligatorio para WCAG 2.1 AA. */
:focus-visible {
  outline: 3px solid var(--clay-ink);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-moss :focus-visible { outline-color: var(--paper); }

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10000;
  background: var(--paper);
  color: var(--ink);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  font-size: var(--fs-small);
  font-weight: 500;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---------- 4. Tipografía ------------------------------------------------ */
h1, h2, h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.01em; }

p { text-wrap: pretty; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* El hero no puede llevar .on-moss (su fondo taparía la foto), así que
   entra por su nombre en las reglas de texto sobre verde oscuro. */

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--texto-2);
  max-width: 46ch;
}
.on-moss .lead { color: var(--texto-2); }

/* ---------- 5. Utilidades ------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.on-moss {
  background: var(--pine);
  color: var(--bone);
  --texto-2: var(--bone-dim);
  --linea:   var(--pine-line);
  --acento:  var(--lima);
}

.sprite { position: absolute; }

/* Trazo común de todas las ilustraciones y los iconos. Vive aquí y no en un
   <style> dentro del SVG porque la CSP prohíbe los estilos en línea. */
symbol path,
symbol ellipse,
symbol circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.hero__actions--footer { margin-top: 2rem; }

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

/* ---------- 6. Botones --------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  /* Sin esto, un <button> hereda el gris por defecto del navegador */
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease),
              color 0.2s var(--ease),
              border-color 0.2s var(--ease),
              transform 0.16s var(--ease-out);
}
.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--lima);
  color: var(--pine);
}
.btn--primary:hover { background: var(--lima-deep); }

.btn--ghost {
  background: transparent;
  border-color: var(--bone);
  color: var(--bone);
}
.btn--ghost:hover { background: var(--bone); color: var(--pine); }
.btn--ghost:hover { background: var(--pine); color: var(--bone); }
/* Sobre campo verde se invierte */
.on-moss .btn--ghost, .site-footer .btn--ghost {
  border-color: var(--bone);
  color: var(--bone);
}
.on-moss .btn--ghost:hover, .site-footer .btn--ghost:hover {
  background: var(--bone); color: var(--pine);
}
.btn--outline { border-color: var(--pine); color: var(--pine); }
.btn--outline:hover { background: var(--pine); color: var(--bone); }

.btn__icon { width: 18px; height: 18px; flex: none; }

/* ---------- 7. Header ---------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 0.9rem;
  color: var(--bone);
  /* Sin animar el padding: movería el layout en cada scroll. Solo el color. */
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Al bajar, el header se vuelve papel para no comerse el contenido */
.site-header.is-stuck {
  background: var(--bone-deep);   /* un paso de tono separa mejor que una raya */
  color: var(--pine);
}

/* Con el menú abierto, el header se aparta: nada de banda papel sobre el verde */
.site-header.has-open-nav {
  background: transparent;
  color: var(--bone);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex: none;
}
.logo__mark {
  width: 26px;
  height: 26px;
  flex: none;
  color: currentColor;
}

.logo__text {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.1rem); }
.nav__list {
  display: flex;
  gap: clamp(1rem, 2vw, 2.1rem);
  list-style: none;
  padding: 0;
}
.nav__link {
  position: relative;
  font-size: 1rem;
  text-decoration: none;
  padding-block: 0.25rem;
}
.nav__link:hover::after,
.nav__link:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.nav__cta { padding: 0.72rem 1.3rem; font-size: 1rem; }

/* Botón hamburguesa: solo móvil */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid currentColor;
  border-radius: 999px;
  cursor: pointer;
}
.nav-toggle__bars { position: relative; width: 17px; height: 11px; }
.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%; height: 1.5px;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 50%; }
.nav-toggle__bars span:nth-child(3) { top: 100%; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }

  /* El menu cubre la pantalla, asi que el logo y el boton de cerrar
     tienen que quedar por encima de el. */
  .logo, .nav-toggle { position: relative; z-index: 2; }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: 6rem var(--gutter) 3rem;
    background: var(--moss);
    color: var(--paper);
    transform: translateY(-100%);
    transition: transform 0.45s var(--ease-drawer);
    overflow-y: auto;
  }
  .nav.is-open { transform: translateY(0); }
  .nav__list { flex-direction: column; gap: 0; width: 100%; }
  .nav__list li { padding-block: 0.35rem; }   /* espacio en vez de raya */
  .nav__link {
    display: block;
    padding-block: 1.15rem;
    font-family: var(--font-display);
    font-size: 1.8rem;
  }
    .nav__cta { margin-top: 2rem; background: var(--lima); color: var(--pine); }
}

/* Ningun adorno que asome por un borde puede alargar la pagina */
.hero, .why, .trust, .site-footer { overflow: clip; }

/* ---------- 8. Hero ------------------------------------------------------
   Foto a sangre con el texto encima y centrado, como la referencia. El velo
   es de un solo tono: lo justo para que se lea sobre cualquier foto.
   ------------------------------------------------------------------------ */
.hero {
  --texto-2: var(--bone-dim);
  --acento:  var(--lima);
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--bone);
  padding-block: clamp(7rem, 16vh, 10rem) clamp(3rem, 8vh, 5rem);
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Velo plano, de un solo tono: lo que hace falta para que el texto se lea
   sobre cualquier foto, sin el degradado de rigor. */
.hero__veil { position: absolute; inset: 0; z-index: -1; background: rgba(18, 28, 18, 0.58); }

.hero__content { position: relative; max-width: 1000px; }

.hero h1 {
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.hero__lead {
  margin: clamp(1rem, 2vw, 1.5rem) auto 0;
  max-width: 56ch;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--texto-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

@media (max-width: 860px) {
  .hero { min-height: 92svh; padding-block: clamp(6rem, 15vh, 8rem) clamp(2.5rem, 7vh, 4rem); }
  .hero__lead { max-width: none; }
}

/* ---------- 9. Franja de confianza --------------------------------------- */
.trust {
  position: relative;
  background: var(--moss);
  color: var(--paper);
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--space-section);
  overflow: hidden;
}
.trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(1.75rem, 3vw, 3rem);
  position: relative;
  z-index: 1;
}
.trust__item { padding-top: 1.1rem; }
.trust__value {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}
.trust__label {
  margin-top: 0.5rem;
  font-size: var(--fs-small);
  color: var(--texto-2);
  max-width: 24ch;
}

/* Agave de fondo, muy tenue */
.trust__agave {
  position: absolute;
  right: -3%;
  bottom: -22%;
  width: clamp(200px, 26vw, 400px);
  color: var(--sage);
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
}

/* Bloque de muestra temporal de la Fase 1 */
.sample {
  padding-bottom: var(--space-section);
  text-align: center;
}
.sample__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: 2.5rem;
  align-items: end;
  justify-items: center;
}
.sample__art { width: clamp(70px, 9vw, 110px); color: var(--moss); }
.sample__name {
  margin-top: 0.9rem;
  font-size: var(--fs-eyebrow);
  color: var(--olive);
}

/* ---------- 11. Footer --------------------------------------------------- */
.site-footer {
  --texto-2: var(--bone-dim);
  --acento:  var(--lima);
  position: relative;
  background: var(--moss-deep);
  color: var(--paper);
  padding-block: var(--space-section) 2.5rem;
  overflow: hidden;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  position: relative;
  z-index: 1;
}
.site-footer h2 {
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
  max-width: 18ch;
}
/* Hasta escritorio, la frase de cierre ocupa su propia fila: en una columna
   estrecha se partía en cinco líneas. */
@media (max-width: 999px) {
  .site-footer__grid > :first-child { grid-column: 1 / -1; }
}
.footer-col h3 {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  color: var(--sage-light);
  margin-bottom: 1.1rem;
}
.footer-list { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.footer-list a, .footer-list span { color: var(--texto-2); text-decoration: none; }
.footer-list a:hover { color: var(--paper); text-decoration: underline; }

/* El nombre vuelve al final, a todo lo ancho: el cierre de la página */
.site-footer__name {
  position: relative;
  z-index: 1;
  margin-top: clamp(3.5rem, 7vw, 6.5rem);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: min(8.4vw, var(--fs-mega));
  line-height: 0.9;
  letter-spacing: -0.035em;
  white-space: nowrap;
  color: var(--sage-light);
}
.site-footer__legal {
  position: relative;
  z-index: 1;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-small);
  color: var(--texto-2);
}
.legal-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; list-style: none; padding: 0; }

/* Buganvilla trepando por el footer */
.site-footer__vine {
  position: absolute;
  left: -4%;
  top: -8%;
  width: clamp(180px, 22vw, 340px);
  color: var(--sage);
  opacity: 0.16;
  z-index: 0;
  pointer-events: none;
}

/* ---------- 12. Movimiento ----------------------------------------------- */
/* Cada bloque entra una vez al llegar a él: sube 20px y aparece en medio
   segundo. En títulos y proyectos no entra el bloque entero de golpe, sino
   sus partes por turnos (título, texto, foto), separadas 80ms. */
.reveal,
.section__head.reveal > *,
.project.reveal > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.section__head.reveal,
.project.reveal { opacity: 1; transform: none; }
.reveal.is-in,
.section__head.reveal.is-in > *,
.project.reveal.is-in > * { opacity: 1; transform: none; }

.section__head.reveal > :nth-child(2),
.project.reveal > :nth-child(2) { --reveal-delay: 80ms; }
.section__head.reveal > :nth-child(3) { --reveal-delay: 160ms; }

/* Retardos escalonados. Van como atributo y no como style="" para que la
   Content-Security-Policy pueda prohibir los estilos en línea sin excepciones. */
[data-d='d1'] { --reveal-delay: 70ms; }
[data-d='d2'] { --reveal-delay: 140ms; }
[data-d='d3'] { --reveal-delay: 210ms; }
[data-d='d4'] { --reveal-delay: 280ms; }
[data-d='d5'] { --reveal-delay: 350ms; }

/* La foto de portada se asienta al cargar: entra un 6% más grande y vuelve a
   su sitio. Solo transform, así que no retrasa la carga de la imagen. */
.hero__media img { animation: hero-settle 1.8s var(--ease-out) both; }
@keyframes hero-settle { from { transform: scale(1.05); } }

/* Las fotos responden al raton: un acercamiento minimo, nada de zoom de
   catalogo. El recorte lo contiene la figura. */
.tira figure { overflow: clip; }
.tira img { transition: transform 0.7s var(--ease-out); }
@media (hover: hover) {
  .tira figure:hover img { transform: scale(1.03); }
}

/* Si el usuario pide menos movimiento, se lo damos: nada se mueve. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal,
  .section__head.reveal > *,
  .project.reveal > * { opacity: 1; transform: none; }
}

/* ---------- 13. Placeholders de foto ------------------------------------- */
/* Mientras no haya fotos reales, el hueco se ve intencionado y etiquetado.
   Al sustituirlo, basta con borrar el div .ph y poner el <img>. */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 220px;
  background-color: var(--pine);
  color: var(--texto-2);
  text-align: center;
  padding: 1.5rem;
}
.ph__label {
  border: 1px dashed currentColor;
  border-radius: 999px;
  padding: 0.65rem 1.2rem;
  font-size: var(--fs-eyebrow);
}
/* En el hero la etiqueta se va arriba a la derecha, lejos del titular */
.ph--hero {
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: clamp(6.5rem, 12vh, 9rem);
  padding-right: var(--gutter);
}
/* Por debajo de 900px el titular ocupa toda la altura y la etiqueta se le
   monta encima. Como es andamiaje que desaparece al poner la foto real,
   se oculta: el comentario del HTML sigue diciendo qué foto va aquí. */
@media (max-width: 900px) {
  .ph--hero .ph__label { display: none; }
}

/* =========================================================================
   FASE 2 — secciones de contenido
   14 Estructura · 15 Servicios · 16 Proyectos · 17 Proceso · 18 Por qué
   19 Opiniones · 20 FAQ · 21 Contacto · 22 Acceso rápido móvil
   ========================================================================= */

/* ---------- 14. Estructura de sección ------------------------------------ */
:root { --danger: #8F2F22; --earth: #4A4136; }

.section { padding-block: var(--space-section); }
.section--warm { background: var(--paper-warm); }

/* El header es fijo: las anclas necesitan margen o el titular queda debajo */
section[id], footer[id] { scroll-margin-top: 96px; }

.wrap--narrow { max-width: 900px; }

/* Encabezados alineados a la izquierda, como el resto del texto: un solo
   borde izquierdo para toda la página. */
.section__head {
  max-width: 60ch;
  margin-bottom: clamp(2.75rem, 2rem + 3vw, 4.5rem);
}
.section__head .lead { margin-top: 1.25rem; }

/* ---------- 15. Servicios ------------------------------------------------ */
/* Una lista, no una rejilla de tarjetas: en escritorio el título se queda
   quieto a la izquierda mientras pasa la lista a la derecha. Lo usan
   servicios y preguntas frecuentes. */
.split { display: grid; gap: 0; }
@media (min-width: 1000px) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(3rem, 6vw, 7rem);
    align-items: start;
  }
  .split > .section__head { position: sticky; top: 7rem; margin-bottom: 0; }
}


/* Un bloque simple: el icono va en linea dentro del titulo, no en su
   propia columna. Antes esta rejilla mandaba el parrafo a una columna
   aparte y lo partia en palabras sueltas. */
.service h3 { margin-bottom: 0.6rem; }
.service__icon {
  width: 22px;
  height: 22px;
  color: var(--acento);
  display: inline-block;
  vertical-align: -3px;
  margin-right: 0.5rem;
}

.service h3 { font-size: var(--fs-lead); line-height: 1.15; }
.service p { max-width: 52ch; }

/* ---------- 16. Proyectos y comparador ----------------------------------- */
.projects { display: grid; gap: clamp(3.5rem, 2rem + 6vw, 7rem); }

.project { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: center; }
@media (min-width: 900px) {
  .project { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.85fr); }
  .project--flip .project__media { order: 2; }
}
.project__info h3 { margin-bottom: 0.5rem; }
.project__meta { font-size: var(--fs-small); color: var(--texto-2); margin-bottom: 1rem; }

.project__tags {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.4rem;
}
.project__tags li {
  font-size: var(--fs-small);
  color: var(--texto-2);
}
/* Separadas por un punto, no por cajas */
.project__tags li + li::before { content: '· '; }

.compare__frame {
  --pos: 50%;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--moss-deep);
}
.compare__side { position: absolute; inset: 0; }
/* La capa "antes" se recorta hasta donde está el tirador */
.compare__side--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
/* Cada etiqueta a su lado, o se pisan justo en el tirador */
.compare__side .ph {
  min-height: 0;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 1.25rem;
}
.compare__side--after .ph { justify-content: flex-end; }
.compare__side .ph__label { border-radius: 10px; }
@media (min-width: 700px) { .compare__side .ph__label { max-width: 46%; } }
.ph--before { background-color: var(--earth); }

/* Fotos de proyecto: llenan su marco 4:3 sin deformarse. Las del comparador
   no reciben el puntero, que es del range invisible que tienen encima. */
.compare__side img,
.project__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project__photo img { transition: transform 0.6s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .project:hover .project__photo img { transform: scale(1.03); }
}
.project__extra {
  margin: 2rem 0 0;
  max-width: 300px;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--moss-deep);
}
.project__extra img { width: 100%; height: 100%; object-fit: cover; }
.compare__side img { pointer-events: none; user-select: none; -webkit-user-select: none; }
.project__photo {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--moss-deep);
}

.compare__tag {
  position: absolute;
  top: 1rem;
  z-index: 3;
  background: rgba(28, 26, 23, 0.6);
  color: var(--paper);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: var(--fs-eyebrow);
}
.compare__tag--before { left: 1rem; }
.compare__tag--after { right: 1rem; }

/* El control real es un <input type="range"> invisible que ocupa todo el
   marco: se arrastra con el ratón, con el dedo y con las flechas del teclado. */
.compare__range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.compare__range::-webkit-slider-thumb { -webkit-appearance: none; width: 56px; height: 100%; }
.compare__range::-moz-range-thumb { width: 56px; height: 100%; border: 0; }

.compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 3;
  width: 2px;
  background: var(--paper);
  transform: translateX(-1px);
  pointer-events: none;
}
.compare__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 2px 10px rgba(28, 26, 23, 0.25);   /* taste-skill-ignore: el tirador flota sobre la foto */
}
/* Dos flechitas dentro del tirador */
.compare__grip::before,
.compare__grip::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1.6px solid var(--moss);
  border-right: 1.6px solid var(--moss);
}
.compare__grip::before { left: 12px; transform: translateY(-50%) rotate(-135deg); }
.compare__grip::after { right: 12px; transform: translateY(-50%) rotate(45deg); }

.compare__range:focus-visible + .compare__handle .compare__grip {
  outline: 3px solid var(--clay-ink);
  outline-offset: 3px;
}

/* ---------- 17. Cómo trabajamos ------------------------------------------ */
/* Cuatro pasos en cuatro columnas iguales no cuentan que hay un orden.
   En escalera, el ojo baja con ellos. */
.steps {
  list-style: none;
  padding: 0;
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
@media (min-width: 900px) {
  .steps { align-items: start; }
  .steps > :nth-child(2) { margin-top: 3.5rem; }
  .steps > :nth-child(3) { margin-top: 7rem; }
  .steps > :nth-child(4) { margin-top: 10.5rem; }
}
.step h3 { margin-bottom: 0.55rem; }

.step__media {
  margin: 0 0 1.25rem;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--moss);
}
.step__media img { width: 100%; height: 100%; object-fit: cover; }
/* El paso sin foto lleva el olivo de la marca: es el plano, no la obra */
.step__media--drawn { display: grid; place-items: center; color: var(--sage-light); }
.step__media--drawn svg { width: 46%; }
/* En móvil, foto pequeña al lado del texto: cuatro fotos altas seguidas
   serían cuatro pantallas de scroll */
@media (max-width: 699px) {
  .step { display: grid; grid-template-columns: 34% minmax(0, 1fr); column-gap: 1.1rem; align-items: start; }
  .step__media { grid-row: span 2; margin: 0; border-radius: var(--radius); }
}

/* ---------- 18. Por qué nosotros ----------------------------------------- */
.why { position: relative; overflow: hidden; }
.why__grid { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 5rem); align-items: center; }
@media (min-width: 900px) { .why__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.why__media {
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--moss-deep);
}
.why__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) { .why__media { aspect-ratio: 4 / 3; } }
.reasons {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3.25rem);
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
/* Dos columnas de distinto ancho y en distinto plano, no un 2x2 */
@media (min-width: 900px) {
  .reasons {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(3rem, 7vw, 8rem);
    align-items: start;
  }
  .reasons > :nth-child(2) { margin-top: 4rem; }
  .reasons > :nth-child(3) { margin-top: -1rem; }
  .reasons > :nth-child(4) { margin-top: 3rem; }
}
.reason h3 { margin-bottom: 0.55rem; }
.reason p { color: var(--texto-2); }

/* ---------- 18c. Este mes en tu jardín ----------------------------------- */
.mes .wrap { position: relative; }
.mes__lista { display: grid; gap: clamp(3rem, 2rem + 3vw, 4.5rem); }
.mes__item { display: grid; gap: 1.5rem 3rem; align-items: start; }
@media (min-width: 900px) { .mes__item { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.mes__nombre {
  font-size: var(--fs-mega);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--moss);
}
.mes__tareas { display: grid; gap: 1.6rem; margin: 0; }
@media (min-width: 700px) { .mes__tareas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.mes__tareas dt { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--acento); margin-bottom: 0.4rem; }
.mes__tareas dd { margin: 0; }

/* Con JS se ve solo el mes actual y aparecen las flechas */
.js .mes__item:not(.is-current) { display: none; }
.mes__nav { display: flex; gap: 0.6rem; margin-bottom: 2rem; }
.mes__btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--paper-warm);
  color: var(--moss);
  font-size: 1.25rem;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.16s var(--ease-out);
}
.mes__btn:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .mes__btn:hover { background: var(--moss); color: var(--paper); } }
.js .mes__item.is-current { animation: mes-in 0.35s var(--ease-out); }
@keyframes mes-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- 19. Opiniones ------------------------------------------------ */
.reviews {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
.review {
  margin: 0;
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  border-radius: var(--radius-lg);
  background: var(--paper-warm);
}
.review p {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.45;
}
.review cite { font-style: normal; font-size: var(--fs-small); color: var(--olive); }
.review footer { margin-top: 1.25rem; }

/* Hueco a la espera de reseñas de verdad: se ve que falta algo, a propósito */
.review--empty {
  background: transparent;
  border: 1px dashed rgba(47, 62, 44, 0.35);
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--olive);
}
.review--empty p { font-size: 1rem; letter-spacing: 0.04em; }

.reviews__note {
  margin-top: 1.75rem;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--texto-2);
}

/* ---------- 20. Preguntas frecuentes ------------------------------------- */
/* Sin rayas: cada pregunta se separa por aire, y la abierta se distingue
   por el tono del fondo. */
.faq { display: grid; gap: 0.35rem; }
.faq__item { border-radius: var(--radius); padding-inline: 1.1rem; margin-inline: -1.1rem; transition: background-color 0.2s var(--ease); }
.faq__item[open] { background: var(--paper); }

.faq__item summary {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding-block: 1.35rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  font-weight: 500;
  line-height: 1.3;
}
.faq__item summary::-webkit-details-marker { display: none; }

/* El signo + dibujado con dos fondos; al abrir se queda solo la raya */
/* El signo + / −, dos barras solidas en los pseudo-elementos del summary.
   Antes se dibujaba con degradados, que es justo lo que no toca. */
.faq__item summary { position: relative; padding-right: 2.75rem; }
.faq__item summary::before,
.faq__item summary::after {
  content: '';
  position: absolute;
  right: 0;
  background: var(--acento);
}
.faq__item summary::before {
  top: calc(1.35rem + 0.85em);
  width: 18px;
  height: 2px;
}
.faq__item summary::after {
  top: calc(1.35rem + 0.85em - 8px);
  right: 8px;
  width: 2px;
  height: 18px;
  transition: transform 0.25s var(--ease);
}
.faq__item[open] summary::after { transform: scaleY(0); }
.faq__body { padding-bottom: 1.5rem; max-width: 62ch; color: var(--texto-2); }

/* ---------- 21. Contacto -------------------------------------------------- */
.contact__grid { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
@media (min-width: 960px) {
  .contact__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); }
}

.field { display: grid; gap: 0.45rem; margin-bottom: 1.25rem; }
.field > label { font-size: var(--fs-small); font-weight: 500; }
.req { color: var(--acento); }
.opt { color: var(--texto-2); font-weight: 400; }

.field-row { display: grid; gap: 1.25rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

input[type='text'], input[type='tel'], input[type='email'], input[type='number'],
select, textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(47, 62, 44, 0.32);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 1rem;
  transition: border-color 0.2s var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: rgba(47, 62, 44, 0.55); }
textarea { resize: vertical; min-height: 130px; }
::placeholder { color: rgba(85, 81, 74, 0.7); }

[aria-invalid='true'] { border-color: var(--danger); }
.field__error { font-size: var(--fs-small); color: var(--danger); }

.check { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 1rem; }
.check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.15rem;
  accent-color: var(--acento);
}
.check label { font-size: var(--fs-small); line-height: 1.5; }

/* Honeypot: fuera de la vista y fuera del recorrido con el tabulador */
.hp {   /* taste-skill-ignore: el honeypot invisible, no una linea */
  position: absolute;
  width: 1px;
  height: 1px;   /* taste-skill-ignore: es el honeypot invisible, no una linea */
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.form__submit { margin-top: 0.85rem; }
.form__status { margin-top: 1rem; font-size: var(--fs-small); }
.form__status.is-error { color: var(--danger); }
.form__status.is-ok { color: var(--olive); }

.privacy-layer {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  font-size: var(--fs-small);
  color: var(--texto-2);
}
.privacy-layer h3 {
  margin-bottom: 1rem;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  color: var(--olive);
}
.privacy-layer dl { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem 1.5rem; }
.privacy-layer dt { font-weight: 500; color: var(--ink); }
.privacy-layer dd { margin: 0; }
@media (max-width: 620px) {
  .privacy-layer dl { grid-template-columns: 1fr; gap: 0; }
  .privacy-layer dd { margin-bottom: 0.9rem; }
}

.contact__card {
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  border-radius: var(--radius-lg);
  background: var(--paper-warm);
}
.contact__card h3 { margin-bottom: 1.25rem; }
.contact__wa { width: 100%; justify-content: center; margin-bottom: 1.75rem; }
.contact__list { list-style: none; padding: 0; display: grid; gap: 1.15rem; }
.contact__label {
  display: block;
  margin-bottom: 0.2rem;
  font-size: var(--fs-eyebrow);
  color: var(--olive);
}

/* ---------- 22. Acceso rápido en móvil ----------------------------------- */
.quick-actions {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 90;
  display: none;
  flex-direction: column;
  gap: 0.6rem;
}
@media (max-width: 860px) { .quick-actions { display: flex; } }

.quick-actions__btn {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  color: var(--paper);
  box-shadow: 0 6px 18px rgba(28, 26, 23, 0.3);   /* taste-skill-ignore: boton flotante de movil */
  transition: transform 0.2s var(--ease);
}
.quick-actions__btn:active { transform: scale(0.94); }
.quick-actions__btn svg { width: 23px; height: 23px; }
.quick-actions__btn--call { background: var(--moss); }
.quick-actions__btn--wa { background: var(--clay-ink); }

/* Con el menú o el aviso de cookies abiertos, estorban */
body.nav-open .quick-actions,
body.cc-banner-open .quick-actions { display: none; }

/* =========================================================================
   FASE 3 — páginas legales y consentimiento de cookies
   23 Páginas legales · 24 Aviso de cookies · 25 Panel de configuración
   ========================================================================= */

/* ---------- 23. Páginas legales ------------------------------------------ */
/* Sin hero detrás, el header va sólido desde el primer píxel */
.site-header--solid {
  background: var(--paper);
  color: var(--ink);
  padding-block: 0.9rem;
}

.legal { padding-block: clamp(7.5rem, 13vh, 9.5rem) var(--space-section); }
.legal h1 { font-size: clamp(2.4rem, 1.8rem + 2.6vw, 3.6rem); margin-block: 1rem 1.5rem; }
.legal__intro { font-size: var(--fs-lead); line-height: 1.6; color: var(--texto-2); max-width: 60ch; }
.legal__updated {
  margin-top: 1.5rem;
  padding-bottom: 2.5rem;
  font-size: var(--fs-small);
  color: var(--texto-2);
}

.legal__section { padding-top: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); }
.legal__section h2 { font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem); margin-bottom: 1.1rem; }
.legal__section p { margin-bottom: 1rem; max-width: 68ch; }
.legal__section ul { margin: 0 0 1rem; padding-left: 1.3rem; max-width: 68ch; }
.legal__section li { margin-bottom: 0.5rem; }
.legal__section a { color: var(--clay-deep); }

.legal__data {
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr;
  gap: 0.7rem 1.75rem;
  margin-bottom: 1rem;
}
.legal__data dt { font-weight: 500; }
.legal__data dd { margin: 0; color: var(--texto-2); }
@media (max-width: 620px) {
  .legal__data { grid-template-columns: 1fr; gap: 0.15rem; }
  .legal__data dd { margin-bottom: 1rem; }
}

/* Las tablas anchas se desplazan dentro de su caja, nunca empujan la página */
.table-scroll { overflow-x: auto; margin-bottom: 1.25rem; }
.legal__table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: var(--fs-small); }
.legal__table th, .legal__table td {
  border-bottom: 1px solid var(--linea);
  padding: 0.85rem 1rem 0.85rem 0;
  text-align: left;
  vertical-align: top;
}
.legal__table th { font-weight: 500; color: var(--ink); }
.legal__table td { color: var(--texto-2); }
.legal__table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  color: var(--ink);
}

/* Los huecos por rellenar se ven a la legua, a propósito.
   .is-placeholder la pone tools/brand.mjs cuando el valor sigue sin rellenar. */
/* Con el selector a secas, la regla de enlaces del pie le ganaba por
   especificidad y el hueco salia crema sobre crema. */
.ph-inline,
.is-placeholder,
a.is-placeholder,
.footer-list span.is-placeholder {
  background: var(--bone-deep);
  color: var(--pine);
  box-shadow: inset 0 -2px 0 var(--pine-soft);   /* taste-skill-ignore: marca de hueco sin rellenar, no decoracion */
  border-radius: 0;
  padding: 0.05em 0.35em;
}

/* Un botón que parece un enlace: para "Configurar cookies" en el pie */
.linklike {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.legal-links .linklike { font-size: var(--fs-small); color: var(--texto-2); }
.legal-links .linklike:hover { color: var(--paper); }

.site-footer--slim { padding-block: 2.25rem; }
.site-footer--slim .site-footer__legal { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- 24. Aviso de cookies ----------------------------------------- */
/* Es una franja, no un muro: no atrapa el foco ni bloquea la lectura.
   Ignorarla no acepta nada, porque sin decisión no se carga nada. */
.cc {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 200;
  width: min(760px, calc(100vw - 2rem));
  transform: translate(-50%, calc(100% + 2rem));
  background: var(--paper);
  border: 1px solid rgba(47, 62, 44, 0.25);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 40px rgba(28, 26, 23, 0.22);   /* taste-skill-ignore: aviso de cookies: es un overlay */
  opacity: 0;
  visibility: hidden;
  transition: transform 0.45s var(--ease-drawer), opacity 0.3s var(--ease-out), visibility 0.3s;
}
.cc.is-visible { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

.cc__inner {
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 0.75rem + 0.7vw, 1.25rem) clamp(1.1rem, 1rem + 0.7vw, 1.4rem);
}
@media (min-width: 820px) {
  .cc__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; }
}
.cc__title {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  color: var(--olive);
  margin-bottom: 0.5rem;
}
.cc__text p { font-size: var(--fs-small); line-height: 1.55; color: var(--texto-2); }
.cc__text a { color: var(--clay-deep); }

/* Rejilla en vez de flex: así los tres botones miden EXACTAMENTE lo mismo
   en cualquier ancho. Con flex, el que se quedaba solo en la última fila
   salía más ancho, y eso ya es darle más peso que a los otros dos. */
.cc__actions { display: grid; gap: 0.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* En móvil el aviso no puede comerse media pantalla: botones en una fila */
@media (max-width: 559px) {
  .cc__inner { gap: 0.9rem; padding: 1.1rem 1.1rem 1rem; }
  .cc__btn { padding-inline: 0.5rem; }
}

/* Los tres botones son IDÉNTICOS. Ninguno destaca sobre otro: es el
   requisito de la guía de la AEPD y también lo honesto. */
.cc__btn {
  padding: 0.6rem 1rem;
  font-size: var(--fs-small);
  border: 1px solid var(--pine);
  border-radius: 0;
  background: transparent;
  color: var(--pine);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.16s var(--ease-out);
}
.cc__btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .cc__btn:hover { background: var(--moss); color: var(--paper); }
}

/* ---------- 25. Panel de configuración ----------------------------------- */
.cc-modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1rem; }
.cc-modal__backdrop { position: absolute; inset: 0; background: rgba(28, 26, 23, 0.55); }
.cc-modal__dialog {
  position: relative;
  width: min(560px, 100%);
  max-height: min(86vh, 720px);
  overflow-y: auto;
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(28, 26, 23, 0.35);   /* taste-skill-ignore: dialogo: es un overlay */
}
.cc-modal__dialog h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.cc-modal__intro { margin-top: 0.75rem; font-size: var(--fs-small); color: var(--texto-2); }

.cc-cats { list-style: none; padding: 0; margin: 1.75rem 0; display: grid; gap: 1.25rem; }
.cc-cat { padding-top: 1.1rem; }
.cc-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cc-cat__name { font-weight: 500; }
.cc-cat__always { font-size: var(--fs-small); color: var(--olive); }
.cc-cat__switch { width: 22px; height: 22px; flex: none; accent-color: var(--acento); cursor: pointer; }
.cc-cat__desc { margin-top: 0.45rem; font-size: var(--fs-small); line-height: 1.5; color: var(--texto-2); }
.cc-cat__desc em { font-style: normal; color: var(--olive); }

body.cc-open,
body.nav-open { overflow: hidden; }

/* ---------- 26. Páginas cortas: gracias y 404 ---------------------------- */
.legal--centrada {
  display: grid;
  place-items: center;
  min-height: 72svh;
  text-align: center;
}
.legal--centrada .legal__intro { margin-inline: auto; }
.legal--centrada .legal__updated { display: none; }
.legal__section--acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* =========================================================================
   27. El cursor es una hoja
   Se sustituye solo la flecha por defecto. Los enlaces, los botones y los
   campos conservan su cursor de siempre: la manita es la señal universal de
   "esto se pulsa" y quitarla por estética sería cambiar un detalle bonito
   por un problema de uso, sobre todo para gente mayor.
   Los selectores de zona van en :where() para no ganarle en especificidad a
   las reglas de abajo, que son las que protegen esas señales.
   ========================================================================= */
body {
  cursor: url('../assets/cursor-hoja.png') 3 3, auto;
  cursor: image-set(
    url('../assets/cursor-hoja.png') 1x,
    url('../assets/cursor-hoja@2x.png') 2x) 3 3, auto;
}

/* Sobre verde, la hoja se invierte para que siga viéndose */
:where(.hero, .on-moss, .site-footer, .trust, .why) {
  cursor: url('../assets/cursor-hoja-clara.png') 3 3, auto;
  cursor: image-set(
    url('../assets/cursor-hoja-clara.png') 1x,
    url('../assets/cursor-hoja-clara@2x.png') 2x) 3 3, auto;
}

a, button, summary, label, [role='button'] { cursor: pointer; }
input:not([type='range']), textarea, select { cursor: auto; }

/* En modo de alto contraste de Windows la gente necesita el cursor del
   sistema, que suele venir agrandado. Ahí la hoja sobra. */
@media (forced-colors: active) {
  body,
  :where(.hero, .on-moss, .site-footer, .trust, .why) { cursor: auto; }
}


/* =========================================================================
   28. La tira de trabajos
   Cuatro fotos grandes a sangre, sin una palabra encima. Antes de esto la
   pagina tenia nueve imagenes repartidas en doce pantallas de alto: limpia,
   si, pero vacia. Una pagina a la que le quitas el adorno y no le pones
   nada a cambio se lee basica, que es justo lo que pasaba.
   ========================================================================= */
.tira {
  --texto-2: var(--bone-dim);
  --acento:  var(--lima);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.5rem, 1vw, 0.85rem);
  padding: clamp(0.5rem, 1vw, 0.85rem);
  background: var(--pine);
}
.tira figure { border-radius: var(--radius); }
@media (min-width: 900px) { .tira { grid-template-columns: repeat(4, 1fr); } }

.tira figure { margin: 0; position: relative; }
.tira img {
  width: 100%;
  height: clamp(260px, 42vh, 460px);
  object-fit: cover;
  display: block;
}
/* Cuatro fotos en cuatro columnas iguales volvian a ser una rejilla de
   clones; con la primera a doble ancho quedaba un hueco verde al final.
   Seis columnas repartidas 3+3 y 2+4 llenan las dos filas sin sobras. */
@media (min-width: 900px) {
  .tira { grid-template-columns: repeat(6, 1fr); }
  .tira > :nth-child(1) { grid-column: span 3; }
  .tira > :nth-child(2) { grid-column: span 3; }
  .tira > :nth-child(3) { grid-column: span 2; }
  .tira > :nth-child(4) { grid-column: span 4; }
  .tira > :nth-child(-n+2) img { height: clamp(300px, 44vh, 480px); }
  .tira > :nth-child(n+3) img { height: clamp(220px, 32vh, 360px); }
}
.tira figcaption {
  padding: 0.7rem 1rem 1rem;
  font-size: var(--fs-small);
  color: var(--texto-2);
}


/* =========================================================================
   29. Dirección Hartell
   La palabra que lleva el peso del titular va en lima. Sobre crema se
   oscurece para que siga leyendose.
   ========================================================================= */
.marca { color: var(--acento); font-style: italic; }



/* =========================================================================
   30. Servicios en tarjetas, dentro del campo verde
   Tres con foto, que son los que venden, y los otros cuatro en lista. La
   referencia hace justo esto: el servicio se enseña, no se describe.
   ========================================================================= */
.cards {
  list-style: none;
  padding: 0;
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
}
.card {
  background: rgba(242, 239, 231, 0.05);
  border-radius: var(--radius-lg);
  overflow: clip;
  display: flex;
  flex-direction: column;
}
.card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease-out);
}
@media (hover: hover) { .card:hover img { transform: scale(1.04); } }
.card__texto { padding: clamp(1.1rem, 2vw, 1.6rem); }
.card h3 { font-size: var(--fs-lead); margin-bottom: 0.5rem; }
.card p { color: var(--texto-2); font-size: 0.95rem; }

/* Los otros cuatro: lista limpia, sin caja */
.mas {
  list-style: none;
  padding: 0;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.mas__item h3 { font-size: var(--fs-lead); margin-bottom: 0.45rem; }
.mas__item p { color: var(--texto-2); font-size: 0.95rem; }
.mas .service__icon { color: var(--acento); }