/* =============================================================
   APIASTUR — hoja de estilo única
   1. Tokens · 2. Reset · 3. Utilidades · 4. Tipografía
   5. Componentes · 6. Secciones · 7. Efectos · 8. Responsive
   9. Reduced motion
   ============================================================= */

/* =============================================================
   0. FUENTES (autoalojadas)
   Se sirven desde assets/fonts/ en vez de Google Fonts: quita dos
   conexiones a terceros del camino crítico y deja el sitio sin
   ninguna petición externa. Los tres ficheros «normal» son
   variables, así que un solo archivo cubre todos los pesos.
   Licencia SIL Open Font License 1.1 (uso comercial permitido).
   ============================================================= */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/manrope-normal-latin.woff2') format('woff2');
  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: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/manrope-normal-latin-ext.woff2') format('woff2');
  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: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-normal-latin.woff2') format('woff2');
  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: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-normal-latin-ext.woff2') format('woff2');
  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: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-italic-latin.woff2') format('woff2');
  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: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');
  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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('assets/fonts/jetbrains-mono-normal-latin.woff2') format('woff2');
  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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('assets/fonts/jetbrains-mono-normal-latin-ext.woff2') format('woff2');
  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;
}

/* =============================================================
   1. TOKENS
   ============================================================= */
:root {
  /* Paleta */
  --bg:          #FBF7EF;
  --bg-2:        #F3EADA;
  --bg-3:        #EDE1CC;
  --paper:       #FFFFFF;
  --ink:         #1C1810;
  --ink-soft:    #3A3327;
  /* Oscurecido de #7A6F5C: sobre --bg-2 se quedaba en 4,13:1 y AA pide 4,5.
     Ahora cumple sobre los tres fondos claros (4,57 en el más oscuro). */
  --ink-mute:    #6D6352;
  --honey:       #E8A317;
  --honey-deep:  #96590A;
  --honey-glow:  #FFD166;
  --pine:        #2F4A38;
  --pine-deep:   #1E3125;
  --alert:       #B33A2B;
  --alert-soft:  #D8654F;
  --line:        rgba(28, 24, 16, .12);
  --line-soft:   rgba(28, 24, 16, .07);

  /* Tipografía */
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-h1:   clamp(2.7rem, 7vw, 5.25rem);
  --fs-h2:   clamp(2.05rem, 4.4vw, 3.4rem);
  --fs-h3:   clamp(1.14rem, 1.5vw, 1.35rem);
  --fs-lead: clamp(1.02rem, 1.35vw, 1.17rem);

  /* Espacio */
  --wrap:    1240px;
  --gutter:  clamp(1.25rem, 5vw, 3rem);
  --sec-y:   clamp(4.5rem, 10vw, 9rem);
  --r:       14px;
  --r-lg:    22px;

  /* Movimiento */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-soft:   cubic-bezier(.25, .46, .45, .94);
  --ease-bounce: cubic-bezier(.34, 1.4, .64, 1);

  /* Sombras */
  --sh-sm: 0 1px 2px rgba(28,24,16,.05), 0 4px 14px -6px rgba(28,24,16,.10);
  --sh-md: 0 2px 4px rgba(28,24,16,.04), 0 18px 42px -18px rgba(28,24,16,.20);
  --sh-lg: 0 4px 8px rgba(28,24,16,.05), 0 40px 80px -30px rgba(28,24,16,.28);
  --sh-honey: 0 24px 60px -24px rgba(169, 102, 8, .45);

  /* Hexágono regular de punta arriba */
  --hex: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  --hex-ratio: 1 / 1.1547;
}

/* Patrón de panal, reutilizado en varias secciones */
.comb-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90' viewBox='0 0 52 90'%3E%3Cg fill='none' stroke='%23A96608' stroke-width='1.1'%3E%3Cpath d='M26 -30 L52 -15 L52 15 L26 30 L0 15 L0 -15 Z'/%3E%3Cpath d='M26 60 L52 75 L52 105 L26 120 L0 105 L0 75 Z'/%3E%3Cpath d='M0 15 L26 30 L26 60 L0 75 L-26 60 L-26 30 Z'/%3E%3Cpath d='M52 15 L78 30 L78 60 L52 75 L26 60 L26 30 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 52px 90px;
}

/* =============================================================
   2. RESET & BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; scroll-padding-top: 94px; }

body {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.62;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.04; letter-spacing: -.02em; color: var(--ink); font-weight: 400; }
::selection { background: var(--honey-glow); color: var(--ink); }

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

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .7rem 1.1rem; border-radius: 10px;
  background: var(--ink); color: var(--bg);
  font-weight: 600; font-size: .9rem;
}
.skip-link:focus { top: 1rem; }

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

.kicker {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--honey-deep);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.kicker::before {
  content: "";
  width: 9px; height: 10.4px;
  background: currentColor;
  clip-path: var(--hex);
  flex: none;
}
.kicker--alert { color: var(--honey-glow); }

/* Hexágono con imagen dentro */
.hex {
  position: relative;
  aspect-ratio: var(--hex-ratio);
  clip-path: var(--hex);
  overflow: hidden;
  background: var(--bg-3);
}
.hex > img, .hex > picture, .hex > picture > img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Reveals */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal[data-delay="1"] { transition-delay: .09s; }
.reveal[data-delay="2"] { transition-delay: .18s; }
.reveal[data-delay="3"] { transition-delay: .27s; }
.reveal[data-delay="4"] { transition-delay: .36s; }
.reveal[data-delay="5"] { transition-delay: .45s; }
.js .reveal.is-in { opacity: 1; transform: none; }

/* =============================================================
   4. TIPOGRAFÍA
   ============================================================= */
.sec-title {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: -.025em;
}
.sec-title em { font-style: italic; color: var(--honey-deep); }

.sec-lead {
  font-size: var(--fs-lead);
  color: var(--ink-mute);
  max-width: 46ch;
  margin-top: 1.15rem;
}

