/* ============================================================
   AURO — Sistema visual base
   Aceite de oliva virgen extra · Sierra Mágina · Jaén
   Estética: mediterránea, artesanal, premium, editorial.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS · color, tipografía, espaciado
   ------------------------------------------------------------ */
:root{
  /* Paleta */
  --negro-oliva:   #171713;  /* logo, titulares, textos fuertes, botón principal */
  --verde-oliva:   #6F6B2E;  /* fondos secundarios, iconos, separadores */
  --dorado:        #B9983A;  /* acentos premium, hover, líneas finas */
  --crema:         #F4EFE5;  /* fondo principal */
  --terracota:     #B64222;  /* llamadas puntuales, badges */
  --blanco-calido: #FFFAF2;  /* tarjetas, zonas limpias */
  --gris-texto:    #5F5A4D;  /* texto secundario, microcopy */

  /* Tipografía */
  --font-heading: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-editorial: 'Cormorant Garamond', Georgia, serif;

  /* Medidas */
  --maxw: 1240px;
  --pad-x: clamp(20px, 5vw, 72px);
  --radius: 4px;          /* esquinas rectas/sutiles */
  --radius-pill: 999px;   /* botones */
  --line: 1px solid color-mix(in srgb, var(--negro-oliva) 14%, transparent);
  --line-gold: 1px solid var(--dorado);

  /* Sombras muy sutiles */
  --shadow-soft: 0 18px 40px -24px rgba(23,23,19,.45);
  --shadow-card: 0 10px 30px -22px rgba(23,23,19,.5);
}

/* ------------------------------------------------------------
   2. RESET
   ------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.62;
  color:var(--negro-oliva);
  background-color:var(--crema);
  /* textura sutil tipo papel */
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; }
ul{ list-style:none; }

/* ------------------------------------------------------------
   3. TIPOGRAFÍA
   ------------------------------------------------------------ */
h1,h2,h3,h4{
  font-family:var(--font-heading);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:-0.02em;
  line-height:1.02;
  color:var(--negro-oliva);
}
.h-display{ font-size:clamp(2.6rem, 6.5vw, 5rem); }
.h-xl{ font-size:clamp(2rem, 4.5vw, 3.4rem); }
.h-lg{ font-size:clamp(1.5rem, 3vw, 2.2rem); }
.h-sm{ font-size:clamp(1.05rem, 1.6vw, 1.3rem); letter-spacing:0; }

p{ color:var(--negro-oliva); }
.muted{ color:var(--gris-texto); }

/* Editorial (Cormorant) — frases emocionales, citas, origen */
.editorial{
  font-family:var(--font-editorial);
  font-weight:500;
  line-height:1.3;
  letter-spacing:.005em;
}
.editorial-i{ font-style:italic; }

/* Etiqueta / kicker */
.kicker{
  font-family:var(--font-heading);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.78rem;
  color:var(--verde-oliva);
}
.kicker--gold{ color:var(--dorado); }
.kicker--terra{ color:var(--terracota); }

/* ------------------------------------------------------------
   4. LAYOUT
   ------------------------------------------------------------ */
.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}
.section{ padding-block:clamp(40px, 5.5vw, 78px); position:relative; }
.section--tight{ padding-block:clamp(32px, 4vw, 56px); }

/* Separador fino */
.divider{ height:0; border-top:var(--line); }
.divider--gold{ border-top:var(--line-gold); opacity:.7; }

/* ------------------------------------------------------------
   5. BOTONES
   ------------------------------------------------------------ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:.95em 1.9em;
  border-radius:var(--radius-pill);
  white-space:nowrap;   /* el texto del botón nunca se parte */
  transition:background-color .25s ease, color .25s ease, border-color .25s ease, transform .15s ease;
}
.btn:active{ transform:translateY(1px); }

/* Principal — dorado homogéneo en toda la web (mismo look que la CTA flotante:
   fondo dorado + texto oscuro, píldora). */
.btn-primary{ background:var(--dorado); color:var(--negro-oliva); }
.btn-primary:hover{ background:var(--negro-oliva); color:var(--crema); }

/* Secundario */
.btn-secondary{ background:transparent; color:var(--negro-oliva); border:1px solid var(--negro-oliva); }
.btn-secondary:hover{ background:var(--negro-oliva); color:var(--crema); }

/* Editorial (sin caja, línea dorada inferior) */
.btn-editorial{
  display:inline-block;
  padding:.2em 0;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.01em;
  text-transform:none;
  color:var(--dorado);
  border-bottom:1.5px solid var(--dorado);
  transition:color .2s ease, border-color .2s ease;
}
.btn-editorial:hover{ color:var(--crema); border-color:var(--crema); }

/* Botón pequeño (header) */
.btn-sm{ padding:.6em 1.25em; font-size:.74rem; }

/* ------------------------------------------------------------
   6. HEADER
   ------------------------------------------------------------ */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:color-mix(in srgb, var(--crema) 88%, transparent);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:0;
}
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:14px;
}
.brand img{ height:62px; width:auto; }
.brand{ display:inline-flex; align-items:center; }
@media (max-width:680px){ .brand img{ height:52px; } }

.nav{ display:flex; align-items:center; gap:clamp(18px,2.4vw,34px); }
.nav a{
  font-weight:500;
  font-size:.92rem;
  color:var(--negro-oliva);
  position:relative;
  padding-block:6px;
  white-space:nowrap;   /* el enlace nunca salta a dos líneas */
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:0; height:1.5px; background:var(--dorado);
  transition:width .25s ease;
}
.nav a:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:14px; }

/* Hamburguesa */
.nav-toggle{ display:none; flex-direction:column; gap:5px; padding:8px; }
.nav-toggle span{ width:24px; height:2px; background:var(--negro-oliva); transition:.3s; }

/* --- Cabecera transparente sobre el hero de vídeo (se vuelve sólida al scroll) --- */
.site-header--transparent{
  position:fixed; left:0; right:0; top:0;
  background:transparent;
  backdrop-filter:none;
  border-bottom:1px solid transparent;
  transition:background-color .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
/* Sin degradado de fondo en la cabecera: evitaba una línea/borde visible donde
   terminaba el fundido sobre el vídeo. La legibilidad se mantiene con una sombra
   de texto suave en el logo y los enlaces (abajo). */
.site-header--transparent:not(.is-solid){
  background:transparent;
}
.site-header--transparent:not(.is-solid) .nav a,
.site-header--transparent:not(.is-solid) .lang-switch{ text-shadow:0 1px 10px rgba(0,0,0,.55); }
/* Estado inicial (arriba del todo, sobre el vídeo): texto y logo en claro */
.site-header--transparent:not(.is-solid) .nav a{ color:var(--crema); }
.site-header--transparent:not(.is-solid) .nav a::after{ background:var(--dorado); }
.site-header--transparent:not(.is-solid) .brand img{ filter:brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,.55)); }
.site-header--transparent:not(.is-solid) .nav-toggle span{ background:var(--crema); }
.site-header--transparent:not(.is-solid) .btn-primary{ background:var(--dorado); color:var(--negro-oliva); }
.site-header--transparent:not(.is-solid) .btn-primary:hover{ background:var(--crema); color:var(--negro-oliva); }
.site-header--transparent:not(.is-solid) .lang-switch button{ color:color-mix(in srgb,var(--crema) 80%,transparent); border-color:color-mix(in srgb,var(--crema) 45%,transparent); }
.site-header--transparent:not(.is-solid) .lang-switch button.is-active{ color:var(--crema); }
/* Al hacer scroll: fondo crema sólido y limpio (transición nítida sobre el vídeo) */
.site-header--transparent.is-solid{
  background:var(--crema);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:0;
  box-shadow:0 6px 24px rgba(23,23,19,.06);
}
@media (prefers-reduced-motion:reduce){
  .site-header--transparent{ transition:none; }
}

/* ------------------------------------------------------------
   6b. LATA 3D — visor girable dentro del bloque de origen
   ------------------------------------------------------------ */
.origin__media model-viewer{
  width:100%;
  height:clamp(420px, 62vh, 640px);
  background:transparent;
  --poster-color:transparent;
  --progress-bar-color:var(--dorado);
  cursor:grab;
}
.origin__media model-viewer:active{ cursor:grabbing; }
.hero__hint{
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  display:inline-flex; gap:.5em; align-items:center;
  background:color-mix(in srgb, var(--negro-oliva) 78%, transparent);
  color:var(--crema);
  font-family:var(--font-heading); font-weight:500;
  text-transform:uppercase; letter-spacing:.1em; font-size:.64rem;
  padding:.45em 1em; border-radius:var(--radius-pill);
  backdrop-filter:blur(4px); pointer-events:none;
  opacity:.92;
}

/* Hotspots (puntos interactivos sobre la lata) */
.hotspot{
  width:20px; height:20px; border-radius:50%;
  border:2px solid var(--crema);
  background:var(--dorado);
  box-shadow:0 2px 10px rgba(23,23,19,.4);
  padding:0; cursor:pointer;
  transition:transform .18s ease, opacity .2s ease;
}
.hotspot:hover{ transform:scale(1.18); }
.hotspot:not([data-visible]){ opacity:0; pointer-events:none; }
.hotspot__label{
  position:absolute; left:50%; bottom:calc(100% + 9px); transform:translateX(-50%);
  white-space:nowrap;
  background:var(--negro-oliva); color:var(--crema);
  font-family:var(--font-body); font-weight:600; font-size:.76rem; letter-spacing:.01em;
  padding:.45em .75em; border-radius:6px;
  opacity:0; pointer-events:none; transition:opacity .18s ease;
  box-shadow:var(--shadow-card);
}
.hotspot:hover .hotspot__label,
.hotspot:focus-visible .hotspot__label{ opacity:1; }

/* ------------------------------------------------------------
   7. HERO
   ------------------------------------------------------------ */
.hero{ position:relative; overflow:hidden; }

/* --- Hero con vídeo a pantalla completa --- */
.hero--video{
  min-height:100svh;
  display:flex;
  align-items:center;
  background:#14140f;                /* fallback oscuro si el vídeo no carga */
}
/* Degradado inferior: funde el vídeo con el color EXACTO del origen
   (mismo oliva plano al final → sin corte visible) */
