/* ============================================================
   KOLBECK & AGUILAR — Sistema de diseño
   Paleta institucional del manual de marca + tono artesanal-agave
   ============================================================ */

:root{
  /* ---- Tinta / neutros ---- */
  --ink:        #231F20;   /* negro 100% */
  --ink-80:     #575756;   /* negro 80% */
  --ink-50:     #9D9D9C;   /* negro 50% */
  --bark:       #2A2521;   /* dark cálido para secciones oscuras */
  --bark-2:     #1E1A17;
  --sepia:      #3C382F;   /* color del grabado */

  /* ---- Color institucional ---- */
  --turquoise:      #3EBFAD;  /* Pantone 7465C — protagonista */
  --turquoise-deep: #2E9486;  /* para texto sobre crema */
  --turquoise-ink:  #1F6B61;
  --blue:           #57C9E8;  /* Pantone 305C — Europa */
  --blue-deep:      #2C9DC0;
  --orange:         #FFA167;  /* Pantone 1565C — sol/agave */
  --orange-deep:    #E07F3D;
  --pink:           #EB6BAF;  /* Pantone 218C */
  --pink-deep:      #D44C95;

  /* ---- Papel / crema ---- */
  --paper:    #FBF6EC;   /* fondo principal */
  --paper-2:  #F6EFE0;
  --sand:     #EFE5D2;
  --sand-2:   #E6D8BF;
  --card:     #FFFDF8;
  --line:     #E3D8C4;   /* hairlines sobre crema */
  --line-soft:#EADFCC;

  /* ---- Tipografía: títulos Fraunces, cuerpo Montserrat ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* ---- Escala fluida ---- */
  --fs-eyebrow: clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);
  --fs-body:    clamp(1rem, 0.97rem + 0.18vw, 1.075rem);
  --fs-lead:    clamp(1.12rem, 1.02rem + 0.5vw, 1.32rem);
  --fs-h6:      clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --fs-h5:      clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h4:      clamp(1.5rem, 1.3rem + 1vw, 2.05rem);
  --fs-h3:      clamp(1.9rem, 1.5rem + 1.8vw, 2.9rem);
  --fs-h2:      clamp(2.1rem, 1.6rem + 2.4vw, 3.3rem);
  --fs-h1:      clamp(2.5rem, 1.7rem + 3.3vw, 4.5rem);

  /* ---- Layout ---- */
  --container: 1240px;
  --container-wide: 1440px;
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3.5rem);
  --radius: 6px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(35,31,32,.06), 0 2px 8px rgba(35,31,32,.05);
  --shadow-md: 0 6px 20px rgba(35,31,32,.08), 0 1px 3px rgba(35,31,32,.06);
  --shadow-lg: 0 24px 60px -20px rgba(35,31,32,.30), 0 8px 24px -12px rgba(35,31,32,.18);
  --ease: cubic-bezier(.2,.7,.2,1);
  --header-h: 84px;
}

/* ============================================================ Reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,picture{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,h6,p{ margin:0; }
::selection{ background:var(--turquoise); color:#fff; }

/* ============================================================ Tipografía */
.display{ font-family:var(--font-display); font-weight:600; line-height:1.1; letter-spacing:-.015em; font-optical-sizing:auto; }
.h1{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-h1); line-height:1.06; letter-spacing:-.018em; font-optical-sizing:auto; }
.h2{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-h2); line-height:1.1; letter-spacing:-.016em; font-optical-sizing:auto; }
.h3{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-h3); line-height:1.14; letter-spacing:-.012em; font-optical-sizing:auto; }
.h4{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-h4); line-height:1.2; letter-spacing:-.008em; font-optical-sizing:auto; }
.lead{ font-size:var(--fs-lead); line-height:1.55; color:var(--ink-80); font-weight:400; }
.serif-italic{ font-family:var(--font-display); font-style:italic; font-weight:500; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-sans); font-weight:600;
  font-size:var(--fs-eyebrow); letter-spacing:.22em; text-transform:uppercase;
  color:var(--turquoise-deep);
}
.eyebrow::before{
  content:""; width:26px; height:1.5px; background:currentColor; opacity:.7;
}
.eyebrow.is-center::before{ display:none; }

.text-balance{ text-wrap:balance; }
.text-pretty{ text-wrap:pretty; }
.measure{ max-width:62ch; }
.measure-sm{ max-width:46ch; }