.sec-head { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-head .kicker { margin-bottom: 1.1rem; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .sec-lead { margin-inline: auto; }

/* =============================================================
   5. COMPONENTES
   ============================================================= */

/* --- Botones --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.6rem;
  border-radius: 100px;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out),
              background-color .35s var(--ease-out), color .35s var(--ease-out),
              border-color .35s var(--ease-out);
}
.btn svg { flex: none; transition: transform .35s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn-sm { padding: .68rem 1.2rem; font-size: .88rem; }
.btn-block { width: 100%; }

.btn-primary {
  background: var(--ink);
  color: var(--bg);
  box-shadow: var(--sh-sm);
}
.btn-primary:hover {
  background: var(--honey-deep);
  transform: translateY(-2px);
  box-shadow: var(--sh-honey);
}

.btn-ghost {
  border: 1px solid var(--line);
  color: var(--ink);
  background: transparent;
}
.btn-ghost:hover {
  border-color: var(--ink);
  background: rgba(28,24,16,.04);
  transform: translateY(-2px);
}
.btn-ghost--light {
  border-color: rgba(251,247,239,.34);
  color: #FBF7EF;
}
.btn-ghost--light:hover {
  border-color: #FBF7EF;
  background: rgba(251,247,239,.1);
}

.btn-alert {
  background: var(--honey);
  color: #241A05;
  box-shadow: 0 20px 46px -20px rgba(232,163,23,.7);
}
.btn-alert:hover {
  background: var(--honey-glow);
  transform: translateY(-2px);
}

/* --- Número hexagonal --- */
.hex-num {
  display: grid;
  place-items: center;
  width: 30px; height: 34.6px;
  flex: none;
  background: var(--honey);
  clip-path: var(--hex);
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 500;
  color: #2B1F04;
}

/* --- Formulario --- */
.form { margin-top: 2rem; display: grid; gap: 1.05rem; }
.field { display: grid; gap: .45rem; }
.field-row { display: grid; gap: 1.05rem; }

.field label,
.check-text { font-size: .84rem; font-weight: 600; color: var(--ink); }
.field label .opt { font-weight: 400; color: var(--ink-mute); }

.field input,
.field textarea,
.select-wrap select {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .85rem 1rem;
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.field textarea { resize: vertical; min-height: 118px; line-height: 1.55; }
.field input::placeholder,
.field textarea::placeholder { color: #A99C86; }

.field input:focus,
.field textarea:focus,
.select-wrap select:focus {
  outline: none;
  border-color: var(--honey);
  box-shadow: 0 0 0 4px rgba(232,163,23,.16);
}
.field input:focus-visible,
.field textarea:focus-visible,
.select-wrap select:focus-visible { outline: none; }

.select-wrap { position: relative; }
.select-wrap select { appearance: none; padding-right: 2.6rem; cursor: pointer; }
.select-wrap svg {
  position: absolute; right: 1rem; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-mute);
  pointer-events: none;
}

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  align-items: start;
  cursor: pointer;
  margin-top: .2rem;
}
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check-box {
  width: 20px; height: 20px; margin-top: 1px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: transparent;
  transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out);
}
.check input:checked + .check-box {
  background: var(--honey-deep);
  border-color: var(--honey-deep);
  color: #fff;
}
.check input:focus-visible + .check-box {
  outline: 2px solid var(--honey-deep);
  outline-offset: 3px;
}
.check-text { font-weight: 400; font-size: .84rem; color: var(--ink-mute); line-height: 1.5; }
.check-text a { color: var(--honey-deep); text-decoration: underline; text-underline-offset: 2px; }

.field.has-error input,
.field.has-error textarea,
.field.has-error select { border-color: var(--alert); }
.field-err {
  font-size: .78rem;
  font-weight: 500;
  color: var(--alert);
}

#form-submit { position: relative; margin-top: .35rem; }
.btn-check {
  position: absolute;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .3s var(--ease-out), transform .45s var(--ease-bounce);
}
#form-submit.is-sent .btn-label { opacity: 0; transform: translateY(-6px); }
#form-submit .btn-label { transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
#form-submit.is-sent .btn-check { opacity: 1; transform: scale(1); }
#form-submit.is-sent { background: var(--pine); }

.form-status {
  font-size: .87rem;
  min-height: 1.3em;
  color: var(--pine);
  font-weight: 500;
}
.form-status.is-err { color: var(--alert); }

/* =============================================================
   6. SECCIONES
   ============================================================= */

/* --- Splash --- */
.splash { display: none; }
.js .splash {
  display: grid;
  position: fixed; inset: 0; z-index: 9998;
  place-items: center;
  background: var(--bg);
  color: var(--honey);
  transition: opacity .55s var(--ease-out), visibility .55s;
}
/* El símbolo ya no se dibuja trazo a trazo (era un SVG en línea): ahora es
   una imagen, así que entra con una escala y un fundido cortos. */
.splash-logo {
  width: 88px; height: 88px;
  animation: splashIn .75s var(--ease-out) both;
}
@keyframes splashIn {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: none; }
}
.splash.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
/* Red de seguridad CSS: aunque el JS falle, desaparece sola */
.splash { animation: splashOut .4s var(--ease-out) 1.6s forwards; }
@keyframes splashOut { to { opacity: 0; visibility: hidden; } }

/* --- Nav --- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  transition: background-color .4s var(--ease-out), box-shadow .4s var(--ease-out),
              border-color .4s var(--ease-out), backdrop-filter .4s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(251,247,239,.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line-soft);
}
@supports not (backdrop-filter: blur(4px)) {
  .nav.is-stuck { background: var(--bg); }
}
.nav-inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: .95rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.brand { display: inline-flex; align-items: center; }
/* El logotipo es una imagen con la marca completa (símbolo + palabra), así que
   ya no hay ni SVG en línea ni texto al lado. En el pie va la versión con la
   tinta en crema: el «apia» en negro no se vería sobre el fondo oscuro. */
.brand-logo { display: block; height: 42px; width: auto; flex: none; }
.brand--foot .brand-logo { height: 40px; }

.nav-links { display: none; margin-left: auto; gap: 1.9rem; align-items: center; }
.nav-links > a,
.nav-top {
  position: relative;
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding-block: .25rem;
  transition: color .3s var(--ease-out);
}
.nav-links > a::after,
.nav-top::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--honey-deep);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.nav-links > a:hover,
.nav-top:hover { color: var(--ink); }
.nav-links > a:hover::after,
.nav-top:hover::after { transform: scaleX(1); transform-origin: left; }

/* --- Submenú de servicios ---------------------------------------------
   Sin JavaScript a propósito: se abre con :hover y con :focus-within, así
   que funciona igual con el JS desactivado y se recorre con el tabulador.
   El truco está en usar visibility (no display): al enfocar el enlace de
   «Servicios», el propio :focus-within ya hace visible el panel, y el
   siguiente tabulador entra dentro. */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-top { display: inline-flex; align-items: center; gap: .35rem; }
.nav-caret { transition: transform .3s var(--ease-out); flex: none; }