.hero--video::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px;
  height:clamp(150px,30vh,320px); z-index:1;
  background:linear-gradient(180deg, transparent 0%, color-mix(in srgb,var(--verde-oliva) 60%, transparent) 58%, var(--verde-oliva) 100%);
  pointer-events:none;
}
.hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
/* Filtro sobre el vídeo — ligero: protege texto (izquierda) y menú (arriba),
   deja el resto del vídeo mucho más visible. El fondo se funde abajo con ::after. */
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(18,19,12,.36) 0%, rgba(18,19,12,.08) 26%, rgba(18,19,12,.08) 70%, transparent 100%),
    linear-gradient(92deg, rgba(18,19,12,.42) 0%, rgba(18,19,12,.10) 45%, transparent 66%);
}
.hero__inner{
  position:relative; z-index:2; width:100%;
  padding-block:clamp(120px,20vh,220px) clamp(56px,10vh,120px);
}
.hero--video .hero__copy{ max-width:640px; }
.hero--video .kicker{ color:color-mix(in srgb,var(--dorado) 92%, white); }
.hero--video .hero__rule{ border-top-color:var(--dorado); }
.hero--video .hero__claim{ color:var(--crema); text-shadow:0 2px 20px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4); }
.hero--video .hero__sub{ color:color-mix(in srgb,var(--crema) 94%, transparent); text-shadow:0 1px 12px rgba(0,0,0,.5); }
.hero--video .hero__origin{ color:color-mix(in srgb,var(--crema) 92%, transparent); text-shadow:0 1px 10px rgba(0,0,0,.45); }
.hero--video .hero__cta .btn-primary{ background:var(--dorado); color:var(--negro-oliva); }
.hero--video .hero__cta .btn-primary:hover{ background:var(--crema); color:var(--negro-oliva); }
.hero--video .hero__cta .btn-secondary{ color:var(--crema); border-color:color-mix(in srgb,var(--crema) 70%, transparent); }
.hero--video .hero__cta .btn-secondary:hover{ background:var(--crema); color:var(--negro-oliva); border-color:var(--crema); }

/* Indicador de scroll */
.hero__scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  width:26px; height:42px; z-index:2;
  border:2px solid color-mix(in srgb,var(--crema) 70%, transparent);
  border-radius:14px;
}
.hero__scroll span{
  position:absolute; left:50%; top:8px; transform:translateX(-50%);
  width:3px; height:8px; border-radius:2px; background:var(--crema);
  animation:heroScroll 1.6s ease-in-out infinite;
}
@keyframes heroScroll{ 0%{ opacity:0; transform:translate(-50%,0);} 40%{ opacity:1;} 80%{ opacity:0; transform:translate(-50%,12px);} 100%{ opacity:0;} }

/* Accesibilidad: sin movimiento, ocultamos el vídeo y dejamos el fondo oscuro */
@media (prefers-reduced-motion:reduce){
  .hero__video{ display:none; }
  .hero__scroll span{ animation:none; }
}
.hero__grid{
  display:grid;
  grid-template-columns:1fr 1fr;   /* 360° izquierda · texto derecha */
  gap:clamp(48px, 9vw, 220px);     /* separa más las columnas */
  align-items:center;
  max-width:1820px;                /* usa más ancho de pantalla */
  padding-block:clamp(48px,7vw,96px);
}
.hero__claim{
  max-width:16ch;
  margin-bottom:22px;
  font-size:clamp(1.9rem, 3.2vw, 3rem);   /* titular más pequeño */
}
.hero__sub{
  font-size:clamp(1rem,1.3vw,1.15rem);
  max-width:46ch;
  margin-bottom:14px;
  color:var(--negro-oliva);
}
.hero__origin{
  font-family:var(--font-editorial);
  font-style:italic;
  font-size:1.3rem;
  color:var(--verde-oliva);
  margin-bottom:32px;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; }

/* Imagen de producto del hero */
.hero__media{ position:relative; display:flex; justify-content:center; }
.hero__media img{
  width:auto;
  max-height:clamp(420px, 64vh, 680px);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}
/* Detalle gráfico: bloque verde oliva + línea dorada */
.hero__media::before{
  content:"";
  position:absolute; inset:auto -4% -6% 22%;
  height:62%; z-index:-1;
  background:var(--verde-oliva);
  border-radius:var(--radius);
  opacity:.16;
  transform:rotate(-3deg);
}
.hero__rule{
  width:120px; height:0; border-top:2px solid var(--dorado);
  margin-bottom:26px;
}

/* ------------------------------------------------------------
   7b. Lata 3D girable dentro del origen (posicionado para el hint)
   ------------------------------------------------------------ */
/* Panel "estudio de producto": la lata en un fondo distinto al del texto,
   con foco cálido, marco fino y suelo con sombra. Contrasta y luce premium. */
.origin__media{
  position:relative; display:grid; place-items:center;
  border-radius:26px;
  min-height:clamp(460px,66vh,700px);   /* reserva el hueco: sin salto al cargar el 3D */
  padding:clamp(18px,3vw,42px) clamp(14px,2.5vw,32px) clamp(30px,4vw,52px);
  background:
    radial-gradient(58% 50% at 50% 40%, color-mix(in srgb,var(--dorado) 26%, transparent), transparent 62%),
    linear-gradient(158deg, #2a2c15 0%, #16170d 100%);
  box-shadow:0 34px 70px -34px rgba(0,0,0,.55), inset 0 0 0 1px color-mix(in srgb,var(--crema) 10%, transparent);
  overflow:hidden;
}
/* Suelo del panel: elipse de sombra bajo la lata para que quede posada */
.origin__media::after{
  content:"";
  position:absolute; left:50%; bottom:7%;
  width:56%; height:30px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(0,0,0,.5), transparent 70%);
  filter:blur(8px); pointer-events:none;
}
.origin__media model-viewer{ position:relative; z-index:1; }

/* Variante foto: imagen inspiracional del origen ocupando el panel */
.origin__media--photo{ padding:0; }
.origin__media--photo::after{ display:none; }
.origin__media--photo img{
  position:relative; z-index:1;
  width:100%; height:100%;
  min-height:clamp(460px,66vh,700px);
  object-fit:cover;
  border-radius:26px;
  filter:saturate(1.04) contrast(1.02);
}

/* La lata: visor 3D girable (sustituye a la imagen fija con hotspots) */
.lata__media--3d{
  position:relative; display:grid; place-items:center;
  width:min(420px,100%); min-height:clamp(420px,60vh,600px);
  border-radius:26px; overflow:hidden;
  background:
    radial-gradient(58% 50% at 50% 40%, color-mix(in srgb,var(--dorado) 22%, transparent), transparent 62%),
    linear-gradient(158deg, #2a2c15 0%, #16170d 100%);
  box-shadow:0 34px 70px -34px rgba(0,0,0,.5), inset 0 0 0 1px color-mix(in srgb,var(--crema) 10%, transparent);
}
.lata__media--3d model-viewer{
  width:100%; height:clamp(420px,60vh,600px);
  background:transparent;
  --poster-color:transparent;
  --progress-bar-color:var(--dorado);
  cursor:grab; z-index:1;
}
.lata__media--3d model-viewer:active{ cursor:grabbing; }

/* Visor 360° (secuencia de imágenes) */
.viewer-360{
  position:relative;
  aspect-ratio:560 / 720;
  height:clamp(420px, 60vh, 640px);
  max-width:100%;
  margin-inline:auto;
  border-radius:var(--radius);
  cursor:grab;
  touch-action:pan-y;             /* arrastre horizontal gira · vertical hace scroll */
  user-select:none; -webkit-user-select:none;
  outline-offset:4px;
}
.viewer-360.is-dragging{ cursor:grabbing; }
.viewer-360:focus-visible{ outline:2px solid var(--dorado); }
.viewer-360__img,
.viewer-360__fallback{
  width:100%; height:100%;
  object-fit:contain;
  border-radius:var(--radius);
  pointer-events:none;
  -webkit-user-drag:none;
  filter:saturate(1.04) contrast(1.02) brightness(1.01); /* = .img-warm */
}
/* Capa de carga */
.viewer-360__overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px;
  color:var(--gris-texto);
  font-family:var(--font-heading); letter-spacing:.1em; font-size:.8rem;
}
.viewer-360__spinner{
  width:30px; height:30px; border-radius:50%;
  border:2px solid color-mix(in srgb, var(--verde-oliva) 30%, transparent);
  border-top-color:var(--dorado);
  animation:viewer360-spin .8s linear infinite;
}
@keyframes viewer360-spin{ to{ transform:rotate(360deg); } }
/* Pista de arrastre */
.viewer-360__hint{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:.4em;
  background:color-mix(in srgb, var(--negro-oliva) 78%, transparent);
  color:var(--crema);
  font-family:var(--font-heading); font-weight:500;
  text-transform:uppercase; letter-spacing:.1em; font-size:.66rem;
  padding:.5em 1em; border-radius:var(--radius-pill);
  opacity:0; transition:opacity .4s ease; pointer-events:none;
  backdrop-filter:blur(4px);
}
.viewer-360.is-ready .viewer-360__hint{ opacity:.92; }
.viewer-360.is-touched .viewer-360__hint{ opacity:0; }
@media (prefers-reduced-motion:reduce){
  .viewer-360__spinner{ animation:none; }
}

/* ------------------------------------------------------------
   7b. MAPA SATÉLITE (Leaflet)
   ------------------------------------------------------------ */