/* ============================================================ Layout helpers */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container-wide{ max-width:var(--container-wide); }
.section{ padding-block:clamp(4rem, 2rem + 8vw, 8.5rem); position:relative; }
.section-sm{ padding-block:clamp(3rem, 2rem + 4vw, 5rem); }
.bg-paper{ background:var(--paper); }
.bg-paper-2{ background:var(--paper-2); }
.bg-sand{ background:var(--sand); }
.bg-card{ background:var(--card); }
.bg-bark{ background:var(--bark); color:var(--paper); }
.bg-bark .lead{ color:rgba(251,246,236,.72); }
.bg-bark .eyebrow{ color:var(--turquoise); }
.bg-turquoise{ background:var(--turquoise); color:#fff; }

.stack > * + *{ margin-top:var(--stack-gap, 1.2rem); }
.grid{ display:grid; gap:var(--grid-gap, 2rem); }
.flow-tight{ --stack-gap:.7rem; }

/* ============================================================ Botones */
.btn{
  --bg:var(--turquoise); --fg:#fff; --bd:var(--turquoise);
  position:relative; display:inline-flex; align-items:center; gap:.7em;
  padding:.95em 1.6em; border:1.5px solid var(--bd); border-radius:100px;
  background:var(--bg); color:var(--fg);
  font-family:var(--font-sans); font-weight:600; font-size:.92rem; letter-spacing:.02em;
  line-height:1; overflow:hidden; isolation:isolate;
  transition:color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--ink);
  transform:translateY(101%); transition:transform .42s var(--ease); border-radius:inherit;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(46,148,134,.6); }
.btn:hover::before{ transform:translateY(0); }
.btn .ico{ transition:transform .35s var(--ease); }
.btn:hover .ico{ transform:translateX(4px); }

.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--ink); }
.btn--ghost::before{ background:var(--ink); }
.btn--ghost:hover{ color:var(--paper); box-shadow:none; }
.btn--light{ --bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.55); }
.btn--light::before{ background:#fff; }
.btn--light:hover{ color:var(--ink); box-shadow:none; }
.btn--orange{ --bg:var(--orange); --bd:var(--orange); --fg:var(--ink); }
.btn--orange:hover{ color:#fff; }
.btn--solid-ink{ --bg:var(--ink); --bd:var(--ink); --fg:#fff; }
.btn--solid-ink::before{ background:var(--turquoise); }
.btn--lg{ padding:1.1em 2em; font-size:1rem; }

/* link con flecha */
.link-arrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:600; font-size:.92rem; color:var(--turquoise-deep);
  letter-spacing:.01em;
}
.link-arrow .ico{ transition:transform .3s var(--ease); }
.link-arrow:hover .ico{ transform:translateX(5px); }
.link-arrow::after{ content:""; }

/* ============================================================ Header */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:80; height:var(--header-h);
  display:flex; align-items:center;
  transition:height .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; width:100%; max-width:var(--container-wide); }
.site-header.is-scrolled{
  height:68px; background:rgba(251,246,236,.86); backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:var(--line); box-shadow:0 2px 24px -16px rgba(35,31,32,.5);
}
.site-header.on-dark:not(.is-scrolled) .nav-link,
.site-header.on-dark:not(.is-scrolled) .lang-btn,
.site-header.on-dark:not(.is-scrolled) .menu-toggle{ color:#fff; }
.site-header.on-dark:not(.is-scrolled) .nav-link::after{ background:#fff; }

.brand{ flex:0 0 auto; display:flex; align-items:center; }
.brand img{ height:26px; width:auto; transition:height .4s var(--ease); }
.is-scrolled .brand img{ height:23px; }
.brand .logo-dark{ display:block; }
.brand .logo-light{ display:none; }
.on-dark:not(.is-scrolled) .brand .logo-dark{ display:none; }
.on-dark:not(.is-scrolled) .brand .logo-light{ display:block; }

.primary-nav{ display:flex; align-items:center; gap:clamp(1rem,2vw,2rem); }
.nav-link{
  position:relative; font-weight:500; font-size:.92rem; letter-spacing:.01em; color:var(--ink);
  padding:.4em 0; transition:color .3s var(--ease);
}
.nav-link::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:100%;
  background:var(--turquoise); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease);
}
.nav-link:hover{ color:var(--turquoise-deep); }
.nav-link:hover::after,.nav-link.is-active::after{ transform:scaleX(1); transform-origin:left; }
.nav-link.is-active{ color:var(--turquoise-deep); }

.header-actions{ display:flex; align-items:center; gap:1rem; }

/* Selector de idioma */
.lang{ position:relative; }
.lang-btn{
  display:inline-flex; align-items:center; gap:.45em; background:none; border:none;
  font-weight:600; font-size:.82rem; letter-spacing:.08em; color:var(--ink); padding:.4em .2em;
}
.lang-btn .chev{ transition:transform .3s var(--ease); }
.lang.is-open .chev{ transform:rotate(180deg); }
.lang-menu{
  position:absolute; top:calc(100% + 10px); right:0; min-width:128px;
  background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-md);
  padding:.4rem; opacity:0; visibility:hidden; transform:translateY(-6px); transition:.25s var(--ease);
}
.lang.is-open .lang-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.lang-menu a{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.55em .7em; border-radius:6px; font-size:.84rem; font-weight:500; color:var(--ink-80); }
.lang-menu a small{ color:var(--ink-50); font-weight:600; letter-spacing:.06em; }
.lang-menu a:hover{ background:var(--paper-2); color:var(--ink); }
.lang-menu a.is-active{ color:var(--turquoise-deep); }