.nav-sub {
  position: absolute;
  top: 100%; left: 50%;
  margin-top: .55rem;
  transform: translate(-50%, -6px);
  min-width: 15.5rem;
  display: grid;
  padding: .5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-md);
  opacity: 0;
  visibility: hidden;
  /* visibility no se interpola: se cambia de golpe. Al abrir tiene que pasar a
     visible en el instante 0, o el navegador no deja tabular dentro todavía;
     al cerrar espera a que termine el fundido. */
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out),
              visibility 0s linear .25s;
}
/* Puente invisible: evita que el panel se cierre al cruzar el hueco. */
.nav-sub::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem;
}
.nav-item:hover .nav-sub,
.nav-item:focus-within .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out),
              visibility 0s;
}
.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret { transform: rotate(180deg); }

.nav-sub a {
  padding: .6rem .75rem;
  border-radius: 9px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out);
}
.nav-sub a:hover { background: var(--bg-2); color: var(--ink); }
.nav-sub a[aria-current="page"] { color: var(--honey-deep); background: var(--bg-2); }
.nav-cta { display: none; }

.nav-toggle {
  margin-left: auto;
  width: 42px; height: 42px;
  display: grid; place-content: center; gap: 6px;
  border-radius: 10px;
}
.nav-toggle span {
  display: block; width: 21px; height: 1.6px;
  background: var(--ink);
  transition: transform .35s var(--ease-out), opacity .25s;
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.8px) rotate(-45deg); }

.nav-drawer[hidden] { display: none; }
.nav-drawer {
  display: grid;
  gap: .3rem;
  padding: .5rem var(--gutter) 1.6rem;
  background: rgba(251,247,239,.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-drawer a {
  padding: .8rem 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}
/* En móvil el submenú no se pliega: se ve entero, sangrado bajo «Servicios». */
.drawer-sub { display: grid; }
.drawer-sub a {
  padding: .6rem 0 .6rem 1.1rem;
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink-mute);
}
.drawer-sub a[aria-current="page"] { color: var(--honey-deep); }
.nav-drawer .btn { margin-top: 1rem; border-bottom: 0; color: var(--bg); }
.nav-drawer .btn:hover { color: var(--bg); }

/* Sin JS el cajón no se puede abrir: mostramos los enlaces en línea
   para no dejar la web sin navegación en móvil. */
html:not(.js) .nav-toggle { display: none; }
html:not(.js) .nav-links {
  display: flex;
  margin-left: auto;
  gap: 1.1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  font-size: .85rem;
}
html:not(.js) .nav-links::-webkit-scrollbar { display: none; }
html:not(.js) .nav-links a { white-space: nowrap; }
/* Sin JS el menú es una tira con scroll horizontal: un desplegable absoluto
   ahí dentro saldría recortado. Se oculta y «Servicios» queda como enlace
   normal a la sección; los cinco servicios siguen en la home y en el pie. */
html:not(.js) .nav-sub { display: none; }

/* --- Hero --- */
.hero {
  position: relative;
  padding-top: clamp(7rem, 15vh, 9.5rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
}
.hero-comb {
  position: absolute; inset: -10% -10% auto -10%;
  height: 130%;
  opacity: .05;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 70% 25%, #000 5%, transparent 72%);
  mask-image: radial-gradient(ellipse 90% 70% at 70% 25%, #000 5%, transparent 72%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90' viewBox='0 0 52 90'%3E%3Cg fill='none' stroke='%23A96608' stroke-width='1.1'%3E%3Cpath d='M26 -30 L52 -15 L52 15 L26 30 L0 15 L0 -15 Z'/%3E%3Cpath d='M26 60 L52 75 L52 105 L26 120 L0 105 L0 75 Z'/%3E%3Cpath d='M0 15 L26 30 L26 60 L0 75 L-26 60 L-26 30 Z'/%3E%3Cpath d='M52 15 L78 30 L78 60 L52 75 L26 60 L26 30 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 52px 90px;
}
.hero-glow {
  position: absolute;
  width: 62vw; height: 62vw;
  max-width: 780px; max-height: 780px;
  left: var(--gx, 70%);
  top: var(--gy, 28%);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,209,102,.42) 0%, rgba(232,163,23,.14) 38%, transparent 68%);
  filter: blur(28px);
  pointer-events: none;
  transition: left 1.1s var(--ease-soft), top 1.1s var(--ease-soft);
}

.hero-grid { position: relative; display: grid; gap: clamp(2.8rem, 6vw, 4rem); align-items: center; }
.hero-copy .kicker { margin-bottom: 1.4rem; }

.hero-title {
  font-family: var(--serif);
  font-size: var(--fs-h1);
  line-height: .98;
  letter-spacing: -.028em;
}
.hero-title em { font-style: italic; color: var(--honey-deep); }

.hero-sub {
  margin-top: 1.5rem;
  font-size: clamp(1.04rem, 1.5vw, 1.2rem);
  color: var(--ink-mute);
  max-width: 44ch;
}

.hero-actions { margin-top: 2.1rem; display: flex; flex-wrap: wrap; gap: .8rem; }

.hero-marks {
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-family: var(--mono);
  font-size: .73rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.hero-marks li { display: inline-flex; align-items: center; gap: .5rem; }
.hero-marks li::before {
  content: "";
  width: 7px; height: 8px;
  background: var(--honey);
  clip-path: var(--hex);
}

/* Clúster hexagonal */
.hero-visual { position: relative; }
.hex-cluster {
  position: relative;
  aspect-ratio: 1 / .98;
  width: 100%;
  max-width: 430px;   /* en móvil y tablet no debe comerse la pantalla */
  margin-inline: auto;
}
@media (min-width: 960px) { .hex-cluster { max-width: none; } }
.hex-cluster .hex { position: absolute; box-shadow: var(--sh-md); }
.hex--a { width: 60%; left: 0; top: 11%; z-index: 2; }
.hex--b { width: 43%; right: 1%; top: 0; }
.hex--c { width: 43%; right: 1%; bottom: 1%; }
.hex-dot {
  position: absolute;
  clip-path: var(--hex);
  background: var(--honey);
}
.hex-dot--1 { width: 24px; height: 27.7px; left: 4%; bottom: 6%; opacity: .85; }
.hex-dot--2 { width: 14px; height: 16.2px; left: 15%; bottom: 0; background: var(--pine); opacity: .6; }

/* --- Cifras --- */
.stats {
  border-block: 1px solid var(--line);
  background: var(--bg-2);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.stat {
  padding: clamp(1.6rem, 3.5vw, 2.6rem) clamp(.8rem, 2vw, 1.6rem);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats-grid .stat:nth-child(2n) { border-right: 0; }
.stats-grid .stat:nth-child(n+3) { border-bottom: 0; }

.stat-num {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 3.5rem);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.03em;
}
.stat-suf { color: var(--honey-deep); }
.stat-label {
  margin-top: .5rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.5;
}

/* --- Servicios --- */
.services { padding-block: var(--sec-y); }
.svc-grid { display: grid; gap: clamp(1rem, 2vw, 1.4rem); }

.svc {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s var(--ease-out);
}
.svc:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
  border-color: rgba(169,102,8,.22);
}

.svc-body { padding: clamp(1.5rem, 3vw, 2.1rem); display: flex; flex-direction: column; }
.svc-top { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.svc-for {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.svc-badge {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #2B1F04;
  background: var(--honey-glow);
  padding: .3rem .6rem;
  border-radius: 100px;
}

.svc-title {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.4vw, 1.95rem);
  line-height: 1.06;
  letter-spacing: -.02em;
}
.svc-text { margin-top: .85rem; color: var(--ink-mute); font-size: .96rem; }
.svc-text em { font-style: italic; }

.svc-points {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: .5rem;
}
.svc-points li {
  position: relative;
  padding-left: 1.35rem;
  font-size: .88rem;
  color: var(--ink-soft);
}
.svc-points li::before {
  content: "";
  position: absolute; left: 0; top: .48em;
  width: 8px; height: 9.2px;
  background: var(--honey);
  clip-path: var(--hex);
}

.svc-link {
  margin-top: 1.5rem;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .89rem;
  font-weight: 600;
  color: var(--honey-deep);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color .35s var(--ease-out), gap .35s var(--ease-out);
}
.svc-link:hover { border-bottom-color: currentColor; gap: .75rem; }

/* Tarjetas anchas: foto grande a un lado */
.svc--wide .svc-media { position: relative; overflow: hidden; }
.svc--wide .svc-media img {
  width: 100%; height: 100%;
  min-height: 260px;
  object-fit: cover;
  transition: transform 1s var(--ease-out), filter .6s var(--ease-out);
}
.svc--wide:hover .svc-media img { transform: scale(1.05); filter: saturate(1.1); }

/* Tarjetas normales: medallón hexagonal */
.svc:not(.svc--wide) { text-align: center; padding-top: clamp(1.6rem, 3vw, 2.2rem); }
.svc:not(.svc--wide) .svc-media {
  width: clamp(126px, 17vw, 168px);
  margin-inline: auto;
  aspect-ratio: var(--hex-ratio);
  clip-path: var(--hex);
  overflow: hidden;
  background: var(--bg-3);
}
.svc:not(.svc--wide) .svc-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out), filter .6s var(--ease-out);
}
.svc:not(.svc--wide):hover .svc-media img { transform: scale(1.07); filter: saturate(1.12); }
.svc:not(.svc--wide) .svc-top { justify-content: center; }
.svc:not(.svc--wide) .svc-points { text-align: left; }
.svc:not(.svc--wide) .svc-link { align-self: center; }

.svc--particular { border-color: rgba(232,163,23,.4); }
.svc--particular::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px rgba(232,163,23,.28);
  pointer-events: none;
}

