/* OneDistrict Core — bloque Historia (hero v5 aprobado 2026-10-08).
   Fuentes de la tienda de ejemplo (Cerro Alto), autoalojadas: Bagel Fat One y Bricolage Grotesque (SIL OFL 1.1). */
@font-face{font-family:"Bagel Fat One";font-style:normal;font-weight:400;font-display:swap;src:url("../../assets/fonts/bagel-fat-one-latin.woff2") format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;src:url("../../assets/fonts/bricolage-grotesque-variable-latin.woff2") format("woff2")}
/* Kadence da color propio a títulos y párrafos: dentro del bloque se heredan del contenedor (las reglas de abajo los afinan) */
.od-historia.od-historia :is(h1,h2,h3,h4,p){color:inherit}
/* Kadence también agrega márgenes a títulos, párrafos y listas: dentro del bloque se anulan (las reglas propias de abajo los vuelven a poner donde hacen falta) */
.od-historia.od-historia :is(h1,h2,h3,h4,h5,p,ul,ol,li,figure,blockquote){margin:0}
/* El tema pone "transition: all" a las imágenes: aparecen tarde. Aquí el movimiento lo controla GSAP */
.od-historia.od-historia img{transition:none!important}
.od-historia.od-historia a{text-decoration:none}

/* La página que lleva este bloque usa la pantalla completa: se ocultan encabezado, título y pie del tema. */
body:has(.od-historia) #masthead,body:has(.od-historia) .site-header,body:has(.od-historia) #colophon,body:has(.od-historia) .site-footer,
body:has(.od-historia) .entry-hero,body:has(.od-historia) .entry-header{display:none!important}
body:has(.od-historia) .content-container,body:has(.od-historia) .site-container{max-width:none!important;padding:0!important}
body:has(.od-historia) #primary,body:has(.od-historia) .content-area,body:has(.od-historia) .content-wrap,body:has(.od-historia) .entry-content-wrap,
body:has(.od-historia) .single-content,body:has(.od-historia) .entry-content{margin:0!important;padding:0!important}
body:has(.od-historia) .entry.single-entry{box-shadow:none!important;border:0!important;background:transparent!important}
/* "sticky" deja de funcionar si un contenedor del tema recorta el desbordamiento */
body:has(.od-historia) #wrapper,body:has(.od-historia) .site,body:has(.od-historia) #inner-wrap,body:has(.od-historia) .site-main{overflow:visible!important}
body:has(.od-historia){background:#000!important}
.od-historia{display:block;margin:0!important;max-width:none!important;width:100%}
body.admin-bar .od-historia .nav{top:var(--wp-admin--admin-bar--height,32px)}

.od-historia{
  --blanco:#FFFFFF; --negro:#000000; --marino:#0B2A6F; --marino-claro:#8FA8EC;
  --gris:#5F6470; --gris-claro:#A7ABB4; --linea:#E3E4E8; --tinta-calida:#24180f;
  --f:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --gutter:clamp(18px,4vw,56px);
  color-scheme:light;
}
.od-historia *{box-sizing:border-box}
.od-historia{background:var(--negro);color:var(--negro);font:400 16px/1.6 var(--f);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
.od-historia ::selection{background:var(--marino);color:var(--blanco)}
.od-historia :focus-visible{outline:2px solid var(--marino-claro);outline-offset:3px}
.od-historia img{max-width:none;display:block}
.od-historia h1,.od-historia h2,.od-historia h3,.od-historia p{margin:0}
.od-historia h1,.od-historia h2,.od-historia h3{text-wrap:balance}
.od-historia .x{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:800;text-transform:uppercase;letter-spacing:.01em}
.od-historia .nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:calc(20px + env(safe-area-inset-top,0px)) var(--gutter) 20px;color:var(--tinta-calida);
  transition:color .3s ease,background-color .3s ease,border-color .3s ease,opacity .25s ease;border-bottom:1px solid transparent}
.od-historia .nav.claro{color:var(--blanco)}
.od-historia .nav.solido{background:var(--blanco);color:var(--negro);border-color:var(--linea)}
.od-historia .nav.oculto{opacity:0;pointer-events:none}
.od-historia .wm{font-size:17px;color:inherit;text-decoration:none}
.od-historia .nav ul{display:flex;gap:clamp(18px,2.6vw,36px);list-style:none;margin:0;padding:0;align-items:center;font-size:15px;font-weight:500}
.od-historia .nav a{color:inherit;text-decoration:none}
.od-historia .nav .cta{display:inline-flex;border:1px solid currentColor;padding:11px 18px;font-weight:600;transition:transform 160ms var(--ease-out)}
.od-historia .nav .cta:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.od-historia .nav ul a:not(.cta):hover{text-decoration:underline;text-underline-offset:6px}}
@media (max-width:760px){.od-historia .nav .solo-esc{display:none}
.od-historia .wm{font-size:15px}
.od-historia .nav .cta{padding:10px 14px;font-size:14px}}
/* Menú con enlaces a cada sección del inicio (2026-10-13). Debajo de 1000 px los enlaces pasan al botón "Menú". */
.od-historia .nav .solo-tel{display:none}
@media (max-width:1000px){.od-historia .nav .solo-esc{display:none}.od-historia .nav .solo-tel{display:block}}
.od-historia .nav .menu-btn{font:600 14px/1 var(--f);color:inherit;background:transparent;border:0;padding:10px 4px;cursor:pointer;text-transform:none;letter-spacing:normal}
.od-historia .menu-tel{position:absolute;top:100%;right:var(--gutter);min-width:220px;background:var(--negro);color:var(--blanco);padding:8px 0;box-shadow:0 18px 40px rgba(0,0,0,.25);
  transform-origin:top right;transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out)}
