/* * SECCIONES 2026 * * Base compartida de las paginas institucionales que se pasan al disenio 2026 (Cremas, Arte en * DepiLife, Trabaja con nosotros, Quienes somos, Preguntas frecuentes, Contacto y la home), en la * linea de Emsculpt V2, Zonas V2 y Exion V2: fondo blanco, Inter, verde #759947 con el punto final * de los titulos, cards claras y oscuras redondeadas, y animaciones al hacer scroll. * * Cada pagina la carga desde su index_v2.php junto con public/js/secciones_2026.js, y encima suma * su propio CSS acotado a su prefijo (.cr26- en Cremas, .ct26- en Contacto, .pf26- en Preguntas * frecuentes, .tr26- en Trabaja, .ar26- en Arte, .pr26- en Precios). * * Todo cuelga de .s26 y las variables llevan --s26-: bundle.min.css y header_footer_2026.css usan * nombres genericos (.container, .card, --verde) y asi no se pisan con nada. * * Mejora progresiva: los estados "antes de animar" (invisible, palabras tenues, pestanias ocultas) * cuelgan de html.s26-js, que se pone en el . Si el script no llega a cargar, a los 2,5 s se * saca la clase y la pagina se ve completa, sin animaciones. * * Se carga con views/modulos/secciones_2026_head.php, que arma el ?id= con la fecha del archivo: * no hace falta tocar nada para que los navegadores tomen un cambio. */ .s26 { --s26-verde: #759947; --s26-verde-claro: #A3C47A; --s26-verde-oscuro: #171C08; --s26-gris-bg: #F5F5F3; --s26-gris-2: #ECECE7; --s26-blanco: #FFF3EE; --s26-texto-2: #4E5446; --s26-texto-3: #7C8274; --s26-border: rgba(23, 28, 8, .1); --s26-border-soft: rgba(23, 28, 8, .06); --s26-radio: 28px; --s26-ease: cubic-bezier(.2, .6, .2, 1); position: relative; background: #fff; color: var(--s26-verde-oscuro); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 16px; line-height: 1.55; text-align: left; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Las entradas desde los costados no tienen que generar scroll horizontal. clip y no hidden: hidden convierte al contenedor en uno con scroll y rompe cualquier sticky de adentro. */ overflow-x: clip } @supports not (overflow-x: clip) { .s26 { overflow-x: hidden } } .s26 *, .s26 *::before, .s26 *::after { box-sizing: border-box } .s26 img { max-width: 100%; height: auto } .s26 h1, .s26 h2, .s26 h3, .s26 h4, .s26 p, .s26 ul, .s26 ol, .s26 figure { margin: 0 } .s26 h1, .s26 h2, .s26 h3, .s26 h4 { font-family: inherit; color: inherit; font-weight: 600; text-wrap: balance } .s26 a { color: inherit } /* bundle.min.css dibuja una linea verde en todo a::after (y la anima en :hover). */ .s26 a::after, .s26 li a::after { content: none } /* bundle.min.css (Bootstrap) le pone a todo boton que recibe foco un contorno negro/azul (button:focus), tambien cuando el foco viene del dedo o del mouse. En celular quedaba en el punto activo del slider de la home como un borde negro (30/09). Se saca en ese caso; con teclado cada boton muestra su propio :focus-visible. */ .s26 button:focus:not(:focus-visible) { outline: none } /* ---------- Estructura ---------- */ .s26 .s26-wrap { max-width: 1200px; margin: 0 auto; padding-inline: 24px } .s26 .s26-seccion { padding-block: clamp(56px, 8vw, 112px) } /* ---------- Tipografia ---------- */ .s26 .s26-verde { color: var(--s26-verde) } .s26 .s26-verde-claro { color: var(--s26-verde-claro) } .s26 .s26-titulo { font-size: clamp(32px, 4.4vw, 54px); font-weight: 600; line-height: 1.05; letter-spacing: -.035em } .s26 .s26-lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.65; color: var(--s26-texto-2) } /* ---------- Botones ---------- */ .s26 .s26-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 17px 30px; border: 0; border-radius: 999px; background: var(--s26-verde-oscuro); color: var(--s26-blanco); font: 600 15px/1 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; letter-spacing: .01em; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: 0 16px 30px -16px rgba(23, 28, 8, .6); transition: transform .3s var(--s26-ease), box-shadow .3s var(--s26-ease), background .3s } .s26 .s26-btn:hover, .s26 .s26-btn:focus-visible { color: var(--s26-blanco); text-decoration: none; transform: translateY(-2px); box-shadow: 0 22px 38px -18px rgba(23, 28, 8, .7) } .s26 .s26-btn:focus-visible { outline: 2px solid var(--s26-verde); outline-offset: 3px } .s26 .s26-btn .s26-flecha { display: inline-block; transition: transform .3s var(--s26-ease) } .s26 .s26-btn:hover .s26-flecha { transform: translateX(4px) } .s26 .s26-btn-verde { background: var(--s26-verde); box-shadow: 0 16px 30px -16px rgba(117, 153, 71, .8) } /* ---------- Cards ---------- */ .s26 .s26-card { background: var(--s26-gris-bg); border-radius: var(--s26-radio) } .s26 .s26-card-oscura { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--s26-radio); background: var(--s26-verde-oscuro); color: var(--s26-blanco) } /* El brillo verde de las cards oscuras. Con data-s26-glow sigue al mouse (el script pone --s26-gx/gy). */ .s26 .s26-card-oscura::before { content: ""; position: absolute; z-index: -1; left: var(--s26-gx, 88%); top: var(--s26-gy, 6%); width: 760px; height: 760px; border-radius: 50%; background: radial-gradient(circle, rgba(117, 153, 71, .34) 0%, rgba(117, 153, 71, .12) 38%, rgba(117, 153, 71, 0) 68%); transform: translate(-50%, -50%); transition: left .8s var(--s26-ease), top .8s var(--s26-ease); pointer-events: none } /* ---------- Listas con punto verde ---------- */ .s26 .s26-lista { list-style: none; padding: 0; display: grid; gap: 10px } .s26 .s26-lista li { position: relative; padding-left: 22px } .s26 .s26-lista li::before { content: ""; position: absolute; left: 2px; top: .64em; width: 7px; height: 7px; border-radius: 50%; background: var(--s26-verde) } /* ---------- Pestanias (data-s26-tabs) ---------- Sin JavaScript no hay pestanias: se ven todos los paneles, uno abajo del otro. */ .s26 .s26-tabs-lista { position: relative; display: none; gap: 2px; max-width: 100%; padding: 5px; border-radius: 999px; background: var(--s26-gris-bg); overflow-x: auto; scrollbar-width: none } .s26 .s26-tabs-lista::-webkit-scrollbar { display: none } html.s26-js .s26 .s26-tabs-lista { display: inline-flex } .s26 .s26-tab { position: relative; z-index: 1; flex: none; padding: 11px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--s26-texto-2); font: 500 14px/1 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; cursor: pointer; transition: color .3s } .s26 .s26-tab:hover { color: var(--s26-verde-oscuro) } .s26 .s26-tab[aria-selected="true"] { color: var(--s26-blanco) } .s26 .s26-tab:focus-visible { outline: 2px solid var(--s26-verde); outline-offset: 2px } .s26 .s26-tabs-indicador { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: var(--s26-verde-oscuro); transition: transform .45s var(--s26-ease), width .45s var(--s26-ease) } /* Hasta que el script arma las pestanias: la elegida con su propio fondo y solo el primer panel. */ .s26 [data-s26-tabs]:not(.s26-tabs-listo) .s26-tab[aria-selected="true"] { background: var(--s26-verde-oscuro) } html.s26-js .s26 [data-s26-tabs]:not(.s26-tabs-listo) .s26-panel ~ .s26-panel { display: none } html.s26-js .s26 .s26-panel:not([hidden]) { animation: s26Aparece .45s var(--s26-ease) } .s26 .s26-panel:focus-visible { outline: 2px solid var(--s26-verde); outline-offset: 4px; border-radius: 8px } /* ---------- Acordeon (data-s26-acordeon) ---------- Cada pregunta se abre y se cierra sola, sin cerrar las demas. Sin JavaScript se ven todas las respuestas. La altura se anima con grid-template-rows de 0fr a 1fr: no hace falta medir nada. */ .s26 .s26-acordeon { display: grid; gap: 10px } .s26 .s26-ac-item { border: 1px solid var(--s26-border); border-radius: 20px; background: #fff; transition: background .35s, border-color .35s } .s26 .s26-ac-item:hover { border-color: rgba(23, 28, 8, .2) } .s26 .s26-ac-item.abierto { border-color: transparent; background: var(--s26-gris-bg) } /* pretty y no balance (el de los titulos): en angosto, balance corta las preguntas en dos lineas parejas y cortas. */ .s26 .s26-ac-titulo { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: 0; text-wrap: pretty } .s26 .s26-ac-boton { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; margin: 0; padding: 18px 18px 18px 24px; border: 0; border-radius: 20px; background: none; color: var(--s26-verde-oscuro); font: 500 16px/1.45 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; text-align: left; cursor: pointer; transition: color .3s } .s26 .s26-ac-boton:focus { outline: none } .s26 .s26-ac-boton:focus-visible { outline: 2px solid var(--s26-verde); outline-offset: 2px } .s26 .s26-ac-icono { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--s26-gris-bg); transition: background .35s, transform .45s var(--s26-ease) } .s26 .s26-ac-icono::before, .s26 .s26-ac-icono::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: var(--s26-verde-oscuro); transform: translate(-50%, -50%); transition: background .35s, transform .45s var(--s26-ease) } .s26 .s26-ac-icono::after { transform: translate(-50%, -50%) rotate(90deg) } /* Abierta: la pregunta y el circulo del menos, en el verde del sitio (pedido del usuario, 30/09). */ .s26 .s26-ac-item.abierto .s26-ac-boton { color: var(--s26-verde) } .s26 .s26-ac-item.abierto .s26-ac-icono { background: var(--s26-verde); transform: rotate(180deg) } .s26 .s26-ac-item.abierto .s26-ac-icono::before, .s26 .s26-ac-item.abierto .s26-ac-icono::after { background: #fff } .s26 .s26-ac-item.abierto .s26-ac-icono::after { transform: translate(-50%, -50%) rotate(0deg) } .s26 .s26-ac-cuerpo { min-height: 0; overflow: hidden } .s26 .s26-ac-contenido { padding: 0 24px 22px; font-size: 15px; line-height: 1.7; color: var(--s26-texto-2) } .s26 .s26-ac-contenido p + p { margin-top: 12px } .s26 .s26-ac-contenido strong, .s26 .s26-ac-contenido b { font-weight: 600; color: var(--s26-verde-oscuro) } .s26 .s26-ac-contenido a { color: var(--s26-verde); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere } html.s26-js .s26 .s26-ac-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .45s var(--s26-ease), visibility 0s linear .45s } html.s26-js .s26 .s26-ac-item.abierto .s26-ac-panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .45s var(--s26-ease), visibility 0s } /* ---------- Resaltador (mark.s26-marca) ---------- Una frase clave se pinta con un trazo verde claro cuando llega a la pantalla. No cambia el texto: solo lo marca. Sin JavaScript se ve pintada desde el principio. En las cards oscuras el trazo toma --s26-marca. bundle.min.css (Bootstrap) le da a padding y fondo amarillo: aca se pisa. Si la frase ocupa varios renglones se pinta uno detras del otro, como con un resaltador de verdad (es el box-decoration-break comun, "slice"): para pasajes largos conviene alargar --s26-marca-dur. */ .s26 mark.s26-marca { padding: 0 .06em; margin: 0 -.06em; border-radius: 3px; color: inherit; background: linear-gradient(var(--s26-marca, rgba(163, 196, 122, .3)), var(--s26-marca, rgba(163, 196, 122, .3))) 0 90% / 100% .42em no-repeat } html.s26-js .s26 mark.s26-marca { background-size: 0 .42em; /* Espera un poco mas que su parrafo: se pinta cuando el texto ya se lee. */ transition: background-size var(--s26-marca-dur, 1.2s) var(--s26-ease) calc(var(--s26-retraso, 0s) + .45s) } html.s26-js .s26 mark.s26-marca.is-in { background-size: 100% .42em } .s26 .s26-card-oscura { --s26-marca: rgba(163, 196, 122, .24) } /* Contadores (data-s26-contar): cifras del mismo ancho, asi el numero no baila mientras sube. */ .s26 [data-s26-contar] { font-variant-numeric: tabular-nums } /* ---------- Animaciones ---------- */ /* Aparecer al entrar en pantalla. Valores: "" sube, "izq"/"der" entra de costado, "zoom" crece. Con style="--s26-retraso:.1s" se escalonan. */ html.s26-js .s26 [data-s26-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .9s var(--s26-ease), transform .9s var(--s26-ease); transition-delay: var(--s26-retraso, 0s) } html.s26-js .s26 [data-s26-reveal="izq"] { transform: translate3d(-40px, 0, 0) } html.s26-js .s26 [data-s26-reveal="der"] { transform: translate3d(40px, 0, 0) } html.s26-js .s26 [data-s26-reveal="zoom"] { transform: scale(.95) } html.s26-js .s26 [data-s26-reveal].is-in { opacity: 1; transform: none } /* "texto": para parrafos. Sube apenas (14 px). Sin desenfoque a proposito: blur en parrafos largos es de lo mas caro de dibujar y la pagina se sentia trabada (30/09). */ html.s26-js .s26 [data-s26-reveal="texto"] { transform: translate3d(0, 14px, 0) } /* Palabras (data-s26-palabras): el texto sube palabra por palabra al entrar en pantalla. El script pone cada palabra en una mascara (.s26-pal) con su numero (--s26-pal-i); la pausa entre palabras es --s26-pal-paso y la espera antes de la primera, --s26-retraso. La mascara tiene aire arriba y abajo para no cortar tildes ni la "p", y lo devuelve con margen negativo: no cambia el renglon. */ .s26 .s26-pal { display: inline-block; overflow: hidden; vertical-align: top; padding: .16em .03em .12em; margin: -.16em -.03em -.12em } .s26 .s26-pal > span { display: inline-block } html.s26-js .s26 [data-s26-palabras] .s26-pal > span { transform: translate3d(0, 115%, 0); transition: transform .8s var(--s26-ease); transition-delay: calc(var(--s26-retraso, 0s) + var(--s26-pal-i, 0) * var(--s26-pal-paso, .035s)) } html.s26-js .s26 [data-s26-palabras].is-in .s26-pal > span { transform: none } /* Manifiesto palabra por palabra (las .s26-palabra las crea el script). */ html.s26-js .s26 [data-s26-manifiesto] .s26-palabra { opacity: .16; transition: opacity .35s ease } html.s26-js .s26 [data-s26-manifiesto] .s26-palabra.lit { opacity: 1 } /* Inclinacion siguiendo al mouse: el script pone --s26-rx/ry. */ .s26 [data-s26-tilt] { transform: perspective(1000px) rotateX(var(--s26-rx, 0deg)) rotateY(var(--s26-ry, 0deg)); transition: transform .6s var(--s26-ease) } /* Flotar suave, para productos o equipos sueltos. */ .s26 .s26-flota { animation: s26Flota 6s ease-in-out infinite } @keyframes s26Flota { 0%, 100% { transform: translate3d(0, 0, 0) } 50% { transform: translate3d(0, -10px, 0) } } @keyframes s26Aparece { from { opacity: 0; transform: translate3d(0, 8px, 0) } to { opacity: 1; transform: none } } /* Barra de avance de la pagina, arriba de todo. Va fuera de .s26: es fixed. */ .s26-progreso { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 200; pointer-events: none; background: linear-gradient(90deg, #A3C47A 0%, #759947 100%); transform: scaleX(0); transform-origin: 0 50% } @media (prefers-reduced-motion: reduce) { html.s26-js .s26 [data-s26-reveal] { opacity: 1; transform: none; transition: none } html.s26-js .s26 [data-s26-palabras] .s26-pal > span { transform: none; transition: none } html.s26-js .s26 [data-s26-manifiesto] .s26-palabra { opacity: 1 } .s26 .s26-flota, html.s26-js .s26 .s26-panel:not([hidden]) { animation: none } .s26 [data-s26-tilt], .s26 .s26-card-oscura::before { transition: none } html.s26-js .s26 mark.s26-marca { background-size: 100% .42em; transition: none } html.s26-js .s26 .s26-ac-panel, .s26 .s26-ac-icono, .s26 .s26-ac-icono::before, .s26 .s26-ac-icono::after { transition: none } .s26-progreso { display: none } } @media (max-width: 760px) { .s26 .s26-wrap { padding-inline: 18px } .s26 .s26-btn { padding: 16px 26px } }