/* --- Ventajas --- */
.why {
  position: relative;
  padding-block: var(--sec-y);
  background: var(--bg-2);
  border-block: 1px solid var(--line);
  overflow: hidden;
}
.why-comb {
  position: absolute; inset: 0;
  opacity: .05;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 55%);
  mask-image: linear-gradient(200deg, #000 0%, transparent 55%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90' viewBox='0 0 52 90'%3E%3Cg fill='none' stroke='%23A96608' stroke-width='1.1'%3E%3Cpath d='M26 -30 L52 -15 L52 15 L26 30 L0 15 L0 -15 Z'/%3E%3Cpath d='M26 60 L52 75 L52 105 L26 120 L0 105 L0 75 Z'/%3E%3Cpath d='M0 15 L26 30 L26 60 L0 75 L-26 60 L-26 30 Z'/%3E%3Cpath d='M52 15 L78 30 L78 60 L52 75 L26 60 L26 30 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 52px 90px;
}
.why-grid { position: relative; display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }
.why-aside .kicker { margin-bottom: 1.1rem; }
.why-photo {
  margin-top: 2.2rem;
  aspect-ratio: var(--hex-ratio);
  width: min(100%, 300px);
  clip-path: var(--hex);
  overflow: hidden;
  background: var(--bg-3);
}
.why-photo img { width: 100%; height: 100%; object-fit: cover; }

.why-list { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem) clamp(1.5rem, 3vw, 2.6rem); }
.why-item { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.why-ico {
  width: 46px; height: 53.1px;
  flex: none;
  display: grid; place-items: center;
  background: var(--bg);
  clip-path: var(--hex);
  color: var(--honey-deep);
  transition: background-color .4s var(--ease-out), color .4s var(--ease-out);
}
.why-item:hover .why-ico { background: var(--honey); color: #2B1F04; }
.why-item h3 { font-size: var(--fs-h3); font-weight: 700; font-family: var(--sans); letter-spacing: -.015em; }
.why-item p { margin-top: .4rem; font-size: .92rem; color: var(--ink-mute); }

/* --- Banda de emergencia --- */
.emerg {
  position: relative;
  overflow: hidden;
  background: var(--pine-deep);
  color: #F3EEE2;
}
.emerg-media { position: absolute; inset: 0; }
.emerg-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 70% center;
  opacity: .78;
}
.emerg-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(96deg,
      rgba(30,49,37,.95) 0%,
      rgba(30,49,37,.90) 34%,
      rgba(30,49,37,.55) 62%,
      rgba(30,49,37,.22) 100%);
}
.emerg-inner {
  position: relative;
  padding-block: clamp(4rem, 9vw, 7rem);
}
.emerg-copy { max-width: 46rem; }
.emerg-title {
  margin-top: 1.2rem;
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  line-height: 1.02;
  color: #FBF7EF;
}
.emerg-title em { font-style: italic; color: var(--honey-glow); }
.emerg-text {
  margin-top: 1.35rem;
  font-size: var(--fs-lead);
  color: rgba(243,238,226,.82);
  max-width: 52ch;
}
.emerg-actions { margin-top: 2.1rem; display: flex; flex-wrap: wrap; gap: .8rem; }

/* --- Cómo funciona --- */
.steps { padding-block: var(--sec-y); }
.steps-track { position: relative; display: grid; gap: clamp(2.4rem, 4vw, 2rem); }
.steps-rail {
  position: absolute;
  left: 26px; top: 12px; bottom: 12px;
  width: 2px;
  background: var(--line);
  overflow: hidden;
}
.steps-rail-fill {
  display: block;
  width: 100%;
  height: var(--p, 0%);
  background: var(--honey);
  transition: height .2s linear, width .2s linear;
}