.mapa__head{ max-width:62ch; margin-bottom:clamp(20px,3vw,32px); }
.mapa__intro{ color:var(--gris-texto); margin-top:12px; max-width:56ch; }
.mapa__journey{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.mapa__step{
  font-family:var(--font-heading); font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; font-size:.72rem;
  padding:.55em 1.05em; border-radius:var(--radius-pill);
  border:1px solid color-mix(in srgb,var(--negro-oliva) 18%,transparent);
  color:var(--negro-oliva); background:transparent; cursor:pointer;
  transition:background-color .2s, color .2s, border-color .2s;
}
.mapa__step:hover{ border-color:var(--dorado); }
.mapa__step.is-active{ background:var(--negro-oliva); color:var(--crema); border-color:var(--negro-oliva); }
.mapa__wrap{ position:relative; }
.mapa__fact{
  position:absolute; left:16px; bottom:16px; z-index:1;
  max-width:min(360px, 72%);
  background:color-mix(in srgb,var(--negro-oliva) 82%,transparent);
  color:var(--crema);
  font-family:var(--font-editorial); font-size:1.06rem; line-height:1.35;
  padding:14px 16px; border-radius:var(--radius);
  box-shadow:var(--shadow-soft); backdrop-filter:blur(4px);
  pointer-events:none; opacity:0; transform:translateY(8px);
  transition:opacity .4s ease, transform .4s ease;
}
.mapa__fact.show{ opacity:1; transform:none; }
.mapa{
  height:clamp(380px, 58vh, 600px);
  width:100%;
  border-radius:var(--radius);
  border:var(--line);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  z-index:0;            /* mantiene el mapa por debajo del header sticky */
}
.finca-pin span{
  display:block; width:18px; height:18px; border-radius:50%;
  background:var(--dorado); border:3px solid var(--crema);
  box-shadow:0 0 0 0 rgba(185,152,58,.55);
  animation:finca-pulse 2.2s infinite;
}
@keyframes finca-pulse{
  0%{ box-shadow:0 0 0 0 rgba(185,152,58,.5); }
  70%{ box-shadow:0 0 0 18px rgba(185,152,58,0); }
  100%{ box-shadow:0 0 0 0 rgba(185,152,58,0); }
}
.maplibregl-popup-content{ font-family:var(--font-body); font-size:.9rem; line-height:1.5; color:var(--negro-oliva); border-radius:var(--radius); padding:12px 14px; box-shadow:var(--shadow-card); }
.maplibregl-popup-content strong{ font-family:var(--font-heading); letter-spacing:.02em; }

/* ------------------------------------------------------------
   8. BLOQUE DE ORIGEN
   ------------------------------------------------------------ */
.origin{
  /* Borde superior oliva PLANO (= final del fundido del hero, sin corte).
     El protagonismo lo lleva el panel oscuro de la lata; aquí solo un
     leve viñeteado inferior para dar profundidad al lado del texto. */
  background-color:var(--verde-oliva);
  background-image:radial-gradient(75% 60% at 18% 88%, rgba(12,14,7,.30), transparent 72%);
  color:var(--crema);
  position:relative;
  overflow:hidden;
}
.origin h2{ color:var(--crema); }
.origin__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,72px);
  align-items:center;
}
.origin__text .editorial{
  font-size:clamp(1.4rem,2.4vw,2rem);
  color:var(--blanco-calido);
  margin-top:18px;
}
.origin__lead{ margin-top:22px; color:color-mix(in srgb, var(--crema) 86%, transparent); max-width:48ch; }
.origin .container{ position:relative; z-index:1; }

/* ------------------------------------------------------------
   9. BLOQUE DE ATRIBUTOS (4 cards)
   ------------------------------------------------------------ */
.attrs__head{ max-width:54ch; margin-bottom:clamp(28px,4vw,48px); }
.attrs__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.attr-card{
  background:var(--blanco-calido);
  border:1px solid color-mix(in srgb, var(--verde-oliva) 40%, transparent);
  border-radius:var(--radius);
  padding:28px 24px 30px;
  box-shadow:var(--shadow-card);
  transition:border-color .25s ease, transform .25s ease;
}
.attr-card:hover{ border-color:var(--dorado); transform:translateY(-4px); }
.attr-card__num{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:.95rem;
  color:var(--dorado);
  letter-spacing:.1em;
}
.attr-card__icon{ width:30px; height:30px; margin:0 0 16px; color:var(--verde-oliva); }
.attr-card h3{ font-size:1.18rem; margin-bottom:8px; }
.attr-card p{ font-size:.92rem; color:var(--gris-texto); }

/* ------------------------------------------------------------
   Bloque unificado "Carácter & calidad" (diseño editorial +
   ficha de análisis). Un solo bloque, mobile-first.
   ------------------------------------------------------------ */
.ac-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px,4vw,68px);
  align-items:start;
}

/* --- Carácter: lista editorial (sin cajas, con hilo separador) --- */
.ac-traits{ display:flex; flex-direction:column; }
.ac-trait{
  display:flex; gap:18px; align-items:flex-start;
  padding:clamp(16px,2vw,22px) 0;
  border-bottom:1px solid color-mix(in srgb,var(--negro-oliva) 12%, transparent);
}
.ac-trait:first-child{ padding-top:0; }
.ac-trait:last-child{ border-bottom:0; padding-bottom:0; }
.ac-trait__icon{
  width:34px; height:34px; flex:0 0 auto; margin-top:2px;
  padding:6px; border-radius:50%;
  color:var(--verde-oliva);
  border:1px solid color-mix(in srgb,var(--dorado) 55%, transparent);
}
.ac-trait__body h3{ font-size:1.12rem; margin-bottom:4px; }
.ac-trait__body p{ font-size:.94rem; color:var(--gris-texto); max-width:42ch; }

/* --- Análisis: media de producción + ficha (columna derecha) --- */
.ac-side{ display:flex; flex-direction:column; gap:clamp(18px,2.5vw,26px); }
.ac-media{
  position:relative; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-card); aspect-ratio:16/9;
  background:linear-gradient(150deg, color-mix(in srgb,var(--dorado) 20%, var(--blanco-calido)), color-mix(in srgb,var(--verde-oliva) 22%, var(--blanco-calido)));
}
.ac-media img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.04) contrast(1.02); }
.ac-media figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:26px 18px 12px;
  font-family:var(--font-heading); font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  font-size:.8rem; color:var(--crema);
  background:linear-gradient(to top, rgba(13,15,7,.85), transparent);
}
.ac-media.is-empty{ display:grid; place-items:center; }
.ac-media.is-empty figcaption{
  position:static; background:none; padding:0; text-align:center;
  color:color-mix(in srgb,var(--negro-oliva) 62%, transparent);
}

/* --- Análisis: ficha de la cosecha (estilo certificado) --- */
.ac-panel{
  background:var(--blanco-calido);
  border:1px solid color-mix(in srgb,var(--verde-oliva) 34%, transparent);
  border-radius:var(--radius);
  padding:clamp(22px,3vw,34px);
  box-shadow:var(--shadow-card);
}
/* Variante compacta: la ficha ocupa menos espacio (deja sitio a la media) */
.ac-panel--sm{ padding:clamp(16px,2vw,22px); }
.ac-panel--sm .ac-panel__head{ padding-bottom:12px; }
.ac-panel--sm .ac-metric{ padding:12px 0; }
.ac-panel--sm .ac-metric__value{ font-size:1.25rem; }
.ac-panel--sm .ac-metric__bar{ margin:8px 0 7px; }
.ac-panel--sm .ac-metric__ref{ font-size:.82rem; }
.ac-panel__head{
  display:flex; flex-direction:column; gap:4px;
  padding-bottom:18px; margin-bottom:6px;
  border-bottom:1px solid color-mix(in srgb,var(--negro-oliva) 12%, transparent);
}
.ac-panel__kick{
  font-family:var(--font-heading); font-weight:600; text-transform:uppercase;
  letter-spacing:.18em; font-size:.72rem; color:var(--dorado);
}
.ac-panel__title{ font-family:var(--font-heading); font-weight:600; font-size:1.15rem; color:var(--negro-oliva); }
.ac-metric{
  padding:18px 0;
  border-bottom:1px solid color-mix(in srgb,var(--negro-oliva) 10%, transparent);
}
.ac-metric:last-child{ border-bottom:0; padding-bottom:0; }
.ac-metric__row{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; }
.ac-metric__label{
  font-family:var(--font-heading); font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; font-size:.9rem; color:var(--negro-oliva);
}
.ac-metric__value{
  font-family:var(--font-heading); font-weight:700; font-size:1.5rem;
  color:var(--negro-oliva); white-space:nowrap; font-variant-numeric:tabular-nums;
}
.ac-metric__value i{ font-style:normal; font-weight:600; font-size:.78rem; color:var(--gris-texto); margin-left:.25em; }
.ac-metric__bar{
  height:6px; margin:11px 0 9px;
  background:color-mix(in srgb,var(--negro-oliva) 9%, transparent);
  border-radius:var(--radius-pill); overflow:hidden;
}
.ac-metric__ref{ font-size:.82rem; color:var(--gris-texto); }

@media (max-width:860px){
  .ac-grid{ grid-template-columns:1fr; gap:clamp(28px,7vw,40px); }
}

/* ------------------------------------------------------------
   10. SECCIÓN PRODUCTO
   ------------------------------------------------------------ */
.product__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,80px);
  align-items:center;
}
.product__media{
  background:var(--blanco-calido);
  border:var(--line);
  border-radius:var(--radius);
  padding:clamp(24px,4vw,56px);
  display:flex; justify-content:center;
}
.product__media img{ max-height:560px; width:auto; box-shadow:var(--shadow-soft); border-radius:var(--radius); }