.menu-toggle{ display:none; background:none; border:none; color:var(--ink); width:30px; height:24px; position:relative; }
.menu-toggle span{ position:absolute; left:0; height:2px; width:100%; background:currentColor; border-radius:2px; transition:.35s var(--ease); }
.menu-toggle span:nth-child(1){ top:2px; } .menu-toggle span:nth-child(2){ top:11px; } .menu-toggle span:nth-child(3){ top:20px; }
.menu-toggle.is-open span:nth-child(1){ top:11px; transform:rotate(45deg); }
.menu-toggle.is-open span:nth-child(2){ opacity:0; }
.menu-toggle.is-open span:nth-child(3){ top:11px; transform:rotate(-45deg); }

/* Mobile drawer */
.mobile-nav{
  position:fixed; inset:0; z-index:75; background:var(--bark); color:var(--paper);
  display:flex; flex-direction:column; justify-content:center; padding:6rem var(--gutter) 3rem;
  clip-path:circle(0% at calc(100% - 44px) 40px); transition:clip-path .6s var(--ease); visibility:hidden;
}
.mobile-nav.is-open{ clip-path:circle(150% at calc(100% - 44px) 40px); visibility:visible; }
.mobile-nav a{ font-family:var(--font-display); font-size:clamp(1.7rem,7vw,2.4rem); font-weight:500; padding:.28em 0; border-bottom:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:space-between; }
.mobile-nav a .num{ font-family:var(--font-sans); font-size:.8rem; color:var(--turquoise); letter-spacing:.1em; }
.mobile-nav .m-foot{ margin-top:2rem; display:flex; gap:1.5rem; flex-wrap:wrap; font-size:.85rem; color:rgba(251,246,236,.6); }

/* ============================================================ Pleca / azulejo */
.pleca{ display:flex; width:100%; overflow:hidden; }
.pleca--2{ flex-wrap:wrap; }
.pleca__tile{
  flex:1 0 auto; aspect-ratio:1/1; position:relative; display:grid; place-items:center;
}
.pleca__g{ width:54%; height:54%; object-fit:contain; opacity:.95; }
.pleca__tile--img{ background-size:cover; background-position:center; background-repeat:no-repeat; }
.pleca--sm .pleca__tile{ width:46px; }
.pleca--md .pleca__tile{ width:64px; }
.pleca--lg .pleca__tile{ width:88px; }

/* franja decorativa fina de glifos sobre crema (no cuadros) */
.glyph-rule{ display:flex; align-items:center; gap:1.4rem; color:var(--turquoise); }
.glyph-rule .line{ flex:1; height:1px; background:var(--line); }
.glyph-rule .g{ width:22px; height:22px; background:currentColor; -webkit-mask:var(--g) center/contain no-repeat; mask:var(--g) center/contain no-repeat; flex:0 0 auto; }

/* ============================================================ Cards */
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--sand-2); }

.feature{ position:relative; }
.feature .kicker{ font-family:var(--font-display); font-size:clamp(2.6rem,5vw,3.6rem); line-height:1; color:var(--sand-2); font-weight:600; }

/* value/icon card */
.vcard{ padding:2rem 1.8rem 2.1rem; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); transition:.45s var(--ease); position:relative; overflow:hidden; }
.vcard .vc-ico{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:color-mix(in srgb, var(--accent,var(--turquoise)) 14%, transparent); margin-bottom:1.2rem; }
.vcard .vc-ico .g{ width:26px; height:26px; background:var(--accent,var(--turquoise-deep)); -webkit-mask:var(--g) center/contain no-repeat; mask:var(--g) center/contain no-repeat; }
.vcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.vcard::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--accent,var(--turquoise)); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); }
.vcard:hover::after{ transform:scaleX(1); }

/* ============================================================ Imagen / placeholder */
.media{ position:relative; overflow:hidden; background:var(--sand); border-radius:var(--radius-lg); }
.media img{ width:100%; height:100%; object-fit:cover; }
.media--zoom img{ transition:transform 1.1s var(--ease); }
.card:hover .media--zoom img, .media--zoom:hover img{ transform:scale(1.06); }

.ph{
  position:relative; display:grid; place-items:center; background-color:var(--sand);
  background-image:repeating-linear-gradient(135deg, transparent 0 14px, rgba(60,56,47,.05) 14px 15px);
  color:var(--ink-50); aspect-ratio:var(--ar,4/3); border-radius:var(--radius-lg);
  overflow:hidden;
}
.ph__tag{ font-family:var(--font-sans); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-50); padding:.5em .8em; border:1px solid var(--line); border-radius:100px; background:rgba(251,246,236,.7); }
.ph__tag b{ color:var(--turquoise-deep); }

/* ============================================================ Engraving divider */
.engrave-band{ background:var(--paper); position:relative; }
.engrave-band img{ width:100%; height:auto; opacity:.9; mix-blend-mode:multiply; }
.engrave-strip{ overflow:hidden; line-height:0; }