.od-historia .menu-tel[hidden]{display:block;opacity:0;transform:scale(.96);pointer-events:none;visibility:hidden}
.od-historia .menu-tel ul{display:grid;gap:0;font-size:16px}
.od-historia .menu-tel a{display:block;padding:12px 20px}
@media (hover:hover) and (pointer:fine){.od-historia .menu-tel a:hover{background:#1a1b1f;text-decoration:none!important}}
/* Los enlaces del menú se detienen debajo del menú fijo */
/* Salto directo (sin desplazamiento suave): las secciones están a decenas de miles de px y pasar por todas las animaciones se ve mal */
html:has(.od-historia .nav){scroll-padding-top:84px;scroll-behavior:auto!important}
.od-historia .btn{display:inline-flex;align-items:center;justify-content:center;font:600 16px/1 var(--f);padding:17px 26px;border:1px solid transparent;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform 160ms var(--ease-out),background-color 200ms ease,color 200ms ease}
.od-historia .btn:active{transform:scale(.97)}
.od-historia .btn-p{background:var(--marino);color:var(--blanco);border-color:var(--marino)}
.od-historia .btn-s{color:var(--blanco);border-color:var(--blanco)}
.od-historia .btn-s.dk{color:var(--negro);border-color:var(--negro)}
.od-historia .cierre .btn-p,.od-historia .plan.combo .btn-p{border-color:var(--marino-claro)}
@media (hover:hover) and (pointer:fine){.od-historia .btn-p:hover{background:#163a8c}
.od-historia .btn-s:hover{background:var(--blanco);color:var(--negro)}
.od-historia .btn-s.dk:hover{background:var(--negro);color:var(--blanco)}}
.od-historia .bs{display:flex;gap:12px;flex-wrap:wrap}
.od-historia .historia{position:relative;height:1200vh}
.od-historia .stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#f3e3c4}
@supports (height:100svh){.od-historia .stage{height:100svh}}
.od-historia .esc{position:absolute;inset:0;overflow:hidden;visibility:hidden}
.od-historia .mundo{position:absolute;left:50%;top:50%;width:max(100%,177.78svh);height:max(100%,56.25vw);transform:translate(-50%,-50%)}
@supports not (height:1svh){.od-historia .mundo{width:max(100%,177.78vh)}}
.od-historia .lente{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.od-historia .lente img{width:100%;height:100%;object-fit:cover}
.od-historia .frase{position:absolute;z-index:6;left:var(--gutter);bottom:clamp(32px,8vh,84px);max-width:min(760px,64vw)}
.od-historia .frase h1{font-size:clamp(40px,4.6vw,74px);line-height:.95}
.od-historia .frase h2{font-size:clamp(32px,3.6vw,58px);line-height:.98}
.od-historia .frase p{margin-top:16px;font-size:clamp(16px,1.15vw,18px);max-width:42ch}
.od-historia .frase .bs{margin-top:28px}
.od-historia .e1 .palabra{position:absolute;left:50%;top:36%;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:800;line-height:.78;letter-spacing:-.02em;color:var(--blanco);white-space:nowrap;font-size:min(20vw,34vh);will-change:transform;transform:translate(-50%,-50%)}
.od-historia .e1 .frase{color:var(--tinta-calida)}
.od-historia .e1 .frase p{color:#3b2b1d}
.od-historia .bruma{position:absolute;inset:auto 0 0 0;height:60%;background:linear-gradient(to top,rgba(247,232,205,.85),rgba(247,232,205,.4) 50%,rgba(247,232,205,0));pointer-events:none}
.od-historia .niebla{position:absolute;inset:0;z-index:30;pointer-events:none;opacity:0;background:#f6e7cb}
.od-historia .e2 .frase{top:calc(96px + env(safe-area-inset-top,0px));bottom:auto;color:var(--tinta-calida)}
.od-historia .e2 .frase p{color:#3b2b1d}
.od-historia .luz{position:absolute;inset:0;z-index:31;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,#fff8e6 0%,#ffe7b3 45%,#f8d08a 100%)}
.od-historia .e3 .velo{position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(to top,rgba(20,12,6,.8),rgba(20,12,6,.35) 55%,rgba(20,12,6,0));pointer-events:none;z-index:5}
.od-historia .e3 .frase{color:var(--blanco)}
.od-historia .e3 .frase p{color:#EDE4D8}
.od-historia .cafe-caja{position:absolute;inset:0;z-index:3;overflow:hidden}
.od-historia .cafe-mov{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0;will-change:transform}
.od-historia .capa-cabeza{z-index:4}
.od-historia .relleno{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;filter:blur(22px) brightness(.62);display:none}
@media (max-aspect-ratio: 1/1){.od-historia .relleno{display:block}}
.od-historia .chip{position:absolute;z-index:8;left:var(--gutter);bottom:clamp(20px,4vh,40px);max-width:420px;background:var(--negro);color:var(--blanco);padding:18px 20px;opacity:0}
.od-historia .chip h2{font-size:clamp(18px,1.6vw,24px);line-height:1.05}
.od-historia .chip p{font-size:14px;color:var(--gris-claro);margin-top:8px}
.od-historia .nubes-final{position:absolute;inset:0;z-index:29;pointer-events:none;visibility:hidden}
.od-historia .nubes-final img{position:absolute;left:50%;top:0;width:max(140%,250svh);transform:translate(-50%,100%)}
.od-historia .cafe{--f-disp:"Bagel Fat One","Arial Rounded MT Bold",system-ui,sans-serif;--fc:"Bricolage Grotesque",system-ui,sans-serif;--tinta:#2A1A12;--crema:#F6EBDD;--bc:#FFFDF9;--bg-1:#C99A6B;--bg-2:#8FA98A;--k:0;
  position:absolute;inset:0;container-type:size;overflow:hidden;font-family:var(--fc);color:var(--tinta);
  background:color-mix(in oklab,var(--bg-1) calc((1 - var(--k)) * 100%),var(--bg-2))}
.od-historia .cafe .cnav{position:absolute;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:2.9cqh 5cqw;z-index:5}
.od-historia .cafe .logo{font-family:var(--f-disp);font-size:max(14px,1.7cqw);color:var(--bc)}
.od-historia .cafe .pill{display:flex;gap:4px;background:var(--bc);border-radius:999px;padding:5px}
.od-historia .cafe .pill a{font-size:max(11px,1cqw);font-weight:600;color:var(--tinta);text-decoration:none;padding:.55cqw 1.1cqw;border-radius:999px}
.od-historia .cafe .pill a.on{background:var(--tinta);color:var(--crema)}
.od-historia .cafe .carro{width:max(30px,3cqw);aspect-ratio:1;border-radius:50%;background:var(--bc);display:flex;align-items:center;justify-content:center}
.od-historia .cafe .carro svg{width:45%}
.od-historia .cafe .texto{position:absolute;left:5cqw;top:18cqh;width:min(36cqw,520px);z-index:4}
.od-historia .cafe .texto h1{font-family:var(--f-disp);font-weight:400;font-size:5.4cqw;line-height:.92;color:var(--bc);text-shadow:0 3px 0 rgba(42,26,18,.18)}
.od-historia .cafe .texto p{margin-top:2.4cqh;max-width:34ch;color:#3a271c;font-size:max(12px,1.18cqw);line-height:1.5}
.od-historia .cafe .cbs{display:flex;gap:10px;margin-top:3cqh}
.od-historia .cafe .cbtn{font-weight:700;font-size:max(11px,1.05cqw);padding:1cqw 1.7cqw;border-radius:999px;text-decoration:none;border:2px solid var(--tinta)}
.od-historia .cafe .cbtn.p{background:var(--tinta);color:var(--crema)}
.od-historia .cafe .cbtn.s{color:var(--tinta)}
.od-historia .cafe .ficha{position:absolute;left:5cqw;bottom:27cqh;z-index:4;display:flex;gap:1.3cqw;align-items:baseline}
.od-historia .cafe .ficha .n{font-family:var(--f-disp);font-size:1.95cqw;color:var(--bc)}
.od-historia .cafe .ficha .d{font-size:max(11px,1.05cqw);color:#3a271c}
.od-historia .cafe .ficha .pr{font-weight:700;font-size:1.4cqw}
.od-historia .cafe .prod{position:absolute;z-index:3;left:0;top:0;transform-origin:50% 100%;will-change:transform}
.od-historia .cafe .bolsa{position:relative;height:66cqh}
.od-historia .cafe .bolsa img{height:100%;width:auto;filter:drop-shadow(0 3cqh 3.4cqh rgba(42,26,18,.35))}
.od-historia .cafe .etq{position:absolute;left:37.2%;top:33.9%;width:55.7%;height:43.1%;container-type:inline-size;background:#F3E9D6;color:var(--c);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(60,40,20,.10),inset 0 -10px 18px -10px rgba(60,40,20,.25),0 1px 1px rgba(60,40,20,.25)}
.od-historia .cafe .etq .banda{background:var(--c);color:#F3E9D6;padding:9cqw 6cqw 7cqw;text-align:center}
.od-historia .cafe .etq .m{font-family:var(--f-disp);font-size:13cqw;line-height:.9;display:block}
.od-historia .cafe .etq .t{font-size:5.4cqw;font-weight:700;letter-spacing:.18em;text-transform:uppercase;display:block;margin-top:3cqw;opacity:.9}
.od-historia .cafe .etq .cuerpo{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3.5cqw;text-align:center;padding:4cqw 6cqw}
.od-historia .cafe .etq svg{width:34cqw;height:auto}
.od-historia .cafe .etq .o{font-family:var(--f-disp);font-size:12cqw;line-height:.95;white-space:nowrap}
.od-historia .cafe .etq .nn{font-size:6cqw;font-weight:600;color:#4a3426;line-height:1.25}
.od-historia .cafe .etq .g{font-size:5.2cqw;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-top:1.5px solid currentColor;padding-top:2.5cqw;width:70%}
.od-historia .cafe .etq::after{content:"";position:absolute;inset:0;background:var(--od-arrugas) center/100% 100%;mix-blend-mode:overlay;opacity:.95;pointer-events:none}
.od-historia .cafe .etq::before{content:"";position:absolute;inset:0;background:var(--od-arrugas) center/100% 100%;mix-blend-mode:multiply;opacity:.28;pointer-events:none;z-index:1}
.od-historia .cafe .p1 .etq{--c:#B5522B}
.od-historia .cafe .p2 .etq{--c:#2E6A45}
.od-historia .cafe .p3 .etq{--c:#7A3B6E}
.od-historia .cafe .grano{position:absolute;width:3.2cqw;aspect-ratio:.72;border-radius:50%;background:radial-gradient(ellipse at 35% 30%,#8a5a3c,#3b2416 70%);z-index:2;box-shadow:inset -.25cqw 0 0 rgba(0,0,0,.25)}
.od-historia .cafe .grano::after{content:"";position:absolute;left:48%;top:10%;bottom:10%;width:7%;border-radius:40%;background:#24150c;transform:rotate(8deg)}
.od-historia .cafe .ola{position:absolute;left:-2%;bottom:-1px;width:104%;height:22cqh;z-index:3;display:block}
.od-historia .cafe .ola path{fill:var(--crema)}
.od-historia .cafe .puntos{position:absolute;right:5cqw;bottom:6cqh;z-index:5;display:flex;gap:8px}
.od-historia .cafe .puntos i{width:9px;height:9px;border-radius:50%;background:var(--tinta);opacity:.25}
.od-historia .cafe .puntos i.on{opacity:1}
@container (max-aspect-ratio: 1/1){.od-historia .cafe .pill{display:none}
.od-historia .cafe .logo{font-size:5.4cqw}
.od-historia .cafe .texto{top:13cqh;width:auto;right:5cqw}
.od-historia .cafe .texto h1{font-size:10.5cqw}
.od-historia .cafe .texto p{font-size:3.8cqw}
.od-historia .cafe .cbtn{font-size:3.6cqw;padding:2.8cqw 4.4cqw}
.od-historia .cafe .ficha{bottom:auto;top:47cqh;flex-wrap:wrap;gap:2cqw}
.od-historia .cafe .ficha .n{font-size:6cqw}
.od-historia .cafe .ficha .d{font-size:3.4cqw}
.od-historia .cafe .ficha .pr{font-size:4.4cqw}
.od-historia .cafe .bolsa{height:38cqh}
.od-historia .cafe .grano{width:6cqw}
.od-historia .cafe .ola{height:16cqh}

}
.od-historia .cierre{position:absolute;inset:0;z-index:40;background:var(--negro);color:var(--blanco);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;text-align:center;padding:24px;opacity:0;visibility:hidden}
.od-historia .cierre h2{font-size:clamp(40px,10.5vw,150px);line-height:.9}
.od-historia .cierre p{color:var(--gris-claro);max-width:38ch}
.od-historia .cierre .bs{justify-content:center}
@media (max-width:760px){.od-historia .historia{height:1050vh}
.od-historia .frase{max-width:none;right:var(--gutter);bottom:max(28px,5svh)}
.od-historia .frase h1{font-size:clamp(34px,10.4vw,46px)}
.od-historia .frase h2{font-size:clamp(28px,8.6vw,40px)}
.od-historia .e1 .palabra{font-size:29vw;top:31%}
.od-historia .chip{right:var(--gutter);max-width:none;padding:14px 16px}

}
.od-historia .paquetes{background:var(--blanco);padding:clamp(96px,12vw,160px) var(--gutter) clamp(72px,9vw,120px)}
.od-historia .paquetes .in{max-width:1240px;margin:0 auto}
.od-historia .paquetes h2{font-size:clamp(34px,4.6vw,64px);line-height:.96}
.od-historia .paquetes .lede{color:var(--gris);margin-top:18px;max-width:52ch;font-size:18px}
.od-historia .planes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:64px;border-top:1px solid var(--negro)}
@media (max-width:900px){.od-historia .planes{grid-template-columns:1fr}}
.od-historia .plan{padding:32px 32px 40px 0;display:flex;flex-direction:column;gap:18px;min-width:0}
.od-historia .plan+.plan{padding-left:32px;border-left:1px solid var(--linea)}
@media (max-width:900px){.od-historia .plan,.od-historia .plan+.plan{padding:32px 0;border-left:0;border-bottom:1px solid var(--linea)}}
.od-historia .plan h3{font-size:24px;line-height:1.05}
.od-historia .plan .precio{font-weight:600;color:var(--marino)}
.od-historia .plan ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px}
.od-historia .plan li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:baseline}
.od-historia .plan li svg{width:14px;height:14px;transform:translateY(2px)}
.od-historia .plan li.no{color:var(--gris-claro)}
.od-historia .plan .bs{margin-top:auto;padding-top:10px}
.od-historia .plan.combo{background:var(--negro);color:var(--blanco);padding:32px!important}
.od-historia .plan.combo .precio{color:var(--marino-claro)}
.od-historia .plan.combo li{color:#D7DAE0}
.od-historia .pie{background:var(--negro);color:var(--gris-claro);padding:56px var(--gutter);font-size:14px}
.od-historia .pie .in{max-width:1240px;margin:0 auto;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.od-historia .pie .x{color:var(--blanco);font-size:17px}
.od-historia .pie b{color:var(--blanco);font-weight:600}
.od-historia .notaf{max-width:1240px;margin:28px auto 0;font-size:12px;color:var(--gris)}



.od-historia .planes-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.od-historia .planes-3{grid-template-columns:1fr}}
.od-historia .planes-3 .plan{padding:28px 24px 32px;border-left:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.od-historia .planes-3 .plan.combo{padding:28px 24px 32px!important}
.od-historia .mas-planes{margin-top:28px!important;font-weight:600}
.od-historia .mas-planes a{color:var(--marino);text-decoration:underline!important;text-underline-offset:5px}
.od-historia .plan .etiqueta{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);margin:0}
.od-historia .plan.combo .etiqueta{color:var(--marino-claro)}
.od-historia .plan .precio{font-size:34px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.od-historia .plan .precio span{font-size:15px;font-weight:600;color:var(--gris)}
.od-historia .plan.combo .precio span{color:var(--gris-claro)}
.od-historia .plan .btn{white-space:normal;text-align:center}
.od-historia .e1::before{content:"";position:absolute;inset:-6%;background:url("data:image/webp;base64,UklGRgwBAABXRUJQVlA4IAABAABwBwCdASowABsAPqVCmkmmI6KhOrZoAMAUiUAWX3z5YNdfhrhLTWzZLsG2SBcoGVHWcn9spfmwmXZzNjPnOqJdxXrygAD+WQq0U2Ikpb0DUmpGGOLxnO0gTUw3PULMnP2zx6VNmZfvFiz+QGXgMyy26SHNcYg3JJMj1pjS/LHkIcelr9ThRnDXxka5gFx5Xt1iO8EL9X7P5kgXax4l0Dh9rKY2NHNC8VRXWPetbDGUixVJaSHSvJQoS+KLx+STz+pUYXsOHYZmraA3XjHLpYg0laSMj/SCM/0xWe7nON5TJXzEWy2HICNJi7EFr60IIk/vG14p7rZtd9pgFgckAAAA") center/cover no-repeat;filter:blur(14px)}