.product__name{ font-size:clamp(2rem,3.4vw,2.8rem); }
.product__price{
  font-family:var(--font-heading); font-weight:600;
  font-size:1.6rem; color:var(--negro-oliva); margin:6px 0 18px;
}
.product__price small{ font-size:.82rem; color:var(--gris-texto); font-weight:500; }
.product__fresh{ display:inline-flex; align-items:center; gap:.5em; margin:-8px 0 18px; font-family:var(--font-heading); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:.74rem; color:var(--verde-oliva); }
.product__fresh-dot{ width:8px; height:8px; border-radius:50%; background:#3a4a1e; animation:fresh-pulse 2s infinite; }
@keyframes fresh-pulse{ 0%{ box-shadow:0 0 0 0 rgba(58,74,30,.55); } 70%{ box-shadow:0 0 0 7px rgba(58,74,30,0); } 100%{ box-shadow:0 0 0 0 rgba(58,74,30,0); } }
.product__desc{ max-width:44ch; margin-bottom:24px; color:var(--gris-texto); }

/* Selector de cantidad */
.qty{ display:inline-flex; align-items:center; border:1px solid var(--negro-oliva); border-radius:var(--radius-pill); overflow:hidden; }
.qty button{ width:42px; height:42px; font-size:1.2rem; color:var(--negro-oliva); transition:background .2s; }
.qty button:hover{ background:color-mix(in srgb, var(--negro-oliva) 8%, transparent); }
.qty input{ width:46px; text-align:center; border:0; background:transparent; font-family:var(--font-body); font-weight:600; font-size:1rem; color:var(--negro-oliva); -moz-appearance:textfield; }
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{ -webkit-appearance:none; }

.product__buy{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-block:6px 28px; }

/* Ficha de detalles */
.product__details{ display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; border-top:var(--line); padding-top:22px; }
.product__details dt{ font-family:var(--font-heading); font-weight:500; text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; color:var(--verde-oliva); }
.product__details dd{ font-size:.96rem; margin-top:2px; }

/* Badge terracota (acento puntual) */
.badge{
  display:inline-block;
  font-family:var(--font-heading); font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; font-size:.7rem;
  color:var(--blanco-calido); background:var(--terracota);
  padding:5px 12px; border-radius:var(--radius-pill);
  margin-bottom:16px;
}

/* ------------------------------------------------------------
   11. BLOQUE EDITORIAL
   ------------------------------------------------------------ */
.editorial-block{ text-align:center; }
.editorial-block .editorial{
  font-size:clamp(1.8rem, 4vw, 3.1rem);
  max-width:18ch;
  margin-inline:auto;
  color:var(--negro-oliva);
}
.editorial-block__rule{ width:90px; height:0; border-top:1.5px solid var(--dorado); margin:0 auto 30px; }
.editorial-block .editorial-i{ color:var(--verde-oliva); }

/* ------------------------------------------------------------
   11b. BANDA DE OLIVAS (three.js, decorativa)
   ------------------------------------------------------------ */
.olive-band{
  position:relative;
  width:100%;
  height:clamp(300px, 40vh, 460px);
  overflow:hidden;
  background:radial-gradient(120% 120% at 50% 0%,
    var(--blanco-calido) 0%, var(--crema) 70%);
  border-block:var(--line);
}
.olive-band__canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
}
.olive-band__caption{
  position:relative; z-index:1;
  height:100%;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding-inline:var(--pad-x);
  pointer-events:none;
}
.olive-band__caption .editorial{
  font-size:clamp(1.6rem, 3.4vw, 2.8rem);
  color:var(--negro-oliva);
  text-shadow:0 1px 2px color-mix(in srgb, var(--crema) 75%, transparent);
}

/* ------------------------------------------------------------
   11c. FICHA DE CATA (radar + datos) + botón AR
   ------------------------------------------------------------ */
.cata__head{ max-width:60ch; margin-bottom:clamp(28px,4vw,52px); }
/* Intro del bloque unificado Carácter & análisis */
.attrs__intro{ color:var(--gris-texto); margin-top:14px; max-width:56ch; }
/* Etiqueta ligera que introduce los datos de cata dentro del mismo bloque
   (sin divisor ni segundo titular grande: los datos y las tarjetas son un todo) */
.cata__sublabel{
  text-align:center;
  margin:clamp(40px,6vw,72px) 0 clamp(26px,3.5vw,40px);
  overflow:hidden;
}
.cata__sublabel span{
  position:relative; display:inline-block;
  font-family:var(--font-heading); font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; font-size:.9rem; color:var(--verde-oliva);
  padding:0 18px;
}
/* líneas finas a los lados de la etiqueta, que la integran con el bloque */
.cata__sublabel span::before,
.cata__sublabel span::after{
  content:""; position:absolute; top:50%; width:100vw; height:1px;
  background:color-mix(in srgb,var(--negro-oliva) 12%, transparent);
}
.cata__sublabel span::before{ right:100%; }
.cata__sublabel span::after{ left:100%; }
.cata__intro{ color:var(--gris-texto); margin-top:12px; max-width:54ch; }
.cata__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center; }
.cata__radar{ display:flex; justify-content:center; }
.radar{ width:100%; max-width:420px; height:auto; overflow:visible; }
.cata__stats{ display:flex; flex-direction:column; gap:24px; }
.stat__top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:9px; }
.stat__label{ font-family:var(--font-heading); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:.95rem; color:var(--negro-oliva); }
.stat__value{ font-family:var(--font-heading); font-weight:700; font-size:1.15rem; color:var(--dorado); white-space:nowrap; }
.stat__bar{ height:9px; background:color-mix(in srgb,var(--negro-oliva) 10%, transparent); border-radius:var(--radius-pill); overflow:hidden; }
.stat__fill{ height:100%; width:0; border-radius:var(--radius-pill); background:linear-gradient(90deg,var(--verde-oliva),var(--dorado)); transition:width 1.1s cubic-bezier(.22,1,.36,1); }
.stat__note{ font-size:.84rem; color:var(--gris-texto); margin-top:8px; }
.cata__note{ margin-top:26px; font-size:.78rem; color:var(--gris-texto); }
@media (max-width:880px){ .cata__grid{ grid-template-columns:1fr; gap:40px; } }

/* Botón AR (model-viewer del hero) */
.ar-btn{
  position:absolute; left:50%; top:12px; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:.5em;
  background:var(--negro-oliva); color:var(--crema);
  font-family:var(--font-heading); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; font-size:.72rem;
  padding:.7em 1.2em; border-radius:var(--radius-pill); border:0; cursor:pointer;
  box-shadow:var(--shadow-soft); z-index:2;
}

/* ------------------------------------------------------------
   11d. PROCESO (timeline de obtención)
   ------------------------------------------------------------ */
.proceso__head{ max-width:60ch; margin-bottom:clamp(36px,5vw,64px); }
.proceso__intro{ color:var(--gris-texto); margin-top:12px; max-width:52ch; }
.proceso__timeline{ position:relative; list-style:none; margin:0; padding:0; }
.proceso__timeline::before{
  content:""; position:absolute; left:50%; top:6px; bottom:6px; width:2px;
  background:linear-gradient(var(--dorado), color-mix(in srgb,var(--dorado) 15%, transparent));
  transform:translateX(-50%);
}
.pstep{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,72px);
  align-items:center; margin-bottom:clamp(40px,6vw,96px);
  opacity:0; transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.pstep:last-child{ margin-bottom:0; }
.pstep.in{ opacity:1; transform:none; }
.pstep::before{
  content:""; position:absolute; left:50%; top:50%;
  width:15px; height:15px; border-radius:50%;
  background:var(--dorado); border:3px solid var(--crema);
  transform:translate(-50%,-50%); z-index:2; box-shadow:0 0 0 1px var(--line);
}
.pstep__media{
  position:relative; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden;
  border:var(--line); box-shadow:var(--shadow-soft);
  background:linear-gradient(135deg, var(--blanco-calido), color-mix(in srgb,var(--verde-oliva) 22%, var(--crema)));
}
.pstep__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.03) contrast(1.02); }
.pstep__ph{
  position:absolute; inset:0; display:flex; align-items:flex-end; padding:16px;
  font-family:var(--font-heading); font-weight:600; text-transform:uppercase; letter-spacing:.12em;
  font-size:.72rem; color:color-mix(in srgb,var(--negro-oliva) 50%, transparent);
}
.pstep__num{ font-family:var(--font-heading); font-weight:700; font-size:2.6rem; color:var(--dorado); line-height:1; }
.pstep__body h3{ font-size:1.45rem; margin:6px 0 10px; }
.pstep__body p{ color:var(--gris-texto); max-width:42ch; }
.pstep__badge{
  display:inline-block; margin-top:14px;
  font-family:var(--font-heading); font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  font-size:.68rem; color:var(--blanco-calido); background:var(--verde-oliva);
  padding:6px 12px; border-radius:var(--radius-pill);
}
/* alterna lados */
.pstep:nth-child(even) .pstep__media{ order:2; }
.pstep:nth-child(even) .pstep__body{ order:1; text-align:right; }
.pstep:nth-child(even) .pstep__body p{ margin-left:auto; }
@media (max-width:820px){
  .proceso__timeline::before{ left:19px; }
  .pstep{ grid-template-columns:1fr; gap:16px; padding-left:52px; margin-bottom:44px; }
  .pstep::before{ left:19px; top:26px; }
  .pstep:nth-child(even) .pstep__media{ order:0; }
  .pstep:nth-child(even) .pstep__body{ order:0; text-align:left; }
  .pstep:nth-child(even) .pstep__body p{ margin-left:0; }
}

/* ------------------------------------------------------------
   11e. COMPARADOR (AURO vs súper)
   ------------------------------------------------------------ */
.comp__head{ max-width:60ch; margin-bottom:clamp(28px,4vw,48px); }
.comp__intro{ color:var(--gris-texto); margin-top:12px; max-width:54ch; }
.comp__table{
  border:var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-card); background:var(--blanco-calido);
}
.comp__row{
  display:grid; grid-template-columns:1.1fr 1.4fr 1.1fr; align-items:center;
  gap:clamp(10px,2vw,28px); padding:16px clamp(14px,2.5vw,28px);
  border-top:var(--line);
  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease;
}
.comparador.in .comp__row{ opacity:1; transform:none; }
.comparador.in .comp__row:nth-child(2){ transition-delay:.05s; }
.comparador.in .comp__row:nth-child(3){ transition-delay:.1s; }
.comparador.in .comp__row:nth-child(4){ transition-delay:.15s; }
.comparador.in .comp__row:nth-child(5){ transition-delay:.2s; }
.comparador.in .comp__row:nth-child(6){ transition-delay:.25s; }
.comparador.in .comp__row:nth-child(7){ transition-delay:.3s; }
.comp__row:first-child{ border-top:0; }
.comp__row--head{ background:color-mix(in srgb,var(--negro-oliva) 4%, transparent); }
.comp__crit{ font-family:var(--font-heading); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:.84rem; color:var(--negro-oliva); }
.comp__crit small{ display:block; font-weight:500; letter-spacing:0; text-transform:none; font-size:.72rem; color:var(--gris-texto); }
.comp__h{ font-family:var(--font-heading); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.95rem; }
.comp__h--auro{ color:var(--dorado); }
.comp__h--super{ color:var(--gris-texto); }
.comp__cell{ font-size:.95rem; }
.comp__cell--auro{
  font-weight:600; color:var(--negro-oliva);
  border-left:3px solid var(--dorado); padding-left:14px;
}
.comp__cell--super{ color:var(--gris-texto); }
.comp__cell b{ font-family:var(--font-heading); font-size:1.15rem; display:block; }
.comp__cell--auro b{ color:var(--dorado); }
.tick{ color:var(--dorado); font-weight:700; }
.cross{ color:color-mix(in srgb,var(--gris-texto) 70%, transparent); }
.comp__bar{ display:block; height:6px; margin-top:7px; border-radius:var(--radius-pill); background:color-mix(in srgb,var(--negro-oliva) 9%, transparent); overflow:hidden; }
.comp__bar > i{ display:block; height:100%; width:0; border-radius:var(--radius-pill); background:linear-gradient(90deg,var(--verde-oliva),var(--dorado)); transition:width 1.1s cubic-bezier(.22,1,.36,1); }
.comp__bar--mute > i{ background:color-mix(in srgb,var(--gris-texto) 55%, transparent); }
.comp__note{ margin-top:18px; font-size:.78rem; color:var(--gris-texto); }
@media (max-width:740px){
  .comp__row{ grid-template-columns:1fr; gap:6px; }
  .comp__row--head{ display:none; }
  .comp__cell--auro{ border-left:3px solid var(--dorado); }
  .comp__cell--auro::before{ content:"AURO · "; color:var(--dorado); font-family:var(--font-heading); font-weight:700; }
  .comp__cell--super::before{ content:"Súper · "; color:var(--gris-texto); font-family:var(--font-heading); font-weight:700; }
}