.step { position: relative; padding-left: 4.6rem; }
.step-node {
  position: absolute;
  left: 0; top: 0;
  width: 54px; height: 62.4px;
  display: grid; place-items: center;
  background: var(--bg-2);
  clip-path: var(--hex);
  font-family: var(--mono);
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink-mute);
  transition: background-color .5s var(--ease-out), color .5s var(--ease-out);
  z-index: 2;
}
.step.is-active .step-node { background: var(--honey); color: #2B1F04; }

.step-media {
  margin-bottom: 1.2rem;
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--bg-3);
  box-shadow: var(--sh-sm);
}
.step-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.step:hover .step-media img { transform: scale(1.05); }

.step-title { font-family: var(--serif); font-size: clamp(1.35rem, 2vw, 1.7rem); }
.step-text { margin-top: .55rem; font-size: .93rem; color: var(--ink-mute); }

/* --- Testimonios --- */
.quotes {
  padding-block: var(--sec-y);
  background: var(--bg-2);
  border-block: 1px solid var(--line);
}
.quotes-grid { display: grid; gap: clamp(1rem, 2vw, 1.4rem); }
.quote {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(1.7rem, 3vw, 2.2rem);
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.quote:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.quote::before {
  content: "\201C";
  position: absolute; right: 1.4rem; top: .1rem;
  font-family: var(--serif);
  font-size: 5rem;
  line-height: 1;
  color: var(--honey);
  opacity: .22;
  pointer-events: none;
}
.quote blockquote {
  font-family: var(--serif);
  font-size: clamp(1.18rem, 1.7vw, 1.38rem);
  line-height: 1.35;
  letter-spacing: -.012em;
  color: var(--ink);
  flex: 1;
}
.quote figcaption {
  margin-top: 1.6rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: .85rem;
}
.quote-av {
  width: 48px; height: 55.4px;
  flex: none;
  clip-path: var(--hex);
  background: var(--bg-3);
}
.quote-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.quote figcaption strong { display: block; font-size: .92rem; font-weight: 700; color: var(--ink); }
.quote figcaption em { font-style: normal; font-size: .8rem; color: var(--ink-mute); }


/* --- FAQ --- */
.faq { padding-block: var(--sec-y); }
.faq-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.faq-head .kicker { margin-bottom: 1.1rem; }
.faq-head .btn { margin-top: 1.8rem; }

.more-link { margin-top: 1.4rem; }
.more-link a {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--honey-deep);
  border-bottom: 1px solid rgba(150,89,10,.3);
  padding-bottom: .12rem;
  transition: border-color .3s var(--ease-out), gap .3s var(--ease-out);
}
.more-link a:hover { border-bottom-color: var(--honey-deep); gap: .7rem; }

.faq-list { display: grid; gap: .7rem; }
.faq-item {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  transition: border-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.faq-item[open] { border-color: rgba(169,102,8,.28); box-shadow: var(--sh-sm); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 1.3rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: .98rem;
  font-weight: 600;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary span { flex: 1; }
.faq-item summary i {
  position: relative;
  flex: none;
  width: 18px; height: 18px;
}
.faq-item summary i::before,
.faq-item summary i::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--honey-deep);
  transition: transform .4s var(--ease-out), opacity .3s;
}
.faq-item summary i::before { width: 13px; height: 1.6px; transform: translate(-50%, -50%); }
.faq-item summary i::after  { width: 1.6px; height: 13px; transform: translate(-50%, -50%); }
.faq-item[open] summary i::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-body { padding: 0 1.3rem 1.3rem; }
.faq-body p { font-size: .93rem; color: var(--ink-mute); max-width: 62ch; }
.faq-body em { font-style: italic; }

/* Trampa para bots. No se usa display:none a propósito: algunos bots saltan
   los campos ocultos así, pero rellenan los que están fuera de pantalla. */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --- Página de gracias (/gracias.html) --- */
.gracias { min-height: 100svh; display: grid; place-items: center; padding: var(--sec-y) 0; }
.gracias-inner { max-width: 52ch; text-align: center; }
.gracias-hex {
  display: grid; place-items: center;
  width: 64px; height: 73.9px;
  margin: 0 auto 1.8rem;
  background: var(--honey);
  clip-path: var(--hex);
  color: #2B1F04;
}
.gracias .pagehead-lead { margin-inline: auto; }
.gracias .pagehead-actions { justify-content: center; }

/* --- Página de contacto (/contacto.html) --- */
.pagehead-facts {
  margin-top: 2.2rem;
  list-style: none;
  display: grid; gap: 1.1rem;
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}
.pagehead-facts li { display: grid; gap: .25rem; }
.pagehead-facts span {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.pagehead-facts strong { font-size: .95rem; font-weight: 600; color: var(--ink-soft); }
.pagehead-facts a {
  font-size: .95rem;
  font-weight: 600;
  color: var(--honey-deep);
  border-bottom: 1px solid rgba(150,89,10,.3);
  padding-bottom: .1rem;
  transition: border-color .3s var(--ease-out);
}
.pagehead-facts a:hover { border-bottom-color: var(--honey-deep); }

.cont-extra { padding-block: var(--sec-y); background: var(--bg-2); border-top: 1px solid var(--line); }
.cont-extra-grid { display: grid; gap: clamp(2.8rem, 6vw, 4.5rem); align-items: start; }

.cont-list { margin-top: 1.6rem; list-style: none; display: grid; gap: .85rem; }
.cont-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .93rem;
  color: var(--ink-mute);
}
.cont-list li::before {
  content: "";
  position: absolute; left: 0; top: .42em;
  width: 10px; height: 11.5px;
  background: var(--honey);
  clip-path: var(--hex);
}
.cont-list strong { font-weight: 700; color: var(--ink-soft); }

.cont-steps { margin-top: 1.8rem; list-style: none; display: grid; gap: 1.4rem; }
.cont-steps li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.cont-steps h3 { font-size: .98rem; font-weight: 700; color: var(--ink); }

/* Enlaces dentro de una .cont-list (los usa la 404) */
.cont-list a {
  color: var(--honey-deep);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease-out);
}
.cont-list a:hover { border-bottom-color: var(--honey-deep); }

/* Índice de servicios de la 404 */
.gracias-links { margin-top: 2.6rem; text-align: left; }
.cont-steps p { margin-top: .25rem; font-size: .89rem; color: var(--ink-mute); }

/* --- Páginas interiores (contacto, gracias, servicios) --- */
.nav-links > a[aria-current],
.nav-top[aria-current] { color: var(--ink); }
.nav-links > a[aria-current]::after,
.nav-top[aria-current]::after { transform: scaleX(1); transform-origin: left; }