/* ============================================================ Footer */
.site-footer{ background:var(--bark); color:var(--paper); padding:clamp(4.5rem, 3rem + 6vw, 8rem) 0 2rem; position:relative; overflow:hidden; }
.site-footer a{ color:rgba(251,246,236,.66); transition:color .25s var(--ease); }
.site-footer a:hover{ color:#fff; }
.site-footer .container{ position:relative; z-index:1; }
.footer-engrave{ position:absolute; left:0; right:0; bottom:-4%; width:100%; opacity:.08; mix-blend-mode:screen; pointer-events:none; z-index:0; }
.footer-hero{ display:grid; grid-template-columns:1.6fr 1fr; gap:2.5rem; align-items:center; padding-bottom:2.8rem; margin-bottom:2.8rem; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-hero .fh-logo{ height:32px; margin-bottom:1.6rem; }
.fh-statement{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.5rem, 1rem + 1.9vw, 2.5rem); line-height:1.14; letter-spacing:-.01em; color:#fff; max-width:20ch; }
.fh-statement em{ font-style:italic; color:var(--turquoise); }
.fh-right{ justify-self:end; text-align:right; }
.fh-social-label{ display:block; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(251,246,236,.5); margin-bottom:1rem; font-weight:600; }
.footer-social{ display:flex; gap:.7rem; justify-content:flex-end; }
.footer-social a{ width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:grid; place-items:center; color:#fff; transition:.3s var(--ease); }
.footer-social a:hover{ background:var(--turquoise); border-color:var(--turquoise); transform:translateY(-3px); box-shadow:0 8px 20px -8px rgba(62,191,173,.7); }
.footer-social svg{ width:19px; height:19px; }
.footer-top{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1.4fr; gap:2.5rem; padding-bottom:2.8rem; margin-bottom:2.4rem; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-col h4{ font-family:var(--font-sans); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--turquoise); margin-bottom:1.3rem; font-weight:700; }
.footer-col li{ margin-bottom:.7rem; font-size:.95rem; }
.footer-col .fc-link{ position:relative; display:inline-flex; align-items:center; gap:.5rem; }
.footer-col .fc-link::before{ content:""; width:0; height:1px; background:var(--turquoise); transition:width .3s var(--ease); }
.footer-col .fc-link:hover::before{ width:14px; }
.footer-about{ color:rgba(251,246,236,.62); font-size:.95rem; max-width:34ch; line-height:1.6; }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem 2rem; flex-wrap:wrap; font-size:.8rem; color:rgba(251,246,236,.5); }
.footer-langs{ display:flex; gap:.4rem; }
.footer-langs a{ padding:.45em .85em; border-radius:100px; border:1px solid rgba(255,255,255,.16); font-size:.72rem; font-weight:600; letter-spacing:.08em; color:rgba(251,246,236,.7); }
.footer-langs a:hover{ border-color:var(--turquoise); color:#fff; }
.footer-langs a.is-active{ background:var(--turquoise); border-color:var(--turquoise); color:#fff; }
.footer-bottom .legal{ display:flex; gap:1.4rem; flex-wrap:wrap; }

/* hover global en imágenes de contenido */
.media, .shot, .mapwrap, .founder-card .media{ overflow:hidden; }
.media img, .shot img, .mapwrap img{ transition:transform .9s var(--ease), filter .5s var(--ease); will-change:transform; }
.media:hover img, .shot:hover img, .mapwrap:hover img,
.card:hover .media img, .founder-card:hover .media img{ transform:scale(1.06); filter:saturate(1.08) brightness(1.04); }

/* ============================================================ Reveal animations */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); will-change:transform,opacity; }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal].no-anim{ transition:none !important; }
[data-reveal="fade"]{ transform:none; }
[data-reveal="left"]{ transform:translateX(-34px); }
[data-reveal="right"]{ transform:translateX(34px); }
[data-reveal="scale"]{ transform:scale(.94); }
[data-reveal].in{ transform:none; }
[data-delay="1"]{ transition-delay:.08s; }
[data-delay="2"]{ transition-delay:.16s; }
[data-delay="3"]{ transition-delay:.24s; }
[data-delay="4"]{ transition-delay:.32s; }
[data-delay="5"]{ transition-delay:.40s; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}

/* clip reveal para titulares */
.reveal-lines span{ display:block; overflow:hidden; }
.reveal-lines span > *{ display:block; transform:translateY(105%); transition:transform .9s var(--ease); }
.reveal-lines.in span > *{ transform:none; }
.reveal-lines.in span:nth-child(2) > *{ transition-delay:.09s; }
.reveal-lines.in span:nth-child(3) > *{ transition-delay:.18s; }

/* ============================================================ Forms */
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field label{ font-size:.82rem; font-weight:600; letter-spacing:.04em; color:var(--ink-80); }
.field label .req{ color:var(--orange-deep); }
.input,.textarea,.select{
  width:100%; padding:.92em 1.05em; font-family:inherit; font-size:.98rem; color:var(--ink);
  background:var(--card); border:1.5px solid var(--line); border-radius:10px; transition:.25s var(--ease);
  appearance:none;
}
.textarea{ resize:vertical; min-height:130px; }
.select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23575756' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1.05em center; padding-right:2.6em; }
.input:focus,.textarea:focus,.select:focus{ outline:none; border-color:var(--turquoise); box-shadow:0 0 0 4px color-mix(in srgb, var(--turquoise) 18%, transparent); }
.field.has-error .input,.field.has-error .textarea,.field.has-error .select{ border-color:var(--pink-deep); }
.field .err{ font-size:.78rem; color:var(--pink-deep); font-weight:500; min-height:0; opacity:0; transform:translateY(-3px); transition:.25s var(--ease); }
.field.has-error .err{ opacity:1; transform:none; }
.field .input:valid:not(:placeholder-shown){ }

/* chips de interés (radio/checkbox estilizado) */
.chip-row{ display:flex; flex-wrap:wrap; gap:.6rem; }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.chip span{ display:inline-flex; padding:.6em 1.1em; border:1.5px solid var(--line); border-radius:100px; font-size:.86rem; font-weight:500; color:var(--ink-80); transition:.22s var(--ease); background:var(--card); }
.chip input:checked + span{ background:var(--turquoise); border-color:var(--turquoise); color:#fff; }
.chip input:focus-visible + span{ box-shadow:0 0 0 3px color-mix(in srgb, var(--turquoise) 30%, transparent); }
.chip:hover span{ border-color:var(--turquoise); }

/* ============================================================ Accordion (FAQ) */
.acc-item{ border-bottom:1px solid var(--line); }
.acc-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; text-align:left; background:none; border:none; padding:1.5em 0; font-family:var(--font-display); font-size:var(--fs-h6); font-weight:600; color:var(--ink); }
.acc-q .pm{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; position:relative; transition:.3s var(--ease); }
.acc-q .pm::before,.acc-q .pm::after{ content:""; position:absolute; background:var(--turquoise-deep); border-radius:2px; }
.acc-q .pm::before{ width:13px; height:2px; }
.acc-q .pm::after{ width:2px; height:13px; transition:transform .3s var(--ease); }
.acc-item.is-open .acc-q .pm{ background:var(--turquoise); border-color:var(--turquoise); }
.acc-item.is-open .acc-q .pm::before,.acc-item.is-open .acc-q .pm::after{ background:#fff; }
.acc-item.is-open .acc-q .pm::after{ transform:rotate(90deg); }
.acc-a{ overflow:hidden; height:0; transition:height .4s var(--ease); }
.acc-a > div{ padding-bottom:1.6em; color:var(--ink-80); max-width:64ch; }

/* ============================================================ Misc utility */
.tag{ display:inline-flex; align-items:center; gap:.5em; padding:.4em .85em; border-radius:100px; font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.tag--turq{ background:color-mix(in srgb, var(--turquoise) 16%, transparent); color:var(--turquoise-ink); }
.tag--orange{ background:color-mix(in srgb, var(--orange) 22%, transparent); color:var(--orange-deep); }
.tag--blue{ background:color-mix(in srgb, var(--blue) 20%, transparent); color:var(--blue-deep); }
.dot-sep{ width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.4; display:inline-block; }
.hr-soft{ height:1px; background:var(--line); border:0; margin:0; }
.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }

/* WhatsApp float */
.wa-float{ position:fixed !important; right:max(22px, env(safe-area-inset-right)); left:auto; bottom:max(22px, env(safe-area-inset-bottom)); z-index:60; width:56px; height:56px; border-radius:50%; background:#25D366; display:grid; place-items:center; box-shadow:0 10px 30px -8px rgba(37,211,102,.6); transition:transform .3s var(--ease); }
.wa-float:hover{ transform:scale(1.08) translateY(-2px); }
.wa-float svg{ width:30px; height:30px; }

/* ============================================================ Inner pages (compartido) */
.page-hero{ padding-top:calc(var(--header-h) + clamp(2.5rem,4vw,4.5rem)); padding-bottom:clamp(2.5rem,4vw,4rem); position:relative; }
.page-hero.has-media{ padding-bottom:0; }
.crumbs{ display:flex; align-items:center; gap:.6rem; font-size:.78rem; color:var(--ink-50); margin-bottom:1.4rem; letter-spacing:.02em; }
.crumbs a{ color:var(--ink-80); } .crumbs a:hover{ color:var(--turquoise-deep); }
.crumbs .sep{ opacity:.5; }
.page-hero .h1{ max-width:18ch; }
.page-hero .lead{ max-width:56ch; margin-top:1.4rem; }
.page-hero--dark{ background:var(--bark); color:var(--paper); overflow:hidden; }
.page-hero--dark .h1{ color:#fff; } .page-hero--dark .lead{ color:rgba(251,246,236,.74); }
.page-hero--dark .crumbs{ color:rgba(251,246,236,.5); } .page-hero--dark .crumbs a{ color:rgba(251,246,236,.75); }
.page-hero--dark .bgimg{ position:absolute; inset:0; z-index:0; }
.page-hero--dark .bgimg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(30,26,23,.92), rgba(30,26,23,.55) 70%, rgba(30,26,23,.35)); }
.page-hero--dark .container{ position:relative; z-index:1; }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,5rem); align-items:center; }
.split.align-start{ align-items:start; }
.split--wide-left{ grid-template-columns:1.15fr .85fr; }
.split--wide-right{ grid-template-columns:.85fr 1.15fr; }

