/* Kocheras · estilos comunes de la web Los usan index.html, casa.html y empresa.html. Una sola fuente de verdad. */ :root{ --azul:#1E51C8; --azul-h:#1A46AB; --on-azul:#FFFDF9; --page:#F4EFE6; --card:#FFFDF9; --card2:#F9F4EA; --line:#E3DACB; --line2:#D6CAB4; --ink:#1A1712; --ink2:#4A4235; --mut:#6E6455; --ok:#0F7A52; --bad:#C0342F; --warn:#8A5A00; --tinte:#DCE3F3; --e1:0 1px 2px rgba(26,23,18,.05), 0 1px 1px rgba(26,23,18,.04); --e2:0 2px 4px rgba(26,23,18,.04), 0 8px 24px rgba(26,23,18,.07); --e3:0 4px 8px rgba(26,23,18,.05), 0 24px 64px rgba(26,23,18,.13); --e4:0 8px 16px rgba(26,23,18,.07), 0 40px 96px rgba(26,23,18,.18); --brillo:radial-gradient(38% 46% at 76% 34%, color-mix(in srgb, var(--azul) 30%, transparent), transparent 68%), radial-gradient(44% 40% at 6% 2%, color-mix(in srgb, #E0912B 22%, transparent), transparent 64%), linear-gradient(180deg, color-mix(in srgb, var(--card2) 90%, transparent), transparent 62%); --r:14px; --r2:22px; --dur:220ms; --lento:520ms; --ease:cubic-bezier(.22,.61,.36,1); --muelle:cubic-bezier(.34,1.4,.5,1); --suave:cubic-bezier(.16,1,.3,1); } @media (prefers-color-scheme:dark){ :root{ --azul:#4D84FF; --azul-h:#699AFF; --on-azul:#191713; --page:#191713; --card:#221F19; --card2:#2A261F; --line:#38332A; --line2:#4A4437; --ink:#F4EFE6; --ink2:#C6BCAB; --mut:#968C7B; --ok:#4ECB94; --bad:#FF7A6E; --warn:#E5A93F; --tinte:#1A2339; --e1:0 1px 2px rgba(0,0,0,.4); --e2:0 2px 4px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.45); --e3:0 4px 8px rgba(0,0,0,.35), 0 24px 64px rgba(0,0,0,.6); --e4:0 8px 16px rgba(0,0,0,.4), 0 40px 96px rgba(0,0,0,.7); } } /* Elección manual del visitante (gana sobre el sistema). El pone data-theme="dark" por defecto; el botón sol/luna lo cambia y se recuerda. */ :root[data-theme="light"]{ --azul:#1E51C8; --azul-h:#1A46AB; --on-azul:#FFFDF9; --page:#F4EFE6; --card:#FFFDF9; --card2:#F9F4EA; --line:#E3DACB; --line2:#D6CAB4; --ink:#1A1712; --ink2:#4A4235; --mut:#6E6455; --ok:#0F7A52; --bad:#C0342F; --warn:#8A5A00; --tinte:#DCE3F3; --e1:0 1px 2px rgba(26,23,18,.05), 0 1px 1px rgba(26,23,18,.04); --e2:0 2px 4px rgba(26,23,18,.04), 0 8px 24px rgba(26,23,18,.07); --e3:0 4px 8px rgba(26,23,18,.05), 0 24px 64px rgba(26,23,18,.13); --e4:0 8px 16px rgba(26,23,18,.07), 0 40px 96px rgba(26,23,18,.18); } :root[data-theme="dark"]{ --azul:#4D84FF; --azul-h:#699AFF; --on-azul:#191713; --page:#191713; --card:#221F19; --card2:#2A261F; --line:#38332A; --line2:#4A4437; --ink:#F4EFE6; --ink2:#C6BCAB; --mut:#968C7B; --ok:#4ECB94; --bad:#FF7A6E; --warn:#E5A93F; --tinte:#1A2339; --e1:0 1px 2px rgba(0,0,0,.4); --e2:0 2px 4px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.45); --e3:0 4px 8px rgba(0,0,0,.35), 0 24px 64px rgba(0,0,0,.6); --e4:0 8px 16px rgba(0,0,0,.4), 0 40px 96px rgba(0,0,0,.7); } *{box-sizing:border-box;margin:0;padding:0} /* El brillo del hero sangra -50vw a cada lado (decorativo, z-index:-1) y hacía scroll horizontal. `clip` lo recorta sin crear contenedor de scroll, así que —a diferencia de overflow:hidden— NO rompe la cabecera position:sticky. */ html,body{overflow-x:clip} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition-duration:.01ms!important} } body{background:var(--page);color:var(--ink); font-family:'Work Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--azul);outline-offset:3px;border-radius:6px} .saltar{position:absolute;left:-9999px;top:0;background:var(--azul);color:var(--on-azul); padding:12px 18px;border-radius:0 0 10px 0;z-index:100;font-weight:500} .saltar:focus{left:0} .env{max-width:1120px;margin:0 auto;padding:0 28px} h2{font-size:clamp(2.05rem,4.2vw,3.15rem);line-height:1.02;letter-spacing:-.038em; font-weight:700;max-width:19ch;text-wrap:balance} h3{font-size:1.06rem;font-weight:600;margin-bottom:6px;letter-spacing:-.01em} .et{font-size:.73rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--azul);margin-bottom:15px;display:flex;align-items:center;gap:9px} .et::before{content:"";width:22px;height:2px;background:var(--azul);display:block} .sub{font-size:1.12rem;color:var(--ink2);max-width:58ch;margin-top:17px} .mini{font-size:.93rem;color:var(--mut);max-width:64ch} strong{font-weight:600} .franja-a{background:var(--page)} .franja-b{background:var(--card2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} section{padding:88px 0;scroll-margin-top:74px} @media (max-width:640px){ section{padding:56px 0} } /* ---------- cabecera ---------- */ header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--page) 88%,transparent); backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid transparent; transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)} header.pegado{border-bottom-color:var(--line);box-shadow:var(--e1)} /* El menú lleva más cosas (iniciar sesión, reserva demo, tema): la cabecera usa algo más de ancho que el contenido (1120) para que quepa en escritorios normales. */ header .env{display:flex;align-items:center;gap:12px;padding:12px 28px;max-width:1340px} header .marca{height:25px;width:auto;color:var(--azul);display:block;flex:none} /* el logo es un SVG (currentColor no hereda): en claro sale oscuro y se ve; en oscuro habría que invertirlo para que no desaparezca sobre el fondo. */ :root[data-theme="dark"] .marca{filter:invert(1) brightness(1.9)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .marca{filter:invert(1) brightness(1.9)}} header .quien{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--azul);background:var(--tinte);border-radius:99px;padding:4px 10px;flex:none; white-space:nowrap} header nav{margin-left:auto;display:flex;gap:2px;align-items:center;flex-wrap:nowrap} header nav a.op{font-size:.9rem;color:var(--ink2);padding:9px 11px;border-radius:9px; white-space:nowrap;transition:color var(--dur),background var(--dur)} header nav a.op:hover{color:var(--ink);background:var(--card)} header nav a.op[aria-current="page"]{color:var(--azul);font-weight:500} .bcta{background:var(--azul);color:var(--on-azul);border-radius:10px;padding:10px 16px; font-size:.9rem;font-weight:500;margin-left:10px;white-space:nowrap;flex:none; transition:background var(--dur),transform var(--dur)} .bcta:hover{background:var(--azul-h);transform:translateY(-1px)} /* botón secundario del menú (Reserva demo): contorno, no relleno */ .bcta.bcta-sec{background:transparent;color:var(--ink);border:1px solid var(--line2);margin-left:6px} .bcta.bcta-sec:hover{background:var(--card);border-color:var(--azul);color:var(--azul);transform:translateY(-1px)} /* botón de tema (sol/luna) */ .tema{margin-left:8px;flex:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--line); background:transparent;color:var(--ink2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center; transition:color var(--dur),background var(--dur),border-color var(--dur)} .tema:hover{color:var(--azul);border-color:var(--azul);background:var(--card)} .tema svg{width:18px;height:18px} .tema .i-luna{display:none} :root[data-theme="light"] .tema .i-sol{display:none} :root[data-theme="light"] .tema .i-luna{display:inline-block} /* botón de menú, solo cuando los enlaces no caben */ .hamb{display:none;margin-left:auto;background:var(--card);border:1px solid var(--line); border-radius:10px;width:42px;height:42px;cursor:pointer;padding:0; align-items:center;justify-content:center;flex-direction:column;gap:4px} .hamb span{display:block;width:17px;height:2px;background:var(--ink);border-radius:2px; transition:transform var(--dur) var(--ease),opacity var(--dur)} .hamb[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)} .hamb[aria-expanded="true"] span:nth-child(2){opacity:0} .hamb[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} @media (max-width:1280px){ .hamb{display:flex} header nav{position:absolute;left:0;right:0;top:100%;flex-direction:column; align-items:stretch;gap:0;background:var(--page);border-bottom:1px solid var(--line); box-shadow:var(--e2);padding:10px 22px 18px; display:none} header nav.abierto{display:flex} header nav a.op{padding:13px 6px;font-size:1rem;border-bottom:1px solid var(--line); border-radius:0;white-space:normal} header nav a.op:last-of-type{border-bottom:0} .bcta{margin:14px 0 0;text-align:center;padding:14px 16px;font-size:1rem} .bcta.bcta-sec{margin:10px 0 0} .tema{margin:14px auto 0;width:46px;height:46px} } @media (min-width:1281px){ .hamb{display:none} } /* ---------- botones ---------- */ .b1{background:var(--azul);color:var(--on-azul);border-radius:12px;padding:15px 26px; font-size:1rem;font-weight:500;box-shadow:var(--e1);display:inline-block; transition:background var(--dur) var(--ease),transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease)} .b1:hover{background:var(--azul-h);transform:translateY(-2px);box-shadow:var(--e2)} .b1:active{transform:translateY(0)} .b2{border:1px solid var(--line2);background:var(--card);border-radius:12px; padding:15px 26px;font-size:1rem;font-weight:500;color:var(--ink);display:inline-block; transition:border-color var(--dur),color var(--dur),transform var(--dur)} .b2:hover{border-color:var(--azul);color:var(--azul);transform:translateY(-2px)} /* ---------- portada ---------- */ .hero{padding:76px 0 66px;position:relative} .hero::before{content:"";position:absolute;inset:-140px -50vw 0;background:var(--brillo); pointer-events:none;z-index:-1} .hero .esl{font-size:1rem;font-weight:500;color:var(--azul);margin-bottom:14px} .hero h1{font-size:clamp(2.7rem,6.6vw,4.9rem);line-height:.98;letter-spacing:-.048em; font-weight:700;max-width:15ch;text-wrap:balance} .hero .sub{font-size:1.2rem;margin-top:22px;max-width:52ch} .acciones{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px;align-items:center} .nota{font-size:.88rem;color:var(--mut);margin-top:16px;max-width:46ch} .heroflex{display:grid;grid-template-columns:1fr;gap:52px;align-items:center} @media (min-width:920px){ .heroflex{grid-template-columns:1.08fr .92fr} } .sellos{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px} .sello{display:inline-flex;align-items:center;gap:8px;font-size:.83rem;color:var(--ink2); background:var(--card);border:1px solid var(--line);border-radius:99px;padding:7px 14px} .sello svg{width:14px;height:14px;color:var(--ok);flex:none} /* ---------- insignias de tienda ---------- */ .tiendas{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;align-items:center} .tienda{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line2); background:var(--card);border-radius:11px;padding:9px 15px;color:var(--ink2);cursor:default} .tienda svg{width:17px;height:17px;flex:none} .tienda b{display:block;font-size:.92rem;font-weight:600;color:var(--ink);line-height:1.15} .tienda i{font-style:normal;font-size:.72rem;color:var(--mut)} /* ---------- teléfono ---------- */ .marco{position:relative;width:296px;margin:0 auto; filter:drop-shadow(0 8px 16px rgba(26,23,18,.10)) drop-shadow(0 44px 84px rgba(26,23,18,.26))} .marco::before,.marco::after{content:"";position:absolute;z-index:-1;width:3px; background:linear-gradient(#3b362c,#1e1a15)} .marco::before{left:-2px;top:112px;height:62px;border-radius:4px 0 0 4px} /* volumen */ .marco::after{right:-2px;top:150px;height:50px;border-radius:0 4px 4px 0} /* encendido */ @media (prefers-color-scheme:dark){ .marco{filter:drop-shadow(0 10px 18px rgba(0,0,0,.5)) drop-shadow(0 38px 70px rgba(0,0,0,.7))} } .tel{border-radius:40px;overflow:hidden;padding:10px; background:linear-gradient(150deg,#332e25,#141109 55%,#2a241c); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.20), inset 0 0 0 1.5px rgba(0,0,0,.6), inset 0 -2px 6px rgba(0,0,0,.5)} .tel::before{content:"";position:absolute;left:50%;top:6px;width:56px;height:5px; transform:translateX(-50%);background:rgba(255,255,255,.16);border-radius:99px;z-index:2} .marco .tel{position:relative} .tel .pant{background:#0b0a08;border-radius:31px;overflow:hidden} .tel .cab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3px} .tel .cab b{font-size:1.06rem;font-weight:600} .tel .cab i{font-style:normal;font-size:.72rem;color:var(--mut)} .tel .c{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px; box-shadow:var(--e1)} .tel .c.acc{border-left:3px solid var(--azul)} .tel .c.ok{border-left:3px solid var(--ok)} .tel .c.al{border-left:3px solid var(--warn)} .tel .c.mal{border-left:3px solid var(--bad)} .tel .lb{font-size:.62rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase; color:var(--mut);display:block;margin-bottom:4px} .tel .q{font-size:.9rem;font-weight:500} .tel .qs{font-size:.75rem;color:var(--mut)} .tel .bt{background:var(--azul);color:var(--on-azul);text-align:center;font-size:.87rem; font-weight:500;padding:12px;border-radius:11px;margin-top:auto} .tel .p{font-size:.62rem;font-weight:700;padding:3px 8px;border-radius:99px;white-space:nowrap} .tel .p.ok{background:#E5EFE7;color:#0F7A52} .tel .p.al{background:#EAE0CC;color:#8A5A00} .tel .p.mal{background:#F7E3DF;color:#C0342F} .tel .fila{display:flex;justify-content:space-between;align-items:center;gap:8px} .escena{position:relative;aspect-ratio:280/606} .paso-anim{position:absolute;inset:0;opacity:0; transition:opacity 600ms var(--ease);pointer-events:none} .paso-anim.on{opacity:1} .paso-anim img{width:100%;height:100%;object-fit:cover;display:block} .flota{position:absolute;right:-24px;bottom:60px;background:var(--card); border:1px solid var(--line);border-left:3px solid var(--ok);border-radius:12px; padding:11px 14px;box-shadow:var(--e2);max-width:206px;opacity:0; transform:translateY(10px) scale(.96); transition:opacity 400ms var(--muelle),transform 400ms var(--muelle)} .flota.on{opacity:1;transform:none} .flota b{display:block;font-size:.8rem;font-weight:600} .flota span{font-size:.73rem;color:var(--mut)} @media (max-width:920px){ .flota{right:-6px} } /* ---------- tarjetas ---------- */ .rej{display:grid;grid-template-columns:repeat(auto-fit,minmax(244px,1fr));gap:15px;margin-top:36px} .tarj{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:26px; box-shadow:var(--e1);transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)} .tarj{position:relative;overflow:hidden} .tarj::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0; background:linear-gradient(160deg,color-mix(in srgb,var(--azul) 7%,transparent),transparent 55%); transition:opacity var(--dur) var(--ease);pointer-events:none} .tarj:hover{box-shadow:var(--e3);transform:translateY(-6px)} .tarj:hover::after{opacity:1} .tarj p{font-size:.95rem;color:var(--ink2);line-height:1.52} .tarj.acc{border-left:3px solid var(--azul);background:color-mix(in srgb,var(--azul) 6%,var(--card))} .tarj.mal{border-left:3px solid var(--bad);background:color-mix(in srgb,var(--bad) 6%,var(--card))} .tarj.bien{border-left:3px solid var(--ok);background:color-mix(in srgb,var(--ok) 7%,var(--card))} /* entrada escalonada de las tarjetas dentro de una rejilla */ .rej>.rev:nth-child(2){transition-delay:.08s} .rej>.rev:nth-child(3){transition-delay:.16s} .rej>.rev:nth-child(4){transition-delay:.24s} .rej>.rev:nth-child(5){transition-delay:.32s} .rej>.rev:nth-child(6){transition-delay:.40s} /* distintivo "próximamente" dentro del título de una tarjeta */ .tarj .pronto{display:inline-block;margin-left:8px;font-size:.7rem;font-weight:700; letter-spacing:.04em;text-transform:uppercase;color:var(--warn);background:var(--card2); border:1px solid var(--line);border-radius:99px;padding:2px 9px;vertical-align:middle} .paso{display:flex;gap:14px;align-items:flex-start} .paso .n{flex:none;width:32px;height:32px;border-radius:10px;background:var(--tinte); color:var(--azul);font-weight:700;display:flex;align-items:center;justify-content:center; font-size:.94rem} /* ---------- puertas de la portada ---------- */ .puertas{display:grid;grid-template-columns:1fr;gap:18px;margin-top:38px} @media (min-width:860px){ .puertas{grid-template-columns:1fr 1fr} } .puerta{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:34px; box-shadow:var(--e1);display:flex;flex-direction:column;position:relative;overflow:hidden; transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease), border-color var(--dur)} .puerta::before{content:"";position:absolute;inset:0;opacity:0;pointer-events:none; background:radial-gradient(90% 70% at 50% 0%,color-mix(in srgb,var(--azul) 13%,transparent),transparent 72%); transition:opacity var(--lento) var(--ease)} .puerta:hover{box-shadow:var(--e4);transform:translateY(-7px);border-color:var(--azul)} .puerta:hover::before{opacity:1} .puerta>*{position:relative} .puerta .cinta{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--azul);background:var(--tinte);border-radius:99px;padding:5px 12px; align-self:flex-start;margin-bottom:16px} .puerta h3{font-size:1.7rem;letter-spacing:-.026em;margin-bottom:8px} .puerta .para{font-size:1.02rem;color:var(--ink2);margin-bottom:20px} .puerta ul{list-style:none;margin-bottom:26px} .puerta li{display:flex;gap:10px;align-items:flex-start;margin:10px 0;font-size:.96rem; color:var(--ink2)} .puerta svg.tic{width:16px;height:16px;color:var(--ok);flex:none;margin-top:5px} .puerta .pre{font-size:.9rem;color:var(--mut);margin-bottom:18px} .puerta .pre b{color:var(--ink);font-size:1.05rem;font-weight:600} .puerta .ir{margin-top:auto;display:inline-flex;align-items:center;gap:8px; color:var(--azul);font-weight:600;font-size:1.02rem} .puerta .ir::after{content:"→";transition:transform var(--dur) var(--ease)} .puerta:hover .ir::after{transform:translateX(4px)} /* ---------- precios ---------- */ .planes{display:grid;grid-template-columns:1fr;gap:16px;margin-top:26px} @media (min-width:860px){ .planes{grid-template-columns:1fr 1fr} } .plan{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px; box-shadow:var(--e1);display:flex;flex-direction:column; transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)} .plan:hover{box-shadow:var(--e2);transform:translateY(-3px)} .plan.dest{border:2px solid var(--azul)} .plan .rot{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap} .plan h3{font-size:1.3rem;margin:0} .eti{font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase; padding:4px 9px;border-radius:99px;background:var(--tinte);color:var(--azul)} .plan .desc{font-size:.95rem;color:var(--ink2);margin-bottom:20px} .precio{display:flex;align-items:baseline;gap:8px;margin-bottom:4px} .precio b{font-size:2.9rem;font-weight:700;letter-spacing:-.035em;line-height:1; font-variant-numeric:tabular-nums} .precio span{font-size:.95rem;color:var(--mut)} .precio-nota{font-size:.85rem;color:var(--mut);margin-bottom:20px;min-height:2.4em} .lista{list-style:none;font-size:.95rem;margin-bottom:22px} .lista li{display:flex;gap:10px;align-items:flex-start;margin:9px 0;color:var(--ink2)} .lista svg{width:15px;height:15px;color:var(--ok);flex:none;margin-top:5px} .plan .b1,.plan .b2{margin-top:auto;text-align:center;display:block} .escala{width:100%;margin:6px 0 4px} .escala input{width:100%;accent-color:var(--azul);height:26px;cursor:pointer} .escala .val{display:flex;justify-content:space-between;font-size:.84rem;color:var(--mut); margin-bottom:2px} .escala .val b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums} .periodo{display:inline-flex;gap:4px;background:var(--card2);border:1px solid var(--line); border-radius:10px;padding:3px;margin-top:22px} .periodo button{border:0;background:none;font:inherit;font-size:.86rem;font-weight:500; color:var(--mut);padding:7px 15px;border-radius:8px;cursor:pointer;transition:all var(--dur)} .periodo button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:var(--e1)} .ahorro{font-size:.72rem;color:var(--ok);font-weight:600} /* ---------- chat y comparación ---------- */ .antes{display:grid;grid-template-columns:1fr;gap:18px;margin-top:36px} @media (min-width:820px){ .antes{grid-template-columns:1fr 1fr} } .caja{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px; box-shadow:var(--e1);display:flex;flex-direction:column} .caja .rot2{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--mut);margin-bottom:14px} .caja.malo .rot2{color:var(--bad)} .caja.bueno .rot2{color:var(--ok)} .msg{background:var(--card2);border:1px solid var(--line);border-radius:12px; padding:9px 13px;margin-bottom:8px;font-size:.9rem;max-width:90%; opacity:0;transform:translateY(8px)} .msg.yo{margin-left:auto;background:var(--tinte);border-color:transparent;color:var(--azul)} .msg b{display:block;font-size:.7rem;color:var(--mut);font-weight:700;margin-bottom:2px} .msg.yo b{color:var(--azul);opacity:.75} .ver .msg{animation:sube 380ms var(--ease) forwards} .ver .msg:nth-child(2){animation-delay:120ms} .ver .msg:nth-child(3){animation-delay:260ms} .ver .msg:nth-child(4){animation-delay:420ms} .ver .msg:nth-child(5){animation-delay:600ms} .ver .msg:nth-child(6){animation-delay:820ms} @keyframes sube{to{opacity:1;transform:none}} .mas{text-align:center;font-size:.82rem;color:var(--mut);padding-top:8px;margin-top:auto} /* ---------- historial ---------- */ .hist{background:var(--card);border:1px solid var(--line);border-radius:var(--r); overflow:hidden;margin-top:36px;box-shadow:var(--e1)} .hist .th{display:flex;justify-content:space-between;align-items:center;gap:12px; padding:14px 20px;background:var(--card2);border-bottom:1px solid var(--line); font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)} .linea{display:grid;grid-template-columns:118px 1fr auto;gap:16px;align-items:baseline; padding:15px 20px;border-bottom:1px solid var(--line);opacity:0;transform:translateX(-10px)} .linea:last-child{border-bottom:0} .ver .linea{animation:entrax 420ms var(--ease) forwards} .ver .linea:nth-child(3){animation-delay:110ms} .ver .linea:nth-child(4){animation-delay:220ms} .ver .linea:nth-child(5){animation-delay:330ms} @keyframes entrax{to{opacity:1;transform:none}} .linea .cu{font-size:.83rem;color:var(--mut);font-variant-numeric:tabular-nums} .linea .qu b{font-weight:600} .linea .qu span{display:block;font-size:.85rem;color:var(--mut)} .linea .da{font-size:.83rem;color:var(--ink2);text-align:right;font-variant-numeric:tabular-nums; white-space:nowrap} @media (max-width:640px){ .linea{grid-template-columns:1fr;gap:3px} .linea .da{text-align:left} } /* ---------- tabla ---------- */ .tablaw{overflow-x:auto;margin-top:32px;border-radius:var(--r);border:1px solid var(--line)} table{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--card);min-width:460px} th{text-align:left;background:var(--card2);font-size:.76rem;text-transform:uppercase; letter-spacing:.06em;color:var(--ink2);font-weight:700} th,td{padding:13px 16px;border-bottom:1px solid var(--line)} tr:last-child td{border-bottom:0} td.si{color:var(--ok);font-weight:500;white-space:nowrap} td.no{color:var(--bad);white-space:nowrap} /* ---------- hitos ---------- */ .hitos{margin-top:36px;border-left:2px solid var(--line)} .hito{position:relative;padding:0 0 26px 26px} .hito::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px; border-radius:50%;background:var(--page);border:2px solid var(--line2)} .hito.hecho::before{background:var(--ok);border-color:var(--ok)} .hito.ahora::before{background:var(--azul);border-color:var(--azul);box-shadow:0 0 0 4px var(--tinte)} .hito b{display:block;font-weight:600;font-size:1rem} .hito span{font-size:.92rem;color:var(--ink2)} .hito .cua{font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase; color:var(--mut);display:block;margin-bottom:3px} /* ---------- aviso ---------- */ .aviso{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--bad); border-radius:0 var(--r) var(--r) 0;padding:28px 30px;box-shadow:var(--e1)} .aviso h2{color:var(--bad);font-size:clamp(1.35rem,2.5vw,1.85rem);max-width:26ch;margin-bottom:12px} .aviso.ojo{border-left-color:var(--warn)} .aviso.ojo h2{color:var(--warn)} .aviso p{font-size:1.02rem;color:var(--ink2);max-width:66ch} .aviso p+p{margin-top:12px} /* ---------- preguntas ---------- */ details{background:var(--card);border:1px solid var(--line);border-radius:12px; margin-top:10px;box-shadow:var(--e1);overflow:hidden} details[open]{border-color:var(--line2)} summary{cursor:pointer;font-weight:500;font-size:1.03rem;list-style:none; display:flex;justify-content:space-between;gap:16px;align-items:center;padding:17px 20px} summary::-webkit-details-marker{display:none} summary::after{content:"";flex:none;width:11px;height:11px;border-right:2px solid var(--azul); border-bottom:2px solid var(--azul);transform:rotate(45deg) translate(-2px,-2px); transition:transform var(--dur) var(--ease)} details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)} summary:hover{background:var(--card2)} .resp{padding:0 20px 19px} .resp p{font-size:.97rem;color:var(--ink2);max-width:68ch} .resp p+p{margin-top:10px} /* ---------- cierre ---------- */ .cta{background:var(--azul);color:var(--on-azul);border-radius:22px;padding:60px 44px; text-align:center;box-shadow:var(--e3)} .cta h2{color:var(--on-azul);max-width:24ch;margin:0 auto} .cta p{opacity:.92;font-size:1.06rem;max-width:54ch;margin:16px auto 0} .cta .b1{background:var(--on-azul);color:var(--azul);margin-top:30px; font-size:1.04rem;padding:16px 32px;box-shadow:none} .cta .b1:hover{background:var(--on-azul);opacity:.92} .cta .legal{font-size:.88rem;opacity:.82;margin-top:20px} .cta .legal a{color:var(--on-azul);text-decoration:underline} /* ---------- pie ---------- */ footer{border-top:1px solid var(--line);padding:52px 0 76px;background:var(--card2)} footer .cols{display:flex;gap:44px;flex-wrap:wrap;align-items:flex-start} footer .marca{height:24px;width:auto;color:var(--azul);display:block;margin-bottom:11px} footer .esl{font-size:.93rem;color:var(--ink2);font-weight:500} footer h3{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--mut);margin-bottom:11px} footer ul{list-style:none;font-size:.93rem} footer li{margin:7px 0} footer li a:hover{color:var(--azul)} footer .qr-demo{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;margin-left:auto} footer .qr-demo img{width:104px;height:104px;background:#fff;border-radius:12px;padding:7px; box-shadow:var(--e2);border:1px solid var(--line);display:block} footer .qr-demo span{font-size:.8rem;font-weight:600;color:var(--ink2)} @media (max-width:760px){ footer .qr-demo{margin:6px 0 0;align-items:flex-start} } footer .legalf{margin-top:38px;padding-top:22px;border-top:1px solid var(--line); font-size:.82rem;color:var(--mut);display:flex;gap:10px 26px;flex-wrap:wrap} .volver{position:fixed;left:14px;bottom:14px;z-index:50;background:var(--card); border:1px solid var(--line);border-radius:99px;padding:7px 13px;font-size:.76rem; font-weight:500;color:var(--mut);box-shadow:var(--e1);opacity:.42; transition:opacity var(--dur),color var(--dur),border-color var(--dur)} .volver:hover,.volver:focus-visible{opacity:1;color:var(--azul);border-color:var(--azul)} /* ---------- apariciones ---------- */ .rev{opacity:0;transform:translateY(28px) scale(.985);filter:blur(6px); transition:opacity var(--lento) var(--suave),transform var(--lento) var(--suave), filter var(--lento) var(--suave)} .rev.ver{opacity:1;transform:none;filter:none} @media (prefers-reduced-motion:reduce){ .rev{opacity:1;transform:none} .msg,.linea{opacity:1;transform:none} } @media (max-width:640px){ .env{padding:0 18px} header .env{padding:13px 18px} .cta{padding:40px 24px;border-radius:16px} .marco{width:100%;max-width:290px} .plan,.puerta{padding:22px} } @media print{ header,.volver,.cta{display:none} body{background:#fff;color:#000} } /* ================= mosaico de pantallas ================= */ .mosaico{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:20px; margin-top:42px} .pieza-p{display:flex;flex-direction:column;align-items:center; opacity:0;transform:translateY(24px) scale(.97)} .ver .pieza-p{animation:sube-p 620ms var(--muelle) forwards} .ver .pieza-p:nth-child(2){animation-delay:110ms} .ver .pieza-p:nth-child(3){animation-delay:220ms} .ver .pieza-p:nth-child(4){animation-delay:330ms} .ver .pieza-p:nth-child(5){animation-delay:440ms} @keyframes sube-p{to{opacity:1;transform:none}} .pieza-p .marco{width:100%;max-width:212px;transition:transform var(--dur) var(--ease)} .pieza-p:hover .marco{transform:translateY(-6px)} .pieza-p .tel .pant{min-height:376px;padding:13px 11px 11px;gap:7px} .pieza-p .tel{border-radius:24px;padding:7px} .pieza-p .tel .pant{border-radius:18px} .pieza-p .tel .c{padding:10px;border-radius:10px} .pieza-p .tel .q{font-size:.83rem} .pieza-p .tel .qs{font-size:.7rem} .pieza-p .tel .cab b{font-size:.97rem} .pieza-p .tel .bt{font-size:.8rem;padding:10px} .pieza-p .rotulo{margin-top:14px;text-align:center;max-width:212px} .pieza-p .rotulo b{display:block;font-size:.95rem;font-weight:600} .pieza-p .rotulo span{font-size:.85rem;color:var(--mut);line-height:1.45} @media (prefers-reduced-motion:reduce){ .pieza-p{opacity:1;transform:none} } /* ================= cifras que suben ================= */ .metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0; margin-top:38px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .metrica{padding:22px 24px 22px 0} .metrica+.metrica{padding-left:24px;border-left:1px solid var(--line)} .metrica b{display:block;font-size:2.1rem;line-height:1;font-weight:700;color:var(--azul); letter-spacing:-.03em;font-variant-numeric:tabular-nums} .metrica span{display:block;margin-top:8px;font-size:.88rem;color:var(--ink2);line-height:1.4} @media (max-width:640px){ .metrica{flex-basis:50%;padding:16px 14px 16px 0} .metrica:nth-child(3){border-left:0;padding-left:0} } /* ================= barra de ocupación ================= */ .ocupa{margin-top:34px;background:var(--card);border:1px solid var(--line); border-radius:var(--r);padding:24px 26px;box-shadow:var(--e1)} .ocupa h3{margin-bottom:16px} .dia{display:grid;grid-template-columns:74px 1fr;gap:14px;align-items:center;margin:11px 0} .dia span{font-size:.85rem;color:var(--mut)} .riel{height:12px;background:var(--card2);border:1px solid var(--line);border-radius:99px; overflow:hidden;display:flex} .riel i{display:block;height:100%;width:0;transition:width 900ms var(--ease)} .ver .riel i{width:var(--w)} .riel i.a{background:var(--azul)} .riel i.b{background:var(--warn);opacity:.75} .riel i.c{background:var(--ok);opacity:.65} .leyenda{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:.83rem;color:var(--mut)} .leyenda em{font-style:normal;display:inline-flex;align-items:center;gap:7px} .leyenda em::before{content:"";width:11px;height:11px;border-radius:3px;background:var(--c)} @media (prefers-reduced-motion:reduce){ .riel i{width:var(--w)!important;transition:none} } /* ================= redes en el pie ================= */ .redes{display:flex;gap:9px;margin-top:16px;flex-wrap:wrap} .redes a{width:38px;height:38px;border-radius:10px;border:1px solid var(--line); background:var(--card);display:flex;align-items:center;justify-content:center; color:var(--ink2);transition:border-color var(--dur),color var(--dur),transform var(--dur)} .redes a:hover{border-color:var(--azul);color:var(--azul);transform:translateY(-2px)} .redes svg{width:18px;height:18px} /* ================= capturas reales de la app ================= */ .pieza-p .captura{width:100%;height:auto;max-width:212px;display:block;border:1px solid var(--line2); border-radius:22px;background:var(--page); filter:drop-shadow(0 22px 44px rgba(26,23,18,.16)); transition:transform var(--dur) var(--ease)} .pieza-p:hover .captura{transform:translateY(-6px)} @media (prefers-color-scheme:dark){ .pieza-p .captura{filter:drop-shadow(0 22px 44px rgba(0,0,0,.6));border-color:var(--line)} } .mosaico.web{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:26px 26px} .mosaico.web .pieza-p .captura{max-width:100%;border-radius:12px} .mosaico.web .pieza-p .rotulo{max-width:none;text-align:left} @media (prefers-reduced-motion:reduce){ .pieza-p .captura{transition:none} } /* ================= selector de idioma ================= */ .idi{display:flex;gap:2px;align-items:center} .idi a{font-size:.76rem;font-weight:600;padding:5px 7px;border-radius:7px;color:var(--mut); text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center} .idi a:hover{color:var(--ink);background:var(--card)} .idi a[aria-current="page"]{background:var(--card);color:var(--ink); border:1px solid var(--line);padding:4px 6px} header .idi{margin-left:4px;padding-left:8px;border-left:1px solid var(--line)} @media (max-width:1120px){ header .idi{border-left:0;padding-left:0;margin:4px 0 0} /* objetivo táctil cómodo para el conmutador de idioma en móvil */ .idi a{min-height:44px;padding:8px 12px} .idi a[aria-current="page"]{padding:7px 11px} } footer .idi{margin-top:12px;flex-wrap:wrap} /* ═══════════════════════════════════════════════════════════════════════ REDISEÑO · lo que le faltaba: un momento oscuro, un carrusel de verdad, badges con la forma de las tiendas y movimiento con intención. ═══════════════════════════════════════════════════════════════════════ */ /* ---------- franja oscura a sangre ---------- Redefine los tokens dentro de sí misma, así los componentes que ya existen (tarjetas, historial, avisos) se adaptan solos. */ .franja-osc{ --page:#141210; --card:#1E1B16; --card2:#242017; --line:#332E25; --line2:#453F33; --ink:#F7F2E8; --ink2:#CDC4B4; --mut:#9E9483; --azul:#7DA5FF; --azul-h:#9CBBFF; --on-azul:#12100D; --tinte:#1D2941; --ok:#5CD5A0; --bad:#FF8B7F; --warn:#EDB44E; --e1:0 1px 2px rgba(0,0,0,.5); --e2:0 2px 6px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.5); --e3:0 6px 12px rgba(0,0,0,.45), 0 28px 70px rgba(0,0,0,.6); --e4:0 10px 20px rgba(0,0,0,.5), 0 44px 100px rgba(0,0,0,.7); background:var(--page);color:var(--ink);border:0;position:relative;overflow:hidden} @media (prefers-color-scheme:dark){ .franja-osc{--page:#0C0B09;--card:#17150F} } .franja-osc::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(70% 60% at 18% 0%,rgba(125,165,255,.16),transparent 62%), radial-gradient(55% 50% at 88% 100%,rgba(125,165,255,.09),transparent 65%)} .franja-osc>*{position:relative} .franja-osc .et{color:var(--azul)} .franja-osc .et::before{background:var(--azul)} .franja-osc .b2{background:transparent;border-color:var(--line2);color:var(--ink)} .franja-osc .b2:hover{border-color:var(--azul);color:var(--azul)} /* ---------- carrusel de capturas ---------- */ .carrusel{position:relative;margin-top:64px} /* el degradado del borde dice que la fila sigue */ .carrusel::after{content:"";position:absolute;top:0;right:-2px;bottom:52px;width:80px; pointer-events:none;opacity:0;transition:opacity var(--dur) var(--ease); background:linear-gradient(90deg,transparent,var(--page) 82%)} .carrusel.hay-mas::after{opacity:1} .franja-b .carrusel::after{background:linear-gradient(90deg,transparent,var(--card2) 82%)} .pista{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth;padding:10px 2px 26px; scrollbar-width:none;-ms-overflow-style:none;cursor:grab} .pista::-webkit-scrollbar{display:none} .pista.arrastrando{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none} .pista:focus-visible{outline:2px solid var(--azul);outline-offset:6px;border-radius:var(--r2)} .diapo{scroll-snap-align:start;flex:0 0 auto;width:min(74vw,340px); transition:transform var(--lento) var(--suave),opacity var(--lento) var(--suave)} .diapo img{width:100%;height:auto;display:block;border-radius:22px; border:1px solid var(--line2);background:var(--page);box-shadow:var(--e3); transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease); -webkit-user-drag:none;user-select:none} .diapo:hover img{box-shadow:var(--e4);transform:translateY(-5px)} .diapo figcaption{margin-top:16px;text-align:center} .diapo figcaption b{display:block;font-size:.97rem;font-weight:600;letter-spacing:-.01em} .diapo figcaption span{display:block;font-size:.87rem;color:var(--mut);line-height:1.45; margin-top:3px} .carrusel.ancho .diapo{width:min(76vw,620px)} .carrusel.ancho .diapo img{border-radius:12px} .carrusel.ancho .diapo figcaption{text-align:left} .flechas{position:absolute;top:-60px;right:0;display:flex;gap:8px;z-index:2} .flecha{width:44px;height:44px;border-radius:50%;border:1px solid var(--line2); background:var(--card);color:var(--ink);cursor:pointer;display:grid;place-items:center; box-shadow:var(--e1);transition:background var(--dur),border-color var(--dur), transform var(--dur) var(--ease),opacity var(--dur)} .flecha:hover:not(:disabled){border-color:var(--azul);color:var(--azul);transform:scale(1.06)} .flecha:active:not(:disabled){transform:scale(.94)} .flecha:disabled{opacity:.32;cursor:default} .flecha svg{width:19px;height:19px} /* si no desborda, no hay nada que arrastrar: fuera controles y fuera penumbra */ .carrusel.completo .flechas,.carrusel.completo .puntos,.carrusel.completo .pista-pista{display:none} .carrusel.completo .pista{cursor:default;justify-content:center} .puntos{display:flex;gap:7px;justify-content:center;margin-top:4px} .puntos button{width:7px;height:7px;border-radius:99px;border:0;padding:0;cursor:pointer; background:var(--line2);transition:width var(--dur) var(--muelle),background var(--dur)} .puntos button[aria-selected="true"]{width:26px;background:var(--azul)} .pista-pista{height:3px;width:132px;margin:14px auto 0;background:var(--line); border-radius:99px;overflow:hidden} .pista-pista i{display:block;height:100%;background:var(--azul);border-radius:99px; transition:transform 90ms linear;transform-origin:left} @media (max-width:720px){ .flechas{display:none} } @media (prefers-reduced-motion:reduce){ .pista{scroll-behavior:auto} } /* ---------- badges de tienda ---------- */ .tiendas{gap:12px;margin-top:24px} .badge{display:inline-flex;align-items:center;gap:11px;border-radius:12px;padding:9px 16px 9px 14px; background:var(--ink);color:var(--page);border:1px solid var(--ink);position:relative; text-decoration:none; transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)} .badge:hover{transform:translateY(-2px);box-shadow:var(--e2)} .badge svg{width:23px;height:23px;flex:none} .badge span{display:block;line-height:1.12} .badge i{font-style:normal;display:block;font-size:.62rem;letter-spacing:.05em; text-transform:uppercase;opacity:.72} .badge b{display:block;font-size:1.02rem;font-weight:600;letter-spacing:-.01em} .badge.pronto{opacity:.9} .tiendas{align-items:flex-start} .tiendas-pie{flex-basis:100%;font-size:.8rem;color:var(--mut);margin-top:2px; display:flex;align-items:center;gap:7px} .tiendas-pie::before{content:"";width:7px;height:7px;border-radius:99px;background:var(--azul); flex:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--azul) 18%,transparent)} @media (prefers-color-scheme:dark){ .badge{background:#F4EFE6;color:#141210;border-color:#F4EFE6} } /* ---------- cifras que cuentan ---------- */ .cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px; margin-top:40px} .cifra b{display:block;font-size:clamp(2.2rem,5vw,3.4rem);font-weight:700;letter-spacing:-.045em; line-height:1;font-variant-numeric:tabular-nums;color:var(--azul)} .cifra span{display:block;font-size:.92rem;color:var(--mut);margin-top:8px;max-width:22ch} /* «desde», encima de la cifra. Va pequeño y en gris: la cifra sigue siendo lo que se lee de lejos, y la palabra evita que se lea como el precio de todo el mundo. */ .cifra .desde{display:block;font-style:normal;font-size:.8rem;font-weight:600; letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-bottom:2px} /* ---------- pasos unidos por una línea que se llena ---------- */ .rej.hilo{position:relative} @media (min-width:900px){ .rej.hilo::before{content:"";position:absolute;top:38px;left:12%;right:12%;height:2px; background:var(--line);z-index:0} .rej.hilo::after{content:"";position:absolute;top:38px;left:12%;height:2px;background:var(--azul); width:0;z-index:0;transition:width 1100ms var(--suave) 180ms} .rej.hilo.ver::after{width:76%} .rej.hilo>*{position:relative;z-index:1} } .paso .n{transition:transform var(--lento) var(--muelle),background var(--dur)} .tarj:hover .paso .n{transform:scale(1.12) rotate(-4deg);background:var(--azul);color:var(--on-azul)} /* ---------- el teléfono flota y sigue al scroll ---------- */ .marco{will-change:transform} @media (prefers-reduced-motion:no-preference){ .hero .marco{animation:flota 7s ease-in-out infinite} } @keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} /* ---------- las dos puertas de la portada ---------- Es el elemento que decide la visita, así que pesa más que una tarjeta. */ .puertas{gap:22px;margin-top:44px} .puerta{border-radius:26px;padding:0;overflow:hidden} .puerta .tapa{padding:26px 30px 0;position:relative} .puerta .cuerpo{padding:22px 30px 30px;display:flex;flex-direction:column;flex:1} .puerta h3{font-size:1.95rem;letter-spacing:-.032em} .puerta .ir{margin-top:auto;background:var(--tinte);color:var(--azul);border-radius:12px; padding:13px 20px;justify-content:space-between;font-size:.98rem; transition:background var(--dur) var(--ease),color var(--dur)} .puerta:hover .ir{background:var(--azul);color:var(--on-azul)} /* dibujo de turnos: la marca posee la imagen del turno, no la del mapa */ .turnos{display:flex;flex-direction:column;gap:7px;padding:18px;border-radius:16px; background:var(--card2);border:1px solid var(--line)} .turnos .t{display:flex;align-items:center;gap:9px;font-size:.72rem;color:var(--mut)} .turnos .t b{font-weight:600;color:var(--ink);width:46px;flex:none;font-size:.74rem} .turnos .t i{font-style:normal;height:11px;border-radius:99px;display:block; background:var(--line2);transform-origin:left;transform:scaleX(0); transition:transform 760ms var(--suave)} .ver .turnos .t i,.puerta.ver .turnos .t i{transform:scaleX(1)} .turnos .t.a i{background:var(--azul)} .turnos .t.b i{background:color-mix(in srgb,var(--azul) 45%,var(--line2))} /* el ámbar significa "aviso" en el producto; aquí solo es decoración, así que se queda dentro de la escala del azul y no confunde */ .turnos .t.c i{background:color-mix(in srgb,var(--azul) 22%,var(--line2))} .turnos .t:nth-child(2) i{transition-delay:110ms} .turnos .t:nth-child(3) i{transition-delay:220ms} .turnos .t:nth-child(4) i{transition-delay:330ms} /* dibujo de flota: una rejilla de días */ .rejilla-mini{display:grid;grid-template-columns:44px repeat(7,1fr);gap:5px;padding:18px; border-radius:16px;background:var(--card2);border:1px solid var(--line)} .rejilla-mini b{font-size:.66rem;font-weight:600;color:var(--mut);display:flex; align-items:center} .rejilla-mini i{height:13px;border-radius:4px;background:var(--line);display:block; opacity:0;transform:scale(.6);transition:opacity 420ms var(--suave),transform 420ms var(--muelle)} .ver .rejilla-mini i,.puerta.ver .rejilla-mini i{opacity:1;transform:none} .rejilla-mini i.on{background:var(--azul)} .rejilla-mini i.med{background:color-mix(in srgb,var(--azul) 40%,var(--line))} .rejilla-mini i:nth-child(7n+2){transition-delay:40ms} .rejilla-mini i:nth-child(7n+4){transition-delay:90ms} .rejilla-mini i:nth-child(7n+6){transition-delay:140ms} @media (prefers-reduced-motion:reduce){ .turnos .t i{transform:none} .rejilla-mini i{opacity:1;transform:none} } /* ═══════════════════ segunda pasada de acabado ═══════════════════ */ /* El enlace al índice es interno; en el móvil estorba encima del contenido. */ @media (max-width:900px){ .volver{display:none} } /* El teléfono muestra una captura real a sangre; el alto lo fija aspect-ratio. */ /* Las bandas se distinguen: la franja-b lleva un tinte azul suave que da ritmo de color (antes eran dos beige casi iguales). */ .franja-b{background:linear-gradient(180deg, color-mix(in srgb,var(--tinte) 44%,var(--card2)), color-mix(in srgb,var(--tinte) 32%,var(--page)))} .franja-a+.franja-b,.franja-b+.franja-a{position:relative} /* Los botones eran planos. Un punto de luz arriba y una sombra de color. */ .b1{background:linear-gradient(180deg, color-mix(in srgb,var(--azul) 88%,#fff),var(--azul)); box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 6px 16px color-mix(in srgb,var(--azul) 34%,transparent)} .b1:hover{background:linear-gradient(180deg, color-mix(in srgb,var(--azul-h) 88%,#fff),var(--azul-h)); box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 12px 26px color-mix(in srgb,var(--azul) 42%,transparent)} .bcta{box-shadow:0 1px 0 rgba(255,255,255,.24) inset, 0 4px 12px color-mix(in srgb,var(--azul) 30%,transparent)} /* Las preguntas: el signo gira y la fila se abre con calma. */ details{border-radius:var(--r);margin-top:12px; transition:box-shadow var(--dur) var(--ease),border-color var(--dur)} details:hover{box-shadow:var(--e2)} details[open]{box-shadow:var(--e2);border-color:color-mix(in srgb,var(--azul) 40%,var(--line))} summary{padding:19px 22px} summary::after{width:24px;height:24px;border:0;transform:none;border-radius:8px; background:var(--tinte);color:var(--azul);position:relative; transition:background var(--dur),transform var(--dur) var(--muelle)} summary::before{content:"";position:absolute;right:31px;width:11px;height:2px;border-radius:2px; background:var(--azul);z-index:1} summary{position:relative} details[open] summary::after{background:var(--azul);transform:rotate(180deg)} details[open] summary::before{background:var(--on-azul)} .mas-v{position:absolute;right:36px;width:2px;height:11px;border-radius:2px;background:var(--azul); z-index:1;transition:transform var(--dur) var(--muelle),background var(--dur),opacity var(--dur)} details[open] .mas-v{transform:scaleY(0);opacity:0} .resp{padding:0 22px 21px} .resp p{animation:abre 380ms var(--suave)} @keyframes abre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} /* El plan destacado tiene que ganar de lejos. */ .plan{border-radius:var(--r2);padding:32px} .plan.dest{box-shadow:var(--e3),0 0 0 1px color-mix(in srgb,var(--azul) 26%,transparent); position:relative;overflow:hidden} .plan.dest::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(80% 60% at 50% 0%,color-mix(in srgb,var(--azul) 10%,transparent),transparent 70%)} .plan.dest>*{position:relative} .plan:hover{box-shadow:var(--e3);transform:translateY(-5px)} .plan.dest:hover{box-shadow:var(--e4),0 0 0 1px color-mix(in srgb,var(--azul) 30%,transparent)} .precio b{font-size:clamp(2.9rem,5vw,3.6rem)} /* El cierre azul tenía poca gracia. */ .cta{position:relative;overflow:hidden; background:linear-gradient(145deg,color-mix(in srgb,var(--azul) 92%,#000),var(--azul) 55%, color-mix(in srgb,var(--azul) 78%,#7DA5FF))} .cta::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(60% 90% at 88% 10%,rgba(255,255,255,.16),transparent 62%)} .cta>*{position:relative} /* Las cifras necesitaban separarse de la letra pequeña que llevan encima. */ .cifras{margin-top:52px;padding-top:38px;border-top:1px solid var(--line)} /* La definición del pie: para quien llega de un buscador o de un asistente. */ .quees{border-top:1px solid var(--line);margin-top:34px;padding-top:26px;max-width:74ch} .quees h2{font-size:.73rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--mut);max-width:none;margin-bottom:10px;line-height:1.4} .quees p{font-size:.92rem;color:var(--ink2);line-height:1.6} /* ================= formulario de captación (lead magnet) ================= */ /* El encabezado y el formulario comparten una columna centrada y quedan alineados. */ #guia .et,#guia h2,#guia .sub{text-align:center;max-width:640px;margin-left:auto;margin-right:auto} .lead-form{max-width:520px;margin:26px auto 0;display:flex;flex-direction:column;gap:16px; text-align:left;background:var(--card);border:1px solid var(--line);border-radius:16px; padding:24px;box-shadow:var(--e1)} /* todas las etiquetas en columna; las de tipo y consentimiento se pasan a fila más abajo */ .lead-form label{display:flex;flex-direction:column;gap:6px;font-size:.9rem;font-weight:600;color:var(--ink2)} .lead-form input[type=text],.lead-form input[type=email]{width:100%;box-sizing:border-box; font:inherit;padding:12px 14px;border-radius:10px;border:1px solid var(--line2); background:var(--page);color:var(--ink);min-height:46px; box-shadow:inset 0 1px 2px color-mix(in srgb,var(--ink) 8%,transparent)} /* en oscuro el campo se distingue del card con un fondo un punto más oscuro y borde cálido */ :root[data-theme="dark"] .lead-form input[type=text], :root[data-theme="dark"] .lead-form input[type=email]{background:#12100C;border-color:#5A5344} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lead-form input[type=text], :root:not([data-theme="light"]) .lead-form input[type=email]{background:#12100C;border-color:#5A5344}} .lead-form input[type=text]:focus-visible,.lead-form input[type=email]:focus-visible{ outline:2px solid var(--azul);outline-offset:2px;border-color:var(--azul)} .lead-fila{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media (max-width:520px){ .lead-fila{grid-template-columns:1fr} } /* selector de tipo (casa/empresa): radio en línea con su texto */ .lead-tipo{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:10px} .lead-tipo legend{font-size:.9rem;font-weight:600;color:var(--ink2);padding:0;margin-bottom:4px} .lead-form .lead-tipo label{flex-direction:row;align-items:center;gap:10px;font-weight:400; font-size:.95rem;color:var(--ink);cursor:pointer} .lead-tipo input{width:20px;height:20px;flex:0 0 auto;margin:0} /* consentimiento: la casilla alineada con la primera línea del texto */ .lead-form .lead-consent{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400; font-size:.85rem;color:var(--mut);line-height:1.5} .lead-consent input{width:18px;height:18px;flex:0 0 auto;margin:2px 0 0} .lead-consent a{color:var(--azul)} .lead-form button.b1{border:0;cursor:pointer;font-family:inherit;width:100%;text-align:center; min-height:50px;margin-top:4px} .lead-nota{font-size:.82rem;color:var(--mut);text-align:center;margin:0} /* trampa antispam: fuera de pantalla, no display:none (algún bot lo detecta) */ .oculto{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* página de gracias (destino del formulario) */ .gracias{min-height:68vh;display:flex;align-items:center;text-align:center;padding:56px 0} .gracias .env{max-width:560px;margin:0 auto} .gracias-logo{display:inline-block;margin-bottom:22px} .gracias h1{margin:0 0 12px} .gracias .sub{margin:0 auto;max-width:46ch} .gracias-nota{font-size:.85rem;color:var(--mut);margin-top:18px} .gracias-volver{color:var(--azul);font-size:.9rem} /* descargas de la página de gracias (una por informe) */ .gracias-descargas{display:flex;flex-direction:column;gap:12px;align-items:center;margin-top:22px} .gracias-descargas .b1{margin-top:0} /* ============ vídeo de lanzamiento en el hero (vertical 9:16) ============ */ .hero-video{width:300px;margin:0 auto} .hero-video video{width:100%;aspect-ratio:9/16;border-radius:30px;display:block; background:#0b0a08;box-shadow:0 12px 22px rgba(0,0,0,.14),0 40px 74px rgba(0,0,0,.22)} @media (max-width:920px){ .hero-video{width:min(300px,82%)} }