.pagehead {
  position: relative;
  overflow: hidden;
  padding-block: clamp(6.5rem, 12vw, 9rem) clamp(2.8rem, 5vw, 4rem);
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.pagehead-comb {
  position: absolute; inset: 0;
  opacity: .05;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 60% 90% at 100% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 90% at 100% 0%, #000 0%, transparent 72%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90' viewBox='0 0 52 90'%3E%3Cg fill='none' stroke='%23A96608' stroke-width='1.1'%3E%3Cpath d='M26 -30 L52 -15 L52 15 L26 30 L0 15 L0 -15 Z'/%3E%3Cpath d='M26 60 L52 75 L52 105 L26 120 L0 105 L0 75 Z'/%3E%3Cpath d='M0 15 L26 30 L26 60 L0 75 L-26 60 L-26 30 Z'/%3E%3Cpath d='M52 15 L78 30 L78 60 L52 75 L26 60 L26 30 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 52px 90px;
}
/* La medida de lectura la fijan los bloques de dentro, NO el contenedor: este
   div lleva también .wrap, que trae margin-inline:auto, así que recortarle el
   max-width lo centraba en la pantalla y lo desalineaba del logo y del resto
   de la página. */
.pagehead-inner { position: relative; }
.pagehead-inner > * { max-width: 62ch; }

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-bottom: 1.6rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.crumbs a { display: inline-block; padding-block: .25rem; color: var(--ink-mute); transition: color .3s var(--ease-out); }
.crumbs a:hover { color: var(--honey-deep); }
.crumbs [aria-current] { color: var(--ink-soft); }

.pagehead-title {
  font-family: var(--serif);
  font-size: var(--fs-h1);
  line-height: .98;
  letter-spacing: -.028em;
}
.pagehead-title em { font-style: italic; color: var(--honey-deep); }
.pagehead-lead {
  margin-top: 1.5rem;
  font-size: var(--fs-lead);
  color: var(--ink-mute);
  max-width: 56ch;
}
.pagehead-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; }

/* --- Contacto --- */
.contact {
  position: relative;
  padding-block: var(--sec-y);
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.contact-comb {
  position: absolute; inset: 0;
  opacity: .05;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 100% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 80% at 100% 0%, #000 0%, transparent 70%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90' viewBox='0 0 52 90'%3E%3Cg fill='none' stroke='%23A96608' stroke-width='1.1'%3E%3Cpath d='M26 -30 L52 -15 L52 15 L26 30 L0 15 L0 -15 Z'/%3E%3Cpath d='M26 60 L52 75 L52 105 L26 120 L0 105 L0 75 Z'/%3E%3Cpath d='M0 15 L26 30 L26 60 L0 75 L-26 60 L-26 30 Z'/%3E%3Cpath d='M52 15 L78 30 L78 60 L52 75 L26 60 L26 30 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 52px 90px;
}
.contact-grid { position: relative; display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.contact-form-wrap .kicker { margin-bottom: 1.1rem; }

.contact-card {
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--r-lg);
  padding: clamp(1.7rem, 3vw, 2.3rem);
  box-shadow: var(--sh-md);
}
.contact-card h3 {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--honey-glow);
}
.contact-mail {
  display: inline-block;
  margin-top: .9rem;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  color: var(--bg);
  letter-spacing: -.02em;
  border-bottom: 1px solid rgba(251,247,239,.28);
  padding-bottom: 3px;
  transition: border-color .35s var(--ease-out), color .35s var(--ease-out);
  word-break: break-word;
}
.contact-mail:hover { color: var(--honey-glow); border-bottom-color: var(--honey-glow); }

.contact-meta { margin-top: 1.9rem; display: grid; gap: 1.05rem; }
.contact-meta > div { display: grid; gap: .18rem; }
.contact-meta dt {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(251,247,239,.5);
}
.contact-meta dd { font-size: .92rem; color: rgba(251,247,239,.9); }

.contact-map {
  margin-top: 1.4rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.4rem 1.1rem;
}
.contact-map svg { width: 100%; height: auto; }
.map-land { fill: var(--bg-3); stroke: none; }
.map-coast { fill: none; stroke: var(--ink-mute); stroke-width: 1.6; stroke-linejoin: round; opacity: .5; }
.map-pins circle { fill: var(--honey-deep); }
.map-pins .map-halo { fill: var(--honey); opacity: .22; }
.contact-map figcaption {
  margin-top: .9rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: center;
}

/* --- Footer --- */
.foot {
  background: var(--ink);
  color: rgba(251,247,239,.72);
  padding-top: clamp(3.5rem, 7vw, 5rem);
}
.foot-grid {
  display: grid;
  gap: 2.4rem;
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.foot-claim { margin-top: 1rem; font-size: .9rem; max-width: 34ch; }
.foot-claim em { font-style: italic; color: var(--honey-glow); }

.foot-col { display: grid; gap: .55rem; align-content: start; }
.foot-col h2 {
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(251,247,239,.58);
  margin-bottom: .5rem;
}
/* Altura mínima de 24 px para los objetivos táctiles (WCAG 2.2, 2.5.8). */
.foot-col a {
  padding-block: .15rem;
  font-size: .9rem;
  color: rgba(251,247,239,.78);
  transition: color .3s var(--ease-out);
  justify-self: start;
}
.foot-col a:hover { color: var(--honey-glow); }

.foot-bottom {
  border-top: 1px solid rgba(251,247,239,.13);
  padding-block: 1.5rem 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  justify-content: space-between;
  font-size: .82rem;
  color: rgba(251,247,239,.55);
}
/* El código de explotación es un identificador: se compone en monoespaciada
   para que se lea como tal y no como parte de la frase. */
.foot-cea { font-family: var(--mono); font-size: .95em; letter-spacing: .03em; }

.foot-bottom a { display: inline-block; padding-block: .15rem; transition: color .3s var(--ease-out); }
.foot-bottom a:hover { color: var(--honey-glow); }

/* =============================================================
   6 bis. PÁGINAS DE SERVICIO
   Piezas que solo usan arpa-antivelutina.html, vallado-antioso.html,
   polinizacion.html y retirada-de-enjambres.html. Todo lo demás
   (nav, pagehead, faq, footer…) se reutiliza tal cual.
   ============================================================= */

/* Cabecera partida: texto + hexágono con la foto del servicio */
.pagehead--svc .pagehead-inner > * { max-width: none; }
.svcp-head { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.svcp-head-copy { max-width: 60ch; }
.svcp-head-media { width: min(320px, 78%); margin-inline: auto; }
.svcp-head-media .hex { box-shadow: var(--sh-md); }

/* Cuerpo largo del servicio */
.svcp { padding-block: var(--sec-y); }
.svcp-grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: start; }

.prose p {
  margin-top: 1.05rem;
  font-size: 1rem;
  color: var(--ink-mute);
  max-width: 64ch;
}
.prose h3 {
  margin-top: 2.6rem;
  font-family: var(--sans);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink);
}
.prose h3 + p { margin-top: .6rem; }
.prose strong { font-weight: 700; color: var(--ink-soft); }
.prose em { font-style: italic; }