.prose > * + *{ margin-top:1.1rem; }
.prose p{ color:var(--ink-80); }
.prose h3{ font-family:var(--font-display); font-size:var(--fs-h5); font-weight:600; margin-top:2rem; }

.stat-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.stat b{ font-family:var(--font-display); font-size:clamp(2rem, 1.4rem + 1.8vw, 2.9rem); font-weight:600; color:var(--ink); display:block; line-height:1; }
.stat span{ font-size:.86rem; color:var(--ink-80); margin-top:.5rem; display:block; }

.cta-band{ position:relative; overflow:hidden; background:var(--turquoise); color:#fff; }
.cta-band .inner{ position:relative; z-index:1; text-align:center; }
.cta-band .h2{ color:#fff; max-width:20ch; margin-inline:auto; }
.cta-band .lead{ color:rgba(255,255,255,.92); max-width:54ch; margin:1.2rem auto 2rem; }
.cta-band .pleca{ position:absolute; left:0; right:0; opacity:.92; }
.cta-band .pleca.top{ top:0; } .cta-band .pleca.bot{ bottom:0; }

/* timeline */
.timeline{ position:relative; }
.timeline .t-item{ position:relative; padding-left:2.4rem; padding-bottom:2.4rem; border-left:2px solid var(--line); }
.timeline .t-item:last-child{ border-left-color:transparent; padding-bottom:0; }
.timeline .t-item::before{ content:""; position:absolute; left:-9px; top:2px; width:16px; height:16px; border-radius:50%; background:var(--turquoise); border:3px solid var(--paper); }
.timeline .t-item h3{ font-family:var(--font-display); font-size:1.3rem; font-weight:600; }
.timeline .t-item .yr{ font-size:.8rem; font-weight:600; letter-spacing:.08em; color:var(--turquoise-deep); text-transform:uppercase; }
.timeline .t-item p{ color:var(--ink-80); margin-top:.5rem; }

/* numbered list / process */
.steps{ display:grid; gap:1.2rem; }
.step{ display:grid; grid-template-columns:auto 1fr; gap:1.3rem; align-items:start; padding:1.4rem 0; border-top:1px solid var(--line); }
.step .n{ font-family:var(--font-display); font-size:1.6rem; font-weight:600; color:var(--turquoise-deep); line-height:1; width:2.4rem; }
.step h3{ font-family:var(--font-display); font-size:1.25rem; font-weight:600; }
.step p{ color:var(--ink-80); margin-top:.3rem; }

/* generic 3/2 col grids */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }

@media (max-width: 980px){
  .split, .split--wide-left, .split--wide-right{ grid-template-columns:1fr; }
  .stat-strip, .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .stat-strip, .grid-4, .grid-2{ grid-template-columns:1fr; }
}

/* ============================================================ Animaciones de vida */
@media (prefers-reduced-motion: no-preference){
  .kenburns{ overflow:hidden; }
  .kenburns > img, .kenburns > .ph{ animation:kenburns 22s ease-in-out infinite alternate; transform-origin:center; }
  @keyframes kenburns{ 0%{ transform:scale(1.04) translate(0,0); } 100%{ transform:scale(1.14) translate(-1.5%, -1.5%); } }

  .floaty{ animation:floaty 6s ease-in-out infinite; }
  @keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
  .floaty-slow{ animation:floaty 9s ease-in-out infinite; }

  .spin-slow{ animation:spin 26s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  .pulse-ring:not(.wa-float){ position:relative; }
  .pulse-ring::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 0 rgba(62,191,173,.5); animation:pulsering 2.6s ease-out infinite; }
  @keyframes pulsering{ 0%{ box-shadow:0 0 0 0 rgba(62,191,173,.45);} 70%,100%{ box-shadow:0 0 0 22px rgba(62,191,173,0);} }
}

/* Marquee / ticker */
.marquee{ overflow:hidden; display:flex; user-select:none; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track{ display:flex; flex:0 0 auto; gap:0; min-width:100%; animation:marquee 32s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track .mi{ display:inline-flex; align-items:center; gap:1.4rem; padding-inline:1.4rem; white-space:nowrap; }
.marquee__track .mi .g{ width:20px; height:20px; flex:0 0 auto; opacity:.7; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.marquee--display .mi{ font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } }

/* gradient text shimmer for accents */
.shimmer{ background:linear-gradient(100deg, var(--turquoise) 0%, var(--blue) 30%, var(--turquoise) 60%, var(--orange) 90%); background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shimmer 7s linear infinite; }
@keyframes shimmer{ to{ background-position:220% center; } }
@media (prefers-reduced-motion: reduce){ .shimmer{ animation:none; } }

/* ============================================================ Responsive */
@media (max-width: 980px){
  :root{ --header-h:72px; }
  .primary-nav{ display:none; }
  .menu-toggle{ display:block; }
  .lang{ display:none; }
  .footer-hero{ grid-template-columns:1fr; gap:1.8rem; }
  .fh-right{ justify-self:start; text-align:left; }
  .footer-social{ justify-content:flex-start; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:2rem 1.5rem; }
  .footer-about-col{ grid-column:1 / -1; }
}
@media (max-width: 560px){
  .footer-top{ grid-template-columns:1fr; }
  .footer-bottom{ justify-content:flex-start; }
  .btn{ width:100%; justify-content:center; }
  .btn-row .btn{ width:auto; }
}

/* ============================================================ Nav dropdown (Productos) */
.nav-drop{ position:relative; display:inline-flex; align-items:center; }
.nav-link.has-drop{ display:inline-flex; align-items:center; gap:.4em; }
.nav-link.has-drop .chev{ transition:transform .3s var(--ease); margin-top:1px; }
.nav-drop:hover .nav-link.has-drop .chev,
.nav-drop.is-open .nav-link.has-drop .chev{ transform:rotate(180deg); }
.nav-drop-menu{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-6px);
  min-width:248px; background:var(--card); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-lg); padding:.5rem; opacity:0; visibility:hidden; transition:.28s var(--ease); z-index:90;
}
.nav-drop-menu::before{ content:""; position:absolute; top:-14px; left:0; right:0; height:14px; }
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu,
.nav-drop.is-open .nav-drop-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav-drop-menu a{
  display:flex; flex-direction:column; gap:.15rem; padding:.7rem .85rem; border-radius:8px;
  font-weight:600; font-size:.92rem; color:var(--ink); transition:background .22s var(--ease), color .22s var(--ease);
}
.nav-drop-menu a small{ font-weight:500; font-size:.76rem; color:var(--ink-50); letter-spacing:.01em; }
.nav-drop-menu a:hover{ background:var(--paper-2); color:var(--turquoise-deep); }
.nav-drop-menu a:hover small{ color:var(--turquoise-deep); opacity:.8; }
/* mobile sub-nav */
.mobile-nav .m-sub{ display:flex; flex-direction:column; padding:.2em 0 .6em 0; border-bottom:1px solid rgba(255,255,255,.1); }
.mobile-nav .m-sub > a:first-child{ border-bottom:none; padding-bottom:.1em; }
.mobile-nav .m-sub .m-sublink{ font-family:var(--font-sans); font-size:1rem; font-weight:500; color:rgba(251,246,236,.72); padding:.45em 0 .45em 1.1em; border-bottom:none; position:relative; }
.mobile-nav .m-sub .m-sublink::before{ content:"—"; position:absolute; left:0; color:var(--turquoise); opacity:.7; }
.mobile-nav .m-sub .m-sublink:hover{ color:#fff; }

/* ============================================================ Cookie consent */
.cookie-banner{
  position:fixed; left:max(18px,env(safe-area-inset-left)); right:auto; bottom:max(18px,env(safe-area-inset-bottom));
  z-index:120; width:min(420px, calc(100vw - 36px)); background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg);
  padding:1.6rem 1.6rem 1.4rem; transform:translateY(140%); opacity:0; transition:transform .55s var(--ease), opacity .4s var(--ease);
}
.cookie-banner.is-visible{ transform:translateY(0); opacity:1; }
.cookie-banner .ck-glyph{ display:inline-grid; place-items:center; width:42px; height:42px; border-radius:11px; background:color-mix(in srgb,var(--turquoise) 14%,transparent); margin-bottom:1rem; }
.cookie-banner .ck-glyph span{ width:22px; height:22px; background:var(--turquoise-deep); -webkit-mask:url(assets/glyphs/agave.png) center/contain no-repeat; mask:url(assets/glyphs/agave.png) center/contain no-repeat; }
.cookie-banner h3{ font-family:var(--font-display); font-weight:600; font-size:1.25rem; letter-spacing:-.01em; }
.cookie-banner p{ font-size:.9rem; color:var(--ink-80); margin-top:.5rem; line-height:1.55; }
.cookie-banner p a{ color:var(--turquoise-deep); font-weight:600; border-bottom:1px solid color-mix(in srgb,var(--turquoise) 40%,transparent); }
.cookie-banner .ck-actions{ display:flex; flex-direction:column; gap:.6rem; margin-top:1.3rem; }
.cookie-banner .ck-row{ display:flex; gap:.6rem; }
.cookie-banner .ck-row .btn{ flex:1; justify-content:center; }
.ck-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding:.85em 1.2em; border-radius:100px; font-family:var(--font-sans); font-weight:600; font-size:.88rem; letter-spacing:.01em; border:1.5px solid var(--line); background:var(--card); color:var(--ink); transition:.28s var(--ease); }
.ck-btn:hover{ border-color:var(--turquoise); color:var(--turquoise-deep); }
.ck-btn--solid{ background:var(--turquoise); border-color:var(--turquoise); color:#fff; }
.ck-btn--solid:hover{ background:var(--turquoise-deep); border-color:var(--turquoise-deep); color:#fff; box-shadow:0 8px 20px -10px rgba(46,148,134,.7); }
.ck-btn--ghost{ background:transparent; border-color:transparent; color:var(--ink-80); padding:.6em; }
.ck-btn--ghost:hover{ color:var(--turquoise-deep); border-color:transparent; }
@media (max-width:560px){ .cookie-banner{ width:calc(100vw - 24px); left:12px; bottom:12px; padding:1.4rem 1.3rem 1.2rem; } }

/* cookie preferences modal */
.cookie-modal{ position:fixed; inset:0; z-index:130; display:grid; place-items:center; padding:1.2rem; background:rgba(30,26,23,.55); backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:.3s var(--ease); }
.cookie-modal.is-open{ opacity:1; visibility:visible; }
.cookie-modal .ck-panel{ width:min(560px,100%); max-height:90vh; overflow:auto; background:var(--paper); border-radius:18px; box-shadow:var(--shadow-lg); padding:clamp(1.6rem,3vw,2.4rem); transform:translateY(14px); transition:transform .35s var(--ease); }
.cookie-modal.is-open .ck-panel{ transform:none; }
.ck-panel h3{ font-family:var(--font-display); font-weight:600; font-size:1.5rem; letter-spacing:-.01em; }
.ck-panel > p{ color:var(--ink-80); font-size:.92rem; margin-top:.5rem; }
.ck-cat{ display:flex; gap:1rem; align-items:flex-start; justify-content:space-between; padding:1.2rem 0; border-top:1px solid var(--line); }
.ck-cat:first-of-type{ margin-top:1.4rem; }
.ck-cat h4{ font-size:1rem; font-weight:700; display:flex; align-items:center; gap:.6rem; }
.ck-cat h4 .req{ font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--turquoise-deep); background:color-mix(in srgb,var(--turquoise) 14%,transparent); padding:.25em .6em; border-radius:100px; }
.ck-cat p{ font-size:.85rem; color:var(--ink-80); margin-top:.35rem; max-width:42ch; }
.ck-switch{ flex:0 0 auto; position:relative; width:46px; height:26px; }
.ck-switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.ck-switch .track{ position:absolute; inset:0; background:var(--sand-2); border-radius:100px; transition:background .25s var(--ease); }
.ck-switch .track::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .25s var(--ease); }
.ck-switch input:checked + .track{ background:var(--turquoise); }
.ck-switch input:checked + .track::after{ transform:translateX(20px); }
.ck-switch input:disabled + .track{ background:var(--turquoise); opacity:.5; }
.ck-switch input:disabled{ cursor:not-allowed; }
.ck-panel .ck-foot{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.8rem; }
.ck-panel .ck-foot .ck-btn{ flex:1; min-width:140px; }
.cookie-modal .ck-close{ position:absolute; top:1rem; right:1rem; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--card); display:grid; place-items:center; color:var(--ink-80); }
.cookie-modal .ck-close:hover{ color:var(--ink); border-color:var(--ink-50); }

