/* ========================================================= Survivo Coaching — hoja de estilos ========================================================= */ [hidden] { display: none !important; } :root{ --cyan:#57DFE6; --cyan-2:#2CC5D6; --mint:#A9F5B0; --mint-2:#7EE6A0; --bg:#070C12; --bg-2:#0A1119; --surf:#0E1720; --surf-2:#121D28; --linea:rgba(140,190,205,.16); --linea-2:rgba(140,190,205,.28); --txt:#E9F4F7; --txt-2:#9DB2BE; --txt-3:#6E8593; --radio:18px; --radio-lg:26px; --sombra:0 24px 60px -24px rgba(0,0,0,.75); --max:1180px; --cab:74px; --f-tit:'Sora', system-ui, sans-serif; --f-txt:'Inter', system-ui, -apple-system, sans-serif; } *,*::before,*::after{ box-sizing:border-box; } /* El recorte horizontal vive SOLO acá: al estar en el elemento raíz se propaga al viewport y el position:sticky del resumen sigue funcionando. Si también se pone en , body deja de propagar, se vuelve contenedor de scroll y el sticky se rompe. hidden primero como respaldo para Safari < 16. */ html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--cab) + 16px); -webkit-text-size-adjust:100%; overflow-x:hidden; overflow-x:clip; } body{ margin:0; background:var(--bg); color:var(--txt); font-family:var(--f-txt); font-size:16.5px; line-height:1.65; -webkit-font-smoothing:antialiased; } img,svg{ max-width:100%; } h1,h2,h3,h4{ font-family:var(--f-tit); line-height:1.14; letter-spacing:-.02em; margin:0 0 .5em; font-weight:700; } h1{ font-size:clamp(2.35rem,5.4vw,4.05rem); font-weight:800; letter-spacing:-.035em; } h2{ font-size:clamp(1.85rem,3.6vw,2.85rem); } h3{ font-size:1.2rem; } p{ margin:0 0 1em; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; } ::selection{ background:var(--cyan); color:#04252a; } .wrap{ width:min(100% - 2.6rem, var(--max)); margin-inline:auto; } .wrap-angosto{ width:min(100% - 2.6rem, 860px); } /* ---------- Barra de progreso ---------- */ .progreso{ position:fixed; inset:0 0 auto 0; height:3px; z-index:120; pointer-events:none; } .progreso span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--cyan),var(--mint)); box-shadow:0 0 14px rgba(87,223,230,.7); transition:width .12s linear; } /* ---------- Botones ---------- */ .btn{ --brillo:rgba(255,255,255,.22); display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:.92rem 1.5rem; border-radius:999px; border:1px solid transparent; font-weight:600; font-size:.97rem; letter-spacing:.01em; cursor:pointer; position:relative; overflow:hidden; white-space:nowrap; transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s, background .25s, border-color .25s, color .25s; } .btn::after{ content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(120deg,transparent 25%,var(--brillo) 45%,transparent 65%); transform:translateX(-120%); transition:transform .75s ease; } .btn:hover::after{ transform:translateX(120%); } .btn:active{ transform:translateY(1px) scale(.99); } .btn-primario{ background:linear-gradient(115deg,var(--cyan),var(--mint)); color:#05242a; font-weight:700; box-shadow:0 12px 34px -14px rgba(87,223,230,.85), inset 0 0 0 1px rgba(255,255,255,.25); } .btn-primario:hover{ transform:translateY(-2px); box-shadow:0 20px 44px -14px rgba(87,223,230,.95); } .btn-fantasma{ background:rgba(255,255,255,.03); border-color:var(--linea-2); color:var(--txt); } .btn-fantasma:hover{ border-color:var(--cyan); color:var(--cyan); transform:translateY(-2px); } .btn-sm{ padding:.66rem 1.1rem; font-size:.9rem; } .btn-lg{ padding:1.05rem 2rem; font-size:1.05rem; } .btn-mini{ padding:.45rem .8rem; font-size:.8rem; border-radius:999px; background:rgba(87,223,230,.1); border:1px solid rgba(87,223,230,.28); color:var(--cyan); } .btn-mini:hover{ background:rgba(87,223,230,.2); } .btn-mini.hecho{ background:rgba(169,245,176,.16); border-color:rgba(169,245,176,.5); color:var(--mint); } .btn-wsp{ background:#25D366; color:#04240f; font-weight:700; box-shadow:0 14px 34px -14px rgba(37,211,102,.9); } .btn-wsp:hover{ transform:translateY(-2px); } .ico-wsp{ width:21px; height:21px; fill:#fff; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); } .circ{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.04); border:1px solid var(--linea-2); color:var(--txt); font-size:1.3rem; line-height:1; cursor:pointer; transition:.22s; } .circ:hover{ border-color:var(--cyan); color:var(--cyan); background:rgba(87,223,230,.08); } /* ---------- Cabecera ---------- */ .cabecera{ position:fixed; top:0; left:0; right:0; z-index:100; height:var(--cab); display:flex; align-items:center; background:rgba(7,12,18,0); border-bottom:1px solid transparent; transition:background .3s, border-color .3s, height .3s, box-shadow .3s; } .cabecera.pegada{ background:#080E15; /* opaco a propósito: backdrop-filter tartamudea en Windows */ border-bottom-color:var(--linea); height:66px; box-shadow:0 10px 30px -20px #000; } .cabecera-in{ display:flex; align-items:center; gap:1.4rem; } .marca{ display:flex; align-items:center; gap:.6rem; margin-right:auto; } .marca-logo{ width:44px; height:44px; flex:none; filter:drop-shadow(0 4px 14px rgba(87,223,230,.35)); } .marca-logo path,.marca-logo circle{ transition:transform .5s cubic-bezier(.2,.8,.3,1); transform-origin:center; } .marca:hover .marca-logo{ animation:pulso 1.4s ease; } @keyframes pulso{ 30%{ transform:rotate(-6deg) scale(1.06); } 70%{ transform:rotate(3deg) scale(1.02); } } .marca-txt{ display:flex; flex-direction:column; line-height:1.05; font-family:var(--f-tit); } .marca-txt b{ font-size:1.06rem; font-weight:700; letter-spacing:-.02em; } .marca-txt i{ font-style:normal; font-size:.66rem; letter-spacing:.34em; text-transform:uppercase; color:var(--cyan); } .nav{ display:flex; gap:.35rem; } .nav a{ position:relative; padding:.5rem .8rem; border-radius:999px; font-size:.93rem; font-weight:500; color:var(--txt-2); transition:color .22s, background .22s; } .nav a:hover{ color:var(--txt); background:rgba(255,255,255,.05); } .nav a.activo{ color:var(--cyan); } .nav a.activo::after{ content:''; position:absolute; left:50%; bottom:2px; width:16px; height:2px; margin-left:-8px; border-radius:2px; background:linear-gradient(90deg,var(--cyan),var(--mint)); } .cabecera-cta{ display:flex; align-items:center; gap:.7rem; } .nav-cta{ display:none; } .hamburguesa{ display:none; width:42px; height:42px; border-radius:12px; cursor:pointer; background:rgba(255,255,255,.04); border:1px solid var(--linea-2); flex-direction:column; align-items:center; justify-content:center; gap:4px; } .hamburguesa span{ width:17px; height:2px; background:var(--txt); border-radius:2px; transition:.28s; } .hamburguesa.abierto span:nth-child(1){ transform:translateY(6px) rotate(45deg); } .hamburguesa.abierto span:nth-child(2){ opacity:0; } .hamburguesa.abierto span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); } /* ---------- Hero ---------- */ .hero{ position:relative; padding:calc(var(--cab) + 4.6rem) 0 0; overflow:hidden; isolation:isolate; } .hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:-3; opacity:.55; } .rejilla{ position:absolute; inset:0; z-index:-4; background-image:linear-gradient(var(--linea) 1px,transparent 1px),linear-gradient(90deg,var(--linea) 1px,transparent 1px); background-size:58px 58px; mask-image:radial-gradient(ellipse 78% 62% at 50% 22%,#000 20%,transparent 75%); -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 22%,#000 20%,transparent 75%); opacity:.5; } .orbe{ position:absolute; border-radius:50%; filter:blur(80px); z-index:-5; opacity:.4; } .orbe-1{ width:520px; height:520px; top:-140px; left:-120px; background:radial-gradient(circle,#0f8b9c,transparent 68%); animation:flota1 17s ease-in-out infinite; } .orbe-2{ width:600px; height:600px; top:60px; right:-190px; background:radial-gradient(circle,#2c8a63,transparent 68%); animation:flota2 21s ease-in-out infinite; } @keyframes flota1{ 50%{ transform:translate(90px,60px) scale(1.12); } } @keyframes flota2{ 50%{ transform:translate(-80px,90px) scale(1.08); } } .hero-in{ display:grid; grid-template-columns:1.08fr .92fr; gap:3rem; align-items:center; padding-bottom:4.5rem; } .eyebrow{ display:inline-flex; align-items:center; gap:.55rem; margin:0 0 1.15rem; padding:.4rem .95rem .4rem .6rem; border-radius:999px; background:rgba(87,223,230,.07); border:1px solid rgba(87,223,230,.24); font-size:.79rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--cyan); } .punto{ width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 0 rgba(169,245,176,.6); animation:latir 2.4s infinite; } @keyframes latir{ 70%{ box-shadow:0 0 0 9px rgba(169,245,176,0); } 100%{ box-shadow:0 0 0 0 rgba(169,245,176,0); } } .grad{ background:linear-gradient(100deg,var(--cyan),var(--mint) 55%,var(--cyan)); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:corre 7s linear infinite; } @keyframes corre{ to{ background-position:220% 0; } } .hero-sub{ font-size:1.1rem; color:var(--txt-2); max-width:56ch; margin-bottom:1.9rem; } .hero-btns{ display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:2.1rem; } .hero-chips{ display:flex; flex-wrap:wrap; gap:1.3rem; list-style:none; padding:0; margin:0; } .hero-chips li{ display:flex; align-items:center; gap:.5rem; font-size:.9rem; color:var(--txt-2); } .ico{ width:17px; height:17px; fill:none; stroke:var(--mint); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; flex:none; } /* arte del hero */ .hero-art{ position:relative; aspect-ratio:1/1; display:grid; place-items:center; will-change:transform; } .marca-grande{ width:56%; filter:drop-shadow(0 24px 60px rgba(87,223,230,.35)); animation:levita 8s ease-in-out infinite; } @keyframes levita{ 50%{ transform:translateY(-16px); } } .anillo{ position:absolute; border-radius:50%; border:1px solid var(--linea-2); inset:0; margin:auto; } .a1{ width:60%; height:60%; border-style:dashed; animation:gira 34s linear infinite; } .a2{ width:80%; height:80%; border-color:rgba(87,223,230,.2); animation:gira 52s linear infinite reverse; } .a3{ width:98%; height:98%; border-color:rgba(169,245,176,.12); animation:gira 78s linear infinite; } @keyframes gira{ to{ transform:rotate(360deg); } } .tarjeta-flota{ position:absolute; z-index:2; display:flex; align-items:center; gap:.7rem; padding:.7rem .95rem; border-radius:16px; background:rgba(14,23,32,.92); border:1px solid var(--linea-2); box-shadow:var(--sombra); } .tarjeta-flota b{ display:block; font-family:var(--f-tit); font-size:1.05rem; } .tarjeta-flota small{ display:block; font-size:.72rem; color:var(--txt-3); } .tf-ico{ display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:linear-gradient(140deg,rgba(87,223,230,.2),rgba(169,245,176,.2)); font-size:1rem; } .tf-1{ top:8%; left:-6%; animation:levita 6.5s ease-in-out infinite; } .tf-2{ bottom:11%; right:-4%; animation:levita 7.5s ease-in-out .8s infinite; } /* cinta de sectores */ .cinta{ border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); padding:1.05rem 0; overflow:hidden; background:rgba(255,255,255,.015); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); } .cinta-pista{ display:flex; gap:1.9rem; width:max-content; animation:desliza 42s linear infinite; } .cinta:hover .cinta-pista{ animation-play-state:paused; } .cinta-pista span{ font-family:var(--f-tit); font-size:.98rem; font-weight:600; color:var(--txt-3); letter-spacing:.02em; white-space:nowrap; } .cinta-pista span:nth-child(even){ color:rgba(87,223,230,.5); } @keyframes desliza{ to{ transform:translateX(-50%); } } /* ---------- Secciones ---------- */ .seccion{ padding:6.2rem 0; position:relative; } .seccion-alt{ background:linear-gradient(180deg,var(--bg-2),var(--bg)); border-block:1px solid var(--linea); } .sec-head{ max-width:720px; margin-bottom:3.2rem; } .sec-sub{ color:var(--txt-2); font-size:1.05rem; } /* ---------- Tarjetas con brillo ---------- */ .tarjeta{ position:relative; border-radius:var(--radio-lg); padding:1.8rem; background:linear-gradient(180deg,var(--surf),rgba(14,23,32,.6)); border:1px solid var(--linea); transition:transform .35s cubic-bezier(.2,.8,.3,1), border-color .35s, box-shadow .35s; overflow:hidden; } .tarjeta::before{ content:''; position:absolute; inset:0; opacity:0; transition:opacity .35s; pointer-events:none; background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(87,223,230,.13), transparent 62%); } .tarjeta:hover{ transform:translateY(-6px); border-color:var(--linea-2); box-shadow:var(--sombra); } .tarjeta:hover::before{ opacity:1; } .servicios-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; } .serv h3{ margin-bottom:.55rem; } .serv p{ color:var(--txt-2); font-size:.95rem; } .serv-ico{ width:52px; height:52px; border-radius:16px; display:grid; place-items:center; margin-bottom:1.15rem; background:linear-gradient(140deg,color-mix(in srgb,var(--c1) 22%,transparent),color-mix(in srgb,var(--c2) 12%,transparent)); border:1px solid color-mix(in srgb,var(--c1) 30%,transparent); transition:transform .35s cubic-bezier(.2,.8,.3,1); } .serv:hover .serv-ico{ transform:translateY(-3px) rotate(-6deg) scale(1.06); } .serv-ico svg{ width:25px; height:25px; fill:none; stroke:var(--c1); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .serv-lista{ list-style:none; padding:0; margin:0 0 1.4rem; display:grid; gap:.45rem; } .serv-lista li{ position:relative; padding-left:1.3rem; font-size:.88rem; color:var(--txt-2); } .serv-lista li::before{ content:''; position:absolute; left:0; top:.6em; width:7px; height:7px; border-radius:50%; background:linear-gradient(120deg,var(--cyan),var(--mint)); } .serv-pie{ display:flex; align-items:center; justify-content:space-between; gap:.7rem; flex-wrap:wrap; margin-top:auto; padding-top:.4rem; border-top:1px solid var(--linea); } .serv{ display:flex; flex-direction:column; } .tag{ font-size:.76rem; color:var(--txt-3); letter-spacing:.03em; } .serv-cta{ background:linear-gradient(150deg,rgba(87,223,230,.12),rgba(169,245,176,.07)); border-color:rgba(87,223,230,.28); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; } .serv-cta p{ color:var(--txt-2); font-size:.95rem; } /* ---------- Metodología ---------- */ .pasos-linea{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; position:relative; } .pasos-linea::before{ content:''; position:absolute; top:26px; left:6%; right:6%; height:1px; background:linear-gradient(90deg,transparent,var(--linea-2),var(--linea-2),transparent); } .paso-item{ position:relative; padding-top:0; } .paso-num{ display:grid; place-items:center; width:54px; height:54px; border-radius:50%; margin-bottom:1.1rem; background:var(--bg-2); border:1px solid rgba(87,223,230,.35); color:var(--cyan); font-family:var(--f-tit); font-weight:700; font-size:.95rem; position:relative; z-index:1; transition:transform .35s, box-shadow .35s, background .35s, color .35s; } .paso-item:hover .paso-num{ transform:translateY(-4px); background:linear-gradient(140deg,var(--cyan),var(--mint)); color:#05242a; box-shadow:0 14px 30px -12px rgba(87,223,230,.8); } .paso-item h3{ margin-bottom:.4rem; } .paso-item p{ color:var(--txt-2); font-size:.93rem; margin:0; } /* ---------- Impacto ---------- */ .impacto-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:3.4rem; align-items:center; } .bullets{ list-style:none; padding:0; margin:0 0 2rem; display:grid; gap:.85rem; } .bullets li{ position:relative; padding-left:1.7rem; color:var(--txt-2); font-size:.97rem; } .bullets li b{ color:var(--txt); font-weight:600; } .bullets li::before{ content:''; position:absolute; left:0; top:.55em; width:10px; height:10px; border-radius:3px; background:linear-gradient(120deg,var(--cyan),var(--mint)); transform:rotate(45deg); } .impacto-nums{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; } .num-caja{ position:relative; padding:1.6rem 1.3rem; border-radius:var(--radio); text-align:center; background:linear-gradient(180deg,var(--surf),rgba(14,23,32,.5)); border:1px solid var(--linea); transition:transform .35s, border-color .35s; } .num-caja:hover{ transform:translateY(-5px); border-color:rgba(87,223,230,.35); } .num-caja b{ display:block; font-family:var(--f-tit); font-size:clamp(1.9rem,3.4vw,2.6rem); font-weight:800; letter-spacing:-.03em; background:linear-gradient(120deg,var(--cyan),var(--mint)); -webkit-background-clip:text; background-clip:text; color:transparent; } .num-caja span{ font-size:.83rem; color:var(--txt-3); } /* ---------- Testimonios ---------- */ .slider{ position:relative; } .slider-pista{ display:flex; transition:transform .6s cubic-bezier(.3,.85,.3,1); } .testi{ flex:0 0 100%; margin:0; padding:2.6rem clamp(1.4rem,4vw,3.4rem); border-radius:var(--radio-lg); background:linear-gradient(150deg,var(--surf),rgba(14,23,32,.55)); border:1px solid var(--linea); } .testi blockquote{ margin:0 0 1.5rem; font-family:var(--f-tit); font-size:clamp(1.1rem,2.1vw,1.5rem); line-height:1.5; font-weight:600; letter-spacing:-.015em; } .testi figcaption b{ display:block; color:var(--cyan); font-size:.95rem; } .testi figcaption span{ font-size:.85rem; color:var(--txt-3); } .slider{ overflow:hidden; } .slider-ctrl{ display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1.7rem; } .puntos{ display:flex; gap:.5rem; } .puntos button{ width:9px; height:9px; padding:0; border-radius:50%; border:0; cursor:pointer; background:var(--linea-2); transition:.28s; } .puntos button.activo{ width:26px; border-radius:999px; background:linear-gradient(90deg,var(--cyan),var(--mint)); } /* ---------- Reserva ---------- */ .reserva{ background:radial-gradient(ellipse 70% 50% at 50% 0%, rgba(87,223,230,.07), transparent 70%); } .reserva-grid{ display:grid; grid-template-columns:1.55fr .95fr; gap:1.6rem; align-items:start; } .wizard{ border-radius:var(--radio-lg); padding:1.9rem; background:var(--surf); border:1px solid var(--linea); box-shadow:var(--sombra); } .wizard-tabs{ list-style:none; display:flex; gap:.5rem; margin:0 0 1.9rem; padding:0 0 1.3rem; border-bottom:1px solid var(--linea); flex-wrap:wrap; } .wizard-tabs li{ display:flex; align-items:center; gap:.5rem; padding:.42rem .85rem; border-radius:999px; font-size:.86rem; font-weight:600; color:var(--txt-3); border:1px solid transparent; transition:.3s; } .wizard-tabs li span{ display:grid; place-items:center; width:23px; height:23px; border-radius:50%; background:rgba(255,255,255,.06); font-size:.76rem; transition:.3s; } .wizard-tabs li.activo{ color:var(--txt); border-color:rgba(87,223,230,.3); background:rgba(87,223,230,.08); } .wizard-tabs li.activo span{ background:linear-gradient(130deg,var(--cyan),var(--mint)); color:#05242a; font-weight:700; } .wizard-tabs li.listo{ color:var(--mint); } .wizard-tabs li.listo span{ background:rgba(169,245,176,.2); color:var(--mint); } .paso{ animation:entra .45s cubic-bezier(.2,.8,.3,1) both; } @keyframes entra{ from{ opacity:0; transform:translateY(14px); } } .paso-tit{ font-size:1.15rem; margin-bottom:.3rem; } .paso-ayuda{ color:var(--txt-3); font-size:.88rem; margin-bottom:1.3rem; } .ops{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; } .op input{ position:absolute; opacity:0; width:0; height:0; } .op-in{ display:block; position:relative; padding:1rem 1rem 1rem 3rem; border-radius:16px; cursor:pointer; background:rgba(255,255,255,.025); border:1px solid var(--linea); transition:.26s; } .op-in::before{ content:''; position:absolute; left:1rem; top:1.15rem; width:19px; height:19px; border-radius:7px; border:1.5px solid var(--linea-2); transition:.26s; } .op-in::after{ content:''; position:absolute; left:1.38rem; top:1.42rem; width:9px; height:5px; border-left:2px solid #05242a; border-bottom:2px solid #05242a; transform:rotate(-45deg) scale(.4); opacity:0; transition:.26s; } .op-in b{ display:block; font-size:.94rem; font-weight:600; } .op-in small{ display:block; font-size:.79rem; color:var(--txt-3); } .op-in:hover{ border-color:var(--linea-2); background:rgba(255,255,255,.045); } .op input:checked + .op-in{ border-color:rgba(87,223,230,.55); background:rgba(87,223,230,.09); } .op input:checked + .op-in::before{ background:linear-gradient(130deg,var(--cyan),var(--mint)); border-color:transparent; } .op input:checked + .op-in::after{ opacity:1; transform:rotate(-45deg) scale(1); } .op input:focus-visible + .op-in{ outline:2px solid var(--cyan); outline-offset:2px; } .campos{ display:grid; grid-template-columns:1fr 1fr; gap:.95rem; } .campo{ display:flex; flex-direction:column; gap:.4rem; } .campo-full{ grid-column:1/-1; } .campo span{ font-size:.82rem; color:var(--txt-2); font-weight:500; } .campo input,.campo select,.campo textarea{ width:100%; padding:.8rem .95rem; border-radius:13px; font:inherit; font-size:.93rem; background:rgba(255,255,255,.03); border:1px solid var(--linea); color:var(--txt); transition:border-color .22s, background .22s, box-shadow .22s; } .campo textarea{ resize:vertical; min-height:86px; } .campo input::placeholder,.campo textarea::placeholder{ color:var(--txt-3); } .campo input:focus,.campo select:focus,.campo textarea:focus{ outline:0; border-color:var(--cyan); background:rgba(87,223,230,.05); box-shadow:0 0 0 3px rgba(87,223,230,.13); } .campo select{ appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357DFE6' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .8rem center; background-size:16px; padding-right:2.4rem; } .campo select option{ background:#0E1720; color:var(--txt); } .campo.malo input{ border-color:#ff7a7a; } /* agenda */ .agenda{ display:grid; grid-template-columns:1.05fr .95fr; gap:1.4rem; } .cal{ background:rgba(255,255,255,.02); border:1px solid var(--linea); border-radius:18px; padding:1.1rem; } .cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.9rem; } .cal-head strong{ font-family:var(--f-tit); font-size:1rem; text-transform:capitalize; } .cal-dias,.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; } .cal-dias span{ text-align:center; font-size:.72rem; color:var(--txt-3); padding-bottom:.35rem; font-weight:600; } .cal-celda{ aspect-ratio:1/1; border-radius:11px; border:1px solid transparent; background:rgba(255,255,255,.03); display:grid; place-items:center; font-size:.86rem; cursor:pointer; color:var(--txt-2); transition:transform .2s, background .2s, color .2s, border-color .2s; } .cal-celda:hover:not(:disabled){ background:rgba(87,223,230,.14); color:var(--txt); transform:translateY(-2px); } .cal-celda:disabled{ opacity:.24; cursor:not-allowed; background:transparent; } .cal-celda.vacia{ background:transparent; border:0; cursor:default; } .cal-celda.hoy{ border-color:rgba(169,245,176,.45); } .cal-celda.sel{ background:linear-gradient(135deg,var(--cyan),var(--mint)); color:#05242a; font-weight:700; box-shadow:0 10px 24px -10px rgba(87,223,230,.85); } .cal-nota{ font-size:.73rem; color:var(--txt-3); margin:.85rem 0 0; } .horas h4{ font-size:.95rem; margin-bottom:.85rem; } .horas-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:.55rem; align-content:start; } .horas-vacio{ grid-column:1/-1; font-size:.86rem; color:var(--txt-3); margin:0; } .hora{ padding:.6rem .3rem; border-radius:12px; font-size:.87rem; cursor:pointer; text-align:center; background:rgba(255,255,255,.03); border:1px solid var(--linea); color:var(--txt-2); transition:.22s; } .hora:hover{ border-color:var(--cyan); color:var(--txt); transform:translateY(-2px); } .hora.sel{ background:linear-gradient(135deg,var(--cyan),var(--mint)); color:#05242a; font-weight:700; border-color:transparent; } .error{ color:#ff9a9a; font-size:.85rem; margin:1rem 0 0; } .wizard-nav{ display:flex; gap:.7rem; justify-content:flex-end; margin-top:1.8rem; padding-top:1.4rem; border-top:1px solid var(--linea); flex-wrap:wrap; } /* resumen */ .resumen{ position:sticky; top:calc(var(--cab) + 14px); } .resumen-in{ border-radius:var(--radio-lg); padding:1.6rem; background:linear-gradient(165deg,rgba(87,223,230,.1),rgba(14,23,32,.9) 45%); border:1px solid rgba(87,223,230,.24); } .resumen h3{ font-size:1.05rem; margin-bottom:1.2rem; } .res-bloque{ padding:.9rem 0; border-top:1px solid var(--linea); } .res-tit{ display:block; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--cyan); margin-bottom:.35rem; } .res-bloque p{ margin:0; font-size:.92rem; } .res-vacio{ color:var(--txt-3); font-style:italic; } .res-chips{ display:flex; flex-wrap:wrap; gap:.4rem; } .res-chip{ padding:.24rem .65rem; border-radius:999px; background:rgba(87,223,230,.13); border:1px solid rgba(87,223,230,.3); font-size:.79rem; color:var(--cyan); } .res-pie{ margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--linea); } .res-pie p{ font-size:.79rem; color:var(--txt-3); } .link-wsp{ font-size:.85rem; color:var(--mint); font-weight:600; } .link-wsp:hover{ text-decoration:underline; } /* ---------- FAQ ---------- */ .faq-lista{ display:grid; gap:.7rem; } .faq{ border:1px solid var(--linea); border-radius:var(--radio); background:rgba(255,255,255,.02); overflow:hidden; transition:border-color .3s, background .3s; } .faq[open]{ border-color:rgba(87,223,230,.32); background:rgba(87,223,230,.045); } .faq summary{ list-style:none; cursor:pointer; padding:1.15rem 3.2rem 1.15rem 1.3rem; position:relative; font-family:var(--f-tit); font-weight:600; font-size:1rem; } .faq summary::-webkit-details-marker{ display:none; } .faq-mas{ position:absolute; right:1.3rem; top:50%; width:14px; height:14px; margin-top:-7px; } .faq-mas::before,.faq-mas::after{ content:''; position:absolute; inset:0; margin:auto; background:var(--cyan); border-radius:2px; transition:transform .3s; } .faq-mas::before{ width:14px; height:2px; } .faq-mas::after{ width:2px; height:14px; } .faq[open] .faq-mas::after{ transform:rotate(90deg) scaleX(0); } .faq-cuerpo{ padding:0 1.3rem 1.3rem; animation:entra .35s ease both; } .faq-cuerpo p{ margin:0; color:var(--txt-2); font-size:.95rem; } /* ---------- CTA final ---------- */ .cta-final{ padding:6rem 0; position:relative; overflow:hidden; border-top:1px solid var(--linea); background:radial-gradient(ellipse 60% 100% at 50% 100%, rgba(169,245,176,.1), transparent 70%), var(--bg-2); } .cta-in{ text-align:center; } .cta-in h2{ margin-bottom:.7rem; } .cta-in p{ color:var(--txt-2); max-width:56ch; margin:0 auto 2rem; } /* ---------- Pie ---------- */ .pie{ background:#05090E; border-top:1px solid var(--linea); padding:3.6rem 0 1.6rem; } .pie-in{ display:grid; grid-template-columns:1.15fr 2fr; gap:2.6rem; padding-bottom:2.4rem; } .pie-marca p{ color:var(--txt-3); font-size:.88rem; margin-top:1rem; max-width:38ch; } .pie-nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; } .pie-nav div{ display:flex; flex-direction:column; gap:.5rem; min-width:0; } .pie-tit{ font-family:var(--f-tit); font-weight:600; font-size:.9rem; margin-bottom:.3rem; } .pie-nav a{ font-size:.86rem; color:var(--txt-3); transition:color .22s, transform .22s; width:fit-content; max-width:100%; overflow-wrap:anywhere; } .pie-nav a:hover{ color:var(--cyan); transform:translateX(3px); } .pie-bajo{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.4rem; border-top:1px solid var(--linea); font-size:.79rem; color:var(--txt-3); } /* ---------- WhatsApp flotante ---------- */ .wsp-flota{ position:fixed; right:20px; bottom:20px; z-index:95; display:flex; align-items:center; gap:.55rem; padding:.8rem 1.05rem; border-radius:999px; background:#25D366; color:#04240f; font-weight:700; font-size:.92rem; box-shadow:0 16px 36px -12px rgba(37,211,102,.75); transform:translateY(120px); opacity:0; transition:transform .4s cubic-bezier(.2,.8,.3,1), opacity .4s, box-shadow .3s; } .wsp-flota.ver{ transform:translateY(0); opacity:1; } .wsp-flota:hover{ box-shadow:0 20px 44px -12px rgba(37,211,102,.9); } .wsp-flota svg{ width:24px; height:24px; flex:none; fill:#fff; filter:drop-shadow(0 1px 2px rgba(0,0,0,.28)); } .wsp-flota::before{ content:''; position:absolute; inset:0; border-radius:999px; border:2px solid #25D366; animation:onda 2.6s ease-out infinite; pointer-events:none; } @keyframes onda{ 0%{ transform:scale(1); opacity:.7; } 70%,100%{ transform:scale(1.35); opacity:0; } } /* ---------- Reveal (nunca oculto por defecto) ---------- */ html.js-anim .reveal{ opacity:0; transform:translateY(26px); } html.js-anim .reveal.visible{ opacity:1; transform:none; transition:opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1); } html.js-anim .reveal:nth-child(2){ transition-delay:.06s; } html.js-anim .reveal:nth-child(3){ transition-delay:.12s; } html.js-anim .reveal:nth-child(4){ transition-delay:.18s; } /* ---------- Responsive ---------- */ @media (max-width:1000px){ .hero-in{ grid-template-columns:1fr; gap:2.4rem; padding-bottom:3.4rem; } .hero-art{ max-width:400px; margin-inline:auto; } .servicios-grid{ grid-template-columns:1fr 1fr; } .pasos-linea{ grid-template-columns:1fr 1fr; gap:2rem 1.4rem; } .pasos-linea::before{ display:none; } .impacto-grid{ grid-template-columns:1fr; gap:2.4rem; } .reserva-grid{ grid-template-columns:1fr; } .resumen{ position:static; } .pie-in{ grid-template-columns:1fr; } } @media (max-width:820px){ .nav{ position:fixed; inset:var(--cab) 0 auto 0; flex-direction:column; gap:0; padding:1rem 1.3rem 1.6rem; background:#080E15; border-bottom:1px solid var(--linea); transform:translateY(-140%); transition:transform .38s cubic-bezier(.2,.8,.3,1); box-shadow:0 24px 40px -24px #000; } .nav.abierto{ transform:translateY(0); } .nav a{ padding:.85rem .4rem; border-radius:0; border-bottom:1px solid var(--linea); font-size:1rem; } .hamburguesa{ display:flex; } /* La cabecera sólo lleva marca + hamburguesa: el botón largo no cabe junto al logo en un teléfono. La llamada a la acción vive dentro del menú. */ .cabecera-cta .btn{ display:none; } .nav .nav-cta{ display:block; margin-top:1rem; padding:.95rem 1rem; text-align:center; border-radius:999px; border-bottom:0 !important; background:linear-gradient(115deg,var(--cyan),var(--mint)); color:#05242a !important; font-weight:700; font-size:.95rem; box-shadow:0 12px 30px -14px rgba(87,223,230,.85); } .agenda{ grid-template-columns:1fr; } } @media (max-width:640px){ body{ font-size:16px; } .seccion{ padding:4.4rem 0; } .servicios-grid{ grid-template-columns:1fr; } .pasos-linea{ grid-template-columns:1fr; } .impacto-nums{ grid-template-columns:1fr 1fr; } .pie-nav{ grid-template-columns:1fr 1fr; gap:1.5rem 1rem; } .ops,.campos{ grid-template-columns:1fr; } .wizard{ padding:1.3rem; } /* Héroe en teléfono: el texto arriba, el arte compacto debajo y las tarjetas flotantes fuera del logo (antes lo tapaban y dejaban media pantalla vacía). */ .hero{ padding-top:calc(var(--cab) + 2.1rem); } .hero-in{ gap:2rem; padding-bottom:2.6rem; } .hero-art{ max-width:268px; } .marca-grande{ width:52%; } .tarjeta-flota{ padding:.5rem .7rem; border-radius:13px; gap:.5rem; } .tarjeta-flota b{ font-size:.92rem; } .tarjeta-flota small{ font-size:.66rem; } .tf-ico{ width:29px; height:29px; border-radius:9px; font-size:.85rem; } .tf-1{ top:0; left:-7%; } .tf-2{ bottom:1%; right:-7%; } .eyebrow-extra{ display:none; } .eyebrow{ margin-bottom:.95rem; font-size:.72rem; padding:.36rem .8rem .36rem .55rem; } /* "Enviar por WhatsApp" no cabe en media fila: se lleva una fila entera (el texto va en nowrap y el botón recorta lo que sobra). */ .wizard-nav{ gap:.6rem; } .wizard-nav .btn{ flex:1 1 auto; } .wizard-nav .btn-wsp{ flex:1 0 100%; } .btn{ padding:.9rem 1.1rem; font-size:.94rem; } /* Botón de WhatsApp en móvil: círculo completo, ícono grande y centrado. Se ancla con env() para no quedar bajo la barra del navegador ni cortado por el borde en pantallas con esquinas redondeadas. */ .wsp-txt{ display:none; } .wsp-flota{ width:60px; height:60px; padding:0; display:grid; place-items:center; right:max(16px, env(safe-area-inset-right)); bottom:max(16px, env(safe-area-inset-bottom)); border:2px solid rgba(255,255,255,.28); } .wsp-flota svg{ width:31px; height:31px; } .hero-chips{ gap:.7rem 1.1rem; } } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } html{ scroll-behavior:auto; } html.js-anim .reveal{ opacity:1; transform:none; } } /* ---------- Estados extra ---------- */ .hora:disabled{ opacity:.3; cursor:not-allowed; text-decoration:line-through; border-style:dashed; } .hora:disabled:hover{ transform:none; border-color:var(--linea); color:var(--txt-2); } .circ:disabled{ opacity:.25; cursor:not-allowed; } .circ:disabled:hover{ border-color:var(--linea-2); color:var(--txt); background:rgba(255,255,255,.04); } .wizard-tabs li{ cursor:pointer; } :focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px; }