/* Aviso destacado dentro del texto */
.note {
  margin-top: 2rem;
  padding: 1.15rem 1.35rem;
  background: var(--bg-2);
  border-left: 3px solid var(--honey);
  border-radius: 0 var(--r) var(--r) 0;
}
.note p { margin: 0; max-width: 62ch; font-size: .93rem; color: var(--ink-soft); }
.note strong { font-weight: 700; color: var(--ink); }
.note--alert { background: rgba(179, 58, 43, .06); border-left-color: var(--alert); }

/* Columna lateral con las fotos de apoyo */
.svcp-aside { display: grid; gap: 1.1rem; }
.svcp-aside figure { display: grid; gap: .7rem; }
.svcp-aside .hex { box-shadow: var(--sh-sm); }
.svcp-aside figcaption {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--ink-mute);
  line-height: 1.5;
  text-align: center;
}

/* Banda de llamada final */
.ctaband {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  background: var(--pine-deep);
  color: var(--bg);
}
.ctaband-comb {
  position: absolute; inset: 0;
  opacity: .09;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 100% at 100% 50%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 100% at 100% 50%, #000 0%, transparent 70%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90' viewBox='0 0 52 90'%3E%3Cg fill='none' stroke='%23FFD166' stroke-width='1.1'%3E%3Cpath d='M26 -30 L52 -15 L52 15 L26 30 L0 15 L0 -15 Z'/%3E%3Cpath d='M26 60 L52 75 L52 105 L26 120 L0 105 L0 75 Z'/%3E%3Cpath d='M0 15 L26 30 L26 60 L0 75 L-26 60 L-26 30 Z'/%3E%3Cpath d='M52 15 L78 30 L78 60 L52 75 L26 60 L26 30 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 52px 90px;
}
.ctaband-inner { position: relative; display: grid; gap: 1.9rem; align-items: center; }
.ctaband h2 {
  /* El reset pinta los h2 de --ink; sobre el verde oscuro habría que adivinarlo. */
  color: var(--bg);
  font-family: var(--serif);
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: -.022em;
}
.ctaband h2 em { font-style: italic; color: var(--honey-glow); }
.ctaband p {
  margin-top: .9rem;
  max-width: 48ch;
  font-size: var(--fs-lead);
  color: rgba(251, 247, 239, .78);
}
.ctaband-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
/* Sobre el verde oscuro, el botón oscuro deja de leerse como botón: pasa a ámbar. */
.ctaband .btn-primary {
  background: var(--honey);
  color: #241A05;
  box-shadow: 0 20px 46px -20px rgba(232, 163, 23, .55);
}
.ctaband .btn-primary:hover { background: var(--honey-glow); color: #241A05; }

/* =============================================================
   PÁGINAS LEGALES
   Documento largo de leer, no una landing: medida corta, jerarquía
   marcada y nada de animación que estorbe.
   ============================================================= */
.legal { padding-block: var(--sec-y); }
.legal-doc { max-width: 70ch; }

.legal-doc > section + section { margin-top: clamp(2.6rem, 5vw, 3.6rem); }
.legal-doc h2 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin-bottom: 1rem;
}
.legal-doc h3 {
  margin-top: 1.9rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}
.legal-doc p { margin-top: .9rem; font-size: .97rem; color: var(--ink-mute); }
.legal-doc h2 + p, .legal-doc h3 + p { margin-top: .55rem; }
.legal-doc strong { font-weight: 700; color: var(--ink-soft); }
.legal-doc em { font-style: italic; }
.legal-doc a {
  color: var(--honey-deep);
  border-bottom: 1px solid rgba(150, 89, 10, .32);
  transition: border-color .3s var(--ease-out);
}
.legal-doc a:hover { border-bottom-color: var(--honey-deep); }

.legal-doc ul { margin-top: 1rem; display: grid; gap: .6rem; }
.legal-doc li {
  position: relative;
  padding-left: 1.35rem;
  font-size: .97rem;
  color: var(--ink-mute);
}
.legal-doc li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 8px; height: 9.2px;
  clip-path: var(--hex);
  background: var(--honey);
}

/* Ficha de datos (titular, NIF…) y tabla de campos del formulario */
.legal-datos {
  margin-top: 1.2rem;
  display: grid;
  gap: .05rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--line);
}
.legal-datos > div {
  display: grid;
  gap: .2rem;
  padding: .85rem 1.1rem;
  background: var(--paper);
}
.legal-datos dt {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.legal-datos dd { font-size: .95rem; color: var(--ink-soft); }

.legal-tabla { margin-top: 1.2rem; overflow-x: auto; }
.legal-tabla table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.legal-tabla th, .legal-tabla td {
  padding: .7rem .9rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.legal-tabla th {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-mute);
  white-space: nowrap;
}
.legal-tabla td { color: var(--ink-mute); }
.legal-tabla tr:last-child td { border-bottom: 0; }

/* Índice de la propia página */
.legal-indice {
  margin-top: 2rem;
  padding: 1.2rem 1.4rem;
  background: var(--bg-2);
  border-radius: var(--r);
}
.legal-indice p {
  margin: 0 0 .7rem;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.legal-indice ol { display: grid; gap: .4rem; counter-reset: n; }
.legal-indice li { font-size: .92rem; counter-increment: n; padding-left: 1.7rem; position: relative; }
.legal-indice li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute; left: 0; top: .1em;
  width: auto; height: auto;
  clip-path: none;
  background: none;
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--honey-deep);
}

/* Hueco por rellenar. Chilla a propósito: no puede publicarse así. */
.falta {
  display: inline-block;
  padding: .1em .45em;
  border-radius: 4px;
  background: rgba(179, 58, 43, .12);
  color: var(--alert);
  font-family: var(--mono);
  font-size: .82em;
  font-weight: 500;
}

/* Aviso mientras el documento esté incompleto. Va dentro de .pagehead: si se
   pone antes del <header>, la barra de navegación fija lo tapa. */