/* ============================================================ Legal / text pages */
.legal-hero{ padding-top:calc(var(--header-h) + clamp(2.5rem,4vw,4.5rem)); padding-bottom:clamp(1.5rem,3vw,2.5rem); background:var(--bark); color:var(--paper); }
.legal-hero .h1{ color:#fff; max-width:24ch; }
.legal-hero .crumbs{ color:rgba(251,246,236,.5); } .legal-hero .crumbs a{ color:rgba(251,246,236,.75); }
.legal-hero .stand{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1.2rem; font-size:.82rem; letter-spacing:.04em; color:rgba(251,246,236,.7); }
.legal-hero .stand .d{ width:6px; height:6px; border-radius:50%; background:var(--turquoise); }
.legal-body{ background:var(--paper); }
.legal-wrap{ max-width:760px; margin-inline:auto; }
.legal-note{ background:var(--card); border:1px solid var(--line); border-left:3px solid var(--turquoise); border-radius:10px; padding:1rem 1.2rem; font-size:.86rem; color:var(--ink-80); margin-bottom:2.6rem; }
.legal-block{ padding:1.8rem 0; border-top:1px solid var(--line); }
.legal-block:first-of-type{ border-top:none; padding-top:0; }
.legal-block h2{ font-family:var(--font-display); font-weight:600; font-size:1.4rem; letter-spacing:-.01em; display:flex; align-items:baseline; gap:.6rem; }
.legal-block h2 .pgr{ font-size:.9rem; font-weight:700; color:var(--turquoise-deep); font-family:var(--font-sans); }
.legal-block h3{ font-family:var(--font-display); font-weight:600; font-size:1.1rem; margin-top:1.2rem; }
.legal-block p{ color:var(--ink-80); margin-top:.7rem; line-height:1.7; }
.legal-block p:first-child{ margin-top:.9rem; }
.legal-block ul{ list-style:none; margin-top:.8rem; display:grid; gap:.5rem; }
.legal-block ul li{ position:relative; padding-left:1.3rem; color:var(--ink-80); line-height:1.6; }
.legal-block ul li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--turquoise); }
.legal-data{ display:grid; grid-template-columns:auto 1fr; gap:.5rem 1.6rem; margin-top:1rem; }
.legal-data dt{ font-weight:600; color:var(--ink); }
.legal-data dd{ margin:0; color:var(--ink-80); }
.legal-block ol{ margin:.8rem 0 0; padding-left:1.3rem; color:var(--ink-80); display:grid; gap:.55rem; }
.legal-block ol li{ line-height:1.65; padding-left:.2rem; }
@media (max-width:560px){ .legal-data{ grid-template-columns:1fr; gap:.1rem 0; } .legal-data dd{ margin-bottom:.6rem; } }