/* ------------------------------------------------------------
   11f. CTA PERSONALIZACIÓN
   ------------------------------------------------------------ */
.personaliza-cta{ background:var(--verde-oliva); color:var(--crema); text-align:center; }
.personaliza-cta__inner{ max-width:60ch; margin-inline:auto; }
.personaliza-cta h2{ color:var(--crema); }
.personaliza-cta__txt{ color:color-mix(in srgb,var(--crema) 86%, transparent); margin:14px auto 26px; max-width:48ch; }
.personaliza-cta .btn-primary{ background:var(--crema); color:var(--negro-oliva); }
.personaliza-cta .btn-primary:hover{ background:var(--blanco-calido); color:var(--negro-oliva); }

/* ------------------------------------------------------------
   11g. BANDAS / PATRONES DE SEPARACIÓN (mosaicos de marca)
   ------------------------------------------------------------ */
/* Mosaicos con motivo de RAMA DE OLIVO y ACEITUNAS, en verde.
   Cada patrón se superpone en dos capas desfasadas (medio mosaico) para
   que se vea más denso y orgánico, no en cuadrícula. */
.band{ width:100%; height:clamp(72px, 11vw, 130px); border-block:var(--line); }

/* — Ramas de olivo (verde sobre bone) — */
.band--rama{
  background-color:#E7E3CE;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='80'%3E%3Cpath%20d='M10,66Q36,48,64,16'%20fill='none'%20stroke='%235d6b30'%20stroke-width='1.8'%20stroke-linecap='round'/%3E%3Cg%20fill='%236b7a3e'%3E%3Cellipse%20cx='24'%20cy='55'%20rx='10'%20ry='3.2'%20transform='rotate(38,24,55)'/%3E%3Cellipse%20cx='33'%20cy='48'%20rx='9'%20ry='2.9'%20transform='rotate(-46,33,48)'/%3E%3Cellipse%20cx='40'%20cy='38'%20rx='10'%20ry='3.2'%20transform='rotate(34,40,38)'/%3E%3Cellipse%20cx='49'%20cy='30'%20rx='9'%20ry='2.9'%20transform='rotate(-50,49,30)'/%3E%3C/g%3E%3Cg%20fill='%233a4a1e'%3E%3Cellipse%20cx='62'%20cy='18'%20rx='4.4'%20ry='5.4'/%3E%3Cellipse%20cx='55'%20cy='13'%20rx='3.8'%20ry='4.8'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='80'%3E%3Cpath%20d='M10,66Q36,48,64,16'%20fill='none'%20stroke='%235d6b30'%20stroke-width='1.8'%20stroke-linecap='round'/%3E%3Cg%20fill='%236b7a3e'%3E%3Cellipse%20cx='24'%20cy='55'%20rx='10'%20ry='3.2'%20transform='rotate(38,24,55)'/%3E%3Cellipse%20cx='33'%20cy='48'%20rx='9'%20ry='2.9'%20transform='rotate(-46,33,48)'/%3E%3Cellipse%20cx='40'%20cy='38'%20rx='10'%20ry='3.2'%20transform='rotate(34,40,38)'/%3E%3Cellipse%20cx='49'%20cy='30'%20rx='9'%20ry='2.9'%20transform='rotate(-50,49,30)'/%3E%3C/g%3E%3Cg%20fill='%233a4a1e'%3E%3Cellipse%20cx='62'%20cy='18'%20rx='4.4'%20ry='5.4'/%3E%3Cellipse%20cx='55'%20cy='13'%20rx='3.8'%20ry='4.8'/%3E%3C/g%3E%3C/svg%3E");
  background-size:80px 80px;
  background-position:0 0, 40px 40px;
  background-repeat:repeat, repeat;
}

/* — Aceitunas (verde sobre bone) — */
.band--aceitunas{
  background-color:#E7E3CE;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='56'%20height='56'%3E%3Cg%20fill='%236b7a3e'%3E%3Cellipse%20cx='15'%20cy='22'%20rx='8'%20ry='2.6'%20transform='rotate(32,15,22)'/%3E%3Cellipse%20cx='40'%20cy='34'%20rx='8'%20ry='2.6'%20transform='rotate(-34,40,34)'/%3E%3C/g%3E%3Cg%20fill='%233a4a1e'%3E%3Cellipse%20cx='26'%20cy='28'%20rx='4.6'%20ry='5.6'/%3E%3Cellipse%20cx='33'%20cy='24'%20rx='4'%20ry='5'/%3E%3Cellipse%20cx='21'%20cy='23'%20rx='3.6'%20ry='4.6'/%3E%3C/g%3E%3Cg%20fill='%238a9a4e'%3E%3Cellipse%20cx='25'%20cy='26'%20rx='1.2'%20ry='1.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size:56px 56px;
  background-position:0 0;
  background-repeat:repeat;
}

/* — Ramas en claro sobre verde oliva (variante oscura) — */
.band--rama-olive{
  background-color:#5f6b2e;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='80'%3E%3Cpath%20d='M10,66Q36,48,64,16'%20fill='none'%20stroke='%23c7cf99'%20stroke-width='1.8'%20stroke-linecap='round'/%3E%3Cg%20fill='%23d3d9a8'%3E%3Cellipse%20cx='24'%20cy='55'%20rx='10'%20ry='3.2'%20transform='rotate(38,24,55)'/%3E%3Cellipse%20cx='33'%20cy='48'%20rx='9'%20ry='2.9'%20transform='rotate(-46,33,48)'/%3E%3Cellipse%20cx='40'%20cy='38'%20rx='10'%20ry='3.2'%20transform='rotate(34,40,38)'/%3E%3Cellipse%20cx='49'%20cy='30'%20rx='9'%20ry='2.9'%20transform='rotate(-50,49,30)'/%3E%3C/g%3E%3Cg%20fill='%23BE9B3A'%3E%3Cellipse%20cx='62'%20cy='18'%20rx='4.4'%20ry='5.4'/%3E%3Cellipse%20cx='55'%20cy='13'%20rx='3.8'%20ry='4.8'/%3E%3C/g%3E%3C/svg%3E");
  background-size:80px 80px;
  background-repeat:repeat;
}

/* Divider realista: guirnalda de rama de olivo (botánica) que recorre el separador */
.leaf-divider{
  width:100%;
  height:clamp(50px, 7vw, 82px);
  background-color:var(--crema);
  background-image:url("assets/rama-pattern.svg");
  background-repeat:repeat-x;
  background-position:center;
  background-size:auto 66%;
  border-block:var(--line);
}
.leaf-divider--olive{ background-color:#eef0e0; }

/* Banner-bloque con frase (negro de la lata) — sin patrón */
.band-statement{
  position:relative; overflow:hidden; text-align:center;
  padding-block:clamp(56px, 9vw, 110px);
  background-color:#1B1B17; color:#E7E3CE;
}
.band-statement__txt{
  position:relative; z-index:1;
  font-family:var(--font-editorial); font-style:italic;
  font-size:clamp(1.7rem, 4vw, 3rem); color:#BE9B3A;
  max-width:20ch; margin-inline:auto; line-height:1.15;
}
.band-statement__kicker{ position:relative; z-index:1; display:block; margin-bottom:14px; color:color-mix(in srgb,#E7E3CE 75%, transparent); }

/* ------------------------------------------------------------
   12. FOOTER
   ------------------------------------------------------------ */
.site-footer{ background:var(--negro-oliva); color:var(--crema); padding-block:clamp(48px,6vw,80px) 36px; }
.site-footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; }
.footer-logo{ display:inline-block; line-height:0; position:relative; z-index:2; }
.footer-logo img{ height:64px; width:auto; filter:brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,.5)); }
.site-footer p{ color:color-mix(in srgb, var(--crema) 78%, transparent); font-size:.92rem; max-width:34ch; }
.footer-col h4{ color:var(--dorado); font-size:.82rem; letter-spacing:.12em; margin-bottom:14px; }
.footer-col a{ display:block; padding:5px 0; color:color-mix(in srgb, var(--crema) 82%, transparent); font-size:.92rem; }
.footer-col a:hover{ color:var(--dorado); }
.site-footer__rule{ height:0; border-top:1px solid color-mix(in srgb, var(--dorado) 60%, transparent); margin:clamp(32px,4vw,48px) 0 22px; }
.site-footer__bottom{ display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; align-items:center; }
.site-footer__bottom .editorial{ font-style:italic; color:var(--dorado); font-size:1.15rem; }
.site-footer__bottom small{ color:color-mix(in srgb, var(--crema) 60%, transparent); font-size:.8rem; }

/* ------------------------------------------------------------
   13. IMÁGENES (clases de tratamiento)
   ------------------------------------------------------------ */
.img-editorial{ border-radius:var(--radius); box-shadow:var(--shadow-soft); }
.img-soft{ border-radius:var(--radius); box-shadow:var(--shadow-card); }
.img-warm{ filter:saturate(1.04) contrast(1.02) brightness(1.01); }
.media-frame{ background:var(--blanco-calido); border:var(--line); border-radius:var(--radius); padding:clamp(16px,2.5vw,32px); }
.media-frame--olive{ background:var(--verde-oliva); border-color:transparent; }