.borrador {
  margin-bottom: 1.8rem;
  padding: 1rem 1.25rem;
  border-radius: var(--r);
  background: var(--alert);
  color: #FFF4F2;
}
.borrador p { margin: 0; font-size: .88rem; max-width: 68ch; }
.borrador strong { color: #fff; }
.borrador code {
  font-family: var(--mono);
  font-size: .92em;
  background: rgba(255, 255, 255, .16);
  padding: .1em .35em;
  border-radius: 3px;
}

/* =============================================================
   EQUIPO (quiénes somos)
   Sin fotos de personas todavía: la ficha se sostiene con la inicial
   en hexágono, el nombre, la marca de miel y la zona.
   ============================================================= */
.equipo-sec { padding-block: var(--sec-y); background: var(--bg-2); border-top: 1px solid var(--line); }
.equipo { display: grid; gap: clamp(1rem, 2vw, 1.4rem); }
.equipo-card {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.equipo-av {
  display: grid;
  place-items: center;
  width: 54px;
  aspect-ratio: var(--hex-ratio);
  clip-path: var(--hex);
  background: var(--honey);
  color: #2B1F04;
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 1.2rem;
}
.equipo-card h3 { font-family: var(--serif); font-size: clamp(1.35rem, 2vw, 1.6rem); }
.equipo-marca {
  margin-top: .35rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--honey-deep);
}
.equipo-marca a { color: inherit; border-bottom: 1px solid rgba(150, 89, 10, .35); }
.equipo-marca a:hover { border-bottom-color: var(--honey-deep); }

.equipo-meta {
  margin-top: 1rem;
  padding-top: .95rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: .6rem;
}
.equipo-meta > div { display: grid; gap: .15rem; }
.equipo-meta dt {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.equipo-meta dd { font-size: .89rem; color: var(--ink-soft); }
.equipo-meta a { color: var(--honey-deep); border-bottom: 1px solid transparent; }
.equipo-meta a:hover { border-bottom-color: var(--honey-deep); }

.equipo-texto { margin-top: 1rem; font-size: .94rem; color: var(--ink-mute); }

.equipo-redes {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.equipo-redes a { color: var(--ink-mute); border-bottom: 1px solid transparent; transition: color .3s var(--ease-out), border-color .3s var(--ease-out); }
.equipo-redes a:hover { color: var(--honey-deep); border-bottom-color: var(--honey-deep); }

/* Otros servicios */
.related { padding-block: var(--sec-y); background: var(--bg-2); border-top: 1px solid var(--line); }
/* Sin lista de puntos, los textos miden distinto y los «Ver el servicio» quedaban
   a distinta altura. La tarjeta ya se estira al alto de la fila por ser celda de
   grid; esto hace que el interior se estire con ella y el enlace caiga al fondo. */
.related .svc { display: flex; flex-direction: column; }
.related .svc-body { flex: 1; }
.related .svc-text { flex: 1; }

/* =============================================================
   7. EFECTOS
   ============================================================= */
[data-parallax] { will-change: transform; }

/* =============================================================
   8. RESPONSIVE (mobile-first)
   ============================================================= */
@media (min-width: 540px) {
  .field-row { grid-template-columns: 1fr 1fr; }
  .quotes-grid { grid-template-columns: 1fr; }
}

@media (min-width: 720px) {
  .pagehead-facts { grid-template-columns: repeat(3, auto); gap: 2.2rem; justify-content: start; }
    .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .stats-grid .stat { border-bottom: 0; }
  .stats-grid .stat:nth-child(2n) { border-right: 1px solid var(--line); }
  .stats-grid .stat:last-child { border-right: 0; }

  .why-list { grid-template-columns: 1fr 1fr; }
  .quotes-grid { grid-template-columns: repeat(3, 1fr); }
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }

  /* «Otros servicios» son siempre CUATRO tarjetas: en 3 columnas quedaría una
     suelta, así que va en 2 y en 4, nunca en 3. Gana por especificidad a la
     regla de .svc-grid del breakpoint de 960. */
  .related .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .equipo { grid-template-columns: repeat(3, 1fr); }

  .svc--wide { display: grid; grid-template-columns: .9fr 1.1fr; align-items: stretch; }
  .svc--wide .svc-body { justify-content: center; }
  .svc--particular .svc-media { order: 2; }
}

@media (min-width: 960px) {
  html { scroll-padding-top: 96px; }

  .cont-extra-grid { grid-template-columns: 1fr 1fr; }



  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .nav-drawer { display: none !important; }

  .hero-grid { grid-template-columns: 1.02fr .98fr; }

  .svc-grid { grid-template-columns: repeat(3, 1fr); }
  .svc--wide { grid-column: span 3; }

  .why-grid { grid-template-columns: .88fr 1.12fr; }
  .why-sticky { position: sticky; top: 118px; }

  .faq-grid { grid-template-columns: .82fr 1.18fr; }
  .faq-head { position: sticky; top: 118px; align-self: start; }

  .contact-grid { grid-template-columns: 1.12fr .88fr; }

  .svcp-head { grid-template-columns: 1.2fr .8fr; }
  .svcp-head-media { width: 100%; max-width: 400px; margin-inline: auto; }
  .svcp-grid { grid-template-columns: 1.18fr .82fr; }
  .svcp-aside { position: sticky; top: 118px; }
  .ctaband-inner { grid-template-columns: 1.3fr auto; gap: 3rem; }

  /* Pasos en horizontal: nodo arriba, raíl uniendo los cuatro centros */
  .steps-track { grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 2.4vw, 2rem); }
  .step { padding-left: 0; text-align: center; display: flex; flex-direction: column; }
  .steps-rail {
    left: 12.5%; right: 12.5%;
    top: 31px; bottom: auto;
    width: auto; height: 2px;
  }
  .steps-rail-fill { height: 100%; width: var(--p, 0%); }
  .step-node { position: static; margin: 0 auto 1.6rem; }
  .step-media { order: 3; margin: 1.3rem 0 0; }
  .step-title { order: 1; }
  .step-text { order: 2; margin-inline: auto; max-width: 34ch; flex: 1; }
}

@media (min-width: 1280px) {
  .why-list { gap: 2.6rem 3rem; }
  .related .svc-grid { grid-template-columns: repeat(4, 1fr); }
}

/* =============================================================
   9. REDUCED MOTION
   Solo corta lo intrusivo: parallax, halo del cursor y splash.
   Los fades, hovers y transiciones se mantienen — Windows trae
   esta preferencia activada de serie y la web quedaría muerta.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .splash { display: none; }
  .hero-glow { transition: none; left: 70% !important; top: 28% !important; }
  [data-parallax] { transform: none !important; }
  .splash-logo { animation: none; }
}