/* ============================================================ PAGINAS - composicion especifica de Home (no reutilizable). Las secciones de Personalizador y Checkout se agregan cuando se construyan esos modulos. ============================================================ */ /* Home - Hero */ .hero{ position:relative; min-height:640px; display:flex; align-items:center; overflow:hidden; background: radial-gradient(ellipse 900px 500px at 78% 30%, rgba(201,151,63,.16), transparent 62%), linear-gradient(115deg, transparent 0%, transparent 46%, rgba(201,151,63,.07) 47%, transparent 48%, transparent 100%), linear-gradient(125deg, transparent 0%, transparent 58%, rgba(201,151,63,.05) 59%, transparent 60%, transparent 100%), #0a0806; } .hero-photo{position:absolute;inset:0;z-index:0;} /* Carrusel de 1 a 3 fotos: cada ".hero-slide" ocupa todo el espacio, apiladas una encima de otra, y solo la ".is-active" es visible (transicion de opacidad = efecto fade). El texto de encima (.hero-inner) vive fuera de este contenedor, asi que nunca se mueve con el carrusel. */ .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;} .hero-slide.is-active{opacity:1;z-index:1;} .hero-slide img{width:100%;height:100%;object-fit:cover;object-position:78% 50%;opacity:.55;filter:saturate(1.15) contrast(1.08);} /* Efecto Ken Burns: arranca ligeramente ampliada y se aleja lento y continuo hasta su tamano real, donde se queda quieta (no vuelve a acercarse en loop - se ve mas premium/cinematografico que un zoom-in/zoom-out repitiendose). El contenedor (.hero-photo) ya tiene overflow:hidden en .hero, asi que el zoom nunca se sale de la seccion. Arranca recien cuando la seccion entra en pantalla (junto con el scroll reveal, clase ".in-view"), no desde que carga la pagina - asi el recorrido completo del zoom se ve siempre, no se "gasta" antes de que el usuario llegue a verlo. Puramente CSS (transform con GPU), sin JS ni impacto en la carga. Cuando hay mas de 1 foto, theme.js reinicia esta animacion cada vez que una foto se vuelve la activa del carrusel, para que el zoom se repita en cada una, no solo en la primera. */ @media (prefers-reduced-motion:no-preference){ .hero-slide img{animation:tfKenBurns 15s ease-out forwards;animation-play-state:paused;} .hero-photo.in-view .hero-slide img{animation-play-state:running;} @keyframes tfKenBurns{from{transform:scale(1.15);}to{transform:scale(1);}} } .hero-photo::after{ content:"";position:absolute;inset:0; background: linear-gradient(90deg, #0a0806 0%, #0a0806 30%, rgba(10,8,6,.72) 52%, rgba(10,8,6,.15) 78%, transparent 100%), linear-gradient(0deg, #0a0806 0%, transparent 22%, transparent 82%, rgba(10,8,6,.65) 100%); } .hero-photo .pending-tag{ position:absolute;right:18px;bottom:18px;z-index:2; font-family:'Oswald';font-size:10px;letter-spacing:.1em;text-transform:uppercase; color:var(--gold-dim);background:rgba(10,8,6,.7);padding:6px 10px;border:1px solid var(--line); } .hero-inner{position:relative;z-index:1;width:100%;padding:0 64px;} h1.hero-title{font-size:clamp(44px,6.6vw,92px);} h1.hero-title .w{color:var(--ink);} h1.hero-title .g{color:var(--gold);} .hero-sub{font-family:'Oswald';font-weight:500;letter-spacing:.22em;text-transform:uppercase;font-size:16px;color:var(--ink);margin:22px 0 34px;} .btn-row{display:flex;gap:16px;flex-wrap:wrap;} .hero-arrow{ position:absolute;top:50%;transform:translateY(-50%);z-index:2; width:42px;height:42px;border-radius:50%;border:1px solid var(--line); display:flex;align-items:center;justify-content:center; color:var(--ink-muted);transition:border-color .15s,color .15s; } .hero-arrow:hover{border-color:var(--gold);color:var(--gold);} .hero-arrow svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;} .hero-arrow.prev{left:24px;} .hero-arrow.next{right:24px;} .hero-dots{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;display:flex;gap:9px;} .hero-dots span{width:7px;height:7px;border-radius:50%;background:var(--gold-dim);} .hero-dots span.on{background:var(--gold);} /* Home - Marquee (barra que se desplaza sola, pedido del cliente). Truco estandar de 2 copias identicas seguidas + animar el contenedor -50% de su ancho total: cuando la 1ra copia termina de salir por la izquierda, la 2da ya esta exactamente en la posicion de la 1ra, y el loop se ve continuo, sin salto ni parpadeo. */ .tf-marquee{background:#000;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:15px 0;} .tf-marquee-track{display:flex;width:max-content;animation:tfMarqueeScroll 30s linear infinite;} .tf-marquee-group{display:flex;flex-shrink:0;} .tf-marquee-group span{ white-space:nowrap;font-family:'Oswald';font-weight:600;font-size:13px;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-muted);padding:0 16px;position:relative; } .tf-marquee-group span::after{content:"•";position:absolute;right:-2px;color:var(--gold-dim);} @keyframes tfMarqueeScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}} @media (prefers-reduced-motion:reduce){.tf-marquee-track{animation:none;}} /* Home - Como Funciona */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;} .step{padding:0 32px;position:relative;} .step + .step{border-left:1px solid var(--line);} .step .num{width:64px;height:64px;display:flex;align-items:center;justify-content:center;border:1px solid var(--gold-dim);border-radius:50%;font-family:'Anton';font-size:24px;color:var(--gold);margin-bottom:18px;} .step h3{font-family:'Oswald';font-weight:600;font-size:16px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:10px;} .step p{color:var(--ink-muted);font-size:14.5px;margin:0;} .step-media{aspect-ratio:1/1;background:var(--bg-raised);border:1px solid var(--line);margin:24px 0 20px;overflow:hidden;display:flex;align-items:center;justify-content:center;} .step-media img{display:block;width:100%;height:100%;object-fit:cover;} /* Mismo Ken Burns que Hero/F27 - arranca cuando el paso entra en pantalla (clase "in-view" del scroll reveal, agregada a ".step"). */ @media (prefers-reduced-motion:no-preference){ .step-media img{animation:tfKenBurns 15s ease-out forwards;animation-play-state:paused;} .step.in-view .step-media img{animation-play-state:running;} } .step-media .pending{padding:0 16px;text-align:center;} .step .btn{width:100%;justify-content:center;padding:13px 16px;font-size:12px;} /* Home - Seccion F27 (banner full-bleed + mini-listado; la card del mini-listado ya esta en components.css). El banner reproduce la misma estructura del Hero (foto de fondo a todo el ancho + texto encima) en vez de la columna partida que tenia antes - con fotos de campana verticales, esa columna angosta recortaba mal la foto y la dejaba muy chica; a todo el ancho se ve igual de imponente que el Hero. */ .f27{background:var(--bg-raised);border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .f27-banner{position:relative;min-height:560px;display:flex;align-items:center;overflow:hidden;background:#000;} .f27-photo{position:absolute;inset:0;z-index:0;} /* Carrusel de 1 a 3 fotos (mismo mecanismo que el Hero, ver arriba): cada ".f27-slide" ocupa todo el espacio, apiladas una encima de otra, y solo la ".is-active" es visible (fade por opacidad). */ .f27-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;} .f27-slide.is-active{opacity:1;z-index:1;} /* object-position corrida a la derecha/arriba: pensada para fotos de campana verticales con el modelo del lado derecho y espacio oscuro a la izquierda para el texto (igual que el Hero) - si la foto real queda con el sujeto en otro lado, este es el valor a ajustar. */ .f27-slide img{width:100%;height:100%;object-fit:cover;object-position:72% 22%;opacity:.7;} /* Mismo Ken Burns que el Hero (ver pages.css, seccion Hero) - arranca al entrar en pantalla junto con el scroll reveal. */ @media (prefers-reduced-motion:no-preference){ .f27-slide img{animation:tfKenBurns 15s ease-out forwards;animation-play-state:paused;} .f27-photo.in-view .f27-slide img{animation-play-state:running;} } .f27-photo::after{ content:"";position:absolute;inset:0;z-index:2; background: linear-gradient(90deg, var(--bg-raised) 0%, var(--bg-raised) 20%, rgba(24,20,13,.6) 44%, rgba(24,20,13,.12) 70%, transparent 100%), linear-gradient(0deg, var(--bg-raised) 0%, transparent 20%, transparent 80%, rgba(24,20,13,.55) 100%); } .f27-photo .pending-tag{ position:absolute;right:18px;bottom:18px;z-index:3; font-family:'Oswald';font-size:10px;letter-spacing:.1em;text-transform:uppercase; color:var(--gold-dim);background:rgba(10,8,6,.7);padding:6px 10px;border:1px solid var(--line); } .f27-inner{position:relative;z-index:1;width:100%;} .f27-copy{display:flex;flex-direction:column;max-width:520px;} .f27-copy .eyebrow{margin-bottom:16px;} .f27-copy h2{font-size:clamp(38px,5vw,60px);margin-bottom:20px;} .f27-copy p{color:var(--ink-muted);max-width:38ch;margin-bottom:30px;} .f27-arrow{ position:absolute;top:50%;transform:translateY(-50%);z-index:3; width:42px;height:42px;border-radius:50%;border:1px solid var(--line); display:flex;align-items:center;justify-content:center; color:var(--ink-muted);transition:border-color .15s,color .15s; } .f27-arrow:hover{border-color:var(--gold);color:var(--gold);} .f27-arrow svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;} .f27-arrow.prev{left:24px;} .f27-arrow.next{right:24px;} .f27-dots{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;display:flex;gap:9px;} .f27-dots span{width:7px;height:7px;border-radius:50%;background:var(--gold-dim);} .f27-dots span.on{background:var(--gold);} .f27-label-row{display:flex;align-items:center;justify-content:center;gap:18px;padding:30px 0;border-top:1px solid var(--line);} .f27-label-row .ln{width:60px;height:1px;background:var(--gold-dim);} .f27-label-row span{font-family:'Oswald';font-weight:600;font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);} .f27-label-row span b{color:var(--gold);} .f27-products{border-top:1px solid var(--line);} .f27-products .wrap{padding:0 28px 48px;} /* Home - Combos: fila de mini-features y banner CTA final */ .feat-row{display:flex;justify-content:center;gap:52px;flex-wrap:wrap;margin-bottom:48px;} .feat-item{display:flex;align-items:center;gap:12px;} .feat-item svg{width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:1.4;flex-shrink:0;} .feat-item h4{font-family:'Oswald';font-weight:600;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;margin:0 0 3px;} .feat-item p{margin:0;font-size:12px;color:var(--ink-muted);} .combo-cta{margin-top:34px;border:1px solid var(--gold-dim);padding:26px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;} .combo-cta .l{display:flex;align-items:center;gap:18px;} .combo-cta .ic{width:52px;height:52px;border-radius:50%;background:var(--bg-raised-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .combo-cta .ic svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:1.4;} .combo-cta h4{font-family:'Oswald';font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px;} .combo-cta p{margin:0;font-size:13px;color:var(--ink-muted);} /* Home - Franja de pagos/envios */ .pay-bar{padding:44px 0;} .pay-inner{border:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;} .pay-col{padding:30px 34px;} .pay-col + .pay-col{border-left:1px solid var(--line);} .pay-col .eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:18px;} .pay-col .eyebrow svg{width:14px;height:14px;stroke:var(--gold);fill:none;stroke-width:2;} .chips{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch;} /* Mismo tamano fijo para TODAS las cajitas (logo o texto) - pedido del cliente: antes cada una media distinto segun el largo del texto/logo y se veia disparejo. "Bus interprovincial" es el texto mas largo del grupo; el tamano y el interlineado de abajo estan pensados para que ese texto entre en 2 lineas sin desbordar. */ .chip{ width:108px;height:46px;display:flex;align-items:center;justify-content:center;text-align:center; background:var(--bg-raised);border:1px solid var(--line);padding:6px 8px; font-family:'Oswald';font-weight:600;font-size:11px;line-height:1.25;letter-spacing:.02em;color:var(--ink-muted); } /* Logos reales de marcas (pagos/envios) - fondo blanco fijo a proposito: son logos de terceros con sus propios colores (algunos oscuros, ej. Culqi/Mastercard), y el unico fondo que los deja verse bien a todos por igual es uno claro, sin importar el tema oscuro del resto del sitio - mismo criterio que usa cualquier footer de tienda con logos de tarjetas. */ .chip-logo{background:#fff;border-color:#fff;padding:10px;} .chip-logo img{display:block;max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;} /* Home / Categoria / Catalogo / Producto - fondo oscuro de marca, siempre. Woodmart pone fondo claro en el body via "body:not([class*=wrapper-boxed]) { background-color: var(--wd-main-bgcolor); }", con mas especificidad que nuestro "html, body" de base.css. El body de estas plantillas trae "wrapper-wide" (no "wrapper-boxed"), asi que esa regla de Woodmart gana ahi. Se fuerza el fondo oscuro en las plantillas de marca ya construidas, incluyendo Carrito y Checkout (se quedaban con el fondo claro de Woodmart por defecto - se detecto al ver el carrito vacio en blanco, con el mensaje casi invisible al forzar despues el texto claro). "body.tf-dark-page" cubre cualquier Pagina con una de nuestras plantillas propias (Nosotros, Contacto, Guia de Tallas, y las que se agreguen despues - ver el filtro body_class en inc/setup.php), para que una plantilla nueva no vuelva a quedar con el fondo claro de Woodmart por default, como paso con Guia de Tallas. */ body.home, body.tax-product_cat, body.post-type-archive-product, body.single-product, body.woocommerce-account, body.woocommerce-cart, body.woocommerce-checkout, body.search-results, body.tf-dark-page{background-color:var(--bg) !important;color:var(--ink);} /* Libro de Reclamaciones: el plugin "libro-de-reclamaciones-y-quejas" carga su PROPIA hoja de estilos (libro_admin.css), con "#responsive-form{color:#000 !important}" - un selector por ID con !important. Un ID le gana en especificidad a cualquier cantidad de clases, por eso ninguna regla nuestra basada en ".entry-content ..." podia ganarle, sin importar cuantas clases se le agregaran. El nombre de cada campo (Nombre, Apellido, Celular, etc.) no es un