/* ------------------------------------------------------------
   14. RESPONSIVE (mobile-first overrides)
   ------------------------------------------------------------ */
@media (max-width:960px){
  .hero__grid{ grid-template-columns:1fr; gap:40px; }
  .hero__media{ order:-1; }
  .viewer-360{ height:auto; width:min(82%, 360px); }
  .origin__grid{ grid-template-columns:1fr; }
  .product__grid{ grid-template-columns:1fr; }
  .attrs__grid{ grid-template-columns:repeat(2,1fr); }
  .site-footer__top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
  .nav, .header-actions .btn-sm{ display:none; }
  .nav-toggle{ display:flex; }
  /* nav móvil desplegable */
  .nav.is-open{
    display:flex; flex-direction:column; align-items:flex-start; gap:4px;
    position:absolute; top:100%; left:0; right:0;
    background:var(--crema); border-bottom:var(--line);
    padding:18px var(--pad-x) 24px;
  }
  .nav.is-open a{ font-size:1.1rem; padding-block:10px; }
  /* atributos: carrusel deslizable (estilo fotos de Instagram) en móvil */
  .attrs__grid{
    display:flex; grid-template-columns:none;
    overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
    gap:14px; scrollbar-width:none;
    margin-inline:calc(var(--pad-x) * -1); padding:4px var(--pad-x) 10px;
  }
  .attrs__grid::-webkit-scrollbar{ display:none; }
  .attr-card{ flex:0 0 80%; scroll-snap-align:center; }
  .attr-card:hover{ transform:none; }
  .product__details{ grid-template-columns:1fr; }
  .site-footer__top{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto; transition:none !important; }
}

/* ============================================================
   15. PRELANZAMIENTO — añadidos (lista de espera, carrusel de
   proceso, cuenta atrás del footer, mapa de marca, legales)
   ============================================================ */

/* nav destacado hacia la lista de espera */
.nav__hot{ color:var(--dorado) !important; font-weight:600; }

/* ------------------------------------------------------------
   15a. LISTA DE ESPERA
   ------------------------------------------------------------ */
.waitlist{
  position:relative; overflow:hidden;
  background:var(--verde-oliva); color:var(--crema);
  padding-block:clamp(38px,5vw,64px);
}
.waitlist__bg{
  position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:
    radial-gradient(58% 55% at 82% 8%, color-mix(in srgb,var(--dorado) 32%, transparent), transparent 70%),
    radial-gradient(52% 55% at 8% 92%, color-mix(in srgb,var(--negro-oliva) 45%, transparent), transparent 70%);
}
.waitlist__inner{ position:relative; z-index:1; max-width:560px; margin-inline:auto; text-align:center; }
.waitlist__kicker{ color:var(--dorado); }
.waitlist__title{
  font-family:var(--font-heading); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.7rem,5vw,2.6rem); line-height:1.02; letter-spacing:.01em;
  color:var(--crema); margin:.12em 0 .3em; text-wrap:balance;
}
.waitlist__sub{ color:color-mix(in srgb,var(--crema) 86%,transparent); font-size:1rem; max-width:42ch; margin-inline:auto; }
.waitlist__pill{
  display:inline-block; margin-top:20px;
  font-family:var(--font-heading); font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  font-size:.72rem; color:var(--crema); background:var(--terracota);
  padding:7px 16px; border-radius:var(--radius-pill);
}
.waitlist__scarce{ margin-top:16px; color:color-mix(in srgb,var(--crema) 88%,transparent); }
.waitlist__scarce strong{ color:var(--crema); }
.waitlist__meter{
  height:8px; border-radius:var(--radius-pill); margin:16px auto 8px; max-width:420px;
  background:color-mix(in srgb,var(--negro-oliva) 38%, transparent); overflow:hidden;
}
.waitlist__meter > span{
  display:block; height:100%; border-radius:var(--radius-pill);
  background:linear-gradient(90deg, var(--terracota), color-mix(in srgb,var(--terracota) 55%, var(--dorado)));
}
.waitlist__scarce-note{
  font-family:var(--font-heading); font-weight:600; text-transform:uppercase; letter-spacing:.1em;
  font-size:.72rem; color:var(--dorado);
}
.waitlist__gift{
  display:flex; gap:12px; align-items:center; text-align:left;
  max-width:470px; margin:20px auto 0; padding:13px 16px;
  border:1px solid color-mix(in srgb,var(--dorado) 55%, transparent); border-radius:14px;
  background:color-mix(in srgb,var(--negro-oliva) 20%, transparent);
}
.waitlist__gift-ic{ width:26px; height:26px; flex:0 0 auto; color:var(--dorado); }
.waitlist__gift p{ color:color-mix(in srgb,var(--crema) 90%,transparent); font-size:.92rem; margin:0; }
.waitlist__gift strong{ color:var(--dorado); }
/* ---- En crudo: selector interactivo de usos ---- */
.usos__head{ max-width:720px; }
.usos__lead{ margin-top:12px; color:var(--gris-texto); font-size:1.05rem; line-height:1.6; }
.usos__grid{
  margin-top:clamp(28px,4vw,44px);
  display:grid; grid-template-columns:minmax(210px,.8fr) 1.2fr;
  gap:clamp(24px,4vw,60px); align-items:center;
}
/* selector (lista de usos, tipo editorial) */
.usos__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.usos__opt{
  display:inline-flex; align-items:center; gap:.55em; text-align:left;
  font-family:var(--font-heading); font-weight:600; text-transform:none;
  font-size:clamp(1.3rem,2.1vw,1.85rem); line-height:1.15;
  color:color-mix(in srgb,var(--negro-oliva) 40%, transparent);
  padding:.2em 0; transition:color .2s ease;
}
.usos__opt::before{ content:""; width:0; height:2px; background:var(--dorado); transition:width .28s ease; flex:0 0 auto; }
.usos__opt:hover{ color:var(--negro-oliva); }
.usos__opt.is-active{ color:var(--negro-oliva); }
.usos__opt.is-active::before{ width:26px; }
/* escenario (foto que cambia con el uso) */
.usos__stage{ position:relative; }
.usos__panel{ opacity:0; transition:opacity .45s ease; }
.usos__panel:not(.is-active){ position:absolute; inset:0; pointer-events:none; }
.usos__panel.is-active{ position:relative; opacity:1; }
.usos__shot{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  border-radius:20px; box-shadow:var(--shadow-card);
  background:linear-gradient(150deg, color-mix(in srgb,var(--dorado) 20%, var(--blanco-calido)), color-mix(in srgb,var(--verde-oliva) 22%, var(--blanco-calido)));
}
.usos__shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.usos__word{ display:none; }
.usos__shot.is-noimg{ display:grid; place-items:center; }
.usos__shot.is-noimg .usos__word{
  display:block; text-align:center; padding:24px; max-width:14ch;
  font-family:var(--font-heading); font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(1.4rem,3vw,2.1rem); color:color-mix(in srgb,var(--negro-oliva) 62%, transparent);
}
.usos__cap{ margin-top:18px; }
.usos__cap h3{ font-family:var(--font-heading); font-weight:600; text-transform:uppercase; letter-spacing:.03em; font-size:1.1rem; color:var(--negro-oliva); margin:0 0 6px; }
.usos__cap p{ color:var(--gris-texto); font-size:.98rem; line-height:1.55; margin:0; max-width:52ch; }

@media (max-width:820px){
  .usos__grid{ grid-template-columns:1fr; gap:18px; }
  /* la lista pasa a fila de chips deslizable arriba de la foto */
  .usos__list{
    flex-direction:row; gap:9px; overflow-x:auto; scrollbar-width:none;
    margin-inline:calc(var(--pad-x) * -1); padding:2px var(--pad-x) 12px;
    scroll-snap-type:x proximity; order:-1;
  }
  .usos__list::-webkit-scrollbar{ display:none; }
  .usos__opt{
    flex:0 0 auto; scroll-snap-align:start; white-space:nowrap;   /* una sola línea, sin óvalos */
    font-size:.95rem; line-height:1; padding:.72em 1.05em;
    color:var(--negro-oliva);
    background:var(--blanco-calido);
    border:1px solid color-mix(in srgb,var(--negro-oliva) 16%,transparent);
    border-radius:var(--radius-pill);
  }
  .usos__opt::before{ display:none; }
  .usos__opt.is-active{ background:var(--negro-oliva); color:var(--crema); border-color:var(--negro-oliva); }
  /* foto un poco más contenida en móvil */
  .usos__shot{ aspect-ratio:5/4; border-radius:16px; }
}

.waitlist__form{ margin-top:22px; text-align:left; }
/* Honeypot anti-bots: fuera de pantalla, sin tab ni lectura. No usar display:none
   (algunos bots ignoran los campos ocultos así). */
