/* Base heredada del contenedor original */ :root{color-scheme:light}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found]){display:none!important} /* ═══ TOKENS ═══════════════════════════════════════════════════════ */ :root{ --blanco:#FFFFFF; --cemento:#ECEDEA; --ground:#FFFFFF; --tinta:#131517; --tinta-2:#565B5C; --tinta-3:#868C8B; --linea:#D6D8D3; --linea-2:#E7E9E5; --naranja:#C94B10; --naranja-vivo:#F26A1B; --naranja-wash:#FBEBE2; --btn-txt:#FFFFFF; --verde:#1F6B45; --verde-wash:#E2EDE7; --ambar:#96650C; --ambar-wash:#F6EDD8; --barra:#131517; --barra-txt:#F2F2EF; --panel:#FFFFFF; --panel-head:#F4F5F2; --display:'Archivo','Helvetica Neue',Arial,sans-serif; --body:'Source Sans 3','Helvetica Neue',Arial,sans-serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace; --max:1180px; --read:64ch; --pad:clamp(16px,4vw,28px); --gap-sec:clamp(64px,9vw,104px); --alto-barra:64px; } html{scroll-behavior:smooth} /* la barra fija no debe tapar el título al llegar por un enlace */ section[id]{scroll-margin-top:calc(var(--alto-barra) + 14px)} @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --blanco:#1A1D1E; --cemento:#15181A; --ground:#111314; --tinta:#EDEEEB; --tinta-2:#A7AEAC; --tinta-3:#7B8382; --linea:#2B3132; --linea-2:#222829; --naranja:#F2732E; --naranja-vivo:#FF8A45; --naranja-wash:#2D1A11; --btn-txt:#160F09; --verde:#5DA57E; --verde-wash:#16261D; --ambar:#D2A44A; --ambar-wash:#282213; --barra:#000000; --barra-txt:#F2F2EF; --panel:#1A1D1E; --panel-head:#202426; } } :root[data-theme="dark"]{ --blanco:#1A1D1E; --cemento:#15181A; --ground:#111314; --tinta:#EDEEEB; --tinta-2:#A7AEAC; --tinta-3:#7B8382; --linea:#2B3132; --linea-2:#222829; --naranja:#F2732E; --naranja-vivo:#FF8A45; --naranja-wash:#2D1A11; --btn-txt:#160F09; --verde:#5DA57E; --verde-wash:#16261D; --ambar:#D2A44A; --ambar-wash:#282213; --barra:#000000; --barra-txt:#F2F2EF; --panel:#1A1D1E; --panel-head:#202426; } /* ═══ BASE ═════════════════════════════════════════════════════════ */ *{box-sizing:border-box} /* El lienzo que queda por fuera del documento toma su color del . Sin esta regla lo heredaría del , que es blanco, y en el celular el rebote del scroll mostraba una franja blanca debajo del pie oscuro (y arriba de la barra). Con el color de la barra, los dos extremos quedan del mismo tono que el pie y la barra. */ html{background:var(--barra)} body{background:var(--ground);color:var(--tinta);font-family:var(--body);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;margin:0} h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance} p{margin:0} img{max-width:100%} a{color:inherit} :focus-visible{outline:3px solid var(--naranja);outline-offset:3px} .wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)} .eyebrow{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--naranja);display:block} .lead{font-size:clamp(1.05rem,2.1vw,1.28rem);line-height:1.5;color:var(--tinta-2);max-width:60ch} .mono{font-family:var(--mono)} .tnum{font-variant-numeric:tabular-nums} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} h2.tit{font-size:clamp(1.8rem,4.4vw,2.9rem);font-weight:800;letter-spacing:-.032em;line-height:1.06;max-width:20ch} h3.sub{font-size:clamp(1.05rem,1.9vw,1.32rem);font-weight:700;letter-spacing:-.015em;line-height:1.25} section{padding-block:var(--gap-sec)} section.cem{background:var(--cemento)} .sechead{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(28px,4vw,44px)} /* regla de obra: tira de marcas finas */ .regla{height:11px;background-image:repeating-linear-gradient(to right,var(--linea) 0 1px,transparent 1px 12px);border-bottom:1px solid var(--linea)} /* ═══ BOTONES ══════════════════════════════════════════════════════ */ .btn{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.008em;line-height:1.15; padding:16px 24px;border:2px solid var(--naranja);background:var(--naranja);color:var(--btn-txt); display:inline-flex;align-items:center;gap:10px;border-radius:2px;text-decoration:none;cursor:pointer; min-height:54px;transition:background .15s ease,border-color .15s ease} .btn:hover{background:#A93C08;border-color:#A93C08} :root[data-theme="dark"] .btn:hover{background:var(--naranja-vivo);border-color:var(--naranja-vivo)} .btn.ghost{background:transparent;color:var(--naranja)} .btn.ghost:hover{background:var(--naranja-wash);border-color:var(--naranja)} .btn svg{width:19px;height:19px;flex:none;fill:currentColor} .btns{display:flex;gap:12px;flex-wrap:wrap} /* ═══ BARRA SUPERIOR ═══════════════════════════════════════════════ */ .topbar{position:sticky;top:0;z-index:60;background:var(--barra);color:var(--barra-txt); border-bottom:3px solid var(--naranja)} .topbar .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px; min-height:var(--alto-barra)} .marca{justify-self:start;display:inline-flex;align-items:center;text-decoration:none; padding:4px 0;border-radius:2px} .marca img{display:block;height:30px;width:auto} .menu{justify-self:center;display:flex;align-items:center;gap:clamp(14px,2.1vw,32px)} .menu a{font-size:.95rem;font-weight:600;color:var(--barra-txt);text-decoration:none; padding:5px 1px;border-bottom:2px solid transparent;white-space:nowrap; transition:color .15s ease,border-color .15s ease} .menu a:hover{color:var(--naranja-vivo);border-bottom-color:var(--naranja-vivo)} .cta-barra{justify-self:end;min-height:0;padding:11px 20px;font-size:.94rem;white-space:nowrap} .burger{display:none;width:40px;height:40px;padding:0;border:0;background:transparent;cursor:pointer; justify-self:end;flex-direction:column;align-items:center;justify-content:center;color:var(--barra-txt)} .burger span{display:block;width:20px;height:2px;background:currentColor;margin:0 auto; transition:transform .2s ease,opacity .2s ease} .burger span + span{margin-top:5px} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .menu-mob{border-top:1px solid #2A2F30;background:var(--barra)} .menu-mob a{display:block;padding:15px var(--pad);font-size:1rem;font-weight:600; color:var(--barra-txt);text-decoration:none;border-bottom:1px solid #2A2F30} .menu-mob a:last-child{border-bottom:0} .menu-mob a:hover{color:var(--naranja-vivo)} @media(max-width:920px){ .topbar .wrap{grid-template-columns:1fr auto auto;gap:10px} .menu{display:none} .burger{display:flex} .cta-barra{padding:10px 16px;font-size:.9rem} } @media(max-width:400px){ .marca img{height:26px} .cta-barra{padding:10px 13px;font-size:.86rem} } /* ═══ PORTADA · SLIDER ═════════════════════════════════════════════ */ /* Las imágenes de fondo (WebP incrustado) están al final de esta hoja. */ .hs{ /* colores fijos del hero: el fondo es una imagen, no giran con el modo oscuro */ --hs-blanco:#FFFFFF; --hs-oscuro:#131517; --hs-naranja:#C94B10; --hs-naranja-vivo:#F26A1B; --hs-gris:#D7DAD8; --hs-pad:clamp(20px,3.8vw,72px); position:relative;width:100%;overflow:hidden; aspect-ratio:1900/847;max-height:min(86vh,880px); background:var(--hs-oscuro); } .hero{padding-block:0;position:relative} /* el título usa el mismo cuerpo en los tres slides. Lo que cambia por slide es el ancho de la columna, porque cada imagen deja libre un ancho distinto a la izquierda antes de la persona, el celular o los indicadores. */ .hs{--fs:clamp(1.3rem,2.58vw,3.1rem); --lead:clamp(.9rem,.95vw,1.13rem)} .hs1{--col:36vw; --colp:36vw} .hs2{--col:32.5vw; --colp:29vw; --lead:clamp(.84rem,.92vw,1.08rem)} .hs3{--col:31vw; --colp:31vw} .hslide{position:absolute;inset:0;opacity:0;visibility:hidden; transition:opacity .5s ease,visibility .5s ease} .hslide.on{opacity:1;visibility:visible} .hs-bg{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat} .hs1{background:var(--hs-naranja-vivo)} .hs2,.hs3{background:var(--hs-oscuro)} .hs1 .hs-bg{background-image:var(--img1-desk)} .hs2 .hs-bg{background-image:var(--img2-desk)} .hs3 .hs-bg{background-image:var(--img3-desk)} .hs-txt{position:absolute;inset:0;z-index:2;display:flex;align-items:center; padding-inline:var(--hs-pad);padding-block:clamp(24px,3.4vw,52px)} .hs-in{max-width:var(--col);transform:translateY(12px);transition:transform .6s cubic-bezier(.2,.65,.25,1)} .hslide.on .hs-in{transform:none} .hs-eyebrow{font-family:var(--mono);font-weight:600;letter-spacing:.15em;text-transform:uppercase; font-size:clamp(.62rem,.74vw,.78rem);display:inline-flex;align-items:center;gap:9px;line-height:1; color:var(--hs-blanco)} .hs-eyebrow::before{content:"";width:3px;height:1.05em;background:var(--hs-oscuro);flex:none} .hs-tit{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.1; font-size:var(--fs);color:var(--hs-blanco);margin-top:clamp(12px,1.3vw,20px)} .hs-tit em{font-style:normal;display:block;color:var(--hs-naranja-vivo)} .hs1 .hs-tit em{color:var(--hs-oscuro)} .hs-rule{display:block;width:46px;height:3px;margin-top:clamp(14px,1.5vw,22px);background:var(--hs-naranja-vivo)} .hs1 .hs-rule{background:var(--hs-oscuro)} .hs-lead{font-size:var(--lead);line-height:1.45;margin-top:clamp(12px,1.3vw,18px);color:var(--hs-gris); max-width:var(--colp)} .hs1 .hs-lead{color:var(--hs-blanco)} .hs-btn{margin-top:clamp(16px,1.8vw,26px);padding:14px clamp(18px,1.6vw,26px); font-size:clamp(.92rem,1vw,1.04rem);min-height:52px} .hs-btn .fl{font-family:var(--mono);font-weight:400;margin-left:2px} .hs1 .hs-btn{background:var(--hs-oscuro);border-color:var(--hs-oscuro);color:var(--hs-blanco)} .hs1 .hs-btn:hover{background:#000;border-color:#000} .hs2 .hs-btn,.hs3 .hs-btn{background:var(--hs-naranja);border-color:var(--hs-naranja);color:var(--hs-blanco)} .hs2 .hs-btn:hover,.hs3 .hs-btn:hover{background:var(--hs-naranja-vivo);border-color:var(--hs-naranja-vivo)} /* puntos: centrados respecto del slider completo */ .hs-nav{position:absolute;z-index:3;left:0;right:0;display:flex;justify-content:center;gap:7px; bottom:clamp(14px,1.2vw,22px)} .hs-dot{width:26px;height:4px;padding:0;border:0;border-radius:2px;cursor:pointer; background:rgba(255,255,255,.42);transition:background .2s ease,width .2s ease} .hs-dot:hover{background:rgba(255,255,255,.7)} .hs-dot[aria-current="true"]{background:var(--hs-blanco);width:40px} /* avance del panel: el punto activo se llena de blanco en --hs-pausa (lo define principal.js). Con el mouse encima o el foco por teclado, la línea se congela y sigue desde ahí. */ .hs-dot{position:relative;overflow:hidden} .hs-dot::after{content:"";position:absolute;inset:0;background:var(--hs-blanco); transform:scaleX(0);transform-origin:left center} .hs.corriendo .hs-dot[aria-current="true"]{background:rgba(255,255,255,.42)} .hs.corriendo .hs-dot[aria-current="true"]::after{animation:hs-progreso var(--hs-pausa,6s) linear forwards} .hs.en-pausa .hs-dot[aria-current="true"]::after{animation-play-state:paused} @keyframes hs-progreso{to{transform:scaleX(1)}} /* flechas a los costados: chicas y semitransparentes */ .hs-flecha{position:absolute;z-index:3;top:50%;margin-top:-18px;width:36px;height:36px;padding:0;border:0;border-radius:2px; display:grid;place-items:center;cursor:pointer;color:var(--hs-blanco);background:rgba(19,21,23,.35); transition:background .15s ease} .hs-flecha:hover{background:rgba(19,21,23,.62)} .hs-flecha::before{content:"";width:9px;height:9px;border-top:2px solid currentColor;border-left:2px solid currentColor} .hs-prev{left:8px} .hs-prev::before{transform:translateX(2px) rotate(-45deg)} .hs-next{right:8px} .hs-next::before{transform:translateX(-2px) rotate(135deg)} /* hasta 1200 px, centradas en el costado pisarían el comienzo del texto: bajan a la altura de los puntos */ @media(max-width:1200px){ .hs-flecha{top:auto;margin-top:0;bottom:8px;width:32px;height:32px} } /* paneles 4 y 5: mismo tratamiento que los paneles 2 y 3 (fondo oscuro, destacado y botón naranja) */ .hs4,.hs5{background:var(--hs-oscuro)} .hs4 .hs-bg{background-image:var(--img4-desk)} .hs5 .hs-bg{background-image:var(--img5-desk)} .hs4 .hs-btn,.hs5 .hs-btn{background:var(--hs-naranja);border-color:var(--hs-naranja);color:var(--hs-blanco)} .hs4 .hs-btn:hover,.hs5 .hs-btn:hover{background:var(--hs-naranja-vivo);border-color:var(--hs-naranja-vivo)} /* panel 4: la mitad izquierda de la foto es clara (pallets y piso con sol): sombra suave del lado del texto, y columna angosta para no pisar a la persona */ .hs4 .hs-bg::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(19,21,23,.8) 0%,rgba(19,21,23,.55) 28%,rgba(19,21,23,0) 50%)} .hs4{--col:31vw;--colp:29vw} /* panel 5: foto un poco más alta (1900×931, cover recorta ~40 px); columna angosta para no pisar el cartel del fondo */ .hs5{--col:27vw;--colp:26vw} @media(max-width:760px){ /* en mobile, el texto de 4 y 5 usa el ancho completo y la misma alineación que 1 a 3 */ .hs4,.hs5{--col:none;--colp:none} .hs4 .hs-bg{background-image:var(--img4-mob)} .hs4 .hs-bg::after{content:none} .hs5 .hs-bg{background-image:var(--img5-mob)} } @media(max-width:760px){ .hs{aspect-ratio:1052/1670;max-height:none;--hs-pad:22px} .hs1 .hs-bg{background-image:var(--img1-mob)} .hs2 .hs-bg{background-image:var(--img2-mob)} .hs3 .hs-bg{background-image:var(--img3-mob)} /* en mobile el aire de las imágenes está arriba */ .hs,.hs1,.hs2,.hs3{--col:none;--colp:none;--fs:clamp(1.35rem,5.6vw,1.85rem);--lead:clamp(.86rem,3.5vw,1rem)} /* el bloque queda centrado dentro del 55% superior, que es el aire que dejan las imágenes mobile: baja respecto del borde sin llegar al centro del slider. El relleno inferior es el 45% del alto (el alto es 1,587× el ancho), así que en pantallas chicas —donde el texto ocupa más— sube solo y no invade la foto. */ .hs-txt{align-items:center;padding-block:0 71vw} .hs-in{max-width:none;width:100%} .hs-tit{line-height:1.12;margin-top:10px} .hs-rule{margin-top:12px;width:40px} .hs-lead{margin-top:10px} .hs-btn{margin-top:14px;min-height:48px;padding:12px 18px;font-size:.94rem} .hs-br{display:none} .hs-nav{bottom:16px} } /* teléfonos angostos (SE y similares): el texto ocupa más alto en proporción, así que baja un punto la escala para no llegar a los elementos de la foto */ @media(max-width:374px){ .hs{--fs:clamp(1.15rem,5.1vw,1.5rem);--lead:clamp(.78rem,3.25vw,.92rem)} .hs-txt{align-items:flex-start;padding-block:7vw 0} } @media (prefers-reduced-motion: reduce){ .hslide,.hs-in{transition:none} } .pruebas{margin-top:clamp(40px,6vw,64px);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea); display:grid;grid-template-columns:repeat(3,minmax(0,1fr))} .pruebas div{padding:20px 0;border-left:1px solid var(--linea)} .pruebas div:first-child{border-left:0} .pruebas div + div{padding-left:22px} .pruebas .k{font-family:var(--display);font-weight:800;font-size:clamp(1.15rem,2.4vw,1.5rem);letter-spacing:-.02em;display:block} /* gris --tinta-2 y menos separación: en Windows, el texto chico gris claro y muy espaciado se veía con franjas de color */ .pruebas .d{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2);margin-top:5px;display:block} /* franja de beneficios de la portada: barra compacta, no una sección. Poco aire afuera (sólo para que las líneas no toquen la foto ni la sección siguiente) y un padding vertical chico dentro de cada bloque. En mobile ya usa 14px (ver abajo). */ .hero .pruebas{margin-top:clamp(10px,1.4vw,18px);margin-bottom:clamp(10px,1.4vw,18px)} .hero .pruebas div{padding-top:14px;padding-bottom:14px} @media(max-width:640px){.pruebas{grid-template-columns:minmax(0,1fr)}.pruebas div{border-left:0;border-top:1px solid var(--linea-2);padding:14px 0 !important}.pruebas div:first-child{border-top:0}} /* ═══ PANELES DE PRODUCTO (dibujados, no fotos) ════════════════════ */ .panel{background:var(--panel);border:1px solid var(--linea);border-radius:2px;overflow:hidden;font-family:var(--body)} .panel-head{background:var(--panel-head);border-bottom:1px solid var(--linea);padding:9px 13px; display:flex;align-items:center;justify-content:space-between;gap:10px; font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-3)} .panel-head .dot{width:7px;height:7px;background:var(--verde);border-radius:50%;flex:none} .panel-body{padding:13px} .row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--linea-2);font-size:.9rem} .row:last-child{border-bottom:0} .row .nm{min-width:0} .row .cod{font-family:var(--mono);font-size:.68rem;color:var(--tinta-3);display:block;letter-spacing:.05em} .row .pr{font-family:var(--mono);font-size:.88rem;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums} .tot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:2px solid var(--tinta);margin-top:6px;padding-top:11px} .tot span{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-3)} .tot b{font-family:var(--mono);font-size:1.35rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .chipline{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px} .chip{font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase; padding:5px 8px;border:1px solid currentColor;border-radius:2px} .chip.on{color:var(--naranja);background:var(--naranja-wash)} .chip.of{color:var(--tinta-3)} .chip.ok{color:var(--verde);background:var(--verde-wash)} .chip.am{color:var(--ambar);background:var(--ambar-wash)} .viejo{text-decoration:line-through;color:var(--tinta-3);font-weight:400;margin-right:7px} /* ═══ SLIDER ═══════════════════════════════════════════════════════ */ .tabs{display:flex;gap:0;border:1px solid var(--linea);border-radius:2px;overflow-x:auto;background:var(--panel);scrollbar-width:thin} .tab{flex:1 1 0;min-width:132px;background:transparent;border:0;border-right:1px solid var(--linea); padding:15px 14px;text-align:left;cursor:pointer;color:var(--tinta-2);font-family:var(--body);font-size:.9rem;line-height:1.3; transition:background .15s ease} .tab:last-child{border-right:0} .tab .n{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.14em;color:var(--tinta-3);display:block;margin-bottom:5px} .tab .t{font-family:var(--display);font-weight:700;letter-spacing:-.01em;color:var(--tinta);display:block} .tab:hover{background:var(--cemento)} .tab[aria-selected="true"]{background:var(--naranja);color:var(--btn-txt)} .tab[aria-selected="true"] .n,.tab[aria-selected="true"] .t{color:var(--btn-txt)} @media(max-width:700px){.tab{min-width:118px;padding:12px 11px;font-size:.84rem}.tab .t{font-size:.94rem}} .panelwrap{border:1px solid var(--linea);border-top:0;background:var(--panel);padding:clamp(20px,3.4vw,38px)} .slide{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(24px,4vw,48px);align-items:center} @media(max-width:860px){.slide{grid-template-columns:minmax(0,1fr)}} .slide h3{font-size:clamp(1.35rem,3vw,2rem);font-weight:800;letter-spacing:-.028em;line-height:1.1} .slide p{margin-top:14px;color:var(--tinta-2);font-size:1.02rem;line-height:1.55;max-width:44ch} .slide .idx{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--naranja);display:block;margin-bottom:11px} .slide .slide-nota{font-size:.94rem;color:var(--tinta-2)} /* enlaces que abren una pestaña de «El resto del día» */ .slide .slide-link{margin-top:14px} .slide .slide-link a{font-family:var(--display);font-weight:700;font-size:.94rem;letter-spacing:-.008em; color:var(--naranja);text-decoration:none;border-bottom:2px solid transparent;transition:border-color .15s ease} .slide .slide-link a:hover{border-bottom-color:var(--naranja)} .navrow{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:26px;flex-wrap:wrap} .arrows{display:flex;gap:8px} .arrow{width:46px;height:46px;border:2px solid var(--linea);background:transparent;color:var(--tinta);border-radius:2px;cursor:pointer; display:grid;place-items:center;font-size:1.1rem;transition:border-color .15s ease,color .15s ease} .arrow:hover{border-color:var(--naranja);color:var(--naranja)} /* visuales del slider */ .duo{display:grid;grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);align-items:center;gap:0} @media(max-width:520px){.duo{grid-template-columns:minmax(0,1fr);gap:14px}.duo .link{height:22px;justify-self:center}} .duo .link{position:relative;height:2px;background:var(--naranja)} .duo .link::after{content:"";position:absolute;right:-1px;top:50%;transform:translateY(-50%); border-left:7px solid var(--naranja);border-top:5px solid transparent;border-bottom:5px solid transparent} @media(max-width:520px){.duo .link{width:2px;height:22px;background:var(--naranja)} .duo .link::after{right:auto;left:50%;top:auto;bottom:-1px;transform:translateX(-50%); border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--naranja);border-bottom:0}} .ficha{text-align:center;padding:6px 0 2px} .ficha .ph{height:56px;background:repeating-linear-gradient(45deg,var(--linea-2) 0 6px,transparent 6px 12px);border:1px solid var(--linea);margin-bottom:11px} .ficha .nmb{font-family:var(--display);font-weight:700;font-size:.92rem;line-height:1.25} .ficha .prc{font-family:var(--mono);font-size:1.05rem;font-weight:600;margin-top:6px;font-variant-numeric:tabular-nums} .stockbadge{display:inline-block;margin-top:9px;font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.09em; text-transform:uppercase;padding:5px 9px;border:1px solid currentColor;border-radius:2px; color:var(--ambar);background:var(--ambar-wash)} .slide.agotado .stockbadge{color:var(--tinta-3);background:transparent} .matriz{width:100%;border-collapse:collapse;font-size:.84rem} .matriz th,.matriz td{padding:8px 10px;border-bottom:1px solid var(--linea-2);text-align:left} .matriz thead th{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3)} .matriz td.c{text-align:center;font-weight:700} .matriz .si{color:var(--verde)} .matriz .no{color:var(--tinta-3)} .audit{margin-top:11px;border-top:1px solid var(--linea);padding-top:10px;font-family:var(--mono);font-size:.7rem;color:var(--tinta-3);line-height:1.7} .audit b{color:var(--tinta-2);font-weight:600} .antes{position:relative} .antes::after{content:"ANTES";position:absolute;top:14px;left:-8px;transform:rotate(-7deg); font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.18em; background:var(--naranja);color:var(--btn-txt);padding:4px 12px;border-radius:2px} .vacio{color:var(--tinta-3);font-size:.82rem;font-style:italic} /* ═══ PROBLEMA ═════════════════════════════════════════════════════ */ .grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea)} .grid4 > div{background:var(--panel);padding:24px 22px;display:flex;flex-direction:column;gap:10px} .grid4 h3{font-size:1.1rem;font-weight:700;letter-spacing:-.012em;line-height:1.25} .grid4 p{color:var(--tinta-2);font-size:.97rem;line-height:1.5} .grid4 .q{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.14em;color:var(--naranja)} /* ═══ CAJA (video) ═════════════════════════════════════════════════ */ .caja-top{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,4.4vw,64px);align-items:center} .eyebrow.cuadro{display:inline-flex;align-items:center;gap:10px} .eyebrow.cuadro::before{content:"";width:9px;height:9px;background:var(--naranja);flex:none} .caja-txt h2.tit{margin-top:14px;max-width:14ch} .caja-txt .lead{margin-top:20px;max-width:44ch} /* el marco del reproductor usa el mismo panel que el resto del sitio */ .video-marco{background:var(--panel);border:1px solid var(--linea);border-radius:2px;overflow:hidden} .video-marco video{display:block;width:100%;height:auto;aspect-ratio:16/9; object-fit:contain;background:var(--panel-head)} .video-pie{margin-top:14px;font-size:.94rem;line-height:1.45;color:var(--tinta-3);max-width:60ch} /* beneficios + CTA */ .caja-pie{display:grid;grid-template-columns:minmax(0,1fr) auto; gap:clamp(26px,3.4vw,52px);align-items:center;margin-top:clamp(40px,5vw,68px)} .bene{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); margin:0;padding:0;list-style:none;border-top:1px solid var(--linea)} .bene li{display:flex;gap:12px;padding:18px 26px 18px 0;font-size:.98rem;line-height:1.35; border-bottom:1px solid var(--linea-2);border-right:1px solid var(--linea-2)} .bene li:nth-child(3n){border-right:0;padding-right:0} .bene li:nth-last-child(-n+3){border-bottom:0} .bene li::before{content:"";flex:none;width:9px;height:9px;background:var(--naranja);margin-top:6px} .caja-cta .btn{justify-content:center;text-align:center;white-space:nowrap} .caja-cta .fina{display:flex;align-items:center;gap:8px;margin-top:14px; font-size:.88rem;line-height:1.4;color:var(--tinta-3)} .caja-cta .fina svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6} @media(max-width:1000px){ .caja-top{grid-template-columns:minmax(0,1fr)} .caja-txt h2.tit{max-width:20ch} .caja-pie{grid-template-columns:minmax(0,1fr);align-items:start} } @media(max-width:700px){ .bene{grid-template-columns:repeat(2,minmax(0,1fr))} .bene li{padding-right:18px} .bene li:nth-child(3n){border-right:1px solid var(--linea-2);padding-right:18px} .bene li:nth-child(2n){border-right:0;padding-right:0} .bene li:nth-last-child(-n+3){border-bottom:1px solid var(--linea-2)} .bene li:nth-last-child(-n+2){border-bottom:0} } @media(max-width:560px){.video-marco .panel-head span:last-child{display:none}} @media(max-width:460px){ .bene{grid-template-columns:minmax(0,1fr)} .bene li,.bene li:nth-child(3n){border-right:0;padding-right:0} .bene li{border-bottom:1px solid var(--linea-2)} .bene li:last-child{border-bottom:0} .caja-cta .btn{width:100%;white-space:normal} } /* ═══ DIAGRAMA ═════════════════════════════════════════════════════ */ .diag{max-width:660px;margin:0 auto} .diag svg{width:100%;height:auto;display:block} .diag text{font-family:'Archivo',sans-serif;font-weight:700} .diag .lbl{font-family:'IBM Plex Mono',monospace;font-weight:600;letter-spacing:.12em;font-size:11px} .diag .acc{stroke:var(--naranja)} .diag .accf{fill:var(--naranja)} .diag .mut{fill:var(--tinta-3)} /* ═══ EL RESTO DEL DÍA ═════════════════════════════════════════════ */ /* Desktop: introducción fija (≈30 %) · momentos (≈19 %) · contenido (≈52 %). En desktop y tablet las cuatro vistas comparten la misma celda de la grilla: la caja toma el alto de la más larga y la página no salta al cambiar de momento. En el celular se muestra sólo la elegida. */ .dia-grid{display:grid;grid-template-columns:minmax(0,29fr) minmax(0,19fr) minmax(0,52fr); gap:clamp(20px,2.4vw,32px);align-items:start} .dia-intro{position:sticky;top:calc(var(--alto-barra) + 24px)} .dia-intro .sechead{margin-bottom:0} .dia-intro .dia-cta{margin-top:clamp(24px,2.6vw,32px)} /* pestañas de momentos */ .dia-tabs{display:flex;flex-direction:column} .dtab{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px 10px; width:100%;margin:0;padding:17px 14px 17px 18px;text-align:left;cursor:pointer; font-family:var(--body);color:var(--tinta-2);background:transparent; border:1px solid transparent;border-bottom-color:var(--linea);border-radius:2px; transition:background .15s ease,border-color .15s ease} .dtab:first-child{border-top-color:var(--linea)} .dtab + .dtab{margin-top:-1px} .dtab::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:4px; background:var(--naranja);opacity:0;transition:opacity .15s ease} .dtab .h{grid-column:1;font-family:var(--mono);font-weight:600;font-size:1.1rem;letter-spacing:-.01em;line-height:1; color:var(--tinta);font-variant-numeric:tabular-nums;transition:color .15s ease} .dtab .q{grid-column:1;font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.13em; text-transform:uppercase;line-height:1.3;color:var(--tinta-3)} .dtab .fl{grid-column:2;grid-row:1 / span 2;font-family:var(--mono);font-size:1.05rem;line-height:1; color:var(--naranja);opacity:0;transform:translateX(-4px);transition:opacity .15s ease,transform .15s ease} .dtab:hover{background:var(--panel-head)} .dtab:hover .h{color:var(--naranja)} .dtab:focus-visible{z-index:2} .dtab[aria-selected="true"]{z-index:1;background:var(--panel);border-color:var(--naranja);color:var(--tinta)} .dtab[aria-selected="true"]::before{opacity:1} .dtab[aria-selected="true"] .h{color:var(--naranja)} .dtab[aria-selected="true"] .q{color:var(--tinta-2)} .dtab[aria-selected="true"] .fl{opacity:1;transform:none} /* contenido del momento */ .dia-panels{display:grid;container-type:inline-size;background:var(--panel); border:1px solid var(--linea);border-radius:2px;padding:clamp(18px,2.4vw,28px)} .momento{grid-area:1 / 1;display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-content:start; opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s} .momento.on{opacity:1;visibility:visible;transition:opacity .25s ease,visibility 0s} /* con lugar suficiente: texto a la izquierda, interfaz a la derecha */ @container (min-width:500px){ .momento{grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);gap:clamp(18px,2.2vw,28px);align-items:start} } .dia-hora{display:block;margin-bottom:10px;font-family:var(--mono);font-weight:600;font-size:.92rem; letter-spacing:.02em;line-height:1;color:var(--naranja);font-variant-numeric:tabular-nums} .dia-plan{display:inline-block;margin-bottom:10px} .momento h3{font-size:clamp(1.2rem,2.4vw,1.6rem);font-weight:800;letter-spacing:-.024em;line-height:1.12} .momento-txt p{margin-top:12px;color:var(--tinta-2);font-size:1.02rem;line-height:1.55;max-width:46ch} .momento-txt p b{color:var(--tinta);font-weight:600} .momento-txt .pie{font-size:.92rem;color:var(--tinta-3)} .momento .row .pr .var{display:block;margin-top:3px;text-align:right;font-size:.66rem;font-weight:600; letter-spacing:.06em;color:var(--naranja)} .momento .row .pr .var.igual{color:var(--tinta-3);font-weight:500} .momento .row .pr.ok{color:var(--verde)} .momento .row .pr.alerta{color:var(--naranja)} .momento .row .pr.tenue{color:var(--tinta-3);font-weight:500} .momento .dev{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:12px; font-size:.86rem;line-height:1.4;color:var(--tinta-2)} .momento .dev b{color:var(--naranja);font-weight:600} .momento .msj{margin-top:12px;padding:11px 13px;background:var(--panel-head);border:1px solid var(--linea-2); font-size:.9rem;line-height:1.45;color:var(--tinta-2)} /* tablet: introducción arriba, momentos y contenido lado a lado, botón al final */ @media(max-width:1000px){ .dia-grid{grid-template-columns:minmax(0,190px) minmax(0,1fr); grid-template-areas:"head head" "tabs panels" "cta cta"} .dia-intro{position:static;display:contents} .dia-intro .sechead{grid-area:head;margin-bottom:clamp(4px,1vw,10px)} .dia-tabs{grid-area:tabs} .dia-panels{grid-area:panels} .dia-intro .dia-cta{grid-area:cta;margin-top:0} } /* celular: etiqueta · título · bajada · selector 2×2 · contenido · botón */ @media(max-width:760px){ .dia-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "tabs" "panels" "cta";gap:18px} .dia-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .dtab{border-color:var(--linea);padding:13px 12px 13px 16px} .dtab + .dtab{margin-top:0} .dtab .fl,.dtab[aria-selected="true"] .fl{transform:rotate(90deg)} .dia-panels{padding:16px} /* sólo el momento elegido ocupa lugar: sin espacios vacíos debajo de los cortos */ .momento{display:none} .momento.on{display:grid;animation:dia-entra .25s ease} } @media(max-width:460px){ .dia-intro .dia-cta .btn{width:100%;justify-content:center;text-align:center} } @keyframes dia-entra{from{opacity:0}to{opacity:1}} /* ═══ EL PROBLEMA DE LAS PLATAFORMAS ═══════════════════════════════ */ /* Sección oscura: usa los mismos tonos que el cierre y el pie. */ .oscura{background:var(--barra);color:var(--barra-txt)} .oscura .eyebrow{color:var(--naranja-vivo);display:inline-flex;align-items:center;gap:10px} .oscura .eyebrow::before{content:"";width:22px;height:2px;background:var(--naranja-vivo);flex:none} .oscura h2.tit{color:var(--barra-txt);max-width:24ch} .oscura h2.tit em{font-style:normal;color:var(--naranja-vivo)} /* «no» tachado, en el mismo blanco que la frase; la respuesta «(Con nosotros sí.)» va en el em naranja */ .oscura h2.tit s{text-decoration-line:line-through;text-decoration-thickness:.09em;text-decoration-color:currentColor} .tarjetas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)} .tarjeta{background:#1A1D1E;border:1px solid #2A2F30;border-radius:2px; padding:clamp(20px,2.2vw,26px) clamp(18px,2vw,24px);display:flex;flex-direction:column;gap:12px} .tarjeta .ico{width:40px;height:40px;border-radius:2px;background:#2D1A11;color:var(--naranja-vivo); display:grid;place-items:center;flex:none;margin-bottom:2px} .tarjeta .ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .tarjeta h3{font-size:1.1rem;font-weight:700;letter-spacing:-.012em;line-height:1.25;color:var(--barra-txt)} .tarjeta p{font-size:.97rem;line-height:1.5;color:#B8BDBB} @media(max-width:960px){.tarjetas{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){.tarjetas{grid-template-columns:minmax(0,1fr)}} /* ═══ INCLUYE ══════════════════════════════════════════════════════ */ .grid8{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea)} .grid8 > div{background:var(--panel);padding:22px 20px;display:flex;flex-direction:column;gap:9px} .grid8 h3{font-size:1.04rem;font-weight:700;letter-spacing:-.012em;line-height:1.25} .grid8 p{font-size:.94rem;line-height:1.5;color:var(--tinta-2)} /* segunda fila de «Qué incluye»: dos tarjetas a lo ancho, pegadas a la grilla de 8 */ .grid8.grid2{grid-template-columns:repeat(2,minmax(0,1fr));border-top:0} @media(max-width:600px){.grid8.grid2{grid-template-columns:minmax(0,1fr)}} /* ═══ PASOS ════════════════════════════════════════════════════════ */ .pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(222px,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea);counter-reset:p} .pasos > div{background:var(--panel);padding:24px 22px;display:flex;flex-direction:column;gap:9px} .pasos .n{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--naranja)} .pasos h3{font-size:1.1rem;font-weight:700;letter-spacing:-.012em} .pasos p{font-size:.95rem;line-height:1.5;color:var(--tinta-2)} /* ═══ LAS DEMOS ════════════════════════════════════════════════════ */ #demos h2.tit em{font-style:normal;color:var(--naranja)} #ideas h2.tit em{font-style:normal;color:var(--naranja)} .demos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(24px,2.6vw,34px) clamp(14px,1.7vw,22px)} .demo{display:block;text-decoration:none;color:inherit} .shot{display:block;border:1px solid var(--linea);border-radius:2px;overflow:hidden; background:var(--panel);transition:border-color .15s ease} .demo:hover .shot{border-color:var(--naranja)} .shot__bar{display:flex;align-items:center;gap:5px;padding:7px 9px; background:var(--panel-head);border-bottom:1px solid var(--linea)} .shot__dot{width:6px;height:6px;border-radius:50%;background:var(--linea);flex:none} .shot__url{flex:1;min-width:0;margin-left:6px;background:var(--panel);border:1px solid var(--linea-2); border-radius:2px;padding:3px 8px;font-family:var(--mono);font-size:.6rem;letter-spacing:.02em; color:var(--tinta-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* el visor recorta la captura; al pasar el mouse, la tienda se recorre sola */ .shot__view{position:relative;display:block;overflow:hidden;aspect-ratio:640/500; background:linear-gradient(155deg,var(--shot-a,#8A9092) 0%,var(--shot-b,#2B3132) 100%)} .shot__real{display:block;width:100%;height:auto;transform:translateY(0);transition:transform .55s ease} .demo:hover .shot__real,.demo:focus-visible .shot__real{ transform:translateY(var(--rec,-75%));transition:transform var(--shot-scroll,6s) linear} .demo__name{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:14px; font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.012em;line-height:1.25} .demo__name .fl{font-family:var(--mono);font-weight:400;color:var(--tinta-3);transition:color .15s ease;flex:none} .demo:hover .demo__name .fl,.demo:focus-visible .demo__name .fl{color:var(--naranja)} .demo small{display:block;margin-top:5px;font-size:.9rem;line-height:1.45;color:var(--tinta-2)} @media(max-width:960px){.demos{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.demos{grid-template-columns:minmax(0,1fr)} .shot__view{aspect-ratio:640/380}} @media (prefers-reduced-motion: reduce){ .demo:hover .shot__real,.demo:focus-visible .shot__real{transform:none} } /* ═══ QUE TE ENCUENTREN ════════════════════════════════════════════ */ .seo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4.5vw,60px);align-items:center} .seo-txt{grid-column:2} .seo-card{grid-column:1;grid-row:1} .eyebrow.raya{display:inline-flex;align-items:center;gap:10px} .eyebrow.raya::before{content:"";width:22px;height:2px;background:var(--naranja);flex:none} .seo-txt h2.tit{margin-top:14px;max-width:none} .seo-txt h2.tit em{font-style:normal;color:var(--naranja)} .seo-txt .lead{margin-top:20px} .seo-txt .nota{margin-top:16px;font-size:.97rem;line-height:1.5;color:var(--tinta-3);max-width:58ch} .seo-card .panel-body{padding:clamp(20px,2.4vw,28px)} .puntaje{display:flex;align-items:center;gap:clamp(20px,2.6vw,32px)} .aro{position:relative;width:clamp(104px,11vw,132px);flex:none} .aro svg{width:100%;height:auto;display:block} .aro .n{position:absolute;inset:0;display:grid;place-items:center; font-family:var(--mono);font-weight:600;font-size:clamp(1.5rem,2.6vw,1.95rem); letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--tinta)} .puntaje .lista{flex:1;min-width:0} .puntaje .row{padding:11px 0} .seo-card .pie{margin-top:16px;border-top:1px solid var(--linea);padding-top:14px; font-size:.86rem;line-height:1.45;color:var(--tinta-3)} @media(max-width:900px){ .seo-grid{grid-template-columns:minmax(0,1fr)} .seo-txt,.seo-card{grid-column:1} .seo-txt{grid-row:1} .seo-card{grid-row:2;margin-top:4px} } @media(max-width:420px){ .puntaje{flex-direction:column;align-items:flex-start;gap:18px} .puntaje .lista{width:100%} } /* ═══ PLANES ═══════════════════════════════════════════════════════ */ .planes{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea)} .plan{background:var(--panel);padding:clamp(24px,3vw,30px) 24px;display:flex;flex-direction:column;gap:8px} .plan.destacado{background:var(--naranja-wash);border-top:4px solid var(--naranja);margin-top:-4px} .plan .flag{font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--naranja);min-height:1.2em} .plan .nm{font-family:var(--display);font-weight:800;font-size:1.6rem;letter-spacing:-.028em;line-height:1} .plan .pr{font-family:var(--mono);font-weight:600;font-size:2.35rem;letter-spacing:-.04em;line-height:1;margin-top:12px;font-variant-numeric:tabular-nums} .plan .pr span{font-family:var(--body);font-size:.86rem;font-weight:400;letter-spacing:0;color:var(--tinta-2)} .plan .an{font-family:var(--mono);font-size:.74rem;color:var(--tinta-3);margin-top:4px} .plan .who{font-size:.95rem;line-height:1.5;color:var(--tinta-2);margin-top:12px;flex:1} .plan ul{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:.92rem;line-height:1.4} .plan ul li{display:flex;gap:9px} .plan ul li::before{content:"";flex:none;width:7px;height:7px;background:var(--naranja);margin-top:7px} .plan .btn{margin-top:20px;justify-content:center;width:100%} /* listas alineadas: las cards comparten las filas (etiqueta, nombre, precio, anual, descripción, lista y botón), así las tres listas empiezan en la misma línea y los botones quedan alineados. Sin subgrid, queda como antes. */ @supports (grid-template-rows: subgrid){ .plan{display:grid;grid-template-rows:subgrid;grid-row:span 7;row-gap:8px} @media(min-width:870px){ /* con tres columnas, la descripción más larga (Vidriera) suma un renglón: se compensa en el aire sobre la lista y sobre el botón, para que las listas arranquen donde arrancaba la de Comercio y los botones no se muevan */ .plan ul{margin-top:12px} .plan .btn{margin-top:0} } } .tablewrap{overflow-x:auto;border:1px solid var(--linea);background:var(--panel);margin-top:26px;border-radius:2px} table.cmp{border-collapse:collapse;width:100%;min-width:640px;font-size:.9rem} table.cmp th,table.cmp td{padding:11px 15px;border-bottom:1px solid var(--linea-2);text-align:left;vertical-align:top} table.cmp thead th{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--tinta-2);border-bottom:1px solid var(--linea);background:var(--panel-head)} table.cmp tbody th{font-weight:400;color:var(--tinta-2)} table.cmp td{text-align:right;font-family:var(--mono);font-size:.85rem;font-variant-numeric:tabular-nums;white-space:nowrap} table.cmp thead th:not(:first-child){text-align:right} table.cmp .si{color:var(--verde);font-weight:600} table.cmp .no{color:var(--tinta-3)} table.cmp tr.destaca{background:var(--naranja-wash)} table.cmp tr.destaca th{color:var(--tinta);font-weight:700} table.cmp .seccion th{font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase; color:var(--tinta-3);padding-top:22px;border-bottom:1px solid var(--linea)} table.cmp .seccion.caja th{color:var(--naranja)} /* ═══ FAQ ══════════════════════════════════════════════════════════ */ .faq{border-top:1px solid var(--linea);max-width:860px} .faq details{border-bottom:1px solid var(--linea)} .faq summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative; font-family:var(--display);font-weight:700;font-size:clamp(1rem,2.1vw,1.14rem);letter-spacing:-.014em;line-height:1.35} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%); font-family:var(--mono);font-size:1.5rem;font-weight:400;color:var(--naranja);line-height:1} .faq details[open] summary::after{content:"–"} .faq .a{padding:0 0 22px;color:var(--tinta-2);font-size:1rem;line-height:1.6;max-width:62ch} /* ═══ CIERRE ═══════════════════════════════════════════════════════ */ .cierre{background:var(--barra);color:var(--barra-txt)} .cierre h2{font-size:clamp(1.9rem,5vw,3.2rem);font-weight:800;letter-spacing:-.036em;line-height:1.04;max-width:18ch} .cierre h2 em{font-style:normal;color:var(--naranja-vivo)} .cierre p{color:#B8BDBB;margin-top:20px;max-width:52ch;font-size:1.08rem;line-height:1.5} .cierre .btns{margin-top:32px} .cierre .btn{background:var(--naranja-vivo);border-color:var(--naranja-vivo);color:#160F09} .cierre .btn:hover{background:#fff;border-color:#fff;color:#131517} .cierre .btn.ghost{background:transparent;color:var(--barra-txt);border-color:#4A4F50} .cierre .btn.ghost:hover{background:transparent;border-color:var(--barra-txt);color:var(--barra-txt)} footer{background:var(--barra);color:#8D9391;border-top:1px solid #2A2F30;padding-block:34px;font-size:.9rem} footer .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center} footer .mono{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase} /* ═══ ETIQUETA «NUEVO» ═════════════════════════════════════════════ */ /* Marca las funciones nuevas donde se presentan. */ .nuevo{display:inline-block;margin-left:8px;vertical-align:.2em;font-family:var(--mono);font-size:.6rem; font-weight:600;line-height:1;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap; color:var(--naranja);background:var(--naranja-wash);border:1px solid currentColor;border-radius:2px; padding:4px 6px 3px} .tab[aria-selected="true"] .nuevo{color:var(--btn-txt);background:transparent} .plan ul li .nuevo{margin-left:auto;align-self:center;flex:none} .pruebas .k .nuevo{vertical-align:.3em} .dtab .h .nuevo{vertical-align:.12em} /* ═══ VIDEOS POR FUNCIÓN ═══════════════════════════════════════════ */ /* Botón chico donde se explica cada función; el video se abre en una ventana. principal.js muestra cada botón sólo si su archivo existe en el servidor. */ .vid{display:inline-flex;align-items:center;gap:12px;margin-top:16px;min-height:48px;padding:8px 16px 8px 8px; background:var(--panel);color:var(--tinta);border:1px solid var(--linea);border-radius:2px; font-family:var(--body);text-align:left;cursor:pointer;transition:border-color .15s ease} .vid:hover{border-color:var(--naranja)} .vid-play{position:relative;flex:none;width:32px;height:32px;background:var(--naranja);border-radius:2px} .vid-play::after{content:"";position:absolute;left:12px;top:9px;border-left:10px solid var(--btn-txt); border-top:7px solid transparent;border-bottom:7px solid transparent} .vid-t{display:block;font-family:var(--display);font-weight:700;font-size:.94rem;letter-spacing:-.008em;line-height:1.2} .vid-d{display:block;margin-top:3px;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em; text-transform:uppercase;color:var(--tinta-3)} .sechead .vid,.grid8 .vid{align-self:flex-start} .sechead .vid{margin-top:0} .grid8 .vid{margin-top:4px} .vid-modal{width:min(960px,calc(100vw - 32px));max-width:none;padding:0;border:0;background:transparent;color:var(--tinta)} .vid-modal::backdrop{background:rgba(19,21,23,.8)} .vid-modal-in{background:var(--panel);border:1px solid var(--linea);border-radius:2px;overflow:hidden} .vid-cerrar{width:36px;height:36px;margin:-8px -8px -8px 0;border:0;background:transparent;cursor:pointer; color:var(--tinta-2);font-family:var(--mono);font-size:1rem} .vid-cerrar:hover{color:var(--naranja)} .vid-marco{display:grid;place-items:center;aspect-ratio:16/9;background:var(--panel-head)} .vid-marco video{display:block;width:100%;height:100%;object-fit:contain} .vid-pend{padding:24px;text-align:center;font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;color:var(--tinta-3)} /* versión vertical (hasta 760 px): la ventana toma el formato 9:16 y se ajusta al alto de la pantalla */ .vid-modal.vertical{width:min(420px,calc(100vw - 32px),calc((100vh - 110px) * 9 / 16))} @supports (height:100dvh){.vid-modal.vertical{width:min(420px,calc(100vw - 32px),calc((100dvh - 110px) * 9 / 16))}} .vid-modal.vertical .vid-marco{aspect-ratio:9/16} /* ═══ WHATSAPP FLOTANTE ════════════════════════════════════════════ */ /* dos botones medianos, uno arriba del otro, abajo a la derecha: volver arriba y WhatsApp. Aparecen juntos pasada la portada (principal.js agrega .on), en desktop y en celular. */ .flotantes{position:fixed;right:16px;bottom:16px;z-index:70;display:flex;flex-direction:column;gap:10px; opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .22s ease,transform .22s ease} .flotantes.on{opacity:1;pointer-events:auto;transform:none} .flota,.flota-top{width:48px;height:48px;padding:0;border:0;border-radius:50%;display:grid;place-items:center; cursor:pointer;text-decoration:none;color:#FFFFFF;box-shadow:0 4px 12px -4px rgba(19,21,23,.45); transition:transform .4s cubic-bezier(.34,1.56,.64,1),background .2s ease} /* pop al posicionarse: crece un poco, medio lento y con un rebote suave al final */ .flota:hover,.flota-top:hover,.flota:focus-visible,.flota-top:focus-visible{transform:scale(1.12)} /* WhatsApp: verde del logo */ .flota{background:#25D366} .flota:hover{background:#1EBE5A} .flota svg{width:26px;height:26px;fill:currentColor} /* volver arriba: naranja de la marca */ .flota-top{background:var(--naranja)} .flota-top:hover{background:#A93C08} .flota-top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} @media(min-width:1200px){.flotantes{right:24px;bottom:24px}} @media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms !important;transition-duration:.01ms !important} } /* ═══ IMÁGENES DEL SLIDER ═════════════════════════════════════════ Desktop 1900×847 · Mobile 1052×1670, en WebP. Los archivos están en assets/img/slider/. Para cambiar una imagen, reemplazá el archivo o la ruta de la variable. */ .hs{ --img1-desk:url("../img/slider/slider-1-desktop.webp"); --img1-mob:url("../img/slider/slider-1-mobile.webp"); --img2-desk:url("../img/slider/slider-2-desktop.webp"); --img2-mob:url("../img/slider/slider-2-mobile.webp"); --img3-desk:url("../img/slider/slider-3-desktop.webp"); --img3-mob:url("../img/slider/slider-3-mobile.webp"); /* paneles 4 y 5: PNG por ahora (≈2,4–2,6 MB c/u); conviene pasarlas a WebP liviano como las anteriores */ --img4-desk:url("../img/slider/slider-4-desktop.png"); --img4-mob:url("../img/slider/slider-4-mobile.png"); --img5-desk:url("../img/slider/slider-5-desktop.png"); --img5-mob:url("../img/slider/slider-5-mobile.png"); } /* ═════════ FORMULARIO DE DEMO ═════════ */ .form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,56px);align-items:start} .form-txt h2.tit{max-width:18ch} .form-txt .bene{margin-top:clamp(18px,2.4vw,26px)} .form-card{border:1px solid var(--linea);background:var(--panel); padding:clamp(20px,2.6vw,30px)} .form-demo .campo{display:flex;flex-direction:column;gap:6px;margin-bottom:16px} .form-demo label{font-size:.85rem;font-weight:600;color:var(--tinta)} .form-demo input,.form-demo select{font:inherit;font-size:.95rem;color:var(--tinta); background:var(--blanco);border:1px solid var(--linea);border-radius:2px; padding:11px 12px;width:100%;appearance:none} .form-demo select{background-image:linear-gradient(45deg,transparent 50%,var(--tinta-3) 50%), linear-gradient(135deg,var(--tinta-3) 50%,transparent 50%); background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%; background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px} .form-demo input:focus-visible,.form-demo select:focus-visible{outline:2px solid var(--naranja); outline-offset:1px;border-color:var(--naranja)} .form-demo input[aria-invalid="true"],.form-demo select[aria-invalid="true"]{border-color:var(--naranja)} .form-demo .campo-ayuda{font-size:.83rem;line-height:1.45;color:var(--tinta-3); margin:-4px 0 18px;padding-left:10px;border-left:2px solid var(--linea)} .form-demo .form-error{font-size:.85rem;color:var(--naranja);font-weight:600;margin:0 0 12px} .form-demo .btn{width:100%;justify-content:center} .form-demo .fina{display:flex;align-items:flex-start;gap:8px;margin-top:14px; font-size:.85rem;line-height:1.4;color:var(--tinta-3)} .form-demo .fina svg{width:14px;height:14px;flex:none;margin-top:2px; fill:none;stroke:currentColor;stroke-width:1.6} @media(max-width:900px){ .form-grid{grid-template-columns:minmax(0,1fr)} .form-txt h2.tit{max-width:24ch} }