/* ClimaEnergy, demo no oficial de Estudio González. Colores del logo: azul, naranja, azul marino de las placas. */
:root{
  color-scheme: light dark;
  --azul:#1b4fd8; --azul2:#2b86e8; --nar:#ee6a1f; --nar2:#f39a3a; --narTexto:#b8480c;
  --tinta:#0b1a3a; --texto:#26324d; --papel:#f4f7fb; --blanco:#ffffff; --linea:#d7deea;
  --cond:"Barlow Condensed",system-ui,sans-serif; --sans:"Barlow",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme: dark){
  :root{ --tinta:#0b1a3a; --texto:#26324d; --papel:#f4f7fb; --blanco:#ffffff; --linea:#d7deea; }
}
*,*::before,*::after{ box-sizing:border-box; }
html{ overflow-x:clip; scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%; }
body{ margin:0; font-family:var(--sans); font-size:17px; line-height:1.55; color:var(--texto); background:var(--blanco); overflow-x:clip; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
button,input{ font:inherit; color-scheme:light; }
h1,h2,h3,p{ margin:0; }
em,i{ font-style:normal; }
.envase{ width:min(1200px, 100% - 48px); margin-inline:auto; }

/* Títulos */
.t-xxl,.t-xl,h3{ font-family:var(--cond); font-weight:700; color:var(--tinta); line-height:.98; letter-spacing:-.01em; }
.t-xxl{ font-size:clamp(44px, 6.2vw, 84px); }
.t-xl{ font-size:clamp(36px, 5vw, 64px); }
.linea-caja{ display:block; overflow:hidden; padding-bottom:.08em; }
.punt{ display:inline; }

/* Botones */
.boton{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 26px; border-radius:999px; border:2px solid var(--azul); background:var(--azul); color:#fff; text-decoration:none; font-weight:600; font-size:16.5px; position:relative; overflow:hidden; cursor:pointer; transition:color .35s var(--ease), border-color .35s; isolation:isolate; }
.boton::before{ content:""; position:absolute; inset:0; background:var(--nar); transform:translateX(-101%); transition:transform .45s var(--ease); z-index:-1; }
.boton:hover::before,.boton:focus-visible::before{ transform:none; }
.boton:hover{ border-color:var(--nar); }
.boton--linea{ background:transparent; color:var(--tinta); border-color:var(--tinta); }
.boton--linea::before{ background:var(--tinta); }
.boton--linea:hover{ color:#fff; border-color:var(--tinta); }
.boton--claro{ background:#fff; color:var(--tinta); border-color:#fff; }
.boton--chico{ padding:10px 20px; font-size:15px; }
.boton--ancho{ width:100%; }
.flecha{ transition:transform .35s var(--ease); }
.boton:hover .flecha,.enlace:hover .flecha{ transform:translateX(5px); }
.enlace{ display:inline-flex; gap:8px; align-items:center; font-weight:600; color:var(--azul); text-decoration:none; border-bottom:2px solid currentColor; padding-bottom:2px; cursor:pointer; }
.enlace:hover{ color:var(--nar); }
:focus-visible{ outline:3px solid var(--nar); outline-offset:3px; }

/* Carga */
#carga{ position:fixed; inset:0; z-index:200; display:grid; place-content:center; justify-items:center; gap:14px; background:var(--tinta); color:#fff; }
.sin-carga #carga,html:not(.js-listo) #carga{ display:none; }
.carga__copo{ width:96px; height:96px; stroke:var(--nar); }
.carga__g path{ stroke-dasharray:1; stroke-dashoffset:1; }
.carga__nombre{ font-family:var(--cond); font-weight:700; font-size:34px; letter-spacing:.02em; }
.carga__num{ font-family:var(--cond); font-weight:600; font-size:20px; color:#9fb4e8; font-variant-numeric:tabular-nums; }
.carga__linea{ width:160px; height:3px; background:#1d2d57; border-radius:3px; overflow:hidden; }
.carga__linea i{ display:block; height:100%; background:linear-gradient(90deg,var(--azul2),var(--nar)); transform:scaleX(0); transform-origin:left; }

/* Barra */
.barra{ position:fixed; z-index:100; top:14px; left:50%; transform:translateX(-50%); width:min(1200px, 100% - 28px); display:flex; align-items:center; gap:18px; padding:8px 10px 8px 14px; border-radius:999px; background:rgba(255,255,255,.88); backdrop-filter:blur(14px); border:1px solid var(--linea); transition:box-shadow .3s; }
.barra--baja{ box-shadow:0 10px 34px rgba(11,26,58,.14); }
.marca{ display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; }
.marca img{ width:40px; height:40px; border-radius:50%; }
.marca__t{ font-family:var(--cond); font-weight:700; font-size:22px; line-height:1; color:var(--tinta); display:grid; }
.marca__t small{ font-family:var(--sans); font-weight:500; font-size:12px; color:var(--texto); letter-spacing:.02em; }
.barra__nav{ display:flex; gap:22px; }
.barra__nav a{ text-decoration:none; font-weight:500; font-size:15.5px; color:var(--tinta); }
.barra__nav a:hover{ color:var(--nar); }
.barra__menu{ display:none; width:42px; height:42px; border-radius:50%; border:0; background:var(--tinta); position:relative; cursor:pointer; }
.barra__menu i{ position:absolute; left:12px; right:12px; height:2px; background:#fff; transition:transform .3s; }
.barra__menu i:first-child{ top:17px; } .barra__menu i:last-child{ top:23px; }
.menu-abierto .barra__menu i:first-child{ transform:translateY(3px) rotate(45deg); }
.menu-abierto .barra__menu i:last-child{ transform:translateY(-3px) rotate(-45deg); }
.menu-cel{ position:fixed; inset:0; z-index:90; background:var(--tinta); padding:100px 28px 40px; display:grid; align-content:start; gap:6px; }
.menu-cel[hidden]{ display:none; }
.menu-cel a:not(.boton){ color:#fff; text-decoration:none; font-family:var(--cond); font-weight:700; font-size:40px; padding:6px 0; border-bottom:1px solid #1d2d57; }
.menu-cel .boton{ margin-top:22px; background:var(--nar); border-color:var(--nar); }

/* Portada */
.portada{ position:relative; padding:150px 0 70px; background:linear-gradient(180deg,#eaf1fb 0%, #ffffff 100%); overflow:clip; }
.portada__copo{ position:absolute; right:-120px; top:40px; width:640px; color:#1b4fd8; opacity:.08; pointer-events:none; }
.portada__grilla{ position:relative; display:grid; grid-template-columns:1.25fr 1fr; gap:56px; align-items:center; }
.portada__sub{ margin-top:24px; font-size:20px; max-width:34em; color:var(--texto); }
.portada__botones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.datos{ list-style:none; margin:40px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:14px 38px; }
.datos li{ display:grid; }
.datos b{ font-family:var(--cond); font-size:40px; line-height:1; color:var(--tinta); }
.datos > li > span{ font-size:14.5px; color:var(--texto); }

/* Etiqueta de la portada, flechas con el equipo */
.etiqueta-portada{ display:grid; gap:10px; padding:26px; border-radius:26px; background:#fff; border:2px solid var(--tinta); box-shadow:10px 10px 0 var(--tinta); }
.etiqueta-portada__t{ font-family:var(--cond); font-weight:700; font-size:30px; color:var(--tinta); line-height:1; margin-bottom:6px; }
.etiqueta-portada__nota{ font-size:14px; color:var(--texto); margin-top:4px; }
.flecha-fila{ --c:var(--azul); display:flex; align-items:center; gap:14px; height:64px; padding:0 44px 0 18px; border:0; color:#fff; font-family:var(--cond); font-weight:700; font-size:24px; text-align:left; cursor:pointer; background:var(--c); clip-path:polygon(0 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 30px) 100%, 0 100%); transition:margin .4s var(--ease), filter .3s; }
.flecha-fila svg{ width:44px; height:30px; flex:none; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.f1{ --c:#1b4fd8; width:68%; } .f2{ --c:#2b86e8; width:80%; } .f3{ --c:#f08a2e; width:92%; } .f4{ --c:#ee6a1f; width:100%; }
.flecha-fila:hover{ margin-left:10px; filter:brightness(1.08); }

/* Cinta fina */
.cinta{ background:var(--tinta); color:#fff; overflow:hidden; border-block:3px solid var(--nar); }
.cinta__pista{ display:flex; width:max-content; animation:cinta 36s linear infinite; }
.cinta__pista span{ padding:16px 34px; font-family:var(--cond); font-weight:600; font-size:22px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.cinta__pista span::after{ content:"❄"; margin-left:68px; color:var(--nar); font-size:18px; }
@keyframes cinta{ to{ transform:translateX(-50%); } }

/* Secciones */
.seccion{ padding:110px 0; position:relative; }
.seccion--papel{ background:var(--papel); }
.seccion--oscura{ background:var(--tinta); }
.seccion--oscura .t-xl,.seccion--oscura h3{ color:#fff; }
.seccion--oscura p{ color:#c5d1ee; }
.cabeza{ display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:end; margin-bottom:56px; }
.cabeza p{ font-size:19px; }

/* Servicios */
.servicios{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.servicio{ padding:34px; border-radius:26px; background:var(--papel); border:1px solid var(--linea); display:grid; gap:14px; align-content:start; transition:transform .5s var(--ease), box-shadow .5s; }
.servicio:hover{ transform:translateY(-8px); box-shadow:0 24px 50px rgba(11,26,58,.12); }
.servicio__ico{ width:84px; height:56px; fill:none; stroke:var(--azul); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.servicio:nth-child(2) .servicio__ico{ stroke:var(--azul2); }
.servicio:nth-child(3) .servicio__ico{ stroke:var(--nar); }
.servicio h3{ font-size:38px; }
.servicio .enlace{ justify-self:start; margin-top:6px; }

/* Visita */
.pasos-visita{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:0; counter-reset:x; position:relative; }
.pasos-visita li{ padding:0 28px 0 0; position:relative; }
.pasos-visita li::before{ content:""; position:absolute; top:28px; left:60px; right:12px; height:2px; background:linear-gradient(90deg,var(--azul2),var(--nar)); opacity:.7; transform:scaleX(var(--l,1)); transform-origin:left; }
.pasos-visita li:last-child::before{ display:none; }
.pv__n{ display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--nar); color:#fff; font-family:var(--cond); font-weight:700; font-size:30px; margin-bottom:22px; }
.pasos-visita h3{ font-size:32px; margin-bottom:10px; }

/* Galería */
.galeria{ display:grid; grid-template-columns:1.3fr 1fr 1fr; grid-template-rows:320px 320px; gap:18px; align-items:stretch; }
.g{ margin:0; overflow:hidden; border-radius:22px; background:var(--papel); position:relative; }
.g img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s var(--ease); }
.g:hover img{ transform:scale(1.05); }
.g--grande{ grid-row:span 2; } .g--alta{ grid-row:span 2; }
.g--alta img,.g--grande img{ height:100%; object-fit:cover; }
.g figcaption{ position:absolute; left:14px; bottom:14px; padding:7px 14px; border-radius:999px; background:rgba(255,255,255,.94); color:var(--tinta); font-size:14px; font-weight:600; }

/* Pedido y etiqueta */
.pedido{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.pedido__izq p{ margin-top:18px; font-size:18px; max-width:32em; }
.pedido__izq .nota{ font-size:15px; }
.etiqueta{ list-style:none; margin:34px 0 0; padding:22px; display:grid; gap:9px; background:#fff; border:2px solid var(--tinta); border-radius:22px; box-shadow:8px 8px 0 var(--tinta); }
.et-fila{ --c:#c3ccdd; position:relative; display:flex; justify-content:space-between; align-items:center; gap:14px; min-height:54px; padding:0 42px 0 18px; background:var(--c); color:#fff; clip-path:polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%); width:var(--w); transition:background .5s var(--ease), width .6s var(--ease); font-family:var(--cond); font-weight:700; font-size:22px; }
.e1{ --w:70%; } .e2{ --w:80%; } .e3{ --w:90%; } .e4{ --w:100%; }
.et-fila.lleno.e1{ --c:#1b4fd8; } .et-fila.lleno.e2{ --c:#2b86e8; } .et-fila.lleno.e3{ --c:#f08a2e; } .et-fila.lleno.e4{ --c:#ee6a1f; }
.et-t{ font-size:19px; opacity:.92; white-space:nowrap; }
.et-v{ font-size:21px; text-align:right; line-height:1.05; overflow-wrap:anywhere; }
.et-fila:not(.lleno) .et-v{ font-weight:600; font-size:17px; color:#fff; opacity:.85; }

.pasos{ padding:30px; border-radius:26px; background:#fff; border:1px solid var(--linea); box-shadow:0 24px 60px rgba(11,26,58,.1); position:sticky; top:96px; }
.pasos__arriba{ display:flex; align-items:center; gap:14px; margin-bottom:20px; font-weight:600; font-size:14.5px; color:var(--tinta); }
.pasos__barra{ flex:1; height:6px; border-radius:6px; background:var(--linea); overflow:hidden; }
.pasos__barra i{ display:block; height:100%; background:linear-gradient(90deg,var(--azul2),var(--nar)); transform-origin:left; transition:transform .5s var(--ease); }
.paso__preg{ font-family:var(--cond); font-weight:700; font-size:34px; line-height:1; color:var(--tinta); margin-bottom:18px; }
.paso[hidden]{ display:none; }
.ops{ display:grid; gap:10px; margin-bottom:14px; }
.ops--dos{ grid-template-columns:1fr 1fr; }
.ops button{ padding:15px 16px; border-radius:16px; border:2px solid var(--linea); background:#fff; color:var(--tinta); font-weight:600; font-size:16px; text-align:left; cursor:pointer; transition:border-color .25s, background .25s, transform .25s var(--ease); }
.ops button:hover{ border-color:var(--azul); transform:translateY(-2px); }
.ops button.elegido{ border-color:var(--azul); background:#eaf1fe; }
.paso__atras{ background:none; border:0; color:var(--texto); font-weight:600; cursor:pointer; padding:10px 0; margin-top:6px; }
.campo{ display:grid; gap:6px; margin-bottom:14px; font-weight:600; font-size:14.5px; color:var(--tinta); }
.campo input{ padding:14px 16px; border-radius:14px; border:2px solid var(--linea); background:#fff; color:var(--tinta); font-size:16.5px; }
.campo input:focus{ outline:none; border-color:var(--azul); }
.paso__vista{ margin:4px 0 16px; padding:14px 16px; border-radius:16px 16px 16px 4px; background:#dcf8c6; color:#111; font-size:15px; }

/* Google */
.google{ display:grid; grid-template-columns:auto 1fr; gap:60px; align-items:center; }
.google__tarjeta{ display:grid; justify-items:center; gap:4px; padding:44px 54px; border-radius:30px; background:var(--tinta); color:#fff; text-decoration:none; transition:transform .5s var(--ease); }
.google__tarjeta:hover{ transform:translateY(-6px) rotate(-1deg); }
.google__num{ font-family:var(--cond); font-weight:700; font-size:120px; line-height:.9; }
.google__estrellas{ color:#f6b73c; font-size:30px; letter-spacing:4px; }
.google__txt{ font-weight:600; font-size:18px; margin-top:6px; }
.google__ver{ margin-top:14px; font-size:15px; color:#9fb4e8; }
.google__texto p{ margin-top:18px; font-size:19px; max-width:30em; }

/* Preguntas */
.faq{ display:grid; grid-template-columns:1fr 1.3fr; gap:56px; align-items:start; }
.faq>:first-child{ position:sticky; top:110px; }
.t-xxl,.t-xl{ text-wrap:balance; }
details{ border-bottom:1px solid var(--linea); padding:6px 0; }
summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:14px; padding:16px 0; font-family:var(--cond); font-weight:700; font-size:27px; color:var(--tinta); }
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"+"; font-size:34px; color:var(--nar); transition:transform .3s; flex:none; }
details[open] summary::after{ transform:rotate(45deg); }
details p{ padding:0 0 18px; font-size:17.5px; max-width:36em; }
.confirmar{ margin-left:auto; padding:3px 11px; border-radius:999px; background:#fde9d9; color:var(--narTexto); font-family:var(--sans); font-weight:600; font-size:12.5px; letter-spacing:0; white-space:nowrap; }

/* Dónde */
.donde{ display:grid; grid-template-columns:1fr 1.2fr; gap:56px; align-items:center; }
.donde p{ margin-top:18px; font-size:19px; }
.donde__botones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.donde__mapa{ display:block; border-radius:26px; overflow:hidden; border:1px solid var(--linea); position:relative; }
.donde__mapa img{ width:100%; transition:transform 1s var(--ease); }
.donde__mapa:hover img{ transform:scale(1.03); }

/* Pie */
.pie{ background:var(--tinta); color:#c5d1ee; padding:80px 0 120px; overflow:hidden; }
.pie__arriba{ display:flex; flex-wrap:wrap; gap:26px; align-items:center; justify-content:space-between; padding-bottom:48px; border-bottom:1px solid #1d2d57; }
.pie__grande{ font-family:var(--cond); font-weight:700; font-size:clamp(40px, 6vw, 80px); color:#fff; line-height:.98; }
.pie__caja{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; padding:44px 0; font-size:16px; }
.pie__t{ font-family:var(--cond); font-weight:700; font-size:20px; color:var(--nar2); margin-bottom:8px; letter-spacing:.03em; }
.pie a{ color:#fff; }
.pie .boton--claro{ color:var(--tinta); }
.pie__nombre{ font-family:var(--cond); font-weight:800; font-size:clamp(60px, 15vw, 210px); line-height:.85; color:#12255a; letter-spacing:-.02em; white-space:nowrap; text-align:center; margin:10px 0 28px; }
.pie__demo{ font-size:13.5px; color:#8ea3d6; max-width:60em; }
.barra-cel{ display:none; }

/* Modo demo */
.demo{ position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:20px; background:rgba(11,26,58,.62); backdrop-filter:blur(4px); }
.demo[hidden]{ display:none; }
.demo__caja{ width:min(460px,100%); padding:30px; border-radius:22px; background:#fff; color:var(--texto); display:grid; gap:14px; }
.demo__t{ font-family:var(--cond); font-weight:700; font-size:34px; color:var(--tinta); line-height:1; }
.demo__msg{ padding:16px 18px; border-radius:16px 16px 16px 4px; background:#dcf8c6; color:#111; font-size:15.5px; }

/* Aparecer */
[data-revela]{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
[data-revela].visto{ opacity:1; transform:none; }
html:not(.js-listo) [data-revela]{ opacity:1; transform:none; }
.flecha-fila,.et-fila{ will-change:transform; }

@media (max-width:980px){
  .portada__grilla,.cabeza,.pedido,.google,.faq,.donde{ grid-template-columns:1fr; }
  .pasos{ position:static; }
  .servicios{ grid-template-columns:1fr; }
  .pasos-visita{ grid-template-columns:1fr 1fr; row-gap:40px; }
  .pasos-visita li::before{ display:none; }
  .galeria{ grid-template-columns:1fr 1fr; grid-template-rows:none; grid-auto-rows:230px; }
  .g--grande,.g--alta{ grid-row:auto; }
  .faq>:first-child{ position:static; }
  .g--grande{ grid-column:span 2; grid-row:auto; } .g--alta{ grid-row:auto; }
  .g--grande img,.g--alta img{ height:auto; }
  .pie__caja{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .barra__nav,.barra>.boton{ display:none; }
  .barra__menu{ display:block; }
  .barra{ top:10px; padding:6px 8px 6px 12px; }
  .envase{ width:min(1200px, 100% - 36px); }
  .portada{ padding:112px 0 50px; }
  .portada__copo{ width:380px; right:-110px; }
  .seccion{ padding:72px 0; }
  .etiqueta-portada{ padding:20px; box-shadow:6px 6px 0 var(--tinta); }
  .flecha-fila{ height:58px; font-size:21px; }
  .pasos-visita{ grid-template-columns:1fr; }
  .ops--dos{ grid-template-columns:1fr; }
  .pasos{ padding:22px; }
  .etiqueta{ padding:16px; box-shadow:6px 6px 0 var(--tinta); }
  .et-fila{ padding-right:34px; min-height:50px; }
  .et-t{ font-size:16px; } .et-v{ font-size:17px; }
  .google__tarjeta{ padding:34px; }
  .google__num{ font-size:96px; }
  .confirmar{ display:none; }
  .pie{ padding-bottom:130px; }
  .pie__caja{ grid-template-columns:1fr; }
  .barra-cel{ position:fixed; z-index:80; left:12px; right:12px; bottom:max(12px, env(safe-area-inset-bottom)); display:grid; grid-template-columns:1.6fr 1fr; gap:10px; }
  .barra-cel .boton{ padding:14px 10px; box-shadow:0 10px 28px rgba(11,26,58,.28); }
  .barra-cel .boton--linea{ background:#fff; }
}
@media (prefers-reduced-motion: reduce){
  .cinta__pista{ animation:none; }
  [data-revela]{ transition:none; }
}

/* Mejora 2 */
.portada__foto{ margin:22px 0 0; display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:center; font-size:14px; color:var(--texto); }
.portada__foto img{ width:96px; height:96px; object-fit:cover; border-radius:16px; }
.directo{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:16px; }
.directo .enlace{ background:none; border:0; padding:0; font:inherit; font-weight:700; color:var(--azul,#1b4fd8); cursor:pointer; min-height:44px; }
@media (min-width:981px){ .pasos{ position:sticky; top:110px; } }
@media (max-width:760px){
  .datos{ display:grid; grid-template-columns:repeat(3,auto); gap:10px 16px; justify-content:start; }
  .datos b{ font-size:30px; } .datos > li > span{ font-size:12.5px; }
}