.wl-hp{ position:absolute; left:-5000px; top:auto; width:1px; height:1px; overflow:hidden; }
.wl-fields{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.wl-label{ display:block; font-family:var(--font-heading); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; color:var(--dorado); margin-bottom:7px; }
.wl-label i{ font-style:normal; color:color-mix(in srgb,var(--crema) 60%,transparent); }
.wl-field input{
  width:100%; padding:14px 18px; border-radius:var(--radius-pill); border:0;
  background:var(--crema); color:var(--negro-oliva); font:inherit; font-size:1rem;
}
.wl-field input::placeholder{ color:color-mix(in srgb,var(--negro-oliva) 45%,transparent); }
.wl-field input:focus-visible{ outline:2px solid var(--dorado); outline-offset:2px; }
.wl-consent{ display:flex; gap:10px; align-items:flex-start; margin-top:16px; font-size:.85rem; color:color-mix(in srgb,var(--crema) 82%,transparent); }
.wl-consent input{ margin-top:3px; width:16px; height:16px; accent-color:var(--dorado); flex:0 0 auto; }
.wl-consent a{ color:var(--dorado); text-decoration:underline; }
.wl-submit{ width:100%; margin-top:20px; justify-content:center; }
.wl-submit[disabled]{ opacity:.5; cursor:not-allowed; }
.wl-mini{ text-align:center; margin-top:12px; font-size:.8rem; color:color-mix(in srgb,var(--crema) 60%,transparent); }
.wl-error{ margin-top:14px; text-align:center; color:#ffe4dc; background:color-mix(in srgb,var(--terracota) 42%, transparent); padding:9px 14px; border-radius:8px; font-size:.86rem; }
@media (max-width:560px){ .wl-fields{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------
   15b. PROCESO — carrusel deslizable (estilo stories)
   ------------------------------------------------------------ */
.proceso{ overflow:hidden; }
.proceso__swipe{ color:var(--dorado); font-weight:600; white-space:nowrap; }
.pcar{ margin-top:clamp(22px,3vw,34px); }
.pcar__bars{ display:flex; gap:6px; margin-bottom:18px; }
.pcar__bar{ flex:1; height:3px; border-radius:var(--radius-pill); background:color-mix(in srgb,var(--negro-oliva) 14%,transparent); overflow:hidden; }
.pcar__bar > i{ display:block; height:100%; width:0; background:var(--dorado); transition:width .45s ease; }
.pcar__bar.is-done > i{ width:100%; background:color-mix(in srgb,var(--dorado) 55%, transparent); }
.pcar__bar.is-active > i{ width:100%; }
.pcar__track{
  position:relative; display:flex; gap:clamp(14px,2.5vw,26px);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding:6px var(--pad-x) 12px;
  scrollbar-width:none;
}
.pcar__track::-webkit-scrollbar{ display:none; }
.pcar__track:focus-visible{ outline:2px solid var(--dorado); outline-offset:4px; }
.pcar__track.is-drag{ scroll-behavior:auto; scroll-snap-type:none; cursor:grabbing; }
.pslide{
  flex:0 0 min(86%, 440px); scroll-snap-align:center;
  background:var(--blanco-calido); border:var(--line); border-radius:16px;
  overflow:hidden; box-shadow:var(--shadow-card);
  display:flex; flex-direction:column;
}
.pslide__media{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:linear-gradient(150deg, color-mix(in srgb,var(--verde-oliva) 32%, var(--blanco-calido)), color-mix(in srgb,var(--dorado) 24%, var(--blanco-calido)));
}
.pslide__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.03) contrast(1.02); }
.pslide__media.is-empty::after{
  content:"AURO"; position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-heading); font-weight:700; letter-spacing:.35em; font-size:1.1rem;
  color:color-mix(in srgb,var(--negro-oliva) 32%,transparent);
}
.pslide__tag{
  position:absolute; left:12px; bottom:12px; z-index:1;
  font-family:var(--font-heading); font-weight:600; text-transform:uppercase; letter-spacing:.1em;
  font-size:.66rem; color:var(--crema);
  background:color-mix(in srgb,var(--negro-oliva) 68%, transparent);
  padding:6px 12px; border-radius:var(--radius-pill); backdrop-filter:blur(3px);
}
.pslide__body{ padding:clamp(18px,3vw,26px); display:flex; flex-direction:column; gap:8px; }
.pslide__num{ font-family:var(--font-heading); font-weight:700; font-size:1.5rem; color:var(--dorado); line-height:1; }
.pslide__num i{ font-style:normal; font-size:.82rem; color:color-mix(in srgb,var(--negro-oliva) 40%,transparent); margin-left:6px; letter-spacing:.05em; }
.pslide__body h3{ font-size:1.3rem; margin:0; }
.pslide__body p{ color:var(--gris-texto); margin:0; }
.pslide__body .pstep__badge{ align-self:flex-start; margin-top:4px; }
.pcar__nav{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:20px; }
.pcar__arrow{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center; padding:0;
  border:1px solid color-mix(in srgb,var(--negro-oliva) 20%,transparent);
  background:var(--blanco-calido); color:var(--negro-oliva); cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,opacity .2s;
}
.pcar__arrow svg{ width:20px; height:20px; }
.pcar__arrow:hover{ border-color:var(--dorado); color:var(--dorado); }
.pcar__arrow:disabled{ opacity:.3; cursor:default; }
.pcar__dots{ display:flex; gap:8px; }
.pcar__dot{
  width:8px; height:8px; border-radius:50%; padding:0; cursor:pointer; border:0;
  background:color-mix(in srgb,var(--negro-oliva) 22%,transparent);
  transition:background .2s, transform .2s;
}
.pcar__dot.is-active{ background:var(--dorado); transform:scale(1.45); }

/* ------------------------------------------------------------
   15c. MAPA — tinte de marca (duotono oliva / oro)
   ------------------------------------------------------------ */
#mapa .maplibregl-canvas{
  filter:sepia(.55) saturate(1.18) hue-rotate(3deg) brightness(1.03) contrast(.97);
}
.mapa::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    radial-gradient(130% 100% at 50% -10%, transparent 62%, color-mix(in srgb,var(--verde-oliva) 34%, transparent) 100%),
    linear-gradient(180deg, transparent 68%, color-mix(in srgb,var(--negro-oliva) 24%, transparent) 100%);
  mix-blend-mode:multiply;
}

/* ------------------------------------------------------------
   15d. FOOTER — arte sierra + cuenta atrás real
   ------------------------------------------------------------ */
.site-footer{ position:relative; overflow:hidden; }
.site-footer__art{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url('assets/footer-sierra.jpg') center/cover no-repeat;
  opacity:.32;
}
.site-footer__art::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--negro-oliva) 76%, transparent) 0%,
    color-mix(in srgb,var(--negro-oliva) 40%, transparent) 46%,
    color-mix(in srgb,var(--negro-oliva) 82%, transparent) 100%);
}
.site-footer .container{ position:relative; z-index:1; }
.site-footer__top{ grid-template-columns:1.6fr 1fr 1fr 1fr; }
.footer-count{ text-align:center; padding-bottom:6px; }
.footer-count__k{ color:var(--dorado); }
.footer-count__title{
  font-family:var(--font-heading); font-weight:600; text-transform:uppercase;
  font-size:clamp(1.4rem,4vw,2.1rem); color:var(--crema); margin:.2em 0 .65em;
}
.countdown{ display:flex; align-items:flex-start; justify-content:center; gap:clamp(6px,2vw,16px); }
.cd-unit{ display:flex; flex-direction:column; align-items:center; min-width:clamp(54px,14vw,84px); }
.cd-num{ font-family:var(--font-heading); font-weight:700; font-size:clamp(2rem,7vw,3.4rem); line-height:1; color:var(--dorado); font-variant-numeric:tabular-nums; }
.cd-lab{ font-family:var(--font-heading); text-transform:uppercase; letter-spacing:.14em; font-size:.64rem; color:color-mix(in srgb,var(--crema) 68%,transparent); margin-top:8px; }
.cd-sep{ font-family:var(--font-heading); font-weight:700; font-size:clamp(1.5rem,5vw,2.4rem); color:color-mix(in srgb,var(--dorado) 50%,transparent); line-height:1.05; }
.footer-count__cta{ margin-top:26px; background:var(--dorado); color:var(--negro-oliva); }
.footer-count__cta:hover{ background:var(--crema); color:var(--negro-oliva); }
@media (max-width:560px){ .cd-sep{ display:none; } .countdown{ gap:10px; } }

/* ------------------------------------------------------------
   15e. PÁGINAS LEGALES + GRACIAS
   ------------------------------------------------------------ */
.simple-header{ border-bottom:var(--line); }
.simple-header .container{ display:flex; align-items:center; justify-content:space-between; padding-block:16px; }
.simple-header .brand img{ height:46px; }
.simple-header a.back{ font-family:var(--font-heading); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; color:var(--verde-oliva); }
.simple-header a.back:hover{ color:var(--dorado); }
.legal{ max-width:820px; margin-inline:auto; padding-block:clamp(40px,7vw,80px); }
.legal .kicker{ margin-bottom:10px; }
.legal h1{ font-size:clamp(2rem,6vw,3rem); margin-bottom:10px; }
.legal__updated{ color:var(--gris-texto); font-size:.85rem; margin-bottom:34px; }
.legal__ph{
  border:1px dashed color-mix(in srgb,var(--dorado) 60%, transparent);
  border-radius:var(--radius); background:var(--blanco-calido);
  padding:clamp(22px,4vw,40px); color:var(--gris-texto);
}
.legal__ph h2{ font-size:1.1rem; margin-bottom:8px; }
.legal h2{ margin-top:34px; }
.legal p{ color:var(--gris-texto); margin-top:12px; line-height:1.7; }
/* asegura que el velo del mapa se posiciona sobre el propio mapa */
.mapa{ position:relative; }

/* footer: columnas responsivas (deben ir DESPUÉS del override de 4 columnas) */
@media (max-width:960px){ .site-footer__top{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .site-footer__top{ grid-template-columns:1fr; } }

/* listas dentro de páginas legales */
.legal ul{ margin:12px 0 0; padding-left:22px; color:var(--gris-texto); line-height:1.7; }
.legal ul li{ margin-top:8px; }

/* proceso: en ordenador, tarjetas más pequeñas para que quepa todo en pantalla */
@media (min-width:821px){
  .proceso{ padding-block:clamp(44px,5.5vw,72px); }
  .pslide{ flex-basis:min(40%, 340px); }
  .pslide__media{ aspect-ratio:4/3; }
  .pslide__body{ padding:16px 20px; gap:6px; }
  .pslide__body h3{ font-size:1.15rem; }
  .pslide__body p{ font-size:.92rem; }
  .pslide__num{ font-size:1.3rem; }
}

/* ------------------------------------------------------------
   16. SELECTOR DE IDIOMA (ES · EN · DE)
   ------------------------------------------------------------ */
.lang-switch{
  display:inline-flex; gap:2px; padding:3px;
  border:1px solid color-mix(in srgb,var(--negro-oliva) 16%,transparent);
  border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--blanco-calido) 55%, transparent);
}
.lang-switch button{
  font-family:var(--font-heading); font-weight:600; font-size:.72rem; letter-spacing:.05em;
  color:var(--gris-texto); padding:4px 9px; border-radius:var(--radius-pill); line-height:1;
  transition:background-color .2s, color .2s;
}
.lang-switch button:hover{ color:var(--negro-oliva); }
.lang-switch button.is-active{ background:var(--negro-oliva); color:var(--crema); }
.simple-header .lang-switch{ margin-left:auto; margin-right:14px; }
@media (max-width:400px){
  .lang-switch button{ padding:4px 7px; font-size:.68rem; }
}

/* nota de traducción orientativa en páginas legales (solo EN/DE) */
.legal__note{
  margin:-16px 0 30px; padding:10px 14px; border-left:3px solid var(--dorado);
  background:color-mix(in srgb,var(--dorado) 10%, transparent);
  border-radius:0 var(--radius) var(--radius) 0;
  font-size:.85rem; color:var(--gris-texto);
}
.legal__note{ display:none; }
html.i18n-extra:not([lang="es"]) .legal__note{ display:block; }

/* contador de plazas de la lista de espera */
.waitlist__count{
  margin-top:6px; font-family:var(--font-heading); text-transform:uppercase; letter-spacing:.08em;
  font-size:.8rem; color:color-mix(in srgb,var(--crema) 80%,transparent);
}
.waitlist__count strong{ color:var(--dorado); font-size:1.1rem; }

/* ------------------------------------------------------------
   17. FAQ (acordeón)
   ------------------------------------------------------------ */
.faq__head{ max-width:60ch; margin-bottom:clamp(24px,3.5vw,40px); }
.faq__list{ max-width:820px; margin-inline:auto; display:flex; flex-direction:column; gap:12px; }
.faq__item{
  border:var(--line); border-radius:var(--radius); background:var(--blanco-calido);
  box-shadow:var(--shadow-card); overflow:hidden;
}
.faq__item summary{
  list-style:none; cursor:pointer; padding:18px clamp(16px,2.5vw,24px);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--font-heading); font-weight:600; font-size:1.02rem; letter-spacing:.01em;
  color:var(--negro-oliva); transition:color .2s;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:""; flex:0 0 auto; width:11px; height:11px; margin-right:2px;
  border-right:2px solid var(--dorado); border-bottom:2px solid var(--dorado);
  transform:rotate(45deg); transition:transform .25s ease;
}
.faq__item[open] summary::after{ transform:rotate(-135deg); }
.faq__item summary:hover{ color:var(--verde-oliva); }
.faq__a{ padding:0 clamp(16px,2.5vw,24px) 20px; }
.faq__a p{ color:var(--gris-texto); max-width:66ch; margin:0; }
.faq__item[open] summary{ color:var(--dorado); }

/* ------------------------------------------------------------
   18. LA LATA (explorador interactivo)
   ------------------------------------------------------------ */
/* Panel a sangre: fondo oliva profundo, marco discontinuo y tipografía grande.
   La lata va dentro de una tarjeta enmarcada, a la derecha. */
.lata{ background:var(--verde-oliva); color:var(--crema); }
.lata__frame{
  border:2px dashed color-mix(in srgb,var(--crema) 42%, transparent);
  border-radius:clamp(18px,2.4vw,30px);
  padding:clamp(22px,4vw,60px);
}
.lata__head{ max-width:none; margin-bottom:clamp(20px,3vw,32px); }
/* El antetítulo y el titular usan .kicker y .h-lg como el resto de secciones:
   aquí solo se añade la disposición de los asteriscos y el color sobre oliva. */
.lata__eyebrow{ display:flex; align-items:center; gap:12px; margin:0 0 10px; }
.lata__ast{ color:color-mix(in srgb,var(--dorado) 60%, transparent); font-size:.9em; }
.lata__title{ margin:0; color:var(--crema); }
.lata__intro{ color:color-mix(in srgb,var(--crema) 76%, transparent); margin-top:14px; max-width:46ch; }
.lata__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,56px); align-items:center; }
.lata__card{
  border:2px dashed color-mix(in srgb,var(--crema) 42%, transparent);
  border-radius:clamp(16px,2vw,24px);
  padding:clamp(12px,1.6vw,20px);
  background:color-mix(in srgb,var(--negro-oliva) 26%, transparent);
}
.lata__media{ position:relative; width:100%; border-radius:clamp(10px,1.2vw,14px); overflow:hidden; }
.lata__media img{ width:100%; height:auto; display:block; }
/* Nav en píldora partida (anterior / siguiente) */
.lata__nav{
  display:inline-flex; margin-top:clamp(20px,3vw,30px); overflow:hidden;
  border:1px solid color-mix(in srgb,var(--crema) 40%, transparent);
  border-radius:var(--radius-pill);
}
.lata__arrow{
  background:transparent; border:0; color:var(--crema); cursor:pointer;
  padding:.7em 1.6em; font-size:1rem; line-height:1;
  transition:background-color .2s, color .2s;
}
.lata__arrow + .lata__arrow{ border-left:1px solid color-mix(in srgb,var(--crema) 40%, transparent); }
.lata__arrow:hover{ background:var(--crema); color:var(--negro-oliva); }
/* Visor 3D en "La lata": panel grande para que la lata se vea prominente */
.lata__grid .lata__media--3d{ justify-self:stretch; width:100%; max-width:520px; min-height:clamp(480px,64vh,680px); }
.lata__grid .lata__media--3d model-viewer{ height:clamp(480px,64vh,680px); }
.lata__dot{
  position:absolute; transform:translate(-50%,-50%); width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; padding:0; cursor:pointer;
  background:var(--blanco-calido); border:2px solid var(--dorado); color:var(--negro-oliva);
  font-family:var(--font-heading); font-weight:700; font-size:.82rem;
  box-shadow:0 0 0 0 rgba(185,152,58,.5); animation:lataPulse 2.4s infinite; transition:transform .2s;
}
.lata__dot span{ pointer-events:none; }
.lata__dot:hover{ transform:translate(-50%,-50%) scale(1.12); }
.lata__dot.is-active{ background:var(--dorado); color:var(--negro-oliva); animation:none; box-shadow:0 6px 16px -6px rgba(185,152,58,.8); }
@keyframes lataPulse{
  0%{ box-shadow:0 0 0 0 rgba(185,152,58,.5); }
  70%{ box-shadow:0 0 0 12px rgba(185,152,58,0); }
  100%{ box-shadow:0 0 0 0 rgba(185,152,58,0); }
}
.lata__chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.lata__chip{
  font-family:var(--font-heading); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:.72rem;
  padding:.5em 1em; border-radius:var(--radius-pill); cursor:pointer;
  border:1px solid color-mix(in srgb,var(--crema) 34%,transparent);
  color:var(--crema); background:transparent; transition:background-color .2s, color .2s, border-color .2s;
}
.lata__chip:hover{ border-color:var(--dorado); color:var(--dorado); }
.lata__chip.is-active{ background:var(--crema); color:var(--negro-oliva); border-color:var(--crema); }
.lata__panels{ position:relative; min-height:250px; }
@media (max-width:820px){ .lata__panels{ min-height:0; } }
.lata__info{ display:none; }
.lata__info.is-active{ display:block; animation:lataFade .4s ease; }
.lata__n{ font-family:var(--font-heading); font-weight:700; font-size:2.2rem; color:var(--dorado); line-height:1; }
.lata__info h3{ font-size:1.5rem; margin:6px 0 12px; color:var(--crema); }
.lata__info p{ color:color-mix(in srgb,var(--crema) 76%, transparent); max-width:52ch; }
@keyframes lataFade{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }
@media (max-width:820px){
  .lata__grid{ grid-template-columns:1fr; gap:24px; }
  /* en móvil la lata va primero y el texto debajo, centrado */
  .lata__card{ order:-1; max-width:340px; margin-inline:auto; }
  .lata__eyebrow{ justify-content:center; }
  .lata__head{ text-align:center; }
  .lata__intro{ margin-inline:auto; }
  .lata__chips{ justify-content:center; }
  .lata__panels{ text-align:center; }
  .lata__info p{ margin-inline:auto; }
  .lata__sellos{ justify-content:center; }
  .lata__nav{ display:flex; justify-content:center; width:fit-content; margin-inline:auto; }
}

/* sellos de origen dentro del panel D.O.P. (uno al lado del otro) */
.lata__sellos{ display:flex; flex-wrap:nowrap; align-items:center; gap:clamp(20px,3vw,34px); margin-top:22px; }
.sello{ height:clamp(58px,8vw,80px); width:auto; }
/* sobre el fondo oliva, los sellos necesitan un respaldo claro para leerse */
.lata__sellos .sello{ background:var(--crema); border-radius:10px; padding:6px 10px; }

/* ------------------------------------------------------------
   19. CTA FIJA (sticky) — mantiene el registro siempre a mano
   ------------------------------------------------------------ */
.sticky-cta{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px 10px 10px 20px; border-radius:var(--radius-pill);
  background:var(--negro-oliva); color:var(--crema);
  box-shadow:0 12px 30px -8px rgba(23,23,19,.55);
  transform:translateY(160%); transition:transform .35s cubic-bezier(.2,1,.3,1);
  pointer-events:none;
}
.sticky-cta.is-visible{ transform:none; pointer-events:auto; }
.sticky-cta__txt{ font-family:var(--font-heading); font-weight:500; text-transform:uppercase; letter-spacing:.06em; font-size:.76rem; color:color-mix(in srgb,var(--crema) 80%,transparent); }
.sticky-cta__btn{
  flex:0 0 auto; font-family:var(--font-body); font-weight:600; font-size:.76rem;
  text-transform:uppercase; letter-spacing:.05em; background:var(--dorado); color:var(--negro-oliva);
  padding:.75em 1.3em; border-radius:var(--radius-pill);
}
@media (min-width:920px){ .sticky-cta{ left:auto; right:24px; bottom:24px; min-width:360px; } }
/* Móvil: mantener la CTA fija COMPLETA, con el texto de apoyo igual que en escritorio */
@media (max-width:540px){ .sticky-cta{ justify-content:space-between; padding:10px 10px 10px 18px; } }
@media (max-width:360px){ .sticky-cta__txt{ font-size:.68rem; } .sticky-cta__btn{ padding:.7em 1em; } }
@media (prefers-reduced-motion:reduce){ .sticky-cta{ transition:none; } }

/* ------------------------------------------------------------
   20. AJUSTES MÓVIL (logo, textos centrados)
   ------------------------------------------------------------ */
@media (max-width:680px){
  /* Logo un poco más pegado al borde izquierdo */
  .site-header__inner{ padding-inline:14px; }
  .brand{ margin-left:-2px; }
  /* Textos de la lista de espera centrados (incl. "Primera cosecha…"/"Erste Ernte…") */
  .waitlist__sub,
  .waitlist__scarce,
  .waitlist__count{ text-align:center; margin-inline:auto; }
}