por columna
(son hermanos en el DOM aunque visualmente queden uno al lado del
otro), así que el combinador de hermano adyacente lo tomaba también
y el 2º párrafo (columna derecha) quedaba corrido hacia abajo. Se
anula explícitamente para dejar ambas columnas alineadas por su top
(bug reportado por Alan). */
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.dos-columnas p + p { margin-top: 0; }
/* Construcción con paneles SIP — foto a la derecha (pedido de Alan). En
reposo: efecto ken burns continuo (zoom/paneo lento) y desaturada. Al
pasar el mouse: la animación se detiene, la imagen vuelve a su
posición/escala inicial (mismo mecanismo de siempre: se quita la
animation y la transition la lleva de vuelta suavemente) y recupera
el color — mismo criterio que .linea-card__media img en cassaforma.com,
invertido a pedido de Alan. */
/* padding-bottom reducido a la mitad (42px, antes 84px): acerca esta
sección a "Paneles CassaSIP" (pedido de Alan); el resto de los
paddings de .section quedan igual. */
#sobre-sip { padding-bottom: 42px; }
.sobre-sip__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: start; }
/* Párrafo "Incorporamos una nueva línea de producción..." destacado en
negrita y color naranja del logo (pedido de Alan) */
.sobre-sip__highlight { font-weight: var(--fw-xbold); color: var(--c-accent); }
.sobre-sip__media { position: relative; overflow: hidden; aspect-ratio: 4/5; }
.sobre-sip__img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
animation: sobreSipKenBurns 16s ease-in-out infinite alternate;
transition: filter .45s ease, transform .6s ease;
}
@keyframes sobreSipKenBurns {
0% { transform: scale(1) translate(0, 0); }
100% { transform: scale(1.14) translate(-2.5%, 2%); }
}
.sobre-sip__media:hover .sobre-sip__img,
.sobre-sip__media:focus-within .sobre-sip__img {
filter: grayscale(0);
animation: none;
transform: scale(1) translate(0, 0);
}
@media (max-width: 1080px) {
.sobre-sip__grid { grid-template-columns: 1fr; gap: 32px; }
.sobre-sip__media { order: -1; max-width: 460px; margin-inline: auto; aspect-ratio: 4/3; }
}
/* Tipos de panel */
.paneles__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.panel-card {
/* sin recuadro: panel, título y botón flotan directamente sobre el fondo
de la sección (pedido de Alan) */
border: none; box-shadow: none; background: transparent; display: flex; flex-direction: column;
/* entrada tipo swipe (derecha → izquierda), escalonada vía JS
(.is-visible); velocidad aumentada otra vez (antes .5s/card cada 1000ms,
ahora .35s/card cada 220ms — pedido de Alan) */
opacity: 0; transform: translateX(70px); transition: opacity .35s ease, transform .35s ease;
}
.panel-card.is-visible { opacity: 1; transform: translateX(0); }
/* Render con fondo transparente: se muestra completo (sin recortar), centrado,
con un drop-shadow muy leve para dar un efecto 3D sutil (pedido de Alan).
max-height ampliado (antes 210px) para que la imagen use todo el ancho
disponible de la card en vez de quedar acotada por la altura: efecto neto,
~120% más grande (pedido de Alan). */
.panel-card__media { min-height: 465px; padding: 10px 8px 6px; display: flex; align-items: center; justify-content: center; }
/* El render es también un link de descarga de su ficha técnica (mismo PDF
que el botón); al pasar el mouse, zoom leve sobre la imagen (pedido de
Alan). */
.panel-card__media a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.panel-card__media img {
width: 100%; max-width: 100%; height: auto; max-height: 465px; object-fit: contain;
filter: drop-shadow(0 6px 10px rgba(22, 43, 62, .16));
transition: transform .35s ease;
}
.panel-card__media a:hover img,
.panel-card__media a:focus-visible img {
transform: scale(1.06);
}
.panel-card__body { padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.panel-card__name { font-size: 15px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; }
/* Botón "Descargar ficha" — mismo "tipo" que .sc-panel__cta en
sistema-constructivo.css (cassaforma.com): .btn.btn--navy de base,
ancho completo y compacto. Usar esta combinación cada vez que se
agregue un botón de descarga de ficha en el sitio (pedido de Alan). */
.panel-card__cta { margin-top: auto; width: 100%; height: 40px; font-size: 14.7px; padding: 0 12px; }
/* Adaptables a cada proyecto — texto en 2 columnas: cartera de proyectos a la
izquierda, y el párrafo de la tecnología OSB destacado en un recuadro con
fondo blanco y en negrita, a la derecha (pedido de Alan). */
.adaptables__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.adaptables__highlight {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-med); /* antes fw-xbold: menos peso (pedido de Alan) */
padding: 22px 26px; border-radius: 4px; box-shadow: var(--card-shadow);
}
/* Adaptables a cada proyecto — foto + tabla de resistencias (pedido de Alan).
margin-top +20% (antes 46px) para separar más el render del texto de
arriba. */
.adaptables__grid { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: center; margin-top: 55px; }
/* Render con fondo transparente: se muestra completo, sin recortar ni caja
fija, con un drop-shadow muy leve (mismo criterio que .panel-card__media).
Se desplaza hacia la izquierda hasta sobresalir un 10% del ancho de
contenido (pedido de Alan): crece hacia la izquierda, ancla derecha
sin cambios (mismo criterio que .panel-corte__sandwich). */
.adaptables__media {
display: flex; align-items: center; justify-content: center;
margin-left: calc(-1 * var(--w-content) * 0.10);
width: calc(100% + var(--w-content) * 0.10);
}
.adaptables__media img {
width: 100%; height: auto; max-width: 100%;
filter: drop-shadow(0 8px 14px rgba(22, 43, 62, .16));
}
/* Tabla de especificaciones: misma paleta navy/blanco y tipografía Heebo
del resto del sitio. Columna izquierda (propiedad) en navy —el mismo azul
del botón "Descargar ficha"— con texto blanco, columna derecha (valor)
alterna blanco/gris banda. Ninguna fuente en negrita (pedido de Alan). Al
pasar el mouse por una fila, se resalta en navy oscuro (izquierda) y en la
banda gris (derecha) para que se lea qué fila se está mirando. */
.specs-table-wrap { border: var(--border); border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table th, .specs-table td { padding: 15px 18px; font-size: 14.5px; line-height: 1.3; transition: background-color .2s ease, color .2s ease; }
.specs-table th {
background: var(--c-navy); color: var(--c-white);
font-weight: var(--fw-reg); text-align: left; width: 60%;
}
.specs-table td {
background: var(--c-white); color: var(--c-navy-900);
font-weight: var(--fw-light); text-align: center;
}
.specs-table tr:nth-child(even) td { background: var(--c-band); }
.specs-table tr:not(:last-child) th,
.specs-table tr:not(:last-child) td { border-bottom: 1px solid rgba(255,255,255,.08); }
.specs-table tr:hover th { background: var(--c-navy-900); }
.specs-table tr:hover td { background: var(--c-band); color: var(--c-navy); }
/* Especificaciones técnicas (debajo de "Tipos de panel") — mismo criterio
de diseño que la tabla de Adaptables: acento navy, sin negritas. Tres
grupos (Paneles / Placas / Accesorios) con una etiqueta lateral vertical,
cada uno con sus sub-tablas de medidas (pedido de Alan, ref. cassasip.com). */
.spec-groups { display: flex; flex-direction: column; gap: 34px; margin-top: 92px; } /* separación de los productos ×2 (antes 46px), pedido de Alan */
.spec-group { display: flex; align-items: stretch; gap: 22px; }
.spec-group__label {
flex-shrink: 0; width: 46px; border-radius: 4px;
background: var(--c-accent); color: var(--c-white); /* naranja del logo CassaSIP + texto blanco (pedido de Alan) */
display: flex; align-items: center; justify-content: center;
writing-mode: vertical-rl; transform: rotate(180deg);
font-size: 15.6px; /* 13px +20% (pedido de Alan) */
font-weight: var(--fw-reg); text-transform: uppercase; letter-spacing: .1em;
}
.spec-group__tables { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.spec-block__title { font-size: 14.5px; font-weight: var(--fw-reg); color: var(--c-navy-900); margin-bottom: 10px; }
.spec-block__title .spec-block__note { font-weight: var(--fw-light); color: var(--c-navy); font-size: 13px; }
.spec-block .specs-table-wrap { overflow-x: auto; }
.specs-table--grid { min-width: 560px; }
.specs-table--grid th, .specs-table--grid td { padding: 12px 14px; font-size: 13.5px; white-space: nowrap; }
.specs-table--grid thead th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: center;
}
.specs-table--grid thead th:first-child { background: var(--c-navy-900); }
.specs-table--grid tbody th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: left; width: auto;
}
.specs-table--grid tbody td {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-light); text-align: center;
}
.specs-table--grid tbody tr:nth-child(even) td { background: var(--c-band); }
.specs-table--grid tbody tr:hover th { background: var(--c-navy-900); }
.specs-table--grid tbody tr:hover td { background: var(--c-band); color: var(--c-navy); }
@media (max-width: 690px) {
.spec-group { flex-direction: column; gap: 10px; }
.spec-group__label {
width: 100%; writing-mode: horizontal-tb; transform: none; padding: 8px; height: auto;
}
}
@media (max-width: 1080px) {
.adaptables__intro { grid-template-columns: 1fr; gap: 20px; }
.adaptables__grid { grid-template-columns: 1fr; gap: 28px; }
/* en una sola columna el desborde a la izquierda no tiene sentido
(no queda margen de página del que sobresalir): se desactiva */
.adaptables__media { margin-left: 0; width: 100%; max-width: 460px; margin-inline: auto; }
.specs-table-wrap { max-width: 460px; margin-inline: auto; width: 100%; }
}
/* ------------------------------------------------------------
PERFILES — Contanos qué necesitás (pedido de Ceci vía Alan).
3 cards con foto en blanco y negro tapada por una "cortina" navy con
textura diagonal sutil; al hacer hover la cortina se corre hacia la
derecha con clip-path (no se desvanece, se desliza), la foto recupera
color + zoom leve, aparece una línea de acento naranja creciendo bajo
el título y la flecha se desplaza. Entrada: swipe hacia arriba
escalonado al entrar en viewport (ver "Perfiles CassaSIP" en
js/script.js), misma familia de efecto que .panel-card pero vertical
en vez de lateral, para variar. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.perfiles-sip__grid {
/* mismo ajuste que .familia-grid: .section__head no trae separación
propia acá (pedido de Alan: se había achicado respecto al prototipo). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.perfil-sip-card {
opacity: 0;
transform: translateY(46px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.perfil-sip-card.is-visible { opacity: 1; transform: translateY(0); }
.perfil-sip-card__link {
position: relative;
display: block;
border: var(--border);
box-shadow: var(--card-shadow);
transition: box-shadow var(--t-base), transform var(--t-base);
}
.perfil-sip-card__link:hover,
.perfil-sip-card__link:focus-visible {
box-shadow: 0 8px 30px rgba(22, 43, 62, .16);
transform: translateY(-4px);
}
.perfil-sip-card__media {
position: relative;
height: 300px;
overflow: hidden;
}
.perfil-sip-card__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.05);
transform: scale(1.03);
transition: transform .6s ease, filter .6s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__img,
.perfil-sip-card__link:focus-visible .perfil-sip-card__img {
filter: grayscale(0) contrast(1);
transform: scale(1.1);
}
.perfil-sip-card__curtain {
position: absolute; inset: 0;
background:
repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px),
linear-gradient(150deg, var(--c-navy-900) 0%, var(--c-navy) 100%);
clip-path: inset(0 0 0 0);
transition: clip-path .55s cubic-bezier(.65,0,.35,1);
}
.perfil-sip-card__link:hover .perfil-sip-card__curtain,
.perfil-sip-card__link:focus-visible .perfil-sip-card__curtain {
clip-path: inset(0 0 0 100%);
}
.perfil-sip-card__num {
position: absolute; top: 18px; left: 20px;
font-size: 13px; font-weight: var(--fw-xbold);
color: rgba(255,255,255,.55);
letter-spacing: .06em;
transition: opacity .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__num,
.perfil-sip-card__link:focus-visible .perfil-sip-card__num { opacity: 0; }
.perfil-sip-card__body {
position: relative;
background: var(--c-white);
padding: 22px 22px 26px;
}
.perfil-sip-card__accent {
display: block;
height: 3px;
width: 0%;
background: var(--c-accent);
transition: width .45s ease;
margin-bottom: 14px;
}
.perfil-sip-card__link:hover .perfil-sip-card__accent,
.perfil-sip-card__link:focus-visible .perfil-sip-card__accent { width: 100%; }
.perfil-sip-card__label {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
font-size: 15px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .02em;
color: var(--c-navy-900);
}
.perfil-sip-card__label svg {
width: 18px; height: 18px; flex-shrink: 0;
fill: none; stroke: var(--c-navy-900); stroke-width: 2;
transform: translateX(0);
transition: transform .35s ease, stroke .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__label svg,
.perfil-sip-card__link:focus-visible .perfil-sip-card__label svg {
transform: translateX(6px);
stroke: var(--c-accent);
}
.perfil-sip-card__desc {
margin-top: 8px;
font-size: 14.7px; line-height: 1.55; font-weight: var(--fw-light);
color: var(--c-gray);
}
@media (max-width: 1080px) {
.perfiles-sip__grid { grid-template-columns: 1fr; gap: 20px; }
.perfil-sip-card { transform: translateY(28px); }
.perfil-sip-card__media { height: 260px; }
}
/* ------------------------------------------------------------
TU PROYECTO — CassaSIP (pedido de Alan).
1 card "hero" a ancho completo (mitad de alto que una card de
grilla) + grilla 2x2 con las 4 restantes. Título siempre
visible sobre la foto; párrafo + CTA revelados al hover con
swipe desde la izquierda. Hover "tecla de piano" con zoom IN:
toda la card crece y el fondo de color sube al mismo tiempo
(--bg-delay: 0s); el texto arranca cuando ese swipe del fondo
va por la mitad (--text-delay: .15s, 50% de --bg-dur), para que
no se sienta "atrasado". Mismo mecanismo de contra-escala que
Familia Cassaforma para que el texto no crezca junto con la
card.
------------------------------------------------------------ */
.tuproyecto-grid {
margin-top: 46px;
list-style: none; padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
--press-scale: 1.035;
--press-dur: .3s;
--bg-dur: .3s;
--bg-delay: 0s;
--text-dur: .3s;
--text-delay: .15s; /* arranca cuando el swipe del fondo va por la mitad (50% de .3s) */
}
.tuproyecto-card--hero { grid-column: 1 / -1; }
.tuproyecto-card { opacity: 0; transform: translateY(40px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1); }
.tuproyecto-card.is-visible { opacity: 1; transform: translateY(0); }
.tuproyecto-card__link {
position: relative; display: block;
aspect-ratio: 2.1573 / 1;
background: var(--c-white); border: 1px solid var(--c-line); box-shadow: var(--card-shadow);
overflow: hidden; transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* Card hero: mismo ancho, la mitad del alto proporcional (el doble de "achatada") */
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 4.3147 / 1; }
.tuproyecto-card__link:hover, .tuproyecto-card__link:focus-visible {
transform: scale(var(--press-scale));
box-shadow: 0 14px 34px rgba(22, 43, 62, .28);
z-index: 5;
}
.tuproyecto-card__media { position: absolute; inset: 0; }
.tuproyecto-card__media img {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: grayscale(1); transition: filter .5s ease;
}
.tuproyecto-card__link:hover .tuproyecto-card__media img,
.tuproyecto-card__link:focus-visible .tuproyecto-card__media img { filter: grayscale(0); }
/* Scrim permanente para que el título siempre se lea */
.tuproyecto-card__link::after {
content: ""; position: absolute; z-index: 1; inset: 0;
background: linear-gradient(160deg, rgba(22,43,62,.55) 0%, rgba(22,43,62,.22) 45%, rgba(22,43,62,.05) 70%);
}
.tuproyecto-card__title {
position: relative; z-index: 2; display: block;
padding: 30px 0 0 34px;
font-size: 25.6px; line-height: 1.2; font-weight: var(--fw-light); color: var(--c-white);
}
/* Filete arriba en el naranja del logo CassaSIP, para resaltar cada card */
.tuproyecto-card__link::before {
content: ""; position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 2px;
background: var(--c-accent);
}
.tuproyecto-card__panel-bg {
position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__panel-bg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__panel-bg { transform: translateY(0); }
.tuproyecto-card__text {
position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 22px 34px 26px;
max-width: 560px;
color: var(--c-white); opacity: 0;
transform: translateX(-26px) scale(1); transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__text,
.tuproyecto-card__link:focus-visible .tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.tuproyecto-card__claim { display: block; font-size: 19.2px; line-height: 1.5; font-weight: var(--fw-light); color: var(--c-white); }
.tuproyecto-card__cta {
display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
font-size: 16.8px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; color: var(--c-white);
}
.tuproyecto-card__cta svg { width: 16.8px; height: 16.8px; fill: none; stroke: var(--c-white); stroke-width: 2.4; transform: translateX(0); transition: transform .3s ease; }
.tuproyecto-card__link:hover .tuproyecto-card__cta svg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__cta svg { transform: translateX(4px); }
@media (max-width: 900px) {
.tuproyecto-grid { grid-template-columns: 1fr; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 2.1573 / 1; }
}
@media (max-width: 690px) {
.tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card__title { font-size: 19.2px; padding: 20px 0 0 20px; }
.tuproyecto-card__text { padding: 16px 20px 20px; }
/* En touch no hay hover real: panel y CTA quedan siempre visibles,
igual que en Familia Cassaforma (el párrafo se oculta para que
no choque con el título en cards bajas). */
.tuproyecto-card__panel-bg { transform: translateY(0); transition: none; }
.tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
}
.tuproyecto-card__claim { display: none; }
.tuproyecto-card__cta { margin-top: 0; }
}
/* Barra "beneficios clave" — mismas medidas que .sc-ahorros de
cassaforma.com (sistema-constructivo.css, bloque GRANDES AHORROS):
3 columnas centradas, ícono circular de 71px (ya viene con su color
en el propio .svg), separador vertical negro entre columnas. */
.ahorros { padding: 70px 0 62px; text-align: center; } /* +10% arriba y abajo (antes 64px/56px), pedido de Alan */
.ahorros__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.ahorro { display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 24px; }
.ahorro + .ahorro::before {
content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
width: 2px; background: var(--c-black);
}
.ahorro__icon { display: block; width: 71px; height: 71px; margin: 0 auto 20px; }
.ahorro__label { font-size: 23px; line-height: 1.3; font-weight: var(--fw-light); color: var(--c-navy); }
@media (max-width: 690px) {
.ahorros__grid { grid-template-columns: 1fr; row-gap: 32px; }
.ahorro + .ahorro::before { display: none; }
.ahorro__label { font-size: 19px; }
}
/* Beneficios (3 pilares) */
/* Beneficios de la construcción SIP — 2 columnas: pilares apilados con
viñeta numerada + logos de certificaciones a la izquierda, imagen a la
derecha (pedido de Alan). Separación entre columnas ×2 (antes 60px).
La imagen de la derecha no aporta su alto natural al cálculo de la fila
(queda position:absolute dentro de .beneficios__media, que por eso no
tiene alto propio): así la altura de la fila la fija SOLO la columna
izquierda (pilares + logos), y la imagen se recorta arriba/abajo con
object-fit:cover para igualar siempre esa altura — salvo en mobile,
donde se desactiva (ver media query). */
.beneficios__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; align-items: stretch; }
.beneficios__left { display: flex; flex-direction: column; }
.pilares__grid { display: flex; flex-direction: column; gap: 32px; }
.pilar__head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.pilar__num {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
background: var(--c-navy); color: var(--c-white);
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: var(--fw-xbold);
}
.pilar__title { font-size: 19px; font-weight: var(--fw-xbold); color: var(--c-navy-900); text-transform: uppercase; margin: 0; }
.pilar__text { margin-top: 0; font-size: 15.5px; line-height: 1.6; }
/* Logos de certificaciones — una sola imagen ya compuesta con los 6 logos
(2 filas x 3 columnas), mismo ancho que los párrafos de arriba (pedido
de Alan: usar la imagen completa en vez de 6 separadas). */
.beneficios__certs {
margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--c-line);
}
.beneficios__certs img { display: block; width: 100%; height: auto; }
.beneficios__media { position: relative; overflow: hidden; border-radius: 4px; } /* recorta el zoom del ken burns dentro de su propio cuadro (mismo criterio que .sobre-sip__media) */
.beneficios__media img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
animation: sobreSipKenBurns 18s ease-in-out infinite alternate; /* mismo ken burns que la foto de "Construcción con paneles SIP" */
}
/* ¿Por qué construir con SIP? — imagen del despiece a la izquierda, lista
de items con bullets a la derecha. Tipografía tomada de la lista de capas
de cassaforma.com (sistema-constructivo.css: .sc-panellosa__label/__item):
Heebo Light, navy, bullet "•" y divisor fino bajo cada renglón. */
.porque-sip { display: grid; grid-template-columns: minmax(300px, 460px) 1fr; gap: 60px; align-items: center; margin-top: 46px; }
.porque-sip__media img { width: 100%; display: block; }
.porque-sip__list {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto);
column-gap: 48px;
}
.porque-sip__list li {
padding: 14px 0;
border-bottom: 1px solid rgba(22, 43, 62, .15);
font-size: 19px; letter-spacing: .02em;
font-weight: var(--fw-light); color: var(--c-navy);
}
.porque-sip__list li::before { content: "\2022 "; }
@media (max-width: 1080px) {
.porque-sip { grid-template-columns: 1fr; }
.porque-sip__media { max-width: 460px; margin-inline: auto; }
}
@media (max-width: 690px) {
.porque-sip__list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
}
/* Logística — texto (Logística + Almacenamiento apilados) a la izquierda,
foto en blanco y negro con ken burns a la derecha (pedido de Alan). La
imagen no aporta su alto natural al cálculo de la fila (position:absolute
dentro de .logistica__media, sin alto propio): así la altura de la fila
la fija SOLO la columna de texto, y la foto se recorta con object-fit:cover
para igualar siempre esa altura — mismo criterio que .beneficios__media. */
.logistica__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: stretch; }
.logistica__text { display: flex; flex-direction: column; gap: 32px; }
.logistica__item h3 { font-size: 19px; font-weight: var(--fw-xbold); text-transform: uppercase; color: var(--c-navy-900); margin-bottom: 12px; }
.logistica__media { position: relative; overflow: hidden; border-radius: 4px; }
.logistica__img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
transition: filter .45s ease;
/* Es una sola foto fija (no un carrusel): un zoom-in ÚNICO de 10s que
termina y se queda ahí (forwards, sin infinite/alternate) — solo
"ida", nunca vuelve para atrás y nunca vuelve a saltar (pedido de
Alan). */
animation: destacadoKenBurns 10s ease-out forwards;
}
.logistica__media:hover .logistica__img { filter: grayscale(0); }
/* FAQ */
.faq { max-width: 880px; }
.faq__item { border-bottom: var(--border); }
.faq__item summary {
cursor: pointer; list-style: none; padding: 20px 0;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
font-size: 16.5px; font-weight: var(--fw-med); color: var(--c-navy-900);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
content: "+"; font-size: 22px; font-weight: var(--fw-light); color: var(--c-navy); flex-shrink: 0;
}
.faq__item[open] summary::after { content: "–"; }
.faq__body { padding: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: var(--c-gray); }
.faq__body ul { list-style: disc; padding-left: 20px; margin-top: 10px; }
.faq__body li { margin-bottom: 6px; }
.faq__body p + p { margin-top: 12px; }
/* Proceso constructivo — solo título + video a todo el ancho del
contenido (pedido de Alan; antes había una lista de pasos numerados). */
.proceso__video { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.proceso__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Capacitación */
.capacitacion { text-align: center; }
.capacitacion h2 { max-width: 620px; margin-inline: auto; }
.capacitacion .btn { margin-top: 30px; }
/* Presupuesto / form */
.presupuesto__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.form__field { margin-bottom: 16px; }
.form__label { display: block; font-size: 14px; font-weight: var(--fw-med); margin-bottom: 7px; }
.form__input, .form__select {
display: block; width: 100%; height: 46px; padding: 0 14px;
border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-navy-900);
font-family: var(--ff); font-size: 15px;
}
.form__input:focus, .form__select:focus { border-color: var(--c-navy); outline: none; }
.form__submit { margin-top: 6px; width: 100%; }
/* ------------------------------------------------------------
FOOTER
------------------------------------------------------------ */
.footer { background: var(--c-navy-900); color: var(--c-white); padding-block: 64px 32px; }
.footer__top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.footer__brand img { height: 40px; }
.footer__brand p { margin-top: 18px; font-size: 14px; color: rgba(255,255,255,.65); max-width: 260px; }
.footer__col h3 { font-size: 13px; font-weight: var(--fw-xbold); letter-spacing: .06em; text-transform: uppercase; color: var(--c-white); margin-bottom: 16px; }
.footer__col ul li { margin-bottom: 10px; }
.footer__col a { font-size: 14px; color: rgba(255,255,255,.75); }
.footer__col a:hover { color: var(--c-white); }
.footer__bottom {
margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15);
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
font-size: 13.5px; color: rgba(255,255,255,.6);
}
.footer__social { display: flex; gap: 14px; }
.footer__social svg { width: 16px; height: 16px; fill: rgba(255,255,255,.75); }
.footer__social a:hover svg { fill: var(--c-white); }
.footer__scrolltop { font-size: 13px; color: rgba(255,255,255,.6); }
.footer__scrolltop:hover { color: var(--c-white); }
/* ------------------------------------------------------------
RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 1169px) {
:root {
--fs-hero: 42px; --lh-hero: 46px;
--fs-hero-lead: 23px; --lh-hero-lead: 28px;
--h-hero: 660px;
}
.site-nav { gap: 15px; }
.site-nav__link { font-size: 13px; }
}
@media (max-width: 1080px) {
.site-nav { display: none; }
.destacado, .dos-columnas, .logistica__grid, .presupuesto__grid { grid-template-columns: 1fr; }
.paneles__grid { grid-template-columns: repeat(3, 1fr); }
/* En mobile se desactiva el recorte a la altura de la columna izquierda
(pedido de Alan): la imagen vuelve a su aspecto natural, en flujo. */
.beneficios__grid { grid-template-columns: 1fr; gap: 28px; align-items: normal; }
.beneficios__media img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
/* Mismo criterio que .beneficios__media: en mobile la foto de logística
vuelve a su aspecto natural, en flujo, debajo del texto. */
.logistica__grid { gap: 28px; }
.logistica__img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
.footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
:root {
--fs-hero: 34px; --lh-hero: 38px;
--fs-hero-lead: 19px; --lh-hero-lead: 26px;
--h-header: 84px; --h-hero: 560px;
}
.site-header__logo img { height: 40px; }
.hero .rule--light { width: 200px; margin: 24px 0 22px; }
}
@media (max-width: 690px) {
.site-topbar { display: none; }
:root {
--fs-hero: 27px; --lh-hero: 31px;
--fs-hero-lead: 16px; --lh-hero-lead: 24px;
--h-header: 70px; --h-hero: 520px;
}
.site-header__logo img { height: 34px; }
.hero .rule--light { width: 140px; margin: 20px 0 18px; }
.section { padding-block: 56px; }
.paneles__grid { grid-template-columns: 1fr 1fr; }
.footer__top { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------
FAMILIA CASSAFORMA — Conocé el resto de nuestras líneas
(pedido de Alan). Grilla de 5 cards (las otras líneas Cassaforma;
CassaSIP es esta misma web, no se lista a sí misma), cada una con
su color de marca en --linea-accent. Efecto "tecla de piano" v2:
TODA la card se hunde junta al pasar el mouse (borde, sombra,
logo, foto y fondo de color son todos descendientes del mismo
.familia-card__link escalado), así el degradé de color queda
siempre alineado con el borde mientras se achica. El texto es la
ÚNICA capa que NO se achica: usa un contra-escalado
(scale(calc(1 / var(--press-scale)))) que cancela el de su padre,
y entra con swipe desde la izquierda + fade-in medio segundo
después de que arranca el fondo de color. La foto NO hace zoom en
el hover (chocaba visualmente con el "hundido", pedido de Alan):
solo recupera color. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.familia-grid {
/* .section__head no trae separación propia (solo la agrega vía
".section__head + .section__grid", que esta grilla no usa) — se
fija acá a mano, mismo valor que esa regla general, para que quede
igual que en el prototipo (pedido de Alan: se había achicado). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
/* Timings del hover — un 50% más rápidos que la v1 (pedido de Alan). */
--press-scale: .965;
--press-dur: .167s;
--bg-dur: .3s;
--bg-delay: var(--press-dur);
--text-dur: .3s;
--text-delay: .5s;
}
.familia-card {
opacity: 0;
transform: translateY(40px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.familia-card.is-visible { opacity: 1; transform: translateY(0); }
.familia-card__link {
position: relative;
display: block;
height: 470px;
background: var(--c-white);
border: 1px solid var(--c-line);
box-shadow: var(--card-shadow);
overflow: hidden;
transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* "Tecla de piano": se achica y baja un poco, sombra se cierra en vez
de crecer (efecto de hundirse contra la superficie). */
.familia-card__link:hover,
.familia-card__link:focus-visible {
transform: scale(var(--press-scale)) translateY(3px);
box-shadow: 0 2px 10px rgba(22, 43, 62, .22);
}
.familia-card__logo {
position: relative;
z-index: 2;
height: 26px;
width: auto;
max-width: 74%;
margin: 26px auto 0;
object-fit: contain;
}
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 32px; margin-top: 23px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 31px; margin-top: 23px; }
.familia-card__media {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 72%;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
}
.familia-card__media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: bottom center;
filter: grayscale(1);
transition: filter .5s ease;
}
.familia-card__link[data-line="cassadeco"] .familia-card__media img { object-position: center bottom; }
/* Sin zoom en la foto: solo recupera color (pedido de Alan). */
.familia-card__link:hover .familia-card__media img,
.familia-card__link:focus-visible .familia-card__media img {
filter: grayscale(0);
}
/* Fondo de color: degradé del color de marca hacia transparente, 3/4
de la altura de la card. Hijo directo de .familia-card__link (no un
hermano aparte): se achica JUNTO con el resto de la card, así sus
márgenes quedan siempre alineados con el borde (pedido de Alan).
Entra con swipe de abajo hacia arriba apenas termina el "press". */
.familia-card__panel-bg {
position: absolute;
z-index: 2;
left: 0; right: 0; bottom: 0;
height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.familia-card__link:hover .familia-card__panel-bg,
.familia-card__link:focus-visible .familia-card__panel-bg {
transform: translateY(0);
}
/* Texto: la ÚNICA capa que NO se achica. Sigue siendo hijo de
.familia-card__link, pero en hover se le aplica un contra-escalado
(1 / var(--press-scale)) que cancela el de la card y lo deja
siempre a tamaño real (pedido de Alan). Entra con swipe desde la
izquierda + fade-in, medio segundo después de que arrancó el fondo
de color. */
.familia-card__text {
position: absolute;
z-index: 3;
left: 0; right: 0; bottom: 0;
padding: 18px 20px 20px;
color: var(--c-white);
opacity: 0;
transform: translateX(-26px) scale(1);
transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.familia-card__link:hover .familia-card__text,
.familia-card__link:focus-visible .familia-card__text {
opacity: 1;
transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.familia-card__claim {
display: block;
font-size: 14.6px; line-height: 1.45; font-weight: var(--fw-light);
color: var(--c-white);
}
.familia-card__cta {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 10px;
font-size: 13.8px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .03em;
color: var(--c-white);
}
.familia-card__cta svg {
width: 13px; height: 13px;
fill: none; stroke: var(--c-white); stroke-width: 2.4;
transform: translateX(0);
transition: transform .3s ease;
}
.familia-card__link:hover .familia-card__cta svg,
.familia-card__link:focus-visible .familia-card__cta svg {
transform: translateX(4px);
}
/* Filete de color arriba de la card: siempre visible, identifica la
marca aun antes del hover. Al ser ::before de .familia-card__link
también se hunde con toda la card (pedido de Alan). */
.familia-card__link::before {
content: "";
position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 4px;
background: var(--linea-accent, var(--c-navy-900));
}
@media (max-width: 1080px) {
.familia-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.familia-card__link { height: 420px; }
}
@media (max-width: 690px) {
.familia-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.familia-card__link { height: 340px; }
.familia-card__logo { height: 22px; margin-top: 20px; }
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 27px; margin-top: 18px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 26px; margin-top: 18px; }
/* En touch no hay hover real: el fondo de color y el CTA quedan
siempre visibles, para no depender de un tap sostenido. */
.familia-card__panel-bg { transform: translateY(0); transition: none; }
.familia-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
padding: 10px 14px 14px;
}
.familia-card__claim { display: none; }
.familia-card__cta { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; }
.hero__img, .destacado__img, .sobre-sip__img, .beneficios__media img { animation: none !important; transform: none; }
.hero__slide, .destacado__slide { transition-duration: .2s; }
.familia-card__link { transition-duration: .001ms; }
}
Sistema Constructivo eficiente, económico y sustentable
por columna
(son hermanos en el DOM aunque visualmente queden uno al lado del
otro), así que el combinador de hermano adyacente lo tomaba también
y el 2º párrafo (columna derecha) quedaba corrido hacia abajo. Se
anula explícitamente para dejar ambas columnas alineadas por su top
(bug reportado por Alan). */
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.dos-columnas p + p { margin-top: 0; }
/* Construcción con paneles SIP — foto a la derecha (pedido de Alan). En
reposo: efecto ken burns continuo (zoom/paneo lento) y desaturada. Al
pasar el mouse: la animación se detiene, la imagen vuelve a su
posición/escala inicial (mismo mecanismo de siempre: se quita la
animation y la transition la lleva de vuelta suavemente) y recupera
el color — mismo criterio que .linea-card__media img en cassaforma.com,
invertido a pedido de Alan. */
/* padding-bottom reducido a la mitad (42px, antes 84px): acerca esta
sección a "Paneles CassaSIP" (pedido de Alan); el resto de los
paddings de .section quedan igual. */
#sobre-sip { padding-bottom: 42px; }
.sobre-sip__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: start; }
/* Párrafo "Incorporamos una nueva línea de producción..." destacado en
negrita y color naranja del logo (pedido de Alan) */
.sobre-sip__highlight { font-weight: var(--fw-xbold); color: var(--c-accent); }
.sobre-sip__media { position: relative; overflow: hidden; aspect-ratio: 4/5; }
.sobre-sip__img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
animation: sobreSipKenBurns 16s ease-in-out infinite alternate;
transition: filter .45s ease, transform .6s ease;
}
@keyframes sobreSipKenBurns {
0% { transform: scale(1) translate(0, 0); }
100% { transform: scale(1.14) translate(-2.5%, 2%); }
}
.sobre-sip__media:hover .sobre-sip__img,
.sobre-sip__media:focus-within .sobre-sip__img {
filter: grayscale(0);
animation: none;
transform: scale(1) translate(0, 0);
}
@media (max-width: 1080px) {
.sobre-sip__grid { grid-template-columns: 1fr; gap: 32px; }
.sobre-sip__media { order: -1; max-width: 460px; margin-inline: auto; aspect-ratio: 4/3; }
}
/* Tipos de panel */
.paneles__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.panel-card {
/* sin recuadro: panel, título y botón flotan directamente sobre el fondo
de la sección (pedido de Alan) */
border: none; box-shadow: none; background: transparent; display: flex; flex-direction: column;
/* entrada tipo swipe (derecha → izquierda), escalonada vía JS
(.is-visible); velocidad aumentada otra vez (antes .5s/card cada 1000ms,
ahora .35s/card cada 220ms — pedido de Alan) */
opacity: 0; transform: translateX(70px); transition: opacity .35s ease, transform .35s ease;
}
.panel-card.is-visible { opacity: 1; transform: translateX(0); }
/* Render con fondo transparente: se muestra completo (sin recortar), centrado,
con un drop-shadow muy leve para dar un efecto 3D sutil (pedido de Alan).
max-height ampliado (antes 210px) para que la imagen use todo el ancho
disponible de la card en vez de quedar acotada por la altura: efecto neto,
~120% más grande (pedido de Alan). */
.panel-card__media { min-height: 465px; padding: 10px 8px 6px; display: flex; align-items: center; justify-content: center; }
/* El render es también un link de descarga de su ficha técnica (mismo PDF
que el botón); al pasar el mouse, zoom leve sobre la imagen (pedido de
Alan). */
.panel-card__media a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.panel-card__media img {
width: 100%; max-width: 100%; height: auto; max-height: 465px; object-fit: contain;
filter: drop-shadow(0 6px 10px rgba(22, 43, 62, .16));
transition: transform .35s ease;
}
.panel-card__media a:hover img,
.panel-card__media a:focus-visible img {
transform: scale(1.06);
}
.panel-card__body { padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.panel-card__name { font-size: 15px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; }
/* Botón "Descargar ficha" — mismo "tipo" que .sc-panel__cta en
sistema-constructivo.css (cassaforma.com): .btn.btn--navy de base,
ancho completo y compacto. Usar esta combinación cada vez que se
agregue un botón de descarga de ficha en el sitio (pedido de Alan). */
.panel-card__cta { margin-top: auto; width: 100%; height: 40px; font-size: 14.7px; padding: 0 12px; }
/* Adaptables a cada proyecto — texto en 2 columnas: cartera de proyectos a la
izquierda, y el párrafo de la tecnología OSB destacado en un recuadro con
fondo blanco y en negrita, a la derecha (pedido de Alan). */
.adaptables__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.adaptables__highlight {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-med); /* antes fw-xbold: menos peso (pedido de Alan) */
padding: 22px 26px; border-radius: 4px; box-shadow: var(--card-shadow);
}
/* Adaptables a cada proyecto — foto + tabla de resistencias (pedido de Alan).
margin-top +20% (antes 46px) para separar más el render del texto de
arriba. */
.adaptables__grid { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: center; margin-top: 55px; }
/* Render con fondo transparente: se muestra completo, sin recortar ni caja
fija, con un drop-shadow muy leve (mismo criterio que .panel-card__media).
Se desplaza hacia la izquierda hasta sobresalir un 10% del ancho de
contenido (pedido de Alan): crece hacia la izquierda, ancla derecha
sin cambios (mismo criterio que .panel-corte__sandwich). */
.adaptables__media {
display: flex; align-items: center; justify-content: center;
margin-left: calc(-1 * var(--w-content) * 0.10);
width: calc(100% + var(--w-content) * 0.10);
}
.adaptables__media img {
width: 100%; height: auto; max-width: 100%;
filter: drop-shadow(0 8px 14px rgba(22, 43, 62, .16));
}
/* Tabla de especificaciones: misma paleta navy/blanco y tipografía Heebo
del resto del sitio. Columna izquierda (propiedad) en navy —el mismo azul
del botón "Descargar ficha"— con texto blanco, columna derecha (valor)
alterna blanco/gris banda. Ninguna fuente en negrita (pedido de Alan). Al
pasar el mouse por una fila, se resalta en navy oscuro (izquierda) y en la
banda gris (derecha) para que se lea qué fila se está mirando. */
.specs-table-wrap { border: var(--border); border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table th, .specs-table td { padding: 15px 18px; font-size: 14.5px; line-height: 1.3; transition: background-color .2s ease, color .2s ease; }
.specs-table th {
background: var(--c-navy); color: var(--c-white);
font-weight: var(--fw-reg); text-align: left; width: 60%;
}
.specs-table td {
background: var(--c-white); color: var(--c-navy-900);
font-weight: var(--fw-light); text-align: center;
}
.specs-table tr:nth-child(even) td { background: var(--c-band); }
.specs-table tr:not(:last-child) th,
.specs-table tr:not(:last-child) td { border-bottom: 1px solid rgba(255,255,255,.08); }
.specs-table tr:hover th { background: var(--c-navy-900); }
.specs-table tr:hover td { background: var(--c-band); color: var(--c-navy); }
/* Especificaciones técnicas (debajo de "Tipos de panel") — mismo criterio
de diseño que la tabla de Adaptables: acento navy, sin negritas. Tres
grupos (Paneles / Placas / Accesorios) con una etiqueta lateral vertical,
cada uno con sus sub-tablas de medidas (pedido de Alan, ref. cassasip.com). */
.spec-groups { display: flex; flex-direction: column; gap: 34px; margin-top: 92px; } /* separación de los productos ×2 (antes 46px), pedido de Alan */
.spec-group { display: flex; align-items: stretch; gap: 22px; }
.spec-group__label {
flex-shrink: 0; width: 46px; border-radius: 4px;
background: var(--c-accent); color: var(--c-white); /* naranja del logo CassaSIP + texto blanco (pedido de Alan) */
display: flex; align-items: center; justify-content: center;
writing-mode: vertical-rl; transform: rotate(180deg);
font-size: 15.6px; /* 13px +20% (pedido de Alan) */
font-weight: var(--fw-reg); text-transform: uppercase; letter-spacing: .1em;
}
.spec-group__tables { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.spec-block__title { font-size: 14.5px; font-weight: var(--fw-reg); color: var(--c-navy-900); margin-bottom: 10px; }
.spec-block__title .spec-block__note { font-weight: var(--fw-light); color: var(--c-navy); font-size: 13px; }
.spec-block .specs-table-wrap { overflow-x: auto; }
.specs-table--grid { min-width: 560px; }
.specs-table--grid th, .specs-table--grid td { padding: 12px 14px; font-size: 13.5px; white-space: nowrap; }
.specs-table--grid thead th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: center;
}
.specs-table--grid thead th:first-child { background: var(--c-navy-900); }
.specs-table--grid tbody th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: left; width: auto;
}
.specs-table--grid tbody td {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-light); text-align: center;
}
.specs-table--grid tbody tr:nth-child(even) td { background: var(--c-band); }
.specs-table--grid tbody tr:hover th { background: var(--c-navy-900); }
.specs-table--grid tbody tr:hover td { background: var(--c-band); color: var(--c-navy); }
@media (max-width: 690px) {
.spec-group { flex-direction: column; gap: 10px; }
.spec-group__label {
width: 100%; writing-mode: horizontal-tb; transform: none; padding: 8px; height: auto;
}
}
@media (max-width: 1080px) {
.adaptables__intro { grid-template-columns: 1fr; gap: 20px; }
.adaptables__grid { grid-template-columns: 1fr; gap: 28px; }
/* en una sola columna el desborde a la izquierda no tiene sentido
(no queda margen de página del que sobresalir): se desactiva */
.adaptables__media { margin-left: 0; width: 100%; max-width: 460px; margin-inline: auto; }
.specs-table-wrap { max-width: 460px; margin-inline: auto; width: 100%; }
}
/* ------------------------------------------------------------
PERFILES — Contanos qué necesitás (pedido de Ceci vía Alan).
3 cards con foto en blanco y negro tapada por una "cortina" navy con
textura diagonal sutil; al hacer hover la cortina se corre hacia la
derecha con clip-path (no se desvanece, se desliza), la foto recupera
color + zoom leve, aparece una línea de acento naranja creciendo bajo
el título y la flecha se desplaza. Entrada: swipe hacia arriba
escalonado al entrar en viewport (ver "Perfiles CassaSIP" en
js/script.js), misma familia de efecto que .panel-card pero vertical
en vez de lateral, para variar. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.perfiles-sip__grid {
/* mismo ajuste que .familia-grid: .section__head no trae separación
propia acá (pedido de Alan: se había achicado respecto al prototipo). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.perfil-sip-card {
opacity: 0;
transform: translateY(46px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.perfil-sip-card.is-visible { opacity: 1; transform: translateY(0); }
.perfil-sip-card__link {
position: relative;
display: block;
border: var(--border);
box-shadow: var(--card-shadow);
transition: box-shadow var(--t-base), transform var(--t-base);
}
.perfil-sip-card__link:hover,
.perfil-sip-card__link:focus-visible {
box-shadow: 0 8px 30px rgba(22, 43, 62, .16);
transform: translateY(-4px);
}
.perfil-sip-card__media {
position: relative;
height: 300px;
overflow: hidden;
}
.perfil-sip-card__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.05);
transform: scale(1.03);
transition: transform .6s ease, filter .6s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__img,
.perfil-sip-card__link:focus-visible .perfil-sip-card__img {
filter: grayscale(0) contrast(1);
transform: scale(1.1);
}
.perfil-sip-card__curtain {
position: absolute; inset: 0;
background:
repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px),
linear-gradient(150deg, var(--c-navy-900) 0%, var(--c-navy) 100%);
clip-path: inset(0 0 0 0);
transition: clip-path .55s cubic-bezier(.65,0,.35,1);
}
.perfil-sip-card__link:hover .perfil-sip-card__curtain,
.perfil-sip-card__link:focus-visible .perfil-sip-card__curtain {
clip-path: inset(0 0 0 100%);
}
.perfil-sip-card__num {
position: absolute; top: 18px; left: 20px;
font-size: 13px; font-weight: var(--fw-xbold);
color: rgba(255,255,255,.55);
letter-spacing: .06em;
transition: opacity .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__num,
.perfil-sip-card__link:focus-visible .perfil-sip-card__num { opacity: 0; }
.perfil-sip-card__body {
position: relative;
background: var(--c-white);
padding: 22px 22px 26px;
}
.perfil-sip-card__accent {
display: block;
height: 3px;
width: 0%;
background: var(--c-accent);
transition: width .45s ease;
margin-bottom: 14px;
}
.perfil-sip-card__link:hover .perfil-sip-card__accent,
.perfil-sip-card__link:focus-visible .perfil-sip-card__accent { width: 100%; }
.perfil-sip-card__label {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
font-size: 15px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .02em;
color: var(--c-navy-900);
}
.perfil-sip-card__label svg {
width: 18px; height: 18px; flex-shrink: 0;
fill: none; stroke: var(--c-navy-900); stroke-width: 2;
transform: translateX(0);
transition: transform .35s ease, stroke .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__label svg,
.perfil-sip-card__link:focus-visible .perfil-sip-card__label svg {
transform: translateX(6px);
stroke: var(--c-accent);
}
.perfil-sip-card__desc {
margin-top: 8px;
font-size: 14.7px; line-height: 1.55; font-weight: var(--fw-light);
color: var(--c-gray);
}
@media (max-width: 1080px) {
.perfiles-sip__grid { grid-template-columns: 1fr; gap: 20px; }
.perfil-sip-card { transform: translateY(28px); }
.perfil-sip-card__media { height: 260px; }
}
/* ------------------------------------------------------------
TU PROYECTO — CassaSIP (pedido de Alan).
1 card "hero" a ancho completo (mitad de alto que una card de
grilla) + grilla 2x2 con las 4 restantes. Título siempre
visible sobre la foto; párrafo + CTA revelados al hover con
swipe desde la izquierda. Hover "tecla de piano" con zoom IN:
toda la card crece y el fondo de color sube al mismo tiempo
(--bg-delay: 0s); el texto arranca cuando ese swipe del fondo
va por la mitad (--text-delay: .15s, 50% de --bg-dur), para que
no se sienta "atrasado". Mismo mecanismo de contra-escala que
Familia Cassaforma para que el texto no crezca junto con la
card.
------------------------------------------------------------ */
.tuproyecto-grid {
margin-top: 46px;
list-style: none; padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
--press-scale: 1.035;
--press-dur: .3s;
--bg-dur: .3s;
--bg-delay: 0s;
--text-dur: .3s;
--text-delay: .15s; /* arranca cuando el swipe del fondo va por la mitad (50% de .3s) */
}
.tuproyecto-card--hero { grid-column: 1 / -1; }
.tuproyecto-card { opacity: 0; transform: translateY(40px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1); }
.tuproyecto-card.is-visible { opacity: 1; transform: translateY(0); }
.tuproyecto-card__link {
position: relative; display: block;
aspect-ratio: 2.1573 / 1;
background: var(--c-white); border: 1px solid var(--c-line); box-shadow: var(--card-shadow);
overflow: hidden; transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* Card hero: mismo ancho, la mitad del alto proporcional (el doble de "achatada") */
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 4.3147 / 1; }
.tuproyecto-card__link:hover, .tuproyecto-card__link:focus-visible {
transform: scale(var(--press-scale));
box-shadow: 0 14px 34px rgba(22, 43, 62, .28);
z-index: 5;
}
.tuproyecto-card__media { position: absolute; inset: 0; }
.tuproyecto-card__media img {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: grayscale(1); transition: filter .5s ease;
}
.tuproyecto-card__link:hover .tuproyecto-card__media img,
.tuproyecto-card__link:focus-visible .tuproyecto-card__media img { filter: grayscale(0); }
/* Scrim permanente para que el título siempre se lea */
.tuproyecto-card__link::after {
content: ""; position: absolute; z-index: 1; inset: 0;
background: linear-gradient(160deg, rgba(22,43,62,.55) 0%, rgba(22,43,62,.22) 45%, rgba(22,43,62,.05) 70%);
}
.tuproyecto-card__title {
position: relative; z-index: 2; display: block;
padding: 30px 0 0 34px;
font-size: 25.6px; line-height: 1.2; font-weight: var(--fw-light); color: var(--c-white);
}
/* Filete arriba en el naranja del logo CassaSIP, para resaltar cada card */
.tuproyecto-card__link::before {
content: ""; position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 2px;
background: var(--c-accent);
}
.tuproyecto-card__panel-bg {
position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__panel-bg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__panel-bg { transform: translateY(0); }
.tuproyecto-card__text {
position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 22px 34px 26px;
max-width: 560px;
color: var(--c-white); opacity: 0;
transform: translateX(-26px) scale(1); transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__text,
.tuproyecto-card__link:focus-visible .tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.tuproyecto-card__claim { display: block; font-size: 19.2px; line-height: 1.5; font-weight: var(--fw-light); color: var(--c-white); }
.tuproyecto-card__cta {
display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
font-size: 16.8px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; color: var(--c-white);
}
.tuproyecto-card__cta svg { width: 16.8px; height: 16.8px; fill: none; stroke: var(--c-white); stroke-width: 2.4; transform: translateX(0); transition: transform .3s ease; }
.tuproyecto-card__link:hover .tuproyecto-card__cta svg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__cta svg { transform: translateX(4px); }
@media (max-width: 900px) {
.tuproyecto-grid { grid-template-columns: 1fr; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 2.1573 / 1; }
}
@media (max-width: 690px) {
.tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card__title { font-size: 19.2px; padding: 20px 0 0 20px; }
.tuproyecto-card__text { padding: 16px 20px 20px; }
/* En touch no hay hover real: panel y CTA quedan siempre visibles,
igual que en Familia Cassaforma (el párrafo se oculta para que
no choque con el título en cards bajas). */
.tuproyecto-card__panel-bg { transform: translateY(0); transition: none; }
.tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
}
.tuproyecto-card__claim { display: none; }
.tuproyecto-card__cta { margin-top: 0; }
}
/* Barra "beneficios clave" — mismas medidas que .sc-ahorros de
cassaforma.com (sistema-constructivo.css, bloque GRANDES AHORROS):
3 columnas centradas, ícono circular de 71px (ya viene con su color
en el propio .svg), separador vertical negro entre columnas. */
.ahorros { padding: 70px 0 62px; text-align: center; } /* +10% arriba y abajo (antes 64px/56px), pedido de Alan */
.ahorros__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.ahorro { display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 24px; }
.ahorro + .ahorro::before {
content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
width: 2px; background: var(--c-black);
}
.ahorro__icon { display: block; width: 71px; height: 71px; margin: 0 auto 20px; }
.ahorro__label { font-size: 23px; line-height: 1.3; font-weight: var(--fw-light); color: var(--c-navy); }
@media (max-width: 690px) {
.ahorros__grid { grid-template-columns: 1fr; row-gap: 32px; }
.ahorro + .ahorro::before { display: none; }
.ahorro__label { font-size: 19px; }
}
/* Beneficios (3 pilares) */
/* Beneficios de la construcción SIP — 2 columnas: pilares apilados con
viñeta numerada + logos de certificaciones a la izquierda, imagen a la
derecha (pedido de Alan). Separación entre columnas ×2 (antes 60px).
La imagen de la derecha no aporta su alto natural al cálculo de la fila
(queda position:absolute dentro de .beneficios__media, que por eso no
tiene alto propio): así la altura de la fila la fija SOLO la columna
izquierda (pilares + logos), y la imagen se recorta arriba/abajo con
object-fit:cover para igualar siempre esa altura — salvo en mobile,
donde se desactiva (ver media query). */
.beneficios__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; align-items: stretch; }
.beneficios__left { display: flex; flex-direction: column; }
.pilares__grid { display: flex; flex-direction: column; gap: 32px; }
.pilar__head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.pilar__num {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
background: var(--c-navy); color: var(--c-white);
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: var(--fw-xbold);
}
.pilar__title { font-size: 19px; font-weight: var(--fw-xbold); color: var(--c-navy-900); text-transform: uppercase; margin: 0; }
.pilar__text { margin-top: 0; font-size: 15.5px; line-height: 1.6; }
/* Logos de certificaciones — una sola imagen ya compuesta con los 6 logos
(2 filas x 3 columnas), mismo ancho que los párrafos de arriba (pedido
de Alan: usar la imagen completa en vez de 6 separadas). */
.beneficios__certs {
margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--c-line);
}
.beneficios__certs img { display: block; width: 100%; height: auto; }
.beneficios__media { position: relative; overflow: hidden; border-radius: 4px; } /* recorta el zoom del ken burns dentro de su propio cuadro (mismo criterio que .sobre-sip__media) */
.beneficios__media img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
animation: sobreSipKenBurns 18s ease-in-out infinite alternate; /* mismo ken burns que la foto de "Construcción con paneles SIP" */
}
/* ¿Por qué construir con SIP? — imagen del despiece a la izquierda, lista
de items con bullets a la derecha. Tipografía tomada de la lista de capas
de cassaforma.com (sistema-constructivo.css: .sc-panellosa__label/__item):
Heebo Light, navy, bullet "•" y divisor fino bajo cada renglón. */
.porque-sip { display: grid; grid-template-columns: minmax(300px, 460px) 1fr; gap: 60px; align-items: center; margin-top: 46px; }
.porque-sip__media img { width: 100%; display: block; }
.porque-sip__list {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto);
column-gap: 48px;
}
.porque-sip__list li {
padding: 14px 0;
border-bottom: 1px solid rgba(22, 43, 62, .15);
font-size: 19px; letter-spacing: .02em;
font-weight: var(--fw-light); color: var(--c-navy);
}
.porque-sip__list li::before { content: "\2022 "; }
@media (max-width: 1080px) {
.porque-sip { grid-template-columns: 1fr; }
.porque-sip__media { max-width: 460px; margin-inline: auto; }
}
@media (max-width: 690px) {
.porque-sip__list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
}
/* Logística — texto (Logística + Almacenamiento apilados) a la izquierda,
foto en blanco y negro con ken burns a la derecha (pedido de Alan). La
imagen no aporta su alto natural al cálculo de la fila (position:absolute
dentro de .logistica__media, sin alto propio): así la altura de la fila
la fija SOLO la columna de texto, y la foto se recorta con object-fit:cover
para igualar siempre esa altura — mismo criterio que .beneficios__media. */
.logistica__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: stretch; }
.logistica__text { display: flex; flex-direction: column; gap: 32px; }
.logistica__item h3 { font-size: 19px; font-weight: var(--fw-xbold); text-transform: uppercase; color: var(--c-navy-900); margin-bottom: 12px; }
.logistica__media { position: relative; overflow: hidden; border-radius: 4px; }
.logistica__img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
transition: filter .45s ease;
/* Es una sola foto fija (no un carrusel): un zoom-in ÚNICO de 10s que
termina y se queda ahí (forwards, sin infinite/alternate) — solo
"ida", nunca vuelve para atrás y nunca vuelve a saltar (pedido de
Alan). */
animation: destacadoKenBurns 10s ease-out forwards;
}
.logistica__media:hover .logistica__img { filter: grayscale(0); }
/* FAQ */
.faq { max-width: 880px; }
.faq__item { border-bottom: var(--border); }
.faq__item summary {
cursor: pointer; list-style: none; padding: 20px 0;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
font-size: 16.5px; font-weight: var(--fw-med); color: var(--c-navy-900);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
content: "+"; font-size: 22px; font-weight: var(--fw-light); color: var(--c-navy); flex-shrink: 0;
}
.faq__item[open] summary::after { content: "–"; }
.faq__body { padding: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: var(--c-gray); }
.faq__body ul { list-style: disc; padding-left: 20px; margin-top: 10px; }
.faq__body li { margin-bottom: 6px; }
.faq__body p + p { margin-top: 12px; }
/* Proceso constructivo — solo título + video a todo el ancho del
contenido (pedido de Alan; antes había una lista de pasos numerados). */
.proceso__video { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.proceso__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Capacitación */
.capacitacion { text-align: center; }
.capacitacion h2 { max-width: 620px; margin-inline: auto; }
.capacitacion .btn { margin-top: 30px; }
/* Presupuesto / form */
.presupuesto__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.form__field { margin-bottom: 16px; }
.form__label { display: block; font-size: 14px; font-weight: var(--fw-med); margin-bottom: 7px; }
.form__input, .form__select {
display: block; width: 100%; height: 46px; padding: 0 14px;
border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-navy-900);
font-family: var(--ff); font-size: 15px;
}
.form__input:focus, .form__select:focus { border-color: var(--c-navy); outline: none; }
.form__submit { margin-top: 6px; width: 100%; }
/* ------------------------------------------------------------
FOOTER
------------------------------------------------------------ */
.footer { background: var(--c-navy-900); color: var(--c-white); padding-block: 64px 32px; }
.footer__top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.footer__brand img { height: 40px; }
.footer__brand p { margin-top: 18px; font-size: 14px; color: rgba(255,255,255,.65); max-width: 260px; }
.footer__col h3 { font-size: 13px; font-weight: var(--fw-xbold); letter-spacing: .06em; text-transform: uppercase; color: var(--c-white); margin-bottom: 16px; }
.footer__col ul li { margin-bottom: 10px; }
.footer__col a { font-size: 14px; color: rgba(255,255,255,.75); }
.footer__col a:hover { color: var(--c-white); }
.footer__bottom {
margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15);
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
font-size: 13.5px; color: rgba(255,255,255,.6);
}
.footer__social { display: flex; gap: 14px; }
.footer__social svg { width: 16px; height: 16px; fill: rgba(255,255,255,.75); }
.footer__social a:hover svg { fill: var(--c-white); }
.footer__scrolltop { font-size: 13px; color: rgba(255,255,255,.6); }
.footer__scrolltop:hover { color: var(--c-white); }
/* ------------------------------------------------------------
RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 1169px) {
:root {
--fs-hero: 42px; --lh-hero: 46px;
--fs-hero-lead: 23px; --lh-hero-lead: 28px;
--h-hero: 660px;
}
.site-nav { gap: 15px; }
.site-nav__link { font-size: 13px; }
}
@media (max-width: 1080px) {
.site-nav { display: none; }
.destacado, .dos-columnas, .logistica__grid, .presupuesto__grid { grid-template-columns: 1fr; }
.paneles__grid { grid-template-columns: repeat(3, 1fr); }
/* En mobile se desactiva el recorte a la altura de la columna izquierda
(pedido de Alan): la imagen vuelve a su aspecto natural, en flujo. */
.beneficios__grid { grid-template-columns: 1fr; gap: 28px; align-items: normal; }
.beneficios__media img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
/* Mismo criterio que .beneficios__media: en mobile la foto de logística
vuelve a su aspecto natural, en flujo, debajo del texto. */
.logistica__grid { gap: 28px; }
.logistica__img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
.footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
:root {
--fs-hero: 34px; --lh-hero: 38px;
--fs-hero-lead: 19px; --lh-hero-lead: 26px;
--h-header: 84px; --h-hero: 560px;
}
.site-header__logo img { height: 40px; }
.hero .rule--light { width: 200px; margin: 24px 0 22px; }
}
@media (max-width: 690px) {
.site-topbar { display: none; }
:root {
--fs-hero: 27px; --lh-hero: 31px;
--fs-hero-lead: 16px; --lh-hero-lead: 24px;
--h-header: 70px; --h-hero: 520px;
}
.site-header__logo img { height: 34px; }
.hero .rule--light { width: 140px; margin: 20px 0 18px; }
.section { padding-block: 56px; }
.paneles__grid { grid-template-columns: 1fr 1fr; }
.footer__top { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------
FAMILIA CASSAFORMA — Conocé el resto de nuestras líneas
(pedido de Alan). Grilla de 5 cards (las otras líneas Cassaforma;
CassaSIP es esta misma web, no se lista a sí misma), cada una con
su color de marca en --linea-accent. Efecto "tecla de piano" v2:
TODA la card se hunde junta al pasar el mouse (borde, sombra,
logo, foto y fondo de color son todos descendientes del mismo
.familia-card__link escalado), así el degradé de color queda
siempre alineado con el borde mientras se achica. El texto es la
ÚNICA capa que NO se achica: usa un contra-escalado
(scale(calc(1 / var(--press-scale)))) que cancela el de su padre,
y entra con swipe desde la izquierda + fade-in medio segundo
después de que arranca el fondo de color. La foto NO hace zoom en
el hover (chocaba visualmente con el "hundido", pedido de Alan):
solo recupera color. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.familia-grid {
/* .section__head no trae separación propia (solo la agrega vía
".section__head + .section__grid", que esta grilla no usa) — se
fija acá a mano, mismo valor que esa regla general, para que quede
igual que en el prototipo (pedido de Alan: se había achicado). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
/* Timings del hover — un 50% más rápidos que la v1 (pedido de Alan). */
--press-scale: .965;
--press-dur: .167s;
--bg-dur: .3s;
--bg-delay: var(--press-dur);
--text-dur: .3s;
--text-delay: .5s;
}
.familia-card {
opacity: 0;
transform: translateY(40px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.familia-card.is-visible { opacity: 1; transform: translateY(0); }
.familia-card__link {
position: relative;
display: block;
height: 470px;
background: var(--c-white);
border: 1px solid var(--c-line);
box-shadow: var(--card-shadow);
overflow: hidden;
transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* "Tecla de piano": se achica y baja un poco, sombra se cierra en vez
de crecer (efecto de hundirse contra la superficie). */
.familia-card__link:hover,
.familia-card__link:focus-visible {
transform: scale(var(--press-scale)) translateY(3px);
box-shadow: 0 2px 10px rgba(22, 43, 62, .22);
}
.familia-card__logo {
position: relative;
z-index: 2;
height: 26px;
width: auto;
max-width: 74%;
margin: 26px auto 0;
object-fit: contain;
}
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 32px; margin-top: 23px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 31px; margin-top: 23px; }
.familia-card__media {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 72%;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
}
.familia-card__media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: bottom center;
filter: grayscale(1);
transition: filter .5s ease;
}
.familia-card__link[data-line="cassadeco"] .familia-card__media img { object-position: center bottom; }
/* Sin zoom en la foto: solo recupera color (pedido de Alan). */
.familia-card__link:hover .familia-card__media img,
.familia-card__link:focus-visible .familia-card__media img {
filter: grayscale(0);
}
/* Fondo de color: degradé del color de marca hacia transparente, 3/4
de la altura de la card. Hijo directo de .familia-card__link (no un
hermano aparte): se achica JUNTO con el resto de la card, así sus
márgenes quedan siempre alineados con el borde (pedido de Alan).
Entra con swipe de abajo hacia arriba apenas termina el "press". */
.familia-card__panel-bg {
position: absolute;
z-index: 2;
left: 0; right: 0; bottom: 0;
height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.familia-card__link:hover .familia-card__panel-bg,
.familia-card__link:focus-visible .familia-card__panel-bg {
transform: translateY(0);
}
/* Texto: la ÚNICA capa que NO se achica. Sigue siendo hijo de
.familia-card__link, pero en hover se le aplica un contra-escalado
(1 / var(--press-scale)) que cancela el de la card y lo deja
siempre a tamaño real (pedido de Alan). Entra con swipe desde la
izquierda + fade-in, medio segundo después de que arrancó el fondo
de color. */
.familia-card__text {
position: absolute;
z-index: 3;
left: 0; right: 0; bottom: 0;
padding: 18px 20px 20px;
color: var(--c-white);
opacity: 0;
transform: translateX(-26px) scale(1);
transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.familia-card__link:hover .familia-card__text,
.familia-card__link:focus-visible .familia-card__text {
opacity: 1;
transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.familia-card__claim {
display: block;
font-size: 14.6px; line-height: 1.45; font-weight: var(--fw-light);
color: var(--c-white);
}
.familia-card__cta {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 10px;
font-size: 13.8px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .03em;
color: var(--c-white);
}
.familia-card__cta svg {
width: 13px; height: 13px;
fill: none; stroke: var(--c-white); stroke-width: 2.4;
transform: translateX(0);
transition: transform .3s ease;
}
.familia-card__link:hover .familia-card__cta svg,
.familia-card__link:focus-visible .familia-card__cta svg {
transform: translateX(4px);
}
/* Filete de color arriba de la card: siempre visible, identifica la
marca aun antes del hover. Al ser ::before de .familia-card__link
también se hunde con toda la card (pedido de Alan). */
.familia-card__link::before {
content: "";
position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 4px;
background: var(--linea-accent, var(--c-navy-900));
}
@media (max-width: 1080px) {
.familia-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.familia-card__link { height: 420px; }
}
@media (max-width: 690px) {
.familia-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.familia-card__link { height: 340px; }
.familia-card__logo { height: 22px; margin-top: 20px; }
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 27px; margin-top: 18px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 26px; margin-top: 18px; }
/* En touch no hay hover real: el fondo de color y el CTA quedan
siempre visibles, para no depender de un tap sostenido. */
.familia-card__panel-bg { transform: translateY(0); transition: none; }
.familia-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
padding: 10px 14px 14px;
}
.familia-card__claim { display: none; }
.familia-card__cta { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; }
.hero__img, .destacado__img, .sobre-sip__img, .beneficios__media img { animation: none !important; transform: none; }
.hero__slide, .destacado__slide { transition-duration: .2s; }
.familia-card__link { transition-duration: .001ms; }
}
por columna
(son hermanos en el DOM aunque visualmente queden uno al lado del
otro), así que el combinador de hermano adyacente lo tomaba también
y el 2º párrafo (columna derecha) quedaba corrido hacia abajo. Se
anula explícitamente para dejar ambas columnas alineadas por su top
(bug reportado por Alan). */
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.dos-columnas p + p { margin-top: 0; }
/* Construcción con paneles SIP — foto a la derecha (pedido de Alan). En
reposo: efecto ken burns continuo (zoom/paneo lento) y desaturada. Al
pasar el mouse: la animación se detiene, la imagen vuelve a su
posición/escala inicial (mismo mecanismo de siempre: se quita la
animation y la transition la lleva de vuelta suavemente) y recupera
el color — mismo criterio que .linea-card__media img en cassaforma.com,
invertido a pedido de Alan. */
/* padding-bottom reducido a la mitad (42px, antes 84px): acerca esta
sección a "Paneles CassaSIP" (pedido de Alan); el resto de los
paddings de .section quedan igual. */
#sobre-sip { padding-bottom: 42px; }
.sobre-sip__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: start; }
/* Párrafo "Incorporamos una nueva línea de producción..." destacado en
negrita y color naranja del logo (pedido de Alan) */
.sobre-sip__highlight { font-weight: var(--fw-xbold); color: var(--c-accent); }
.sobre-sip__media { position: relative; overflow: hidden; aspect-ratio: 4/5; }
.sobre-sip__img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
animation: sobreSipKenBurns 16s ease-in-out infinite alternate;
transition: filter .45s ease, transform .6s ease;
}
@keyframes sobreSipKenBurns {
0% { transform: scale(1) translate(0, 0); }
100% { transform: scale(1.14) translate(-2.5%, 2%); }
}
.sobre-sip__media:hover .sobre-sip__img,
.sobre-sip__media:focus-within .sobre-sip__img {
filter: grayscale(0);
animation: none;
transform: scale(1) translate(0, 0);
}
@media (max-width: 1080px) {
.sobre-sip__grid { grid-template-columns: 1fr; gap: 32px; }
.sobre-sip__media { order: -1; max-width: 460px; margin-inline: auto; aspect-ratio: 4/3; }
}
/* Tipos de panel */
.paneles__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.panel-card {
/* sin recuadro: panel, título y botón flotan directamente sobre el fondo
de la sección (pedido de Alan) */
border: none; box-shadow: none; background: transparent; display: flex; flex-direction: column;
/* entrada tipo swipe (derecha → izquierda), escalonada vía JS
(.is-visible); velocidad aumentada otra vez (antes .5s/card cada 1000ms,
ahora .35s/card cada 220ms — pedido de Alan) */
opacity: 0; transform: translateX(70px); transition: opacity .35s ease, transform .35s ease;
}
.panel-card.is-visible { opacity: 1; transform: translateX(0); }
/* Render con fondo transparente: se muestra completo (sin recortar), centrado,
con un drop-shadow muy leve para dar un efecto 3D sutil (pedido de Alan).
max-height ampliado (antes 210px) para que la imagen use todo el ancho
disponible de la card en vez de quedar acotada por la altura: efecto neto,
~120% más grande (pedido de Alan). */
.panel-card__media { min-height: 465px; padding: 10px 8px 6px; display: flex; align-items: center; justify-content: center; }
/* El render es también un link de descarga de su ficha técnica (mismo PDF
que el botón); al pasar el mouse, zoom leve sobre la imagen (pedido de
Alan). */
.panel-card__media a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.panel-card__media img {
width: 100%; max-width: 100%; height: auto; max-height: 465px; object-fit: contain;
filter: drop-shadow(0 6px 10px rgba(22, 43, 62, .16));
transition: transform .35s ease;
}
.panel-card__media a:hover img,
.panel-card__media a:focus-visible img {
transform: scale(1.06);
}
.panel-card__body { padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.panel-card__name { font-size: 15px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; }
/* Botón "Descargar ficha" — mismo "tipo" que .sc-panel__cta en
sistema-constructivo.css (cassaforma.com): .btn.btn--navy de base,
ancho completo y compacto. Usar esta combinación cada vez que se
agregue un botón de descarga de ficha en el sitio (pedido de Alan). */
.panel-card__cta { margin-top: auto; width: 100%; height: 40px; font-size: 14.7px; padding: 0 12px; }
/* Adaptables a cada proyecto — texto en 2 columnas: cartera de proyectos a la
izquierda, y el párrafo de la tecnología OSB destacado en un recuadro con
fondo blanco y en negrita, a la derecha (pedido de Alan). */
.adaptables__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.adaptables__highlight {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-med); /* antes fw-xbold: menos peso (pedido de Alan) */
padding: 22px 26px; border-radius: 4px; box-shadow: var(--card-shadow);
}
/* Adaptables a cada proyecto — foto + tabla de resistencias (pedido de Alan).
margin-top +20% (antes 46px) para separar más el render del texto de
arriba. */
.adaptables__grid { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: center; margin-top: 55px; }
/* Render con fondo transparente: se muestra completo, sin recortar ni caja
fija, con un drop-shadow muy leve (mismo criterio que .panel-card__media).
Se desplaza hacia la izquierda hasta sobresalir un 10% del ancho de
contenido (pedido de Alan): crece hacia la izquierda, ancla derecha
sin cambios (mismo criterio que .panel-corte__sandwich). */
.adaptables__media {
display: flex; align-items: center; justify-content: center;
margin-left: calc(-1 * var(--w-content) * 0.10);
width: calc(100% + var(--w-content) * 0.10);
}
.adaptables__media img {
width: 100%; height: auto; max-width: 100%;
filter: drop-shadow(0 8px 14px rgba(22, 43, 62, .16));
}
/* Tabla de especificaciones: misma paleta navy/blanco y tipografía Heebo
del resto del sitio. Columna izquierda (propiedad) en navy —el mismo azul
del botón "Descargar ficha"— con texto blanco, columna derecha (valor)
alterna blanco/gris banda. Ninguna fuente en negrita (pedido de Alan). Al
pasar el mouse por una fila, se resalta en navy oscuro (izquierda) y en la
banda gris (derecha) para que se lea qué fila se está mirando. */
.specs-table-wrap { border: var(--border); border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table th, .specs-table td { padding: 15px 18px; font-size: 14.5px; line-height: 1.3; transition: background-color .2s ease, color .2s ease; }
.specs-table th {
background: var(--c-navy); color: var(--c-white);
font-weight: var(--fw-reg); text-align: left; width: 60%;
}
.specs-table td {
background: var(--c-white); color: var(--c-navy-900);
font-weight: var(--fw-light); text-align: center;
}
.specs-table tr:nth-child(even) td { background: var(--c-band); }
.specs-table tr:not(:last-child) th,
.specs-table tr:not(:last-child) td { border-bottom: 1px solid rgba(255,255,255,.08); }
.specs-table tr:hover th { background: var(--c-navy-900); }
.specs-table tr:hover td { background: var(--c-band); color: var(--c-navy); }
/* Especificaciones técnicas (debajo de "Tipos de panel") — mismo criterio
de diseño que la tabla de Adaptables: acento navy, sin negritas. Tres
grupos (Paneles / Placas / Accesorios) con una etiqueta lateral vertical,
cada uno con sus sub-tablas de medidas (pedido de Alan, ref. cassasip.com). */
.spec-groups { display: flex; flex-direction: column; gap: 34px; margin-top: 92px; } /* separación de los productos ×2 (antes 46px), pedido de Alan */
.spec-group { display: flex; align-items: stretch; gap: 22px; }
.spec-group__label {
flex-shrink: 0; width: 46px; border-radius: 4px;
background: var(--c-accent); color: var(--c-white); /* naranja del logo CassaSIP + texto blanco (pedido de Alan) */
display: flex; align-items: center; justify-content: center;
writing-mode: vertical-rl; transform: rotate(180deg);
font-size: 15.6px; /* 13px +20% (pedido de Alan) */
font-weight: var(--fw-reg); text-transform: uppercase; letter-spacing: .1em;
}
.spec-group__tables { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.spec-block__title { font-size: 14.5px; font-weight: var(--fw-reg); color: var(--c-navy-900); margin-bottom: 10px; }
.spec-block__title .spec-block__note { font-weight: var(--fw-light); color: var(--c-navy); font-size: 13px; }
.spec-block .specs-table-wrap { overflow-x: auto; }
.specs-table--grid { min-width: 560px; }
.specs-table--grid th, .specs-table--grid td { padding: 12px 14px; font-size: 13.5px; white-space: nowrap; }
.specs-table--grid thead th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: center;
}
.specs-table--grid thead th:first-child { background: var(--c-navy-900); }
.specs-table--grid tbody th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: left; width: auto;
}
.specs-table--grid tbody td {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-light); text-align: center;
}
.specs-table--grid tbody tr:nth-child(even) td { background: var(--c-band); }
.specs-table--grid tbody tr:hover th { background: var(--c-navy-900); }
.specs-table--grid tbody tr:hover td { background: var(--c-band); color: var(--c-navy); }
@media (max-width: 690px) {
.spec-group { flex-direction: column; gap: 10px; }
.spec-group__label {
width: 100%; writing-mode: horizontal-tb; transform: none; padding: 8px; height: auto;
}
}
@media (max-width: 1080px) {
.adaptables__intro { grid-template-columns: 1fr; gap: 20px; }
.adaptables__grid { grid-template-columns: 1fr; gap: 28px; }
/* en una sola columna el desborde a la izquierda no tiene sentido
(no queda margen de página del que sobresalir): se desactiva */
.adaptables__media { margin-left: 0; width: 100%; max-width: 460px; margin-inline: auto; }
.specs-table-wrap { max-width: 460px; margin-inline: auto; width: 100%; }
}
/* ------------------------------------------------------------
PERFILES — Contanos qué necesitás (pedido de Ceci vía Alan).
3 cards con foto en blanco y negro tapada por una "cortina" navy con
textura diagonal sutil; al hacer hover la cortina se corre hacia la
derecha con clip-path (no se desvanece, se desliza), la foto recupera
color + zoom leve, aparece una línea de acento naranja creciendo bajo
el título y la flecha se desplaza. Entrada: swipe hacia arriba
escalonado al entrar en viewport (ver "Perfiles CassaSIP" en
js/script.js), misma familia de efecto que .panel-card pero vertical
en vez de lateral, para variar. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.perfiles-sip__grid {
/* mismo ajuste que .familia-grid: .section__head no trae separación
propia acá (pedido de Alan: se había achicado respecto al prototipo). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.perfil-sip-card {
opacity: 0;
transform: translateY(46px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.perfil-sip-card.is-visible { opacity: 1; transform: translateY(0); }
.perfil-sip-card__link {
position: relative;
display: block;
border: var(--border);
box-shadow: var(--card-shadow);
transition: box-shadow var(--t-base), transform var(--t-base);
}
.perfil-sip-card__link:hover,
.perfil-sip-card__link:focus-visible {
box-shadow: 0 8px 30px rgba(22, 43, 62, .16);
transform: translateY(-4px);
}
.perfil-sip-card__media {
position: relative;
height: 300px;
overflow: hidden;
}
.perfil-sip-card__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.05);
transform: scale(1.03);
transition: transform .6s ease, filter .6s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__img,
.perfil-sip-card__link:focus-visible .perfil-sip-card__img {
filter: grayscale(0) contrast(1);
transform: scale(1.1);
}
.perfil-sip-card__curtain {
position: absolute; inset: 0;
background:
repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px),
linear-gradient(150deg, var(--c-navy-900) 0%, var(--c-navy) 100%);
clip-path: inset(0 0 0 0);
transition: clip-path .55s cubic-bezier(.65,0,.35,1);
}
.perfil-sip-card__link:hover .perfil-sip-card__curtain,
.perfil-sip-card__link:focus-visible .perfil-sip-card__curtain {
clip-path: inset(0 0 0 100%);
}
.perfil-sip-card__num {
position: absolute; top: 18px; left: 20px;
font-size: 13px; font-weight: var(--fw-xbold);
color: rgba(255,255,255,.55);
letter-spacing: .06em;
transition: opacity .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__num,
.perfil-sip-card__link:focus-visible .perfil-sip-card__num { opacity: 0; }
.perfil-sip-card__body {
position: relative;
background: var(--c-white);
padding: 22px 22px 26px;
}
.perfil-sip-card__accent {
display: block;
height: 3px;
width: 0%;
background: var(--c-accent);
transition: width .45s ease;
margin-bottom: 14px;
}
.perfil-sip-card__link:hover .perfil-sip-card__accent,
.perfil-sip-card__link:focus-visible .perfil-sip-card__accent { width: 100%; }
.perfil-sip-card__label {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
font-size: 15px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .02em;
color: var(--c-navy-900);
}
.perfil-sip-card__label svg {
width: 18px; height: 18px; flex-shrink: 0;
fill: none; stroke: var(--c-navy-900); stroke-width: 2;
transform: translateX(0);
transition: transform .35s ease, stroke .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__label svg,
.perfil-sip-card__link:focus-visible .perfil-sip-card__label svg {
transform: translateX(6px);
stroke: var(--c-accent);
}
.perfil-sip-card__desc {
margin-top: 8px;
font-size: 14.7px; line-height: 1.55; font-weight: var(--fw-light);
color: var(--c-gray);
}
@media (max-width: 1080px) {
.perfiles-sip__grid { grid-template-columns: 1fr; gap: 20px; }
.perfil-sip-card { transform: translateY(28px); }
.perfil-sip-card__media { height: 260px; }
}
/* ------------------------------------------------------------
TU PROYECTO — CassaSIP (pedido de Alan).
1 card "hero" a ancho completo (mitad de alto que una card de
grilla) + grilla 2x2 con las 4 restantes. Título siempre
visible sobre la foto; párrafo + CTA revelados al hover con
swipe desde la izquierda. Hover "tecla de piano" con zoom IN:
toda la card crece y el fondo de color sube al mismo tiempo
(--bg-delay: 0s); el texto arranca cuando ese swipe del fondo
va por la mitad (--text-delay: .15s, 50% de --bg-dur), para que
no se sienta "atrasado". Mismo mecanismo de contra-escala que
Familia Cassaforma para que el texto no crezca junto con la
card.
------------------------------------------------------------ */
.tuproyecto-grid {
margin-top: 46px;
list-style: none; padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
--press-scale: 1.035;
--press-dur: .3s;
--bg-dur: .3s;
--bg-delay: 0s;
--text-dur: .3s;
--text-delay: .15s; /* arranca cuando el swipe del fondo va por la mitad (50% de .3s) */
}
.tuproyecto-card--hero { grid-column: 1 / -1; }
.tuproyecto-card { opacity: 0; transform: translateY(40px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1); }
.tuproyecto-card.is-visible { opacity: 1; transform: translateY(0); }
.tuproyecto-card__link {
position: relative; display: block;
aspect-ratio: 2.1573 / 1;
background: var(--c-white); border: 1px solid var(--c-line); box-shadow: var(--card-shadow);
overflow: hidden; transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* Card hero: mismo ancho, la mitad del alto proporcional (el doble de "achatada") */
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 4.3147 / 1; }
.tuproyecto-card__link:hover, .tuproyecto-card__link:focus-visible {
transform: scale(var(--press-scale));
box-shadow: 0 14px 34px rgba(22, 43, 62, .28);
z-index: 5;
}
.tuproyecto-card__media { position: absolute; inset: 0; }
.tuproyecto-card__media img {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: grayscale(1); transition: filter .5s ease;
}
.tuproyecto-card__link:hover .tuproyecto-card__media img,
.tuproyecto-card__link:focus-visible .tuproyecto-card__media img { filter: grayscale(0); }
/* Scrim permanente para que el título siempre se lea */
.tuproyecto-card__link::after {
content: ""; position: absolute; z-index: 1; inset: 0;
background: linear-gradient(160deg, rgba(22,43,62,.55) 0%, rgba(22,43,62,.22) 45%, rgba(22,43,62,.05) 70%);
}
.tuproyecto-card__title {
position: relative; z-index: 2; display: block;
padding: 30px 0 0 34px;
font-size: 25.6px; line-height: 1.2; font-weight: var(--fw-light); color: var(--c-white);
}
/* Filete arriba en el naranja del logo CassaSIP, para resaltar cada card */
.tuproyecto-card__link::before {
content: ""; position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 2px;
background: var(--c-accent);
}
.tuproyecto-card__panel-bg {
position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__panel-bg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__panel-bg { transform: translateY(0); }
.tuproyecto-card__text {
position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 22px 34px 26px;
max-width: 560px;
color: var(--c-white); opacity: 0;
transform: translateX(-26px) scale(1); transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__text,
.tuproyecto-card__link:focus-visible .tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.tuproyecto-card__claim { display: block; font-size: 19.2px; line-height: 1.5; font-weight: var(--fw-light); color: var(--c-white); }
.tuproyecto-card__cta {
display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
font-size: 16.8px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; color: var(--c-white);
}
.tuproyecto-card__cta svg { width: 16.8px; height: 16.8px; fill: none; stroke: var(--c-white); stroke-width: 2.4; transform: translateX(0); transition: transform .3s ease; }
.tuproyecto-card__link:hover .tuproyecto-card__cta svg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__cta svg { transform: translateX(4px); }
@media (max-width: 900px) {
.tuproyecto-grid { grid-template-columns: 1fr; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 2.1573 / 1; }
}
@media (max-width: 690px) {
.tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card__title { font-size: 19.2px; padding: 20px 0 0 20px; }
.tuproyecto-card__text { padding: 16px 20px 20px; }
/* En touch no hay hover real: panel y CTA quedan siempre visibles,
igual que en Familia Cassaforma (el párrafo se oculta para que
no choque con el título en cards bajas). */
.tuproyecto-card__panel-bg { transform: translateY(0); transition: none; }
.tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
}
.tuproyecto-card__claim { display: none; }
.tuproyecto-card__cta { margin-top: 0; }
}
/* Barra "beneficios clave" — mismas medidas que .sc-ahorros de
cassaforma.com (sistema-constructivo.css, bloque GRANDES AHORROS):
3 columnas centradas, ícono circular de 71px (ya viene con su color
en el propio .svg), separador vertical negro entre columnas. */
.ahorros { padding: 70px 0 62px; text-align: center; } /* +10% arriba y abajo (antes 64px/56px), pedido de Alan */
.ahorros__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.ahorro { display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 24px; }
.ahorro + .ahorro::before {
content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
width: 2px; background: var(--c-black);
}
.ahorro__icon { display: block; width: 71px; height: 71px; margin: 0 auto 20px; }
.ahorro__label { font-size: 23px; line-height: 1.3; font-weight: var(--fw-light); color: var(--c-navy); }
@media (max-width: 690px) {
.ahorros__grid { grid-template-columns: 1fr; row-gap: 32px; }
.ahorro + .ahorro::before { display: none; }
.ahorro__label { font-size: 19px; }
}
/* Beneficios (3 pilares) */
/* Beneficios de la construcción SIP — 2 columnas: pilares apilados con
viñeta numerada + logos de certificaciones a la izquierda, imagen a la
derecha (pedido de Alan). Separación entre columnas ×2 (antes 60px).
La imagen de la derecha no aporta su alto natural al cálculo de la fila
(queda position:absolute dentro de .beneficios__media, que por eso no
tiene alto propio): así la altura de la fila la fija SOLO la columna
izquierda (pilares + logos), y la imagen se recorta arriba/abajo con
object-fit:cover para igualar siempre esa altura — salvo en mobile,
donde se desactiva (ver media query). */
.beneficios__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; align-items: stretch; }
.beneficios__left { display: flex; flex-direction: column; }
.pilares__grid { display: flex; flex-direction: column; gap: 32px; }
.pilar__head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.pilar__num {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
background: var(--c-navy); color: var(--c-white);
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: var(--fw-xbold);
}
.pilar__title { font-size: 19px; font-weight: var(--fw-xbold); color: var(--c-navy-900); text-transform: uppercase; margin: 0; }
.pilar__text { margin-top: 0; font-size: 15.5px; line-height: 1.6; }
/* Logos de certificaciones — una sola imagen ya compuesta con los 6 logos
(2 filas x 3 columnas), mismo ancho que los párrafos de arriba (pedido
de Alan: usar la imagen completa en vez de 6 Explorá nuestros modelos pre-diseñados de viviendas, listos para adaptarse a tu proyecto y disfrutar del confort, la rapidez y la eficiencia que solo CassaSIP puede ofrecer. separadas). */
.beneficios__certs {
margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--c-line);
}
.beneficios__certs img { display: block; width: 100%; height: auto; }
.beneficios__media { position: relative; overflow: hidden; border-radius: 4px; } /* recorta el zoom del ken burns dentro de su propio cuadro (mismo criterio que .sobre-sip__media) */
.beneficios__media img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
animation: sobreSipKenBurns 18s ease-in-out infinite alternate; /* mismo ken burns que la foto de "Construcción con paneles SIP" */
}
/* ¿Por qué construir con SIP? — imagen del despiece a la izquierda, lista
de items con bullets a la derecha. Tipografía tomada de la lista de capas
de cassaforma.com (sistema-constructivo.css: .sc-panellosa__label/__item):
Heebo Light, navy, bullet "•" y divisor fino bajo cada renglón. */
.porque-sip { display: grid; grid-template-columns: minmax(300px, 460px) 1fr; gap: 60px; align-items: center; margin-top: 46px; }
.porque-sip__media img { width: 100%; display: block; }
.porque-sip__list {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto);
column-gap: 48px;
}
.porque-sip__list li {
padding: 14px 0;
border-bottom: 1px solid rgba(22, 43, 62, .15);
font-size: 19px; letter-spacing: .02em;
font-weight: var(--fw-light); color: var(--c-navy);
}
.porque-sip__list li::before { content: "\2022 "; }
@media (max-width: 1080px) {
.porque-sip { grid-template-columns: 1fr; }
.porque-sip__media { max-width: 460px; margin-inline: auto; }
}
@media (max-width: 690px) {
.porque-sip__list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
}
/* Logística — texto (Logística + Almacenamiento apilados) a la izquierda,
foto en blanco y negro con ken burns a la derecha (pedido de Alan). La
imagen no aporta su alto natural al cálculo de la fila (position:absolute
dentro de .logistica__media, sin alto propio): así la altura de la fila
la fija SOLO la columna de texto, y la foto se recorta con object-fit:cover
para igualar siempre esa altura — mismo criterio que .beneficios__media. */
.logistica__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: stretch; }
.logistica__text { display: flex; flex-direction: column; gap: 32px; }
.logistica__item h3 { font-size: 19px; font-weight: var(--fw-xbold); text-transform: uppercase; color: var(--c-navy-900); margin-bottom: 12px; }
.logistica__media { position: relative; overflow: hidden; border-radius: 4px; }
.logistica__img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
transition: filter .45s ease;
/* Es una sola foto fija (no un carrusel): un zoom-in ÚNICO de 10s que
termina y se queda ahí (forwards, sin infinite/alternate) — solo
"ida", nunca vuelve para atrás y nunca vuelve a saltar (pedido de
Alan). */
animation: destacadoKenBurns 10s ease-out forwards;
}
.logistica__media:hover .logistica__img { filter: grayscale(0); }
/* FAQ */
.faq { max-width: 880px; }
.faq__item { border-bottom: var(--border); }
.faq__item summary {
cursor: pointer; list-style: none; padding: 20px 0;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
font-size: 16.5px; font-weight: var(--fw-med); color: var(--c-navy-900);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
content: "+"; font-size: 22px; font-weight: var(--fw-light); color: var(--c-navy); flex-shrink: 0;
}
.faq__item[open] summary::after { content: "–"; }
.faq__body { padding: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: var(--c-gray); }
.faq__body ul { list-style: disc; padding-left: 20px; margin-top: 10px; }
.faq__body li { margin-bottom: 6px; }
.faq__body p + p { margin-top: 12px; }
/* Proceso constructivo — solo título + video a todo el ancho del
contenido (pedido de Alan; antes había una lista de pasos numerados). */
.proceso__video { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.proceso__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Capacitación */
.capacitacion { text-align: center; }
.capacitacion h2 { max-width: 620px; margin-inline: auto; }
.capacitacion .btn { margin-top: 30px; }
/* Presupuesto / form */
.presupuesto__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.form__field { margin-bottom: 16px; }
.form__label { display: block; font-size: 14px; font-weight: var(--fw-med); margin-bottom: 7px; }
.form__input, .form__select {
display: block; width: 100%; height: 46px; padding: 0 14px;
border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-navy-900);
font-family: var(--ff); font-size: 15px;
}
.form__input:focus, .form__select:focus { border-color: var(--c-navy); outline: none; }
.form__submit { margin-top: 6px; width: 100%; }
/* ------------------------------------------------------------
FOOTER
------------------------------------------------------------ */
.footer { background: var(--c-navy-900); color: var(--c-white); padding-block: 64px 32px; }
.footer__top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.footer__brand img { height: 40px; }
.footer__brand p { margin-top: 18px; font-size: 14px; color: rgba(255,255,255,.65); max-width: 260px; }
.footer__col h3 { font-size: 13px; font-weight: var(--fw-xbold); letter-spacing: .06em; text-transform: uppercase; color: var(--c-white); margin-bottom: 16px; }
.footer__col ul li { margin-bottom: 10px; }
.footer__col a { font-size: 14px; color: rgba(255,255,255,.75); }
.footer__col a:hover { color: var(--c-white); }
.footer__bottom {
margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15);
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
font-size: 13.5px; color: rgba(255,255,255,.6);
}
.footer__social { display: flex; gap: 14px; }
.footer__social svg { width: 16px; height: 16px; fill: rgba(255,255,255,.75); }
.footer__social a:hover svg { fill: var(--c-white); }
.footer__scrolltop { font-size: 13px; color: rgba(255,255,255,.6); }
.footer__scrolltop:hover { color: var(--c-white); }
/* ------------------------------------------------------------
RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 1169px) {
:root {
--fs-hero: 42px; --lh-hero: 46px;
--fs-hero-lead: 23px; --lh-hero-lead: 28px;
--h-hero: 660px;
}
.site-nav { gap: 15px; }
.site-nav__link { font-size: 13px; }
}
@media (max-width: 1080px) {
.site-nav { display: none; }
.destacado, .dos-columnas, .logistica__grid, .presupuesto__grid { grid-template-columns: 1fr; }
.paneles__grid { grid-template-columns: repeat(3, 1fr); }
/* En mobile se desactiva el recorte a la altura de la columna izquierda
(pedido de Alan): la imagen vuelve a su aspecto natural, en flujo. */
.beneficios__grid { grid-template-columns: 1fr; gap: 28px; align-items: normal; }
.beneficios__media img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
/* Mismo criterio que .beneficios__media: en mobile la foto de logística
vuelve a su aspecto natural, en flujo, debajo del texto. */
.logistica__grid { gap: 28px; }
.logistica__img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
.footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
:root {
--fs-hero: 34px; --lh-hero: 38px;
--fs-hero-lead: 19px; --lh-hero-lead: 26px;
--h-header: 84px; --h-hero: 560px;
}
.site-header__logo img { height: 40px; }
.hero .rule--light { width: 200px; margin: 24px 0 22px; }
}
@media (max-width: 690px) {
.site-topbar { display: none; }
:root {
--fs-hero: 27px; --lh-hero: 31px;
--fs-hero-lead: 16px; --lh-hero-lead: 24px;
--h-header: 70px; --h-hero: 520px;
}
.site-header__logo img { height: 34px; }
.hero .rule--light { width: 140px; margin: 20px 0 18px; }
.section { padding-block: 56px; }
.paneles__grid { grid-template-columns: 1fr 1fr; }
.footer__top { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------
FAMILIA CASSAFORMA — Conocé el resto de nuestras líneas
(pedido de Alan). Grilla de 5 cards (las otras líneas Cassaforma;
CassaSIP es esta misma web, no se lista a sí misma), cada una con
su color de marca en --linea-accent. Efecto "tecla de piano" v2:
TODA la card se hunde junta al pasar el mouse (borde, sombra,
logo, foto y fondo de color son todos descendientes del mismo
.familia-card__link escalado), así el degradé de color queda
siempre alineado con el borde mientras se achica. El texto es la
ÚNICA capa que NO se achica: usa un contra-escalado
(scale(calc(1 / var(--press-scale)))) que cancela el de su padre,
y entra con swipe desde la izquierda + fade-in medio segundo
después de que arranca el fondo de color. La foto NO hace zoom en
el hover (chocaba visualmente con el "hundido", pedido de Alan):
solo recupera color. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.familia-grid {
/* .section__head no trae separación propia (solo la agrega vía
".section__head + .section__grid", que esta grilla no usa) — se
fija acá a mano, mismo valor que esa regla general, para que quede
igual que en el prototipo (pedido de Alan: se había achicado). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
/* Timings del hover — un 50% más rápidos que la v1 (pedido de Alan). */
--press-scale: .965;
--press-dur: .167s;
--bg-dur: .3s;
--bg-delay: var(--press-dur);
--text-dur: .3s;
--text-delay: .5s;
}
.familia-card {
opacity: 0;
transform: translateY(40px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.familia-card.is-visible { opacity: 1; transform: translateY(0); }
.familia-card__link {
position: relative;
display: block;
height: 470px;
background: var(--c-white);
border: 1px solid var(--c-line);
box-shadow: var(--card-shadow);
overflow: hidden;
transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* "Tecla de piano": se achica y baja un poco, sombra se cierra en vez
de crecer (efecto de hundirse contra la superficie). */
.familia-card__link:hover,
.familia-card__link:focus-visible {
transform: scale(var(--press-scale)) translateY(3px);
box-shadow: 0 2px 10px rgba(22, 43, 62, .22);
}
.familia-card__logo {
position: relative;
z-index: 2;
height: 26px;
width: auto;
max-width: 74%;
margin: 26px auto 0;
object-fit: contain;
}
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 32px; margin-top: 23px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 31px; margin-top: 23px; }
.familia-card__media {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 72%;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
}
.familia-card__media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: bottom center;
filter: grayscale(1);
transition: filter .5s ease;
}
.familia-card__link[data-line="cassadeco"] .familia-card__media img { object-position: center bottom; }
/* Sin zoom en la foto: solo recupera color (pedido de Alan). */
.familia-card__link:hover .familia-card__media img,
.familia-card__link:focus-visible .familia-card__media img {
filter: grayscale(0);
}
/* Fondo de color: degradé del color de marca hacia transparente, 3/4
de la altura de la card. Hijo directo de .familia-card__link (no un
hermano aparte): se achica JUNTO con el resto de la card, así sus
márgenes quedan siempre alineados con el borde (pedido de Alan).
Entra con swipe de abajo hacia arriba apenas termina el "press". */
.familia-card__panel-bg {
position: absolute;
z-index: 2;
left: 0; right: 0; bottom: 0;
height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.familia-card__link:hover .familia-card__panel-bg,
.familia-card__link:focus-visible .familia-card__panel-bg {
transform: translateY(0);
}
/* Texto: la ÚNICA capa que NO se achica. Sigue siendo hijo de
.familia-card__link, pero en hover se le aplica un contra-escalado
(1 / var(--press-scale)) que cancela el de la card y lo deja
siempre a tamaño real (pedido de Alan). Entra con swipe desde la
izquierda + fade-in, medio segundo después de que arrancó el fondo
de color. */
.familia-card__text {
position: absolute;
z-index: 3;
left: 0; right: 0; bottom: 0;
padding: 18px 20px 20px;
color: var(--c-white);
opacity: 0;
transform: translateX(-26px) scale(1);
transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.familia-card__link:hover .familia-card__text,
.familia-card__link:focus-visible .familia-card__text {
opacity: 1;
transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.familia-card__claim {
display: block;
font-size: 14.6px; line-height: 1.45; font-weight: var(--fw-light);
color: var(--c-white);
}
.familia-card__cta {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 10px;
font-size: 13.8px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .03em;
color: var(--c-white);
}
.familia-card__cta svg {
width: 13px; height: 13px;
fill: none; stroke: var(--c-white); stroke-width: 2.4;
transform: translateX(0);
transition: transform .3s ease;
}
.familia-card__link:hover .familia-card__cta svg,
.familia-card__link:focus-visible .familia-card__cta svg {
transform: translateX(4px);
}
/* Filete de color arriba de la card: siempre visible, identifica la
marca aun antes del hover. Al ser ::before de .familia-card__link
también se hunde con toda la card (pedido de Alan). */
.familia-card__link::before {
content: "";
position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 4px;
background: var(--linea-accent, var(--c-navy-900));
}
@media (max-width: 1080px) {
.familia-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.familia-card__link { height: 420px; }
}
@media (max-width: 690px) {
.familia-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.familia-card__link { height: 340px; }
.familia-card__logo { height: 22px; margin-top: 20px; }
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 27px; margin-top: 18px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 26px; margin-top: 18px; }
/* En touch no hay hover real: el fondo de color y el CTA quedan
siempre visibles, para no depender de un tap sostenido. */
.familia-card__panel-bg { transform: translateY(0); transition: none; }
.familia-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
padding: 10px 14px 14px;
}
.familia-card__claim { display: none; }
.familia-card__cta { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; }
.hero__img, .destacado__img, .sobre-sip__img, .beneficios__media img { animation: none !important; transform: none; }
.hero__slide, .destacado__slide { transition-duration: .2s; }
.familia-card__link { transition-duration: .001ms; }
}
Tu CassaSIP
por columna
(son hermanos en el DOM aunque visualmente queden uno al lado del
otro), así que el combinador de hermano adyacente lo tomaba también
y el 2º párrafo (columna derecha) quedaba corrido hacia abajo. Se
anula explícitamente para dejar ambas columnas alineadas por su top
(bug reportado por Alan). */
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.dos-columnas p + p { margin-top: 0; }
/* Construcción con paneles SIP — foto a la derecha (pedido de Alan). En
reposo: efecto ken burns continuo (zoom/paneo lento) y desaturada. Al
pasar el mouse: la animación se detiene, la imagen vuelve a su
posición/escala inicial (mismo mecanismo de siempre: se quita la
animation y la transition la lleva de vuelta suavemente) y recupera
el color — mismo criterio que .linea-card__media img en cassaforma.com,
invertido a pedido de Alan. */
/* padding-bottom reducido a la mitad (42px, antes 84px): acerca esta
sección a "Paneles CassaSIP" (pedido de Alan); el resto de los
paddings de .section quedan igual. */
#sobre-sip { padding-bottom: 42px; }
.sobre-sip__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: start; }
/* Párrafo "Incorporamos una nueva línea de producción..." destacado en
negrita y color naranja del logo (pedido de Alan) */
.sobre-sip__highlight { font-weight: var(--fw-xbold); color: var(--c-accent); }
.sobre-sip__media { position: relative; overflow: hidden; aspect-ratio: 4/5; }
.sobre-sip__img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
animation: sobreSipKenBurns 16s ease-in-out infinite alternate;
transition: filter .45s ease, transform .6s ease;
}
@keyframes sobreSipKenBurns {
0% { transform: scale(1) translate(0, 0); }
100% { transform: scale(1.14) translate(-2.5%, 2%); }
}
.sobre-sip__media:hover .sobre-sip__img,
.sobre-sip__media:focus-within .sobre-sip__img {
filter: grayscale(0);
animation: none;
transform: scale(1) translate(0, 0);
}
@media (max-width: 1080px) {
.sobre-sip__grid { grid-template-columns: 1fr; gap: 32px; }
.sobre-sip__media { order: -1; max-width: 460px; margin-inline: auto; aspect-ratio: 4/3; }
}
/* Tipos de panel */
.paneles__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.panel-card {
/* sin recuadro: panel, título y botón flotan directamente sobre el fondo
de la sección (pedido de Alan) */
border: none; box-shadow: none; background: transparent; display: flex; flex-direction: column;
/* entrada tipo swipe (derecha → izquierda), escalonada vía JS
(.is-visible); velocidad aumentada otra vez (antes .5s/card cada 1000ms,
ahora .35s/card cada 220ms — pedido de Alan) */
opacity: 0; transform: translateX(70px); transition: opacity .35s ease, transform .35s ease;
}
.panel-card.is-visible { opacity: 1; transform: translateX(0); }
/* Render con fondo transparente: se muestra completo (sin recortar), centrado,
con un drop-shadow muy leve para dar un efecto 3D sutil (pedido de Alan).
max-height ampliado (antes 210px) para que la imagen use todo el ancho
disponible de la card en vez de quedar acotada por la altura: efecto neto,
~120% más grande (pedido de Alan). */
.panel-card__media { min-height: 465px; padding: 10px 8px 6px; display: flex; align-items: center; justify-content: center; }
/* El render es también un link de descarga de su ficha técnica (mismo PDF
que el botón); al pasar el mouse, zoom leve sobre la imagen (pedido de
Alan). */
.panel-card__media a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.panel-card__media img {
width: 100%; max-width: 100%; height: auto; max-height: 465px; object-fit: contain;
filter: drop-shadow(0 6px 10px rgba(22, 43, 62, .16));
transition: transform .35s ease;
}
.panel-card__media a:hover img,
.panel-card__media a:focus-visible img {
transform: scale(1.06);
}
.panel-card__body { padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.panel-card__name { font-size: 15px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; }
/* Botón "Descargar ficha" — mismo "tipo" que .sc-panel__cta en
sistema-constructivo.css (cassaforma.com): .btn.btn--navy de base,
ancho completo y compacto. Usar esta combinación cada vez que se
agregue un botón de descarga de ficha en el sitio (pedido de Alan). */
.panel-card__cta { margin-top: auto; width: 100%; height: 40px; font-size: 14.7px; padding: 0 12px; }
/* Adaptables a cada proyecto — texto en 2 columnas: cartera de proyectos a la
izquierda, y el párrafo de la tecnología OSB destacado en un recuadro con
fondo blanco y en negrita, a la derecha (pedido de Alan). */
.adaptables__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.adaptables__highlight {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-med); /* antes fw-xbold: menos peso (pedido de Alan) */
padding: 22px 26px; border-radius: 4px; box-shadow: var(--card-shadow);
}
/* Adaptables a cada proyecto — foto + tabla de resistencias (pedido de Alan).
margin-top +20% (antes 46px) para separar más el render del texto de
arriba. */
.adaptables__grid { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: center; margin-top: 55px; }
/* Render con fondo transparente: se muestra completo, sin recortar ni caja
fija, con un drop-shadow muy leve (mismo criterio que .panel-card__media).
Se desplaza hacia la izquierda hasta sobresalir un 10% del ancho de
contenido (pedido de Alan): crece hacia la izquierda, ancla derecha
sin cambios (mismo criterio que .panel-corte__sandwich). */
.adaptables__media {
display: flex; align-items: center; justify-content: center;
margin-left: calc(-1 * var(--w-content) * 0.10);
width: calc(100% + var(--w-content) * 0.10);
}
.adaptables__media img {
width: 100%; height: auto; max-width: 100%;
filter: drop-shadow(0 8px 14px rgba(22, 43, 62, .16));
}
/* Tabla de especificaciones: misma paleta navy/blanco y tipografía Heebo
del resto del sitio. Columna izquierda (propiedad) en navy —el mismo azul
del botón "Descargar ficha"— con texto blanco, columna derecha (valor)
alterna blanco/gris banda. Ninguna fuente en negrita (pedido de Alan). Al
pasar el mouse por una fila, se resalta en navy oscuro (izquierda) y en la
banda gris (derecha) para que se lea qué fila se está mirando. */
.specs-table-wrap { border: var(--border); border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table th, .specs-table td { padding: 15px 18px; font-size: 14.5px; line-height: 1.3; transition: background-color .2s ease, color .2s ease; }
.specs-table th {
background: var(--c-navy); color: var(--c-white);
font-weight: var(--fw-reg); text-align: left; width: 60%;
}
.specs-table td {
background: var(--c-white); color: var(--c-navy-900);
font-weight: var(--fw-light); text-align: center;
}
.specs-table tr:nth-child(even) td { background: var(--c-band); }
.specs-table tr:not(:last-child) th,
.specs-table tr:not(:last-child) td { border-bottom: 1px solid rgba(255,255,255,.08); }
.specs-table tr:hover th { background: var(--c-navy-900); }
.specs-table tr:hover td { background: var(--c-band); color: var(--c-navy); }
/* Especificaciones técnicas (debajo de "Tipos de panel") — mismo criterio
de diseño que la tabla de Adaptables: acento navy, sin negritas. Tres
grupos (Paneles / Placas / Accesorios) con una etiqueta lateral vertical,
cada uno con sus sub-tablas de medidas (pedido de Alan, ref. cassasip.com). */
.spec-groups { display: flex; flex-direction: column; gap: 34px; margin-top: 92px; } /* separación de los productos ×2 (antes 46px), pedido de Alan */
.spec-group { display: flex; align-items: stretch; gap: 22px; }
.spec-group__label {
flex-shrink: 0; width: 46px; border-radius: 4px;
background: var(--c-accent); color: var(--c-white); /* naranja del logo CassaSIP + texto blanco (pedido de Alan) */
display: flex; align-items: center; justify-content: center;
writing-mode: vertical-rl; transform: rotate(180deg);
font-size: 15.6px; /* 13px +20% (pedido de Alan) */
font-weight: var(--fw-reg); text-transform: uppercase; letter-spacing: .1em;
}
.spec-group__tables { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.spec-block__title { font-size: 14.5px; font-weight: var(--fw-reg); color: var(--c-navy-900); margin-bottom: 10px; }
.spec-block__title .spec-block__note { font-weight: var(--fw-light); color: var(--c-navy); font-size: 13px; }
.spec-block .specs-table-wrap { overflow-x: auto; }
.specs-table--grid { min-width: 560px; }
.specs-table--grid th, .specs-table--grid td { padding: 12px 14px; font-size: 13.5px; white-space: nowrap; }
.specs-table--grid thead th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: center;
}
.specs-table--grid thead th:first-child { background: var(--c-navy-900); }
.specs-table--grid tbody th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: left; width: auto;
}
.specs-table--grid tbody td {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-light); text-align: center;
}
.specs-table--grid tbody tr:nth-child(even) td { background: var(--c-band); }
.specs-table--grid tbody tr:hover th { background: var(--c-navy-900); }
.specs-table--grid tbody tr:hover td { background: var(--c-band); color: var(--c-navy); }
@media (max-width: 690px) {
.spec-group { flex-direction: column; gap: 10px; }
.spec-group__label {
width: 100%; writing-mode: horizontal-tb; transform: none; padding: 8px; height: auto;
}
}
@media (max-width: 1080px) {
.adaptables__intro { grid-template-columns: 1fr; gap: 20px; }
.adaptables__grid { grid-template-columns: 1fr; gap: 28px; }
/* en una sola columna el desborde a la izquierda no tiene sentido
(no queda margen de página del que sobresalir): se desactiva */
.adaptables__media { margin-left: 0; width: 100%; max-width: 460px; margin-inline: auto; }
.specs-table-wrap { max-width: 460px; margin-inline: auto; width: 100%; }
}
/* ------------------------------------------------------------
PERFILES — Contanos qué necesitás (pedido de Ceci vía Alan).
3 cards con foto en blanco y negro tapada por una "cortina" navy con
textura diagonal sutil; al hacer hover la cortina se corre hacia la
derecha con clip-path (no se desvanece, se desliza), la foto recupera
color + zoom leve, aparece una línea de acento naranja creciendo bajo
el título y la flecha se desplaza. Entrada: swipe hacia arriba
escalonado al entrar en viewport (ver "Perfiles CassaSIP" en
js/script.js), misma familia de efecto que .panel-card pero vertical
en vez de lateral, para variar. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.perfiles-sip__grid {
/* mismo ajuste que .familia-grid: .section__head no trae separación
propia acá (pedido de Alan: se había achicado respecto al prototipo). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.perfil-sip-card {
opacity: 0;
transform: translateY(46px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.perfil-sip-card.is-visible { opacity: 1; transform: translateY(0); }
.perfil-sip-card__link {
position: relative;
display: block;
border: var(--border);
box-shadow: var(--card-shadow);
transition: box-shadow var(--t-base), transform var(--t-base);
}
.perfil-sip-card__link:hover,
.perfil-sip-card__link:focus-visible {
box-shadow: 0 8px 30px rgba(22, 43, 62, .16);
transform: translateY(-4px);
}
.perfil-sip-card__media {
position: relative;
height: 300px;
overflow: hidden;
}
.perfil-sip-card__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.05);
transform: scale(1.03);
transition: transform .6s ease, filter .6s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__img,
.perfil-sip-card__link:focus-visible .perfil-sip-card__img {
filter: grayscale(0) contrast(1);
transform: scale(1.1);
}
.perfil-sip-card__curtain {
position: absolute; inset: 0;
background:
repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px),
linear-gradient(150deg, var(--c-navy-900) 0%, var(--c-navy) 100%);
clip-path: inset(0 0 0 0);
transition: clip-path .55s cubic-bezier(.65,0,.35,1);
}
.perfil-sip-card__link:hover .perfil-sip-card__curtain,
.perfil-sip-card__link:focus-visible .perfil-sip-card__curtain {
clip-path: inset(0 0 0 100%);
}
.perfil-sip-card__num {
position: absolute; top: 18px; left: 20px;
font-size: 13px; font-weight: var(--fw-xbold);
color: rgba(255,255,255,.55);
letter-spacing: .06em;
transition: opacity .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__num,
.perfil-sip-card__link:focus-visible .perfil-sip-card__num { opacity: 0; }
.perfil-sip-card__body {
position: relative;
background: var(--c-white);
padding: 22px 22px 26px;
}
.perfil-sip-card__accent {
display: block;
height: 3px;
width: 0%;
background: var(--c-accent);
transition: width .45s ease;
margin-bottom: 14px;
}
.perfil-sip-card__link:hover .perfil-sip-card__accent,
.perfil-sip-card__link:focus-visible .perfil-sip-card__accent { width: 100%; }
.perfil-sip-card__label {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
font-size: 15px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .02em;
color: var(--c-navy-900);
}
.perfil-sip-card__label svg {
width: 18px; height: 18px; flex-shrink: 0;
fill: none; stroke: var(--c-navy-900); stroke-width: 2;
transform: translateX(0);
transition: transform .35s ease, stroke .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__label svg,
.perfil-sip-card__link:focus-visible .perfil-sip-card__label svg {
transform: translateX(6px);
stroke: var(--c-accent);
}
.perfil-sip-card__desc {
margin-top: 8px;
font-size: 14.7px; line-height: 1.55; font-weight: var(--fw-light);
color: var(--c-gray);
}
@media (max-width: 1080px) {
.perfiles-sip__grid { grid-template-columns: 1fr; gap: 20px; }
.perfil-sip-card { transform: translateY(28px); }
.perfil-sip-card__media { height: 260px; }
}
/* ------------------------------------------------------------
TU PROYECTO — CassaSIP (pedido de Alan).
1 card "hero" a ancho completo (mitad de alto que una card de
grilla) + grilla 2x2 con las 4 restantes. Título siempre
visible sobre la foto; párrafo + CTA revelados al hover con
swipe desde la izquierda. Hover "tecla de piano" con zoom IN:
toda la card crece y el fondo de color sube al mismo tiempo
(--bg-delay: 0s); el texto arranca cuando ese swipe del fondo
va por la mitad (--text-delay: .15s, 50% de --bg-dur), para que
no se sienta "atrasado". Mismo mecanismo de contra-escala que
Familia Cassaforma para que el texto no crezca junto con la
card.
------------------------------------------------------------ */
.tuproyecto-grid {
margin-top: 46px;
list-style: none; padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
--press-scale: 1.035;
--press-dur: .3s;
--bg-dur: .3s;
--bg-delay: 0s;
--text-dur: .3s;
--text-delay: .15s; /* arranca cuando el swipe del fondo va por la mitad (50% de .3s) */
}
.tuproyecto-card--hero { grid-column: 1 / -1; }
.tuproyecto-card { opacity: 0; transform: translateY(40px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1); }
.tuproyecto-card.is-visible { opacity: 1; transform: translateY(0); }
.tuproyecto-card__link {
position: relative; display: block;
aspect-ratio: 2.1573 / 1;
background: var(--c-white); border: 1px solid var(--c-line); box-shadow: var(--card-shadow);
overflow: hidden; transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* Card hero: mismo ancho, la mitad del alto proporcional (el doble de "achatada") */
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 4.3147 / 1; }
.tuproyecto-card__link:hover, .tuproyecto-card__link:focus-visible {
transform: scale(var(--press-scale));
box-shadow: 0 14px 34px rgba(22, 43, 62, .28);
z-index: 5;
}
.tuproyecto-card__media { position: absolute; inset: 0; }
.tuproyecto-card__media img {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: grayscale(1); transition: filter .5s ease;
}
.tuproyecto-card__link:hover .tuproyecto-card__media img,
.tuproyecto-card__link:focus-visible .tuproyecto-card__media img { filter: grayscale(0); }
/* Scrim permanente para que el título siempre se lea */
.tuproyecto-card__link::after {
content: ""; position: absolute; z-index: 1; inset: 0;
background: linear-gradient(160deg, rgba(22,43,62,.55) 0%, rgba(22,43,62,.22) 45%, rgba(22,43,62,.05) 70%);
}
.tuproyecto-card__title {
position: relative; z-index: 2; display: block;
padding: 30px 0 0 34px;
font-size: 25.6px; line-height: 1.2; font-weight: var(--fw-light); color: var(--c-white);
}
/* Filete arriba en el naranja del logo CassaSIP, para resaltar cada card */
.tuproyecto-card__link::before {
content: ""; position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 2px;
background: var(--c-accent);
}
.tuproyecto-card__panel-bg {
position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__panel-bg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__panel-bg { transform: translateY(0); }
.tuproyecto-card__text {
position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 22px 34px 26px;
max-width: 560px;
color: var(--c-white); opacity: 0;
transform: translateX(-26px) scale(1); transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__text,
.tuproyecto-card__link:focus-visible .tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.tuproyecto-card__claim { display: block; font-size: 19.2px; line-height: 1.5; font-weight: var(--fw-light); color: var(--c-white); }
.tuproyecto-card__cta {
display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
font-size: 16.8px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; color: var(--c-white);
}
.tuproyecto-card__cta svg { width: 16.8px; height: 16.8px; fill: none; stroke: var(--c-white); stroke-width: 2.4; transform: translateX(0); transition: transform .3s ease; }
.tuproyecto-card__link:hover .tuproyecto-card__cta svg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__cta svg { transform: translateX(4px); }
@media (max-width: 900px) {
.tuproyecto-grid { grid-template-columns: 1fr; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 2.1573 / 1; }
}
@media (max-width: 690px) {
.tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card__title { font-size: 19.2px; padding: 20px 0 0 20px; }
.tuproyecto-card__text { padding: 16px 20px 20px; }
/* En touch no hay hover real: panel y CTA quedan siempre visibles,
igual que en Familia Cassaforma (el párrafo se oculta para que
no choque con el título en cards bajas). */
.tuproyecto-card__panel-bg { transform: translateY(0); transition: none; }
.tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
}
.tuproyecto-card__claim { display: none; }
.tuproyecto-card__cta { margin-top: 0; }
}
/* Barra "beneficios clave" — mismas medidas que .sc-ahorros de
cassaforma.com (sistema-constructivo.css, bloque GRANDES AHORROS):
3 columnas centradas, ícono circular de 71px (ya viene con su color
en el propio .svg), separador vertical negro entre columnas. */
.ahorros { padding: 70px 0 62px; text-align: center; } /* +10% arriba y abajo (antes 64px/56px), pedido de Alan */
.ahorros__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.ahorro { display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 24px; }
.ahorro + .ahorro::before {
content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
width: 2px; background: var(--c-black);
}
.ahorro__icon { display: block; width: 71px; height: 71px; margin: 0 auto 20px; }
.ahorro__label { font-size: 23px; line-height: 1.3; font-weight: var(--fw-light); color: var(--c-navy); }
@media (max-width: 690px) {
.ahorros__grid { grid-template-columns: 1fr; row-gap: 32px; }
.ahorro + .ahorro::before { display: none; }
.ahorro__label { font-size: 19px; }
}
/* Beneficios (3 pilares) */
/* Beneficios de la construcción SIP — 2 columnas: pilares apilados con
viñeta numerada + logos de certificaciones a la izquierda, imagen a la
derecha (pedido de Alan). Separación entre columnas ×2 (antes 60px).
La imagen de la derecha no aporta su alto natural al cálculo de la fila
(queda position:absolute dentro de .beneficios__media, que por eso no
tiene alto propio): así la altura de la fila la fija SOLO la columna
izquierda (pilares + logos), y la imagen se recorta arriba/abajo con
object-fit:cover para igualar siempre esa altura — salvo en mobile,
donde se desactiva (ver media query). */
.beneficios__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; align-items: stretch; }
.beneficios__left { display: flex; flex-direction: column; }
.pilares__grid { display: flex; flex-direction: column; gap: 32px; }
.pilar__head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.pilar__num {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
background: var(--c-navy); color: var(--c-white);
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: var(--fw-xbold);
}
.pilar__title { font-size: 19px; font-weight: var(--fw-xbold); color: var(--c-navy-900); text-transform: uppercase; margin: 0; }
.pilar__text { margin-top: 0; font-size: 15.5px; line-height: 1.6; }
/* Logos de certificaciones — una sola imagen ya compuesta con los 6 logos
(2 filas x 3 columnas), mismo ancho que los párrafos de arriba (pedido
de Alan: usar la imagen completa en vez de 6 Con más de 30 años de liderazgo en fabricación de sistemas constructivos, presentamos CassaSIP. Incorporamos una nueva línea de producción de última generación, para abastecer obras de todo el país con paneles SIP. El sistema SIP, fue creado en la década del '70 en USA y es considerado el sistema con mayor producción para la construcción de casas. Soluciona tres partes fundamentales de la construcción: la envolvente, la estructura y el aislamiento de la casa, todo al mismo tiempo, ya que ahorra el tiempo que se invertiría en resolver estas tres actividades en obra por separado. separadas). */
.beneficios__certs {
margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--c-line);
}
.beneficios__certs img { display: block; width: 100%; height: auto; }
.beneficios__media { position: relative; overflow: hidden; border-radius: 4px; } /* recorta el zoom del ken burns dentro de su propio cuadro (mismo criterio que .sobre-sip__media) */
.beneficios__media img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
animation: sobreSipKenBurns 18s ease-in-out infinite alternate; /* mismo ken burns que la foto de "Construcción con paneles SIP" */
}
/* ¿Por qué construir con SIP? — imagen del despiece a la izquierda, lista
de items con bullets a la derecha. Tipografía tomada de la lista de capas
de cassaforma.com (sistema-constructivo.css: .sc-panellosa__label/__item):
Heebo Light, navy, bullet "•" y divisor fino bajo cada renglón. */
.porque-sip { display: grid; grid-template-columns: minmax(300px, 460px) 1fr; gap: 60px; align-items: center; margin-top: 46px; }
.porque-sip__media img { width: 100%; display: block; }
.porque-sip__list {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto);
column-gap: 48px;
}
.porque-sip__list li {
padding: 14px 0;
border-bottom: 1px solid rgba(22, 43, 62, .15);
font-size: 19px; letter-spacing: .02em;
font-weight: var(--fw-light); color: var(--c-navy);
}
.porque-sip__list li::before { content: "\2022 "; }
@media (max-width: 1080px) {
.porque-sip { grid-template-columns: 1fr; }
.porque-sip__media { max-width: 460px; margin-inline: auto; }
}
@media (max-width: 690px) {
.porque-sip__list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
}
/* Logística — texto (Logística + Almacenamiento apilados) a la izquierda,
foto en blanco y negro con ken burns a la derecha (pedido de Alan). La
imagen no aporta su alto natural al cálculo de la fila (position:absolute
dentro de .logistica__media, sin alto propio): así la altura de la fila
la fija SOLO la columna de texto, y la foto se recorta con object-fit:cover
para igualar siempre esa altura — mismo criterio que .beneficios__media. */
.logistica__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: stretch; }
.logistica__text { display: flex; flex-direction: column; gap: 32px; }
.logistica__item h3 { font-size: 19px; font-weight: var(--fw-xbold); text-transform: uppercase; color: var(--c-navy-900); margin-bottom: 12px; }
.logistica__media { position: relative; overflow: hidden; border-radius: 4px; }
.logistica__img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
transition: filter .45s ease;
/* Es una sola foto fija (no un carrusel): un zoom-in ÚNICO de 10s que
termina y se queda ahí (forwards, sin infinite/alternate) — solo
"ida", nunca vuelve para atrás y nunca vuelve a saltar (pedido de
Alan). */
animation: destacadoKenBurns 10s ease-out forwards;
}
.logistica__media:hover .logistica__img { filter: grayscale(0); }
/* FAQ */
.faq { max-width: 880px; }
.faq__item { border-bottom: var(--border); }
.faq__item summary {
cursor: pointer; list-style: none; padding: 20px 0;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
font-size: 16.5px; font-weight: var(--fw-med); color: var(--c-navy-900);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
content: "+"; font-size: 22px; font-weight: var(--fw-light); color: var(--c-navy); flex-shrink: 0;
}
.faq__item[open] summary::after { content: "–"; }
.faq__body { padding: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: var(--c-gray); }
.faq__body ul { list-style: disc; padding-left: 20px; margin-top: 10px; }
.faq__body li { margin-bottom: 6px; }
.faq__body p + p { margin-top: 12px; }
/* Proceso constructivo — solo título + video a todo el ancho del
contenido (pedido de Alan; antes había una lista de pasos numerados). */
.proceso__video { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.proceso__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Capacitación */
.capacitacion { text-align: center; }
.capacitacion h2 { max-width: 620px; margin-inline: auto; }
.capacitacion .btn { margin-top: 30px; }
/* Presupuesto / form */
.presupuesto__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.form__field { margin-bottom: 16px; }
.form__label { display: block; font-size: 14px; font-weight: var(--fw-med); margin-bottom: 7px; }
.form__input, .form__select {
display: block; width: 100%; height: 46px; padding: 0 14px;
border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-navy-900);
font-family: var(--ff); font-size: 15px;
}
.form__input:focus, .form__select:focus { border-color: var(--c-navy); outline: none; }
.form__submit { margin-top: 6px; width: 100%; }
/* ------------------------------------------------------------
FOOTER
------------------------------------------------------------ */
.footer { background: var(--c-navy-900); color: var(--c-white); padding-block: 64px 32px; }
.footer__top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.footer__brand img { height: 40px; }
.footer__brand p { margin-top: 18px; font-size: 14px; color: rgba(255,255,255,.65); max-width: 260px; }
.footer__col h3 { font-size: 13px; font-weight: var(--fw-xbold); letter-spacing: .06em; text-transform: uppercase; color: var(--c-white); margin-bottom: 16px; }
.footer__col ul li { margin-bottom: 10px; }
.footer__col a { font-size: 14px; color: rgba(255,255,255,.75); }
.footer__col a:hover { color: var(--c-white); }
.footer__bottom {
margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15);
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
font-size: 13.5px; color: rgba(255,255,255,.6);
}
.footer__social { display: flex; gap: 14px; }
.footer__social svg { width: 16px; height: 16px; fill: rgba(255,255,255,.75); }
.footer__social a:hover svg { fill: var(--c-white); }
.footer__scrolltop { font-size: 13px; color: rgba(255,255,255,.6); }
.footer__scrolltop:hover { color: var(--c-white); }
/* ------------------------------------------------------------
RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 1169px) {
:root {
--fs-hero: 42px; --lh-hero: 46px;
--fs-hero-lead: 23px; --lh-hero-lead: 28px;
--h-hero: 660px;
}
.site-nav { gap: 15px; }
.site-nav__link { font-size: 13px; }
}
@media (max-width: 1080px) {
.site-nav { display: none; }
.destacado, .dos-columnas, .logistica__grid, .presupuesto__grid { grid-template-columns: 1fr; }
.paneles__grid { grid-template-columns: repeat(3, 1fr); }
/* En mobile se desactiva el recorte a la altura de la columna izquierda
(pedido de Alan): la imagen vuelve a su aspecto natural, en flujo. */
.beneficios__grid { grid-template-columns: 1fr; gap: 28px; align-items: normal; }
.beneficios__media img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
/* Mismo criterio que .beneficios__media: en mobile la foto de logística
vuelve a su aspecto natural, en flujo, debajo del texto. */
.logistica__grid { gap: 28px; }
.logistica__img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
.footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
:root {
--fs-hero: 34px; --lh-hero: 38px;
--fs-hero-lead: 19px; --lh-hero-lead: 26px;
--h-header: 84px; --h-hero: 560px;
}
.site-header__logo img { height: 40px; }
.hero .rule--light { width: 200px; margin: 24px 0 22px; }
}
@media (max-width: 690px) {
.site-topbar { display: none; }
:root {
--fs-hero: 27px; --lh-hero: 31px;
--fs-hero-lead: 16px; --lh-hero-lead: 24px;
--h-header: 70px; --h-hero: 520px;
}
.site-header__logo img { height: 34px; }
.hero .rule--light { width: 140px; margin: 20px 0 18px; }
.section { padding-block: 56px; }
.paneles__grid { grid-template-columns: 1fr 1fr; }
.footer__top { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------
FAMILIA CASSAFORMA — Conocé el resto de nuestras líneas
(pedido de Alan). Grilla de 5 cards (las otras líneas Cassaforma;
CassaSIP es esta misma web, no se lista a sí misma), cada una con
su color de marca en --linea-accent. Efecto "tecla de piano" v2:
TODA la card se hunde junta al pasar el mouse (borde, sombra,
logo, foto y fondo de color son todos descendientes del mismo
.familia-card__link escalado), así el degradé de color queda
siempre alineado con el borde mientras se achica. El texto es la
ÚNICA capa que NO se achica: usa un contra-escalado
(scale(calc(1 / var(--press-scale)))) que cancela el de su padre,
y entra con swipe desde la izquierda + fade-in medio segundo
después de que arranca el fondo de color. La foto NO hace zoom en
el hover (chocaba visualmente con el "hundido", pedido de Alan):
solo recupera color. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.familia-grid {
/* .section__head no trae separación propia (solo la agrega vía
".section__head + .section__grid", que esta grilla no usa) — se
fija acá a mano, mismo valor que esa regla general, para que quede
igual que en el prototipo (pedido de Alan: se había achicado). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
/* Timings del hover — un 50% más rápidos que la v1 (pedido de Alan). */
--press-scale: .965;
--press-dur: .167s;
--bg-dur: .3s;
--bg-delay: var(--press-dur);
--text-dur: .3s;
--text-delay: .5s;
}
.familia-card {
opacity: 0;
transform: translateY(40px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.familia-card.is-visible { opacity: 1; transform: translateY(0); }
.familia-card__link {
position: relative;
display: block;
height: 470px;
background: var(--c-white);
border: 1px solid var(--c-line);
box-shadow: var(--card-shadow);
overflow: hidden;
transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* "Tecla de piano": se achica y baja un poco, sombra se cierra en vez
de crecer (efecto de hundirse contra la superficie). */
.familia-card__link:hover,
.familia-card__link:focus-visible {
transform: scale(var(--press-scale)) translateY(3px);
box-shadow: 0 2px 10px rgba(22, 43, 62, .22);
}
.familia-card__logo {
position: relative;
z-index: 2;
height: 26px;
width: auto;
max-width: 74%;
margin: 26px auto 0;
object-fit: contain;
}
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 32px; margin-top: 23px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 31px; margin-top: 23px; }
.familia-card__media {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 72%;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
}
.familia-card__media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: bottom center;
filter: grayscale(1);
transition: filter .5s ease;
}
.familia-card__link[data-line="cassadeco"] .familia-card__media img { object-position: center bottom; }
/* Sin zoom en la foto: solo recupera color (pedido de Alan). */
.familia-card__link:hover .familia-card__media img,
.familia-card__link:focus-visible .familia-card__media img {
filter: grayscale(0);
}
/* Fondo de color: degradé del color de marca hacia transparente, 3/4
de la altura de la card. Hijo directo de .familia-card__link (no un
hermano aparte): se achica JUNTO con el resto de la card, así sus
márgenes quedan siempre alineados con el borde (pedido de Alan).
Entra con swipe de abajo hacia arriba apenas termina el "press". */
.familia-card__panel-bg {
position: absolute;
z-index: 2;
left: 0; right: 0; bottom: 0;
height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.familia-card__link:hover .familia-card__panel-bg,
.familia-card__link:focus-visible .familia-card__panel-bg {
transform: translateY(0);
}
/* Texto: la ÚNICA capa que NO se achica. Sigue siendo hijo de
.familia-card__link, pero en hover se le aplica un contra-escalado
(1 / var(--press-scale)) que cancela el de la card y lo deja
siempre a tamaño real (pedido de Alan). Entra con swipe desde la
izquierda + fade-in, medio segundo después de que arrancó el fondo
de color. */
.familia-card__text {
position: absolute;
z-index: 3;
left: 0; right: 0; bottom: 0;
padding: 18px 20px 20px;
color: var(--c-white);
opacity: 0;
transform: translateX(-26px) scale(1);
transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.familia-card__link:hover .familia-card__text,
.familia-card__link:focus-visible .familia-card__text {
opacity: 1;
transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.familia-card__claim {
display: block;
font-size: 14.6px; line-height: 1.45; font-weight: var(--fw-light);
color: var(--c-white);
}
.familia-card__cta {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 10px;
font-size: 13.8px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .03em;
color: var(--c-white);
}
.familia-card__cta svg {
width: 13px; height: 13px;
fill: none; stroke: var(--c-white); stroke-width: 2.4;
transform: translateX(0);
transition: transform .3s ease;
}
.familia-card__link:hover .familia-card__cta svg,
.familia-card__link:focus-visible .familia-card__cta svg {
transform: translateX(4px);
}
/* Filete de color arriba de la card: siempre visible, identifica la
marca aun antes del hover. Al ser ::before de .familia-card__link
también se hunde con toda la card (pedido de Alan). */
.familia-card__link::before {
content: "";
position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 4px;
background: var(--linea-accent, var(--c-navy-900));
}
@media (max-width: 1080px) {
.familia-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.familia-card__link { height: 420px; }
}
@media (max-width: 690px) {
.familia-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.familia-card__link { height: 340px; }
.familia-card__logo { height: 22px; margin-top: 20px; }
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 27px; margin-top: 18px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 26px; margin-top: 18px; }
/* En touch no hay hover real: el fondo de color y el CTA quedan
siempre visibles, para no depender de un tap sostenido. */
.familia-card__panel-bg { transform: translateY(0); transition: none; }
.familia-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
padding: 10px 14px 14px;
}
.familia-card__claim { display: none; }
.familia-card__cta { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; }
.hero__img, .destacado__img, .sobre-sip__img, .beneficios__media img { animation: none !important; transform: none; }
.hero__slide, .destacado__slide { transition-duration: .2s; }
.familia-card__link { transition-duration: .001ms; }
}
Construcción con paneles SIP
por columna
(son hermanos en el DOM aunque visualmente queden uno al lado del
otro), así que el combinador de hermano adyacente lo tomaba también
y el 2º párrafo (columna derecha) quedaba corrido hacia abajo. Se
anula explícitamente para dejar ambas columnas alineadas por su top
(bug reportado por Alan). */
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.dos-columnas p + p { margin-top: 0; }
/* Construcción con paneles SIP — foto a la derecha (pedido de Alan). En
reposo: efecto ken burns continuo (zoom/paneo lento) y desaturada. Al
pasar el mouse: la animación se detiene, la imagen vuelve a su
posición/escala inicial (mismo mecanismo de siempre: se quita la
animation y la transition la lleva de vuelta suavemente) y recupera
el color — mismo criterio que .linea-card__media img en cassaforma.com,
invertido a pedido de Alan. */
/* padding-bottom reducido a la mitad (42px, antes 84px): acerca esta
sección a "Paneles CassaSIP" (pedido de Alan); el resto de los
paddings de .section quedan igual. */
#sobre-sip { padding-bottom: 42px; }
.sobre-sip__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: start; }
/* Párrafo "Incorporamos una nueva línea de producción..." destacado en
negrita y color naranja del logo (pedido de Alan) */
.sobre-sip__highlight { font-weight: var(--fw-xbold); color: var(--c-accent); }
.sobre-sip__media { position: relative; overflow: hidden; aspect-ratio: 4/5; }
.sobre-sip__img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
animation: sobreSipKenBurns 16s ease-in-out infinite alternate;
transition: filter .45s ease, transform .6s ease;
}
@keyframes sobreSipKenBurns {
0% { transform: scale(1) translate(0, 0); }
100% { transform: scale(1.14) translate(-2.5%, 2%); }
}
.sobre-sip__media:hover .sobre-sip__img,
.sobre-sip__media:focus-within .sobre-sip__img {
filter: grayscale(0);
animation: none;
transform: scale(1) translate(0, 0);
}
@media (max-width: 1080px) {
.sobre-sip__grid { grid-template-columns: 1fr; gap: 32px; }
.sobre-sip__media { order: -1; max-width: 460px; margin-inline: auto; aspect-ratio: 4/3; }
}
/* Tipos de panel */
.paneles__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.panel-card {
/* sin recuadro: panel, título y botón flotan directamente sobre el fondo
de la sección (pedido de Alan) */
border: none; box-shadow: none; background: transparent; display: flex; flex-direction: column;
/* entrada tipo swipe (derecha → izquierda), escalonada vía JS
(.is-visible); velocidad aumentada otra vez (antes .5s/card cada 1000ms,
ahora .35s/card cada 220ms — pedido de Alan) */
opacity: 0; transform: translateX(70px); transition: opacity .35s ease, transform .35s ease;
}
.panel-card.is-visible { opacity: 1; transform: translateX(0); }
/* Render con fondo transparente: se muestra completo (sin recortar), centrado,
con un drop-shadow muy leve para dar un efecto 3D sutil (pedido de Alan).
max-height ampliado (antes 210px) para que la imagen use todo el ancho
disponible de la card en vez de quedar acotada por la altura: efecto neto,
~120% más grande (pedido de Alan). */
.panel-card__media { min-height: 465px; padding: 10px 8px 6px; display: flex; align-items: center; justify-content: center; }
/* El render es también un link de descarga de su ficha técnica (mismo PDF
que el botón); al pasar el mouse, zoom leve sobre la imagen (pedido de
Alan). */
.panel-card__media a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.panel-card__media img {
width: 100%; max-width: 100%; height: auto; max-height: 465px; object-fit: contain;
filter: drop-shadow(0 6px 10px rgba(22, 43, 62, .16));
transition: transform .35s ease;
}
.panel-card__media a:hover img,
.panel-card__media a:focus-visible img {
transform: scale(1.06);
}
.panel-card__body { padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.panel-card__name { font-size: 15px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; }
/* Botón "Descargar ficha" — mismo "tipo" que .sc-panel__cta en
sistema-constructivo.css (cassaforma.com): .btn.btn--navy de base,
ancho completo y compacto. Usar esta combinación cada vez que se
agregue un botón de descarga de ficha en el sitio (pedido de Alan). */
.panel-card__cta { margin-top: auto; width: 100%; height: 40px; font-size: 14.7px; padding: 0 12px; }
/* Adaptables a cada proyecto — texto en 2 columnas: cartera de proyectos a la
izquierda, y el párrafo de la tecnología OSB destacado en un recuadro con
fondo blanco y en negrita, a la derecha (pedido de Alan). */
.adaptables__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.adaptables__highlight {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-med); /* antes fw-xbold: menos peso (pedido de Alan) */
padding: 22px 26px; border-radius: 4px; box-shadow: var(--card-shadow);
}
/* Adaptables a cada proyecto — foto + tabla de resistencias (pedido de Alan).
margin-top +20% (antes 46px) para separar más el render del texto de
arriba. */
.adaptables__grid { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: center; margin-top: 55px; }
/* Render con fondo transparente: se muestra completo, sin recortar ni caja
fija, con un drop-shadow muy leve (mismo criterio que .panel-card__media).
Se desplaza hacia la izquierda hasta sobresalir un 10% del ancho de
contenido (pedido de Alan): crece hacia la izquierda, ancla derecha
sin cambios (mismo criterio que .panel-corte__sandwich). */
.adaptables__media {
display: flex; align-items: center; justify-content: center;
margin-left: calc(-1 * var(--w-content) * 0.10);
width: calc(100% + var(--w-content) * 0.10);
}
.adaptables__media img {
width: 100%; height: auto; max-width: 100%;
filter: drop-shadow(0 8px 14px rgba(22, 43, 62, .16));
}
/* Tabla de especificaciones: misma paleta navy/blanco y tipografía Heebo
del resto del sitio. Columna izquierda (propiedad) en navy —el mismo azul
del botón "Descargar ficha"— con texto blanco, columna derecha (valor)
alterna blanco/gris banda. Ninguna fuente en negrita (pedido de Alan). Al
pasar el mouse por una fila, se resalta en navy oscuro (izquierda) y en la
banda gris (derecha) para que se lea qué fila se está mirando. */
.specs-table-wrap { border: var(--border); border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table th, .specs-table td { padding: 15px 18px; font-size: 14.5px; line-height: 1.3; transition: background-color .2s ease, color .2s ease; }
.specs-table th {
background: var(--c-navy); color: var(--c-white);
font-weight: var(--fw-reg); text-align: left; width: 60%;
}
.specs-table td {
background: var(--c-white); color: var(--c-navy-900);
font-weight: var(--fw-light); text-align: center;
}
.specs-table tr:nth-child(even) td { background: var(--c-band); }
.specs-table tr:not(:last-child) th,
.specs-table tr:not(:last-child) td { border-bottom: 1px solid rgba(255,255,255,.08); }
.specs-table tr:hover th { background: var(--c-navy-900); }
.specs-table tr:hover td { background: var(--c-band); color: var(--c-navy); }
/* Especificaciones técnicas (debajo de "Tipos de panel") — mismo criterio
de diseño que la tabla de Adaptables: acento navy, sin negritas. Tres
grupos (Paneles / Placas / Accesorios) con una etiqueta lateral vertical,
cada uno con sus sub-tablas de medidas (pedido de Alan, ref. cassasip.com). */
.spec-groups { display: flex; flex-direction: column; gap: 34px; margin-top: 92px; } /* separación de los productos ×2 (antes 46px), pedido de Alan */
.spec-group { display: flex; align-items: stretch; gap: 22px; }
.spec-group__label {
flex-shrink: 0; width: 46px; border-radius: 4px;
background: var(--c-accent); color: var(--c-white); /* naranja del logo CassaSIP + texto blanco (pedido de Alan) */
display: flex; align-items: center; justify-content: center;
writing-mode: vertical-rl; transform: rotate(180deg);
font-size: 15.6px; /* 13px +20% (pedido de Alan) */
font-weight: var(--fw-reg); text-transform: uppercase; letter-spacing: .1em;
}
.spec-group__tables { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.spec-block__title { font-size: 14.5px; font-weight: var(--fw-reg); color: var(--c-navy-900); margin-bottom: 10px; }
.spec-block__title .spec-block__note { font-weight: var(--fw-light); color: var(--c-navy); font-size: 13px; }
.spec-block .specs-table-wrap { overflow-x: auto; }
.specs-table--grid { min-width: 560px; }
.specs-table--grid th, .specs-table--grid td { padding: 12px 14px; font-size: 13.5px; white-space: nowrap; }
.specs-table--grid thead th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: center;
}
.specs-table--grid thead th:first-child { background: var(--c-navy-900); }
.specs-table--grid tbody th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: left; width: auto;
}
.specs-table--grid tbody td {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-light); text-align: center;
}
.specs-table--grid tbody tr:nth-child(even) td { background: var(--c-band); }
.specs-table--grid tbody tr:hover th { background: var(--c-navy-900); }
.specs-table--grid tbody tr:hover td { background: var(--c-band); color: var(--c-navy); }
@media (max-width: 690px) {
.spec-group { flex-direction: column; gap: 10px; }
.spec-group__label {
width: 100%; writing-mode: horizontal-tb; transform: none; padding: 8px; height: auto;
}
}
@media (max-width: 1080px) {
.adaptables__intro { grid-template-columns: 1fr; gap: 20px; }
.adaptables__grid { grid-template-columns: 1fr; gap: 28px; }
/* en una sola columna el desborde a la izquierda no tiene sentido
(no queda margen de página del que sobresalir): se desactiva */
.adaptables__media { margin-left: 0; width: 100%; max-width: 460px; margin-inline: auto; }
.specs-table-wrap { max-width: 460px; margin-inline: auto; width: 100%; }
}
/* ------------------------------------------------------------
PERFILES — Contanos qué necesitás (pedido de Ceci vía Alan).
3 cards con foto en blanco y negro tapada por una "cortina" navy con
textura diagonal sutil; al hacer hover la cortina se corre hacia la
derecha con clip-path (no se desvanece, se desliza), la foto recupera
color + zoom leve, aparece una línea de acento naranja creciendo bajo
el título y la flecha se desplaza. Entrada: swipe hacia arriba
escalonado al entrar en viewport (ver "Perfiles CassaSIP" en
js/script.js), misma familia de efecto que .panel-card pero vertical
en vez de lateral, para variar. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.perfiles-sip__grid {
/* mismo ajuste que .familia-grid: .section__head no trae separación
propia acá (pedido de Alan: se había achicado respecto al prototipo). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.perfil-sip-card {
opacity: 0;
transform: translateY(46px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.perfil-sip-card.is-visible { opacity: 1; transform: translateY(0); }
.perfil-sip-card__link {
position: relative;
display: block;
border: var(--border);
box-shadow: var(--card-shadow);
transition: box-shadow var(--t-base), transform var(--t-base);
}
.perfil-sip-card__link:hover,
.perfil-sip-card__link:focus-visible {
box-shadow: 0 8px 30px rgba(22, 43, 62, .16);
transform: translateY(-4px);
}
.perfil-sip-card__media {
position: relative;
height: 300px;
overflow: hidden;
}
.perfil-sip-card__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.05);
transform: scale(1.03);
transition: transform .6s ease, filter .6s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__img,
.perfil-sip-card__link:focus-visible .perfil-sip-card__img {
filter: grayscale(0) contrast(1);
transform: scale(1.1);
}
.perfil-sip-card__curtain {
position: absolute; inset: 0;
background:
repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px),
linear-gradient(150deg, var(--c-navy-900) 0%, var(--c-navy) 100%);
clip-path: inset(0 0 0 0);
transition: clip-path .55s cubic-bezier(.65,0,.35,1);
}
.perfil-sip-card__link:hover .perfil-sip-card__curtain,
.perfil-sip-card__link:focus-visible .perfil-sip-card__curtain {
clip-path: inset(0 0 0 100%);
}
.perfil-sip-card__num {
position: absolute; top: 18px; left: 20px;
font-size: 13px; font-weight: var(--fw-xbold);
color: rgba(255,255,255,.55);
letter-spacing: .06em;
transition: opacity .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__num,
.perfil-sip-card__link:focus-visible .perfil-sip-card__num { opacity: 0; }
.perfil-sip-card__body {
position: relative;
background: var(--c-white);
padding: 22px 22px 26px;
}
.perfil-sip-card__accent {
display: block;
height: 3px;
width: 0%;
background: var(--c-accent);
transition: width .45s ease;
margin-bottom: 14px;
}
.perfil-sip-card__link:hover .perfil-sip-card__accent,
.perfil-sip-card__link:focus-visible .perfil-sip-card__accent { width: 100%; }
.perfil-sip-card__label {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
font-size: 15px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .02em;
color: var(--c-navy-900);
}
.perfil-sip-card__label svg {
width: 18px; height: 18px; flex-shrink: 0;
fill: none; stroke: var(--c-navy-900); stroke-width: 2;
transform: translateX(0);
transition: transform .35s ease, stroke .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__label svg,
.perfil-sip-card__link:focus-visible .perfil-sip-card__label svg {
transform: translateX(6px);
stroke: var(--c-accent);
}
.perfil-sip-card__desc {
margin-top: 8px;
font-size: 14.7px; line-height: 1.55; font-weight: var(--fw-light);
color: var(--c-gray);
}
@media (max-width: 1080px) {
.perfiles-sip__grid { grid-template-columns: 1fr; gap: 20px; }
.perfil-sip-card { transform: translateY(28px); }
.perfil-sip-card__media { height: 260px; }
}
/* ------------------------------------------------------------
TU PROYECTO — CassaSIP (pedido de Alan).
1 card "hero" a ancho completo (mitad de alto que una card de
grilla) + grilla 2x2 con las 4 restantes. Título siempre
visible sobre la foto; párrafo + CTA revelados al hover con
swipe desde la izquierda. Hover "tecla de piano" con zoom IN:
toda la card crece y el fondo de color sube al mismo tiempo
(--bg-delay: 0s); el texto arranca cuando ese swipe del fondo
va por la mitad (--text-delay: .15s, 50% de --bg-dur), para que
no se sienta "atrasado". Mismo mecanismo de contra-escala que
Familia Cassaforma para que el texto no crezca junto con la
card.
------------------------------------------------------------ */
.tuproyecto-grid {
margin-top: 46px;
list-style: none; padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
--press-scale: 1.035;
--press-dur: .3s;
--bg-dur: .3s;
--bg-delay: 0s;
--text-dur: .3s;
--text-delay: .15s; /* arranca cuando el swipe del fondo va por la mitad (50% de .3s) */
}
.tuproyecto-card--hero { grid-column: 1 / -1; }
.tuproyecto-card { opacity: 0; transform: translateY(40px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1); }
.tuproyecto-card.is-visible { opacity: 1; transform: translateY(0); }
.tuproyecto-card__link {
position: relative; display: block;
aspect-ratio: 2.1573 / 1;
background: var(--c-white); border: 1px solid var(--c-line); box-shadow: var(--card-shadow);
overflow: hidden; transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* Card hero: mismo ancho, la mitad del alto proporcional (el doble de "achatada") */
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 4.3147 / 1; }
.tuproyecto-card__link:hover, .tuproyecto-card__link:focus-visible {
transform: scale(var(--press-scale));
box-shadow: 0 14px 34px rgba(22, 43, 62, .28);
z-index: 5;
}
.tuproyecto-card__media { position: absolute; inset: 0; }
.tuproyecto-card__media img {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: grayscale(1); transition: filter .5s ease;
}
.tuproyecto-card__link:hover .tuproyecto-card__media img,
.tuproyecto-card__link:focus-visible .tuproyecto-card__media img { filter: grayscale(0); }
/* Scrim permanente para que el título siempre se lea */
.tuproyecto-card__link::after {
content: ""; position: absolute; z-index: 1; inset: 0;
background: linear-gradient(160deg, rgba(22,43,62,.55) 0%, rgba(22,43,62,.22) 45%, rgba(22,43,62,.05) 70%);
}
.tuproyecto-card__title {
position: relative; z-index: 2; display: block;
padding: 30px 0 0 34px;
font-size: 25.6px; line-height: 1.2; font-weight: var(--fw-light); color: var(--c-white);
}
/* Filete arriba en el naranja del logo CassaSIP, para resaltar cada card */
.tuproyecto-card__link::before {
content: ""; position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 2px;
background: var(--c-accent);
}
.tuproyecto-card__panel-bg {
position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__panel-bg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__panel-bg { transform: translateY(0); }
.tuproyecto-card__text {
position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 22px 34px 26px;
max-width: 560px;
color: var(--c-white); opacity: 0;
transform: translateX(-26px) scale(1); transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__text,
.tuproyecto-card__link:focus-visible .tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.tuproyecto-card__claim { display: block; font-size: 19.2px; line-height: 1.5; font-weight: var(--fw-light); color: var(--c-white); }
.tuproyecto-card__cta {
display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
font-size: 16.8px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; color: var(--c-white);
}
.tuproyecto-card__cta svg { width: 16.8px; height: 16.8px; fill: none; stroke: var(--c-white); stroke-width: 2.4; transform: translateX(0); transition: transform .3s ease; }
.tuproyecto-card__link:hover .tuproyecto-card__cta svg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__cta svg { transform: translateX(4px); }
@media (max-width: 900px) {
.tuproyecto-grid { grid-template-columns: 1fr; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 2.1573 / 1; }
}
@media (max-width: 690px) {
.tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card__title { font-size: 19.2px; padding: 20px 0 0 20px; }
.tuproyecto-card__text { padding: 16px 20px 20px; }
/* En touch no hay hover real: panel y CTA quedan siempre visibles,
igual que en Familia Cassaforma (el párrafo se oculta para que
no choque con el título en cards bajas). */
.tuproyecto-card__panel-bg { transform: translateY(0); transition: none; }
.tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
}
.tuproyecto-card__claim { display: none; }
.tuproyecto-card__cta { margin-top: 0; }
}
/* Barra "beneficios clave" — mismas medidas que .sc-ahorros de
cassaforma.com (sistema-constructivo.css, bloque GRANDES AHORROS):
3 columnas centradas, ícono circular de 71px (ya viene con su color
en el propio .svg), separador vertical negro entre columnas. */
.ahorros { padding: 70px 0 62px; text-align: center; } /* +10% arriba y abajo (antes 64px/56px), pedido de Alan */
.ahorros__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.ahorro { display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 24px; }
.ahorro + .ahorro::before {
content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
width: 2px; background: var(--c-black);
}
.ahorro__icon { display: block; width: 71px; height: 71px; margin: 0 auto 20px; }
.ahorro__label { font-size: 23px; line-height: 1.3; font-weight: var(--fw-light); color: var(--c-navy); }
@media (max-width: 690px) {
.ahorros__grid { grid-template-columns: 1fr; row-gap: 32px; }
.ahorro + .ahorro::before { display: none; }
.ahorro__label { font-size: 19px; }
}
/* Beneficios (3 pilares) */
/* Beneficios de la construcción SIP — 2 columnas: pilares apilados con
viñeta numerada + logos de certificaciones a la izquierda, imagen a la
derecha (pedido de Alan). Separación entre columnas ×2 (antes 60px).
La imagen de la derecha no aporta su alto natural al cálculo de la fila
(queda position:absolute dentro de .beneficios__media, que por eso no
tiene alto propio): así la altura de la fila la fija SOLO la columna
izquierda (pilares + logos), y la imagen se recorta arriba/abajo con
object-fit:cover para igualar siempre esa altura — salvo en mobile,
donde se desactiva (ver media query). */
.beneficios__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; align-items: stretch; }
.beneficios__left { display: flex; flex-direction: column; }
.pilares__grid { display: flex; flex-direction: column; gap: 32px; }
.pilar__head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.pilar__num {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
background: var(--c-navy); color: var(--c-white);
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: var(--fw-xbold);
}
.pilar__title { font-size: 19px; font-weight: var(--fw-xbold); color: var(--c-navy-900); text-transform: uppercase; margin: 0; }
.pilar__text { margin-top: 0; font-size: 15.5px; line-height: 1.6; }
/* Logos de certificaciones — una sola imagen ya compuesta con los 6 logos
(2 filas x 3 columnas), mismo ancho que los párrafos de arriba (pedido
de Alan: usar la imagen completa en vez de 6 Están conformados por dos placas OSB (9,5 mm u 11,1 mm)1, y un alma de poliestireno con una densidad de 15 Kg/m3 (70 mm o 90 mm)2, adheridos a través de un adhesivo estructural de alta calidad. separadas). */
.beneficios__certs {
margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--c-line);
}
.beneficios__certs img { display: block; width: 100%; height: auto; }
.beneficios__media { position: relative; overflow: hidden; border-radius: 4px; } /* recorta el zoom del ken burns dentro de su propio cuadro (mismo criterio que .sobre-sip__media) */
.beneficios__media img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
animation: sobreSipKenBurns 18s ease-in-out infinite alternate; /* mismo ken burns que la foto de "Construcción con paneles SIP" */
}
/* ¿Por qué construir con SIP? — imagen del despiece a la izquierda, lista
de items con bullets a la derecha. Tipografía tomada de la lista de capas
de cassaforma.com (sistema-constructivo.css: .sc-panellosa__label/__item):
Heebo Light, navy, bullet "•" y divisor fino bajo cada renglón. */
.porque-sip { display: grid; grid-template-columns: minmax(300px, 460px) 1fr; gap: 60px; align-items: center; margin-top: 46px; }
.porque-sip__media img { width: 100%; display: block; }
.porque-sip__list {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto);
column-gap: 48px;
}
.porque-sip__list li {
padding: 14px 0;
border-bottom: 1px solid rgba(22, 43, 62, .15);
font-size: 19px; letter-spacing: .02em;
font-weight: var(--fw-light); color: var(--c-navy);
}
.porque-sip__list li::before { content: "\2022 "; }
@media (max-width: 1080px) {
.porque-sip { grid-template-columns: 1fr; }
.porque-sip__media { max-width: 460px; margin-inline: auto; }
}
@media (max-width: 690px) {
.porque-sip__list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
}
/* Logística — texto (Logística + Almacenamiento apilados) a la izquierda,
foto en blanco y negro con ken burns a la derecha (pedido de Alan). La
imagen no aporta su alto natural al cálculo de la fila (position:absolute
dentro de .logistica__media, sin alto propio): así la altura de la fila
la fija SOLO la columna de texto, y la foto se recorta con object-fit:cover
para igualar siempre esa altura — mismo criterio que .beneficios__media. */
.logistica__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: stretch; }
.logistica__text { display: flex; flex-direction: column; gap: 32px; }
.logistica__item h3 { font-size: 19px; font-weight: var(--fw-xbold); text-transform: uppercase; color: var(--c-navy-900); margin-bottom: 12px; }
.logistica__media { position: relative; overflow: hidden; border-radius: 4px; }
.logistica__img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
transition: filter .45s ease;
/* Es una sola foto fija (no un carrusel): un zoom-in ÚNICO de 10s que
termina y se queda ahí (forwards, sin infinite/alternate) — solo
"ida", nunca vuelve para atrás y nunca vuelve a saltar (pedido de
Alan). */
animation: destacadoKenBurns 10s ease-out forwards;
}
.logistica__media:hover .logistica__img { filter: grayscale(0); }
/* FAQ */
.faq { max-width: 880px; }
.faq__item { border-bottom: var(--border); }
.faq__item summary {
cursor: pointer; list-style: none; padding: 20px 0;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
font-size: 16.5px; font-weight: var(--fw-med); color: var(--c-navy-900);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
content: "+"; font-size: 22px; font-weight: var(--fw-light); color: var(--c-navy); flex-shrink: 0;
}
.faq__item[open] summary::after { content: "–"; }
.faq__body { padding: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: var(--c-gray); }
.faq__body ul { list-style: disc; padding-left: 20px; margin-top: 10px; }
.faq__body li { margin-bottom: 6px; }
.faq__body p + p { margin-top: 12px; }
/* Proceso constructivo — solo título + video a todo el ancho del
contenido (pedido de Alan; antes había una lista de pasos numerados). */
.proceso__video { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.proceso__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Capacitación */
.capacitacion { text-align: center; }
.capacitacion h2 { max-width: 620px; margin-inline: auto; }
.capacitacion .btn { margin-top: 30px; }
/* Presupuesto / form */
.presupuesto__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.form__field { margin-bottom: 16px; }
.form__label { display: block; font-size: 14px; font-weight: var(--fw-med); margin-bottom: 7px; }
.form__input, .form__select {
display: block; width: 100%; height: 46px; padding: 0 14px;
border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-navy-900);
font-family: var(--ff); font-size: 15px;
}
.form__input:focus, .form__select:focus { border-color: var(--c-navy); outline: none; }
.form__submit { margin-top: 6px; width: 100%; }
/* ------------------------------------------------------------
FOOTER
------------------------------------------------------------ */
.footer { background: var(--c-navy-900); color: var(--c-white); padding-block: 64px 32px; }
.footer__top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.footer__brand img { height: 40px; }
.footer__brand p { margin-top: 18px; font-size: 14px; color: rgba(255,255,255,.65); max-width: 260px; }
.footer__col h3 { font-size: 13px; font-weight: var(--fw-xbold); letter-spacing: .06em; text-transform: uppercase; color: var(--c-white); margin-bottom: 16px; }
.footer__col ul li { margin-bottom: 10px; }
.footer__col a { font-size: 14px; color: rgba(255,255,255,.75); }
.footer__col a:hover { color: var(--c-white); }
.footer__bottom {
margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15);
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
font-size: 13.5px; color: rgba(255,255,255,.6);
}
.footer__social { display: flex; gap: 14px; }
.footer__social svg { width: 16px; height: 16px; fill: rgba(255,255,255,.75); }
.footer__social a:hover svg { fill: var(--c-white); }
.footer__scrolltop { font-size: 13px; color: rgba(255,255,255,.6); }
.footer__scrolltop:hover { color: var(--c-white); }
/* ------------------------------------------------------------
RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 1169px) {
:root {
--fs-hero: 42px; --lh-hero: 46px;
--fs-hero-lead: 23px; --lh-hero-lead: 28px;
--h-hero: 660px;
}
.site-nav { gap: 15px; }
.site-nav__link { font-size: 13px; }
}
@media (max-width: 1080px) {
.site-nav { display: none; }
.destacado, .dos-columnas, .logistica__grid, .presupuesto__grid { grid-template-columns: 1fr; }
.paneles__grid { grid-template-columns: repeat(3, 1fr); }
/* En mobile se desactiva el recorte a la altura de la columna izquierda
(pedido de Alan): la imagen vuelve a su aspecto natural, en flujo. */
.beneficios__grid { grid-template-columns: 1fr; gap: 28px; align-items: normal; }
.beneficios__media img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
/* Mismo criterio que .beneficios__media: en mobile la foto de logística
vuelve a su aspecto natural, en flujo, debajo del texto. */
.logistica__grid { gap: 28px; }
.logistica__img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
.footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
:root {
--fs-hero: 34px; --lh-hero: 38px;
--fs-hero-lead: 19px; --lh-hero-lead: 26px;
--h-header: 84px; --h-hero: 560px;
}
.site-header__logo img { height: 40px; }
.hero .rule--light { width: 200px; margin: 24px 0 22px; }
}
@media (max-width: 690px) {
.site-topbar { display: none; }
:root {
--fs-hero: 27px; --lh-hero: 31px;
--fs-hero-lead: 16px; --lh-hero-lead: 24px;
--h-header: 70px; --h-hero: 520px;
}
.site-header__logo img { height: 34px; }
.hero .rule--light { width: 140px; margin: 20px 0 18px; }
.section { padding-block: 56px; }
.paneles__grid { grid-template-columns: 1fr 1fr; }
.footer__top { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------
FAMILIA CASSAFORMA — Conocé el resto de nuestras líneas
(pedido de Alan). Grilla de 5 cards (las otras líneas Cassaforma;
CassaSIP es esta misma web, no se lista a sí misma), cada una con
su color de marca en --linea-accent. Efecto "tecla de piano" v2:
TODA la card se hunde junta al pasar el mouse (borde, sombra,
logo, foto y fondo de color son todos descendientes del mismo
.familia-card__link escalado), así el degradé de color queda
siempre alineado con el borde mientras se achica. El texto es la
ÚNICA capa que NO se achica: usa un contra-escalado
(scale(calc(1 / var(--press-scale)))) que cancela el de su padre,
y entra con swipe desde la izquierda + fade-in medio segundo
después de que arranca el fondo de color. La foto NO hace zoom en
el hover (chocaba visualmente con el "hundido", pedido de Alan):
solo recupera color. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.familia-grid {
/* .section__head no trae separación propia (solo la agrega vía
".section__head + .section__grid", que esta grilla no usa) — se
fija acá a mano, mismo valor que esa regla general, para que quede
igual que en el prototipo (pedido de Alan: se había achicado). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
/* Timings del hover — un 50% más rápidos que la v1 (pedido de Alan). */
--press-scale: .965;
--press-dur: .167s;
--bg-dur: .3s;
--bg-delay: var(--press-dur);
--text-dur: .3s;
--text-delay: .5s;
}
.familia-card {
opacity: 0;
transform: translateY(40px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.familia-card.is-visible { opacity: 1; transform: translateY(0); }
.familia-card__link {
position: relative;
display: block;
height: 470px;
background: var(--c-white);
border: 1px solid var(--c-line);
box-shadow: var(--card-shadow);
overflow: hidden;
transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* "Tecla de piano": se achica y baja un poco, sombra se cierra en vez
de crecer (efecto de hundirse contra la superficie). */
.familia-card__link:hover,
.familia-card__link:focus-visible {
transform: scale(var(--press-scale)) translateY(3px);
box-shadow: 0 2px 10px rgba(22, 43, 62, .22);
}
.familia-card__logo {
position: relative;
z-index: 2;
height: 26px;
width: auto;
max-width: 74%;
margin: 26px auto 0;
object-fit: contain;
}
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 32px; margin-top: 23px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 31px; margin-top: 23px; }
.familia-card__media {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 72%;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
}
.familia-card__media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: bottom center;
filter: grayscale(1);
transition: filter .5s ease;
}
.familia-card__link[data-line="cassadeco"] .familia-card__media img { object-position: center bottom; }
/* Sin zoom en la foto: solo recupera color (pedido de Alan). */
.familia-card__link:hover .familia-card__media img,
.familia-card__link:focus-visible .familia-card__media img {
filter: grayscale(0);
}
/* Fondo de color: degradé del color de marca hacia transparente, 3/4
de la altura de la card. Hijo directo de .familia-card__link (no un
hermano aparte): se achica JUNTO con el resto de la card, así sus
márgenes quedan siempre alineados con el borde (pedido de Alan).
Entra con swipe de abajo hacia arriba apenas termina el "press". */
.familia-card__panel-bg {
position: absolute;
z-index: 2;
left: 0; right: 0; bottom: 0;
height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.familia-card__link:hover .familia-card__panel-bg,
.familia-card__link:focus-visible .familia-card__panel-bg {
transform: translateY(0);
}
/* Texto: la ÚNICA capa que NO se achica. Sigue siendo hijo de
.familia-card__link, pero en hover se le aplica un contra-escalado
(1 / var(--press-scale)) que cancela el de la card y lo deja
siempre a tamaño real (pedido de Alan). Entra con swipe desde la
izquierda + fade-in, medio segundo después de que arrancó el fondo
de color. */
.familia-card__text {
position: absolute;
z-index: 3;
left: 0; right: 0; bottom: 0;
padding: 18px 20px 20px;
color: var(--c-white);
opacity: 0;
transform: translateX(-26px) scale(1);
transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.familia-card__link:hover .familia-card__text,
.familia-card__link:focus-visible .familia-card__text {
opacity: 1;
transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.familia-card__claim {
display: block;
font-size: 14.6px; line-height: 1.45; font-weight: var(--fw-light);
color: var(--c-white);
}
.familia-card__cta {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 10px;
font-size: 13.8px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .03em;
color: var(--c-white);
}
.familia-card__cta svg {
width: 13px; height: 13px;
fill: none; stroke: var(--c-white); stroke-width: 2.4;
transform: translateX(0);
transition: transform .3s ease;
}
.familia-card__link:hover .familia-card__cta svg,
.familia-card__link:focus-visible .familia-card__cta svg {
transform: translateX(4px);
}
/* Filete de color arriba de la card: siempre visible, identifica la
marca aun antes del hover. Al ser ::before de .familia-card__link
también se hunde con toda la card (pedido de Alan). */
.familia-card__link::before {
content: "";
position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 4px;
background: var(--linea-accent, var(--c-navy-900));
}
@media (max-width: 1080px) {
.familia-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.familia-card__link { height: 420px; }
}
@media (max-width: 690px) {
.familia-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.familia-card__link { height: 340px; }
.familia-card__logo { height: 22px; margin-top: 20px; }
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 27px; margin-top: 18px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 26px; margin-top: 18px; }
/* En touch no hay hover real: el fondo de color y el CTA quedan
siempre visibles, para no depender de un tap sostenido. */
.familia-card__panel-bg { transform: translateY(0); transition: none; }
.familia-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
padding: 10px 14px 14px;
}
.familia-card__claim { display: none; }
.familia-card__cta { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; }
.hero__img, .destacado__img, .sobre-sip__img, .beneficios__media img { animation: none !important; transform: none; }
.hero__slide, .destacado__slide { transition-duration: .2s; }
.familia-card__link { transition-duration: .001ms; }
}
Paneles CassaSIP
por columna
(son hermanos en el DOM aunque visualmente queden uno al lado del
otro), así que el combinador de hermano adyacente lo tomaba también
y el 2º párrafo (columna derecha) quedaba corrido hacia abajo. Se
anula explícitamente para dejar ambas columnas alineadas por su top
(bug reportado por Alan). */
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.dos-columnas p + p { margin-top: 0; }
/* Construcción con paneles SIP — foto a la derecha (pedido de Alan). En
reposo: efecto ken burns continuo (zoom/paneo lento) y desaturada. Al
pasar el mouse: la animación se detiene, la imagen vuelve a su
posición/escala inicial (mismo mecanismo de siempre: se quita la
animation y la transition la lleva de vuelta suavemente) y recupera
el color — mismo criterio que .linea-card__media img en cassaforma.com,
invertido a pedido de Alan. */
/* padding-bottom reducido a la mitad (42px, antes 84px): acerca esta
sección a "Paneles CassaSIP" (pedido de Alan); el resto de los
paddings de .section quedan igual. */
#sobre-sip { padding-bottom: 42px; }
.sobre-sip__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: start; }
/* Párrafo "Incorporamos una nueva línea de producción..." destacado en
negrita y color naranja del logo (pedido de Alan) */
.sobre-sip__highlight { font-weight: var(--fw-xbold); color: var(--c-accent); }
.sobre-sip__media { position: relative; overflow: hidden; aspect-ratio: 4/5; }
.sobre-sip__img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
animation: sobreSipKenBurns 16s ease-in-out infinite alternate;
transition: filter .45s ease, transform .6s ease;
}
@keyframes sobreSipKenBurns {
0% { transform: scale(1) translate(0, 0); }
100% { transform: scale(1.14) translate(-2.5%, 2%); }
}
.sobre-sip__media:hover .sobre-sip__img,
.sobre-sip__media:focus-within .sobre-sip__img {
filter: grayscale(0);
animation: none;
transform: scale(1) translate(0, 0);
}
@media (max-width: 1080px) {
.sobre-sip__grid { grid-template-columns: 1fr; gap: 32px; }
.sobre-sip__media { order: -1; max-width: 460px; margin-inline: auto; aspect-ratio: 4/3; }
}
/* Tipos de panel */
.paneles__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.panel-card {
/* sin recuadro: panel, título y botón flotan directamente sobre el fondo
de la sección (pedido de Alan) */
border: none; box-shadow: none; background: transparent; display: flex; flex-direction: column;
/* entrada tipo swipe (derecha → izquierda), escalonada vía JS
(.is-visible); velocidad aumentada otra vez (antes .5s/card cada 1000ms,
ahora .35s/card cada 220ms — pedido de Alan) */
opacity: 0; transform: translateX(70px); transition: opacity .35s ease, transform .35s ease;
}
.panel-card.is-visible { opacity: 1; transform: translateX(0); }
/* Render con fondo transparente: se muestra completo (sin recortar), centrado,
con un drop-shadow muy leve para dar un efecto 3D sutil (pedido de Alan).
max-height ampliado (antes 210px) para que la imagen use todo el ancho
disponible de la card en vez de quedar acotada por la altura: efecto neto,
~120% más grande (pedido de Alan). */
.panel-card__media { min-height: 465px; padding: 10px 8px 6px; display: flex; align-items: center; justify-content: center; }
/* El render es también un link de descarga de su ficha técnica (mismo PDF
que el botón); al pasar el mouse, zoom leve sobre la imagen (pedido de
Alan). */
.panel-card__media a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.panel-card__media img {
width: 100%; max-width: 100%; height: auto; max-height: 465px; object-fit: contain;
filter: drop-shadow(0 6px 10px rgba(22, 43, 62, .16));
transition: transform .35s ease;
}
.panel-card__media a:hover img,
.panel-card__media a:focus-visible img {
transform: scale(1.06);
}
.panel-card__body { padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.panel-card__name { font-size: 15px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; }
/* Botón "Descargar ficha" — mismo "tipo" que .sc-panel__cta en
sistema-constructivo.css (cassaforma.com): .btn.btn--navy de base,
ancho completo y compacto. Usar esta combinación cada vez que se
agregue un botón de descarga de ficha en el sitio (pedido de Alan). */
.panel-card__cta { margin-top: auto; width: 100%; height: 40px; font-size: 14.7px; padding: 0 12px; }
/* Adaptables a cada proyecto — texto en 2 columnas: cartera de proyectos a la
izquierda, y el párrafo de la tecnología OSB destacado en un recuadro con
fondo blanco y en negrita, a la derecha (pedido de Alan). */
.adaptables__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.adaptables__highlight {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-med); /* antes fw-xbold: menos peso (pedido de Alan) */
padding: 22px 26px; border-radius: 4px; box-shadow: var(--card-shadow);
}
/* Adaptables a cada proyecto — foto + tabla de resistencias (pedido de Alan).
margin-top +20% (antes 46px) para separar más el render del texto de
arriba. */
.adaptables__grid { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: center; margin-top: 55px; }
/* Render con fondo transparente: se muestra completo, sin recortar ni caja
fija, con un drop-shadow muy leve (mismo criterio que .panel-card__media).
Se desplaza hacia la izquierda hasta sobresalir un 10% del ancho de
contenido (pedido de Alan): crece hacia la izquierda, ancla derecha
sin cambios (mismo criterio que .panel-corte__sandwich). */
.adaptables__media {
display: flex; align-items: center; justify-content: center;
margin-left: calc(-1 * var(--w-content) * 0.10);
width: calc(100% + var(--w-content) * 0.10);
}
.adaptables__media img {
width: 100%; height: auto; max-width: 100%;
filter: drop-shadow(0 8px 14px rgba(22, 43, 62, .16));
}
/* Tabla de especificaciones: misma paleta navy/blanco y tipografía Heebo
del resto del sitio. Columna izquierda (propiedad) en navy —el mismo azul
del botón "Descargar ficha"— con texto blanco, columna derecha (valor)
alterna blanco/gris banda. Ninguna fuente en negrita (pedido de Alan). Al
pasar el mouse por una fila, se resalta en navy oscuro (izquierda) y en la
banda gris (derecha) para que se lea qué fila se está mirando. */
.specs-table-wrap { border: var(--border); border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table th, .specs-table td { padding: 15px 18px; font-size: 14.5px; line-height: 1.3; transition: background-color .2s ease, color .2s ease; }
.specs-table th {
background: var(--c-navy); color: var(--c-white);
font-weight: var(--fw-reg); text-align: left; width: 60%;
}
.specs-table td {
background: var(--c-white); color: var(--c-navy-900);
font-weight: var(--fw-light); text-align: center;
}
.specs-table tr:nth-child(even) td { background: var(--c-band); }
.specs-table tr:not(:last-child) th,
.specs-table tr:not(:last-child) td { border-bottom: 1px solid rgba(255,255,255,.08); }
.specs-table tr:hover th { background: var(--c-navy-900); }
.specs-table tr:hover td { background: var(--c-band); color: var(--c-navy); }
/* Especificaciones técnicas (debajo de "Tipos de panel") — mismo criterio
de diseño que la tabla de Adaptables: acento navy, sin negritas. Tres
grupos (Paneles / Placas / Accesorios) con una etiqueta lateral vertical,
cada uno con sus sub-tablas de medidas (pedido de Alan, ref. cassasip.com). */
.spec-groups { display: flex; flex-direction: column; gap: 34px; margin-top: 92px; } /* separación de los productos ×2 (antes 46px), pedido de Alan */
.spec-group { display: flex; align-items: stretch; gap: 22px; }
.spec-group__label {
flex-shrink: 0; width: 46px; border-radius: 4px;
background: var(--c-accent); color: var(--c-white); /* naranja del logo CassaSIP + texto blanco (pedido de Alan) */
display: flex; align-items: center; justify-content: center;
writing-mode: vertical-rl; transform: rotate(180deg);
font-size: 15.6px; /* 13px +20% (pedido de Alan) */
font-weight: var(--fw-reg); text-transform: uppercase; letter-spacing: .1em;
}
.spec-group__tables { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.spec-block__title { font-size: 14.5px; font-weight: var(--fw-reg); color: var(--c-navy-900); margin-bottom: 10px; }
.spec-block__title .spec-block__note { font-weight: var(--fw-light); color: var(--c-navy); font-size: 13px; }
.spec-block .specs-table-wrap { overflow-x: auto; }
.specs-table--grid { min-width: 560px; }
.specs-table--grid th, .specs-table--grid td { padding: 12px 14px; font-size: 13.5px; white-space: nowrap; }
.specs-table--grid thead th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: center;
}
.specs-table--grid thead th:first-child { background: var(--c-navy-900); }
.specs-table--grid tbody th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: left; width: auto;
}
.specs-table--grid tbody td {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-light); text-align: center;
}
.specs-table--grid tbody tr:nth-child(even) td { background: var(--c-band); }
.specs-table--grid tbody tr:hover th { background: var(--c-navy-900); }
.specs-table--grid tbody tr:hover td { background: var(--c-band); color: var(--c-navy); }
@media (max-width: 690px) {
.spec-group { flex-direction: column; gap: 10px; }
.spec-group__label {
width: 100%; writing-mode: horizontal-tb; transform: none; padding: 8px; height: auto;
}
}
@media (max-width: 1080px) {
.adaptables__intro { grid-template-columns: 1fr; gap: 20px; }
.adaptables__grid { grid-template-columns: 1fr; gap: 28px; }
/* en una sola columna el desborde a la izquierda no tiene sentido
(no queda margen de página del que sobresalir): se desactiva */
.adaptables__media { margin-left: 0; width: 100%; max-width: 460px; margin-inline: auto; }
.specs-table-wrap { max-width: 460px; margin-inline: auto; width: 100%; }
}
/* ------------------------------------------------------------
PERFILES — Contanos qué necesitás (pedido de Ceci vía Alan).
3 cards con foto en blanco y negro tapada por una "cortina" navy con
textura diagonal sutil; al hacer hover la cortina se corre hacia la
derecha con clip-path (no se desvanece, se desliza), la foto recupera
color + zoom leve, aparece una línea de acento naranja creciendo bajo
el título y la flecha se desplaza. Entrada: swipe hacia arriba
escalonado al entrar en viewport (ver "Perfiles CassaSIP" en
js/script.js), misma familia de efecto que .panel-card pero vertical
en vez de lateral, para variar. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.perfiles-sip__grid {
/* mismo ajuste que .familia-grid: .section__head no trae separación
propia acá (pedido de Alan: se había achicado respecto al prototipo). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.perfil-sip-card {
opacity: 0;
transform: translateY(46px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.perfil-sip-card.is-visible { opacity: 1; transform: translateY(0); }
.perfil-sip-card__link {
position: relative;
display: block;
border: var(--border);
box-shadow: var(--card-shadow);
transition: box-shadow var(--t-base), transform var(--t-base);
}
.perfil-sip-card__link:hover,
.perfil-sip-card__link:focus-visible {
box-shadow: 0 8px 30px rgba(22, 43, 62, .16);
transform: translateY(-4px);
}
.perfil-sip-card__media {
position: relative;
height: 300px;
overflow: hidden;
}
.perfil-sip-card__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.05);
transform: scale(1.03);
transition: transform .6s ease, filter .6s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__img,
.perfil-sip-card__link:focus-visible .perfil-sip-card__img {
filter: grayscale(0) contrast(1);
transform: scale(1.1);
}
.perfil-sip-card__curtain {
position: absolute; inset: 0;
background:
repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px),
linear-gradient(150deg, var(--c-navy-900) 0%, var(--c-navy) 100%);
clip-path: inset(0 0 0 0);
transition: clip-path .55s cubic-bezier(.65,0,.35,1);
}
.perfil-sip-card__link:hover .perfil-sip-card__curtain,
.perfil-sip-card__link:focus-visible .perfil-sip-card__curtain {
clip-path: inset(0 0 0 100%);
}
.perfil-sip-card__num {
position: absolute; top: 18px; left: 20px;
font-size: 13px; font-weight: var(--fw-xbold);
color: rgba(255,255,255,.55);
letter-spacing: .06em;
transition: opacity .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__num,
.perfil-sip-card__link:focus-visible .perfil-sip-card__num { opacity: 0; }
.perfil-sip-card__body {
position: relative;
background: var(--c-white);
padding: 22px 22px 26px;
}
.perfil-sip-card__accent {
display: block;
height: 3px;
width: 0%;
background: var(--c-accent);
transition: width .45s ease;
margin-bottom: 14px;
}
.perfil-sip-card__link:hover .perfil-sip-card__accent,
.perfil-sip-card__link:focus-visible .perfil-sip-card__accent { width: 100%; }
.perfil-sip-card__label {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
font-size: 15px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .02em;
color: var(--c-navy-900);
}
.perfil-sip-card__label svg {
width: 18px; height: 18px; flex-shrink: 0;
fill: none; stroke: var(--c-navy-900); stroke-width: 2;
transform: translateX(0);
transition: transform .35s ease, stroke .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__label svg,
.perfil-sip-card__link:focus-visible .perfil-sip-card__label svg {
transform: translateX(6px);
stroke: var(--c-accent);
}
.perfil-sip-card__desc {
margin-top: 8px;
font-size: 14.7px; line-height: 1.55; font-weight: var(--fw-light);
color: var(--c-gray);
}
@media (max-width: 1080px) {
.perfiles-sip__grid { grid-template-columns: 1fr; gap: 20px; }
.perfil-sip-card { transform: translateY(28px); }
.perfil-sip-card__media { height: 260px; }
}
/* ------------------------------------------------------------
TU PROYECTO — CassaSIP (pedido de Alan).
1 card "hero" a ancho completo (mitad de alto que una card de
grilla) + grilla 2x2 con las 4 restantes. Título siempre
visible sobre la foto; párrafo + CTA revelados al hover con
swipe desde la izquierda. Hover "tecla de piano" con zoom IN:
toda la card crece y el fondo de color sube al mismo tiempo
(--bg-delay: 0s); el texto arranca cuando ese swipe del fondo
va por la mitad (--text-delay: .15s, 50% de --bg-dur), para que
no se sienta "atrasado". Mismo mecanismo de contra-escala que
Familia Cassaforma para que el texto no crezca junto con la
card.
------------------------------------------------------------ */
.tuproyecto-grid {
margin-top: 46px;
list-style: none; padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
--press-scale: 1.035;
--press-dur: .3s;
--bg-dur: .3s;
--bg-delay: 0s;
--text-dur: .3s;
--text-delay: .15s; /* arranca cuando el swipe del fondo va por la mitad (50% de .3s) */
}
.tuproyecto-card--hero { grid-column: 1 / -1; }
.tuproyecto-card { opacity: 0; transform: translateY(40px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1); }
.tuproyecto-card.is-visible { opacity: 1; transform: translateY(0); }
.tuproyecto-card__link {
position: relative; display: block;
aspect-ratio: 2.1573 / 1;
background: var(--c-white); border: 1px solid var(--c-line); box-shadow: var(--card-shadow);
overflow: hidden; transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* Card hero: mismo ancho, la mitad del alto proporcional (el doble de "achatada") */
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 4.3147 / 1; }
.tuproyecto-card__link:hover, .tuproyecto-card__link:focus-visible {
transform: scale(var(--press-scale));
box-shadow: 0 14px 34px rgba(22, 43, 62, .28);
z-index: 5;
}
.tuproyecto-card__media { position: absolute; inset: 0; }
.tuproyecto-card__media img {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: grayscale(1); transition: filter .5s ease;
}
.tuproyecto-card__link:hover .tuproyecto-card__media img,
.tuproyecto-card__link:focus-visible .tuproyecto-card__media img { filter: grayscale(0); }
/* Scrim permanente para que el título siempre se lea */
.tuproyecto-card__link::after {
content: ""; position: absolute; z-index: 1; inset: 0;
background: linear-gradient(160deg, rgba(22,43,62,.55) 0%, rgba(22,43,62,.22) 45%, rgba(22,43,62,.05) 70%);
}
.tuproyecto-card__title {
position: relative; z-index: 2; display: block;
padding: 30px 0 0 34px;
font-size: 25.6px; line-height: 1.2; font-weight: var(--fw-light); color: var(--c-white);
}
/* Filete arriba en el naranja del logo CassaSIP, para resaltar cada card */
.tuproyecto-card__link::before {
content: ""; position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 2px;
background: var(--c-accent);
}
.tuproyecto-card__panel-bg {
position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__panel-bg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__panel-bg { transform: translateY(0); }
.tuproyecto-card__text {
position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 22px 34px 26px;
max-width: 560px;
color: var(--c-white); opacity: 0;
transform: translateX(-26px) scale(1); transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__text,
.tuproyecto-card__link:focus-visible .tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.tuproyecto-card__claim { display: block; font-size: 19.2px; line-height: 1.5; font-weight: var(--fw-light); color: var(--c-white); }
.tuproyecto-card__cta {
display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
font-size: 16.8px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; color: var(--c-white);
}
.tuproyecto-card__cta svg { width: 16.8px; height: 16.8px; fill: none; stroke: var(--c-white); stroke-width: 2.4; transform: translateX(0); transition: transform .3s ease; }
.tuproyecto-card__link:hover .tuproyecto-card__cta svg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__cta svg { transform: translateX(4px); }
@media (max-width: 900px) {
.tuproyecto-grid { grid-template-columns: 1fr; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 2.1573 / 1; }
}
@media (max-width: 690px) {
.tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card__title { font-size: 19.2px; padding: 20px 0 0 20px; }
.tuproyecto-card__text { padding: 16px 20px 20px; }
/* En touch no hay hover real: panel y CTA quedan siempre visibles,
igual que en Familia Cassaforma (el párrafo se oculta para que
no choque con el título en cards bajas). */
.tuproyecto-card__panel-bg { transform: translateY(0); transition: none; }
.tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
}
.tuproyecto-card__claim { display: none; }
.tuproyecto-card__cta { margin-top: 0; }
}
/* Barra "beneficios clave" — mismas medidas que .sc-ahorros de
cassaforma.com (sistema-constructivo.css, bloque GRANDES AHORROS):
3 columnas centradas, ícono circular de 71px (ya viene con su color
en el propio .svg), separador vertical negro entre columnas. */
.ahorros { padding: 70px 0 62px; text-align: center; } /* +10% arriba y abajo (antes 64px/56px), pedido de Alan */
.ahorros__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.ahorro { display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 24px; }
.ahorro + .ahorro::before {
content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
width: 2px; background: var(--c-black);
}
.ahorro__icon { display: block; width: 71px; height: 71px; margin: 0 auto 20px; }
.ahorro__label { font-size: 23px; line-height: 1.3; font-weight: var(--fw-light); color: var(--c-navy); }
@media (max-width: 690px) {
.ahorros__grid { grid-template-columns: 1fr; row-gap: 32px; }
.ahorro + .ahorro::before { display: none; }
.ahorro__label { font-size: 19px; }
}
/* Beneficios (3 pilares) */
/* Beneficios de la construcción SIP — 2 columnas: pilares apilados con
viñeta numerada + logos de certificaciones a la izquierda, imagen a la
derecha (pedido de Alan). Separación entre columnas ×2 (antes 60px).
La imagen de la derecha no aporta su alto natural al cálculo de la fila
(queda position:absolute dentro de .beneficios__media, que por eso no
tiene alto propio): así la altura de la fila la fija SOLO la columna
izquierda (pilares + logos), y la imagen se recorta arriba/abajo con
object-fit:cover para igualar siempre esa altura — salvo en mobile,
donde se desactiva (ver media query). */
.beneficios__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; align-items: stretch; }
.beneficios__left { display: flex; flex-direction: column; }
.pilares__grid { display: flex; flex-direction: column; gap: 32px; }
.pilar__head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.pilar__num {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
background: var(--c-navy); color: var(--c-white);
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: var(--fw-xbold);
}
.pilar__title { font-size: 19px; font-weight: var(--fw-xbold); color: var(--c-navy-900); text-transform: uppercase; margin: 0; }
.pilar__text { margin-top: 0; font-size: 15.5px; line-height: 1.6; }
/* Logos de certificaciones — una sola imagen ya compuesta con los 6 logos
(2 filas x 3 columnas), mismo ancho que los párrafos de arriba (pedido
de Alan: usar la imagen completa en vez de 6 SIP STD: Paneles SIP Standard (1220 x 2440 mm con rebaje EPS perimetral 1") SIP FP: Paneles SIP Fenólico Pino (1220 x 2440 mm con rebaje EPS perimetral 1") SIP FE: Paneles SIP Fenólico Eucaliptus (1220 x 2440 mm con rebaje EPS perimetral 1") SIP PC RA: Paneles Ranurados Cubierta Cielorraso (1220 x 2440 mm con rebaje EPS perimetral) SIP FC: Paneles Fibrocemento (1220 x 2440 mm con rebaje EPS perimetral 1") Placas Fibrocemento (1220 x 2440 mm) Placas Yeso (1220 x 2440 mm) SIP Acoples (SIP AC) y SIP Acoples en Tiras (SIP ACT) (EPS a filo) separadas). */
.beneficios__certs {
margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--c-line);
}
.beneficios__certs img { display: block; width: 100%; height: auto; }
.beneficios__media { position: relative; overflow: hidden; border-radius: 4px; } /* recorta el zoom del ken burns dentro de su propio cuadro (mismo criterio que .sobre-sip__media) */
.beneficios__media img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
animation: sobreSipKenBurns 18s ease-in-out infinite alternate; /* mismo ken burns que la foto de "Construcción con paneles SIP" */
}
/* ¿Por qué construir con SIP? — imagen del despiece a la izquierda, lista
de items con bullets a la derecha. Tipografía tomada de la lista de capas
de cassaforma.com (sistema-constructivo.css: .sc-panellosa__label/__item):
Heebo Light, navy, bullet "•" y divisor fino bajo cada renglón. */
.porque-sip { display: grid; grid-template-columns: minmax(300px, 460px) 1fr; gap: 60px; align-items: center; margin-top: 46px; }
.porque-sip__media img { width: 100%; display: block; }
.porque-sip__list {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto);
column-gap: 48px;
}
.porque-sip__list li {
padding: 14px 0;
border-bottom: 1px solid rgba(22, 43, 62, .15);
font-size: 19px; letter-spacing: .02em;
font-weight: var(--fw-light); color: var(--c-navy);
}
.porque-sip__list li::before { content: "\2022 "; }
@media (max-width: 1080px) {
.porque-sip { grid-template-columns: 1fr; }
.porque-sip__media { max-width: 460px; margin-inline: auto; }
}
@media (max-width: 690px) {
.porque-sip__list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
}
/* Logística — texto (Logística + Almacenamiento apilados) a la izquierda,
foto en blanco y negro con ken burns a la derecha (pedido de Alan). La
imagen no aporta su alto natural al cálculo de la fila (position:absolute
dentro de .logistica__media, sin alto propio): así la altura de la fila
la fija SOLO la columna de texto, y la foto se recorta con object-fit:cover
para igualar siempre esa altura — mismo criterio que .beneficios__media. */
.logistica__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: stretch; }
.logistica__text { display: flex; flex-direction: column; gap: 32px; }
.logistica__item h3 { font-size: 19px; font-weight: var(--fw-xbold); text-transform: uppercase; color: var(--c-navy-900); margin-bottom: 12px; }
.logistica__media { position: relative; overflow: hidden; border-radius: 4px; }
.logistica__img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
transition: filter .45s ease;
/* Es una sola foto fija (no un carrusel): un zoom-in ÚNICO de 10s que
termina y se queda ahí (forwards, sin infinite/alternate) — solo
"ida", nunca vuelve para atrás y nunca vuelve a saltar (pedido de
Alan). */
animation: destacadoKenBurns 10s ease-out forwards;
}
.logistica__media:hover .logistica__img { filter: grayscale(0); }
/* FAQ */
.faq { max-width: 880px; }
.faq__item { border-bottom: var(--border); }
.faq__item summary {
cursor: pointer; list-style: none; padding: 20px 0;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
font-size: 16.5px; font-weight: var(--fw-med); color: var(--c-navy-900);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
content: "+"; font-size: 22px; font-weight: var(--fw-light); color: var(--c-navy); flex-shrink: 0;
}
.faq__item[open] summary::after { content: "–"; }
.faq__body { padding: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: var(--c-gray); }
.faq__body ul { list-style: disc; padding-left: 20px; margin-top: 10px; }
.faq__body li { margin-bottom: 6px; }
.faq__body p + p { margin-top: 12px; }
/* Proceso constructivo — solo título + video a todo el ancho del
contenido (pedido de Alan; antes había una lista de pasos numerados). */
.proceso__video { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.proceso__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Capacitación */
.capacitacion { text-align: center; }
.capacitacion h2 { max-width: 620px; margin-inline: auto; }
.capacitacion .btn { margin-top: 30px; }
/* Presupuesto / form */
.presupuesto__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.form__field { margin-bottom: 16px; }
.form__label { display: block; font-size: 14px; font-weight: var(--fw-med); margin-bottom: 7px; }
.form__input, .form__select {
display: block; width: 100%; height: 46px; padding: 0 14px;
border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-navy-900);
font-family: var(--ff); font-size: 15px;
}
.form__input:focus, .form__select:focus { border-color: var(--c-navy); outline: none; }
.form__submit { margin-top: 6px; width: 100%; }
/* ------------------------------------------------------------
FOOTER
------------------------------------------------------------ */
.footer { background: var(--c-navy-900); color: var(--c-white); padding-block: 64px 32px; }
.footer__top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.footer__brand img { height: 40px; }
.footer__brand p { margin-top: 18px; font-size: 14px; color: rgba(255,255,255,.65); max-width: 260px; }
.footer__col h3 { font-size: 13px; font-weight: var(--fw-xbold); letter-spacing: .06em; text-transform: uppercase; color: var(--c-white); margin-bottom: 16px; }
.footer__col ul li { margin-bottom: 10px; }
.footer__col a { font-size: 14px; color: rgba(255,255,255,.75); }
.footer__col a:hover { color: var(--c-white); }
.footer__bottom {
margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15);
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
font-size: 13.5px; color: rgba(255,255,255,.6);
}
.footer__social { display: flex; gap: 14px; }
.footer__social svg { width: 16px; height: 16px; fill: rgba(255,255,255,.75); }
.footer__social a:hover svg { fill: var(--c-white); }
.footer__scrolltop { font-size: 13px; color: rgba(255,255,255,.6); }
.footer__scrolltop:hover { color: var(--c-white); }
/* ------------------------------------------------------------
RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 1169px) {
:root {
--fs-hero: 42px; --lh-hero: 46px;
--fs-hero-lead: 23px; --lh-hero-lead: 28px;
--h-hero: 660px;
}
.site-nav { gap: 15px; }
.site-nav__link { font-size: 13px; }
}
@media (max-width: 1080px) {
.site-nav { display: none; }
.destacado, .dos-columnas, .logistica__grid, .presupuesto__grid { grid-template-columns: 1fr; }
.paneles__grid { grid-template-columns: repeat(3, 1fr); }
/* En mobile se desactiva el recorte a la altura de la columna izquierda
(pedido de Alan): la imagen vuelve a su aspecto natural, en flujo. */
.beneficios__grid { grid-template-columns: 1fr; gap: 28px; align-items: normal; }
.beneficios__media img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
/* Mismo criterio que .beneficios__media: en mobile la foto de logística
vuelve a su aspecto natural, en flujo, debajo del texto. */
.logistica__grid { gap: 28px; }
.logistica__img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
.footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
:root {
--fs-hero: 34px; --lh-hero: 38px;
--fs-hero-lead: 19px; --lh-hero-lead: 26px;
--h-header: 84px; --h-hero: 560px;
}
.site-header__logo img { height: 40px; }
.hero .rule--light { width: 200px; margin: 24px 0 22px; }
}
@media (max-width: 690px) {
.site-topbar { display: none; }
:root {
--fs-hero: 27px; --lh-hero: 31px;
--fs-hero-lead: 16px; --lh-hero-lead: 24px;
--h-header: 70px; --h-hero: 520px;
}
.site-header__logo img { height: 34px; }
.hero .rule--light { width: 140px; margin: 20px 0 18px; }
.section { padding-block: 56px; }
.paneles__grid { grid-template-columns: 1fr 1fr; }
.footer__top { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------
FAMILIA CASSAFORMA — Conocé el resto de nuestras líneas
(pedido de Alan). Grilla de 5 cards (las otras líneas Cassaforma;
CassaSIP es esta misma web, no se lista a sí misma), cada una con
su color de marca en --linea-accent. Efecto "tecla de piano" v2:
TODA la card se hunde junta al pasar el mouse (borde, sombra,
logo, foto y fondo de color son todos descendientes del mismo
.familia-card__link escalado), así el degradé de color queda
siempre alineado con el borde mientras se achica. El texto es la
ÚNICA capa que NO se achica: usa un contra-escalado
(scale(calc(1 / var(--press-scale)))) que cancela el de su padre,
y entra con swipe desde la izquierda + fade-in medio segundo
después de que arranca el fondo de color. La foto NO hace zoom en
el hover (chocaba visualmente con el "hundido", pedido de Alan):
solo recupera color. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.familia-grid {
/* .section__head no trae separación propia (solo la agrega vía
".section__head + .section__grid", que esta grilla no usa) — se
fija acá a mano, mismo valor que esa regla general, para que quede
igual que en el prototipo (pedido de Alan: se había achicado). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
/* Timings del hover — un 50% más rápidos que la v1 (pedido de Alan). */
--press-scale: .965;
--press-dur: .167s;
--bg-dur: .3s;
--bg-delay: var(--press-dur);
--text-dur: .3s;
--text-delay: .5s;
}
.familia-card {
opacity: 0;
transform: translateY(40px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.familia-card.is-visible { opacity: 1; transform: translateY(0); }
.familia-card__link {
position: relative;
display: block;
height: 470px;
background: var(--c-white);
border: 1px solid var(--c-line);
box-shadow: var(--card-shadow);
overflow: hidden;
transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* "Tecla de piano": se achica y baja un poco, sombra se cierra en vez
de crecer (efecto de hundirse contra la superficie). */
.familia-card__link:hover,
.familia-card__link:focus-visible {
transform: scale(var(--press-scale)) translateY(3px);
box-shadow: 0 2px 10px rgba(22, 43, 62, .22);
}
.familia-card__logo {
position: relative;
z-index: 2;
height: 26px;
width: auto;
max-width: 74%;
margin: 26px auto 0;
object-fit: contain;
}
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 32px; margin-top: 23px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 31px; margin-top: 23px; }
.familia-card__media {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 72%;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
}
.familia-card__media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: bottom center;
filter: grayscale(1);
transition: filter .5s ease;
}
.familia-card__link[data-line="cassadeco"] .familia-card__media img { object-position: center bottom; }
/* Sin zoom en la foto: solo recupera color (pedido de Alan). */
.familia-card__link:hover .familia-card__media img,
.familia-card__link:focus-visible .familia-card__media img {
filter: grayscale(0);
}
/* Fondo de color: degradé del color de marca hacia transparente, 3/4
de la altura de la card. Hijo directo de .familia-card__link (no un
hermano aparte): se achica JUNTO con el resto de la card, así sus
márgenes quedan siempre alineados con el borde (pedido de Alan).
Entra con swipe de abajo hacia arriba apenas termina el "press". */
.familia-card__panel-bg {
position: absolute;
z-index: 2;
left: 0; right: 0; bottom: 0;
height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.familia-card__link:hover .familia-card__panel-bg,
.familia-card__link:focus-visible .familia-card__panel-bg {
transform: translateY(0);
}
/* Texto: la ÚNICA capa que NO se achica. Sigue siendo hijo de
.familia-card__link, pero en hover se le aplica un contra-escalado
(1 / var(--press-scale)) que cancela el de la card y lo deja
siempre a tamaño real (pedido de Alan). Entra con swipe desde la
izquierda + fade-in, medio segundo después de que arrancó el fondo
de color. */
.familia-card__text {
position: absolute;
z-index: 3;
left: 0; right: 0; bottom: 0;
padding: 18px 20px 20px;
color: var(--c-white);
opacity: 0;
transform: translateX(-26px) scale(1);
transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.familia-card__link:hover .familia-card__text,
.familia-card__link:focus-visible .familia-card__text {
opacity: 1;
transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.familia-card__claim {
display: block;
font-size: 14.6px; line-height: 1.45; font-weight: var(--fw-light);
color: var(--c-white);
}
.familia-card__cta {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 10px;
font-size: 13.8px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .03em;
color: var(--c-white);
}
.familia-card__cta svg {
width: 13px; height: 13px;
fill: none; stroke: var(--c-white); stroke-width: 2.4;
transform: translateX(0);
transition: transform .3s ease;
}
.familia-card__link:hover .familia-card__cta svg,
.familia-card__link:focus-visible .familia-card__cta svg {
transform: translateX(4px);
}
/* Filete de color arriba de la card: siempre visible, identifica la
marca aun antes del hover. Al ser ::before de .familia-card__link
también se hunde con toda la card (pedido de Alan). */
.familia-card__link::before {
content: "";
position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 4px;
background: var(--linea-accent, var(--c-navy-900));
}
@media (max-width: 1080px) {
.familia-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.familia-card__link { height: 420px; }
}
@media (max-width: 690px) {
.familia-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.familia-card__link { height: 340px; }
.familia-card__logo { height: 22px; margin-top: 20px; }
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 27px; margin-top: 18px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 26px; margin-top: 18px; }
/* En touch no hay hover real: el fondo de color y el CTA quedan
siempre visibles, para no depender de un tap sostenido. */
.familia-card__panel-bg { transform: translateY(0); transition: none; }
.familia-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
padding: 10px 14px 14px;
}
.familia-card__claim { display: none; }
.familia-card__cta { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; }
.hero__img, .destacado__img, .sobre-sip__img, .beneficios__media img { animation: none !important; transform: none; }
.hero__slide, .destacado__slide { transition-duration: .2s; }
.familia-card__link { transition-duration: .001ms; }
}
Tipos de panel
Esp. OSB (cara ext.) Esp. EPS (15 kg/m³) Esp. OSB (cara int.) Espesor final SIP STD 70-9 9.5 mm 70 mm 9.5 mm 89 mm SIP STD 90-9 9.5 mm 90 mm 9.5 mm 109 mm SIP STD 70-11 11.1 mm 70 mm 11.1 mm 92.2 mm SIP STD 90-11 11.1 mm 90 mm 11.1 mm 112.2 mm
Esp. FENÓLICO Esp. EPS (15 kg/m³) Esp. OSB (cara int.) Espesor final SIP FP 70-9 9 mm 70 mm 9.5 mm 88.5 mm SIP FP 90-9 9 mm 90 mm 9.5 mm 108.5 mm
Esp. FENÓLICO Esp. EPS (15 kg/m³) Esp. OSB (cara int.) Espesor final SIP FE 70-9 9 mm 70 mm 9.5 mm 88.5 mm SIP FE 90-9 9 mm 90 mm 9.5 mm 108.5 mm
Esp. RANURADO Esp. EPS (15 kg/m³) Esp. OSB (cara int.) Espesor final SIP RA 70-9 9 mm 70 mm 9.5 mm 88.5 mm SIP RA 90-9 9 mm 90 mm 9.5 mm 108.5 mm
Esp. FIBROCEMENTO Esp. EPS (15 kg/m³) Esp. OSB (cara int.) Espesor final SIP FIBRO 70-8 8 mm 70 mm 9.5 mm 87.5 mm SIP FIBRO 90-8 8 mm 90 mm 9.5 mm 107.5 mm
Esp. PLACA FC Esp. EPS (15 kg/m³) Espesor final PL FIBRO 70-8 8 mm 70 mm 78 mm PL FIBRO 90-8 8 mm 90 mm 98 mm
Esp. PLACA YESO Esp. EPS (15 kg/m³) Espesor final PL YES 20-9 9 mm 20 mm 29 mm PL YES 30-9 9 mm 30 mm 39 mm PL YES 40-9 9 mm 40 mm 49 mm PL YES 50-9 9 mm 50 mm 68 mm
Esp. OSB (2 caras ext.) Esp. EPS (15 kg/m³) Espesor final Medidas SIP AC 49-9 9.5 mm 49 mm 68 mm 1220 mm x 2440 mm SIP AC 70-9 9.5 mm 70 mm 89 mm 1220 mm x 2440 mm SIP ACT 49-9 9.5 mm 49 mm 68 mm 600 mm x 2440 mm SIP ACT 70-9 9.5 mm 70 mm 89 mm 600 mm x 2440 mm
por columna
(son hermanos en el DOM aunque visualmente queden uno al lado del
otro), así que el combinador de hermano adyacente lo tomaba también
y el 2º párrafo (columna derecha) quedaba corrido hacia abajo. Se
anula explícitamente para dejar ambas columnas alineadas por su top
(bug reportado por Alan). */
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.dos-columnas p + p { margin-top: 0; }
/* Construcción con paneles SIP — foto a la derecha (pedido de Alan). En
reposo: efecto ken burns continuo (zoom/paneo lento) y desaturada. Al
pasar el mouse: la animación se detiene, la imagen vuelve a su
posición/escala inicial (mismo mecanismo de siempre: se quita la
animation y la transition la lleva de vuelta suavemente) y recupera
el color — mismo criterio que .linea-card__media img en cassaforma.com,
invertido a pedido de Alan. */
/* padding-bottom reducido a la mitad (42px, antes 84px): acerca esta
sección a "Paneles CassaSIP" (pedido de Alan); el resto de los
paddings de .section quedan igual. */
#sobre-sip { padding-bottom: 42px; }
.sobre-sip__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: start; }
/* Párrafo "Incorporamos una nueva línea de producción..." destacado en
negrita y color naranja del logo (pedido de Alan) */
.sobre-sip__highlight { font-weight: var(--fw-xbold); color: var(--c-accent); }
.sobre-sip__media { position: relative; overflow: hidden; aspect-ratio: 4/5; }
.sobre-sip__img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
animation: sobreSipKenBurns 16s ease-in-out infinite alternate;
transition: filter .45s ease, transform .6s ease;
}
@keyframes sobreSipKenBurns {
0% { transform: scale(1) translate(0, 0); }
100% { transform: scale(1.14) translate(-2.5%, 2%); }
}
.sobre-sip__media:hover .sobre-sip__img,
.sobre-sip__media:focus-within .sobre-sip__img {
filter: grayscale(0);
animation: none;
transform: scale(1) translate(0, 0);
}
@media (max-width: 1080px) {
.sobre-sip__grid { grid-template-columns: 1fr; gap: 32px; }
.sobre-sip__media { order: -1; max-width: 460px; margin-inline: auto; aspect-ratio: 4/3; }
}
/* Tipos de panel */
.paneles__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.panel-card {
/* sin recuadro: panel, título y botón flotan directamente sobre el fondo
de la sección (pedido de Alan) */
border: none; box-shadow: none; background: transparent; display: flex; flex-direction: column;
/* entrada tipo swipe (derecha → izquierda), escalonada vía JS
(.is-visible); velocidad aumentada otra vez (antes .5s/card cada 1000ms,
ahora .35s/card cada 220ms — pedido de Alan) */
opacity: 0; transform: translateX(70px); transition: opacity .35s ease, transform .35s ease;
}
.panel-card.is-visible { opacity: 1; transform: translateX(0); }
/* Render con fondo transparente: se muestra completo (sin recortar), centrado,
con un drop-shadow muy leve para dar un efecto 3D sutil (pedido de Alan).
max-height ampliado (antes 210px) para que la imagen use todo el ancho
disponible de la card en vez de quedar acotada por la altura: efecto neto,
~120% más grande (pedido de Alan). */
.panel-card__media { min-height: 465px; padding: 10px 8px 6px; display: flex; align-items: center; justify-content: center; }
/* El render es también un link de descarga de su ficha técnica (mismo PDF
que el botón); al pasar el mouse, zoom leve sobre la imagen (pedido de
Alan). */
.panel-card__media a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.panel-card__media img {
width: 100%; max-width: 100%; height: auto; max-height: 465px; object-fit: contain;
filter: drop-shadow(0 6px 10px rgba(22, 43, 62, .16));
transition: transform .35s ease;
}
.panel-card__media a:hover img,
.panel-card__media a:focus-visible img {
transform: scale(1.06);
}
.panel-card__body { padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.panel-card__name { font-size: 15px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; }
/* Botón "Descargar ficha" — mismo "tipo" que .sc-panel__cta en
sistema-constructivo.css (cassaforma.com): .btn.btn--navy de base,
ancho completo y compacto. Usar esta combinación cada vez que se
agregue un botón de descarga de ficha en el sitio (pedido de Alan). */
.panel-card__cta { margin-top: auto; width: 100%; height: 40px; font-size: 14.7px; padding: 0 12px; }
/* Adaptables a cada proyecto — texto en 2 columnas: cartera de proyectos a la
izquierda, y el párrafo de la tecnología OSB destacado en un recuadro con
fondo blanco y en negrita, a la derecha (pedido de Alan). */
.adaptables__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.adaptables__highlight {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-med); /* antes fw-xbold: menos peso (pedido de Alan) */
padding: 22px 26px; border-radius: 4px; box-shadow: var(--card-shadow);
}
/* Adaptables a cada proyecto — foto + tabla de resistencias (pedido de Alan).
margin-top +20% (antes 46px) para separar más el render del texto de
arriba. */
.adaptables__grid { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: center; margin-top: 55px; }
/* Render con fondo transparente: se muestra completo, sin recortar ni caja
fija, con un drop-shadow muy leve (mismo criterio que .panel-card__media).
Se desplaza hacia la izquierda hasta sobresalir un 10% del ancho de
contenido (pedido de Alan): crece hacia la izquierda, ancla derecha
sin cambios (mismo criterio que .panel-corte__sandwich). */
.adaptables__media {
display: flex; align-items: center; justify-content: center;
margin-left: calc(-1 * var(--w-content) * 0.10);
width: calc(100% + var(--w-content) * 0.10);
}
.adaptables__media img {
width: 100%; height: auto; max-width: 100%;
filter: drop-shadow(0 8px 14px rgba(22, 43, 62, .16));
}
/* Tabla de especificaciones: misma paleta navy/blanco y tipografía Heebo
del resto del sitio. Columna izquierda (propiedad) en navy —el mismo azul
del botón "Descargar ficha"— con texto blanco, columna derecha (valor)
alterna blanco/gris banda. Ninguna fuente en negrita (pedido de Alan). Al
pasar el mouse por una fila, se resalta en navy oscuro (izquierda) y en la
banda gris (derecha) para que se lea qué fila se está mirando. */
.specs-table-wrap { border: var(--border); border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table th, .specs-table td { padding: 15px 18px; font-size: 14.5px; line-height: 1.3; transition: background-color .2s ease, color .2s ease; }
.specs-table th {
background: var(--c-navy); color: var(--c-white);
font-weight: var(--fw-reg); text-align: left; width: 60%;
}
.specs-table td {
background: var(--c-white); color: var(--c-navy-900);
font-weight: var(--fw-light); text-align: center;
}
.specs-table tr:nth-child(even) td { background: var(--c-band); }
.specs-table tr:not(:last-child) th,
.specs-table tr:not(:last-child) td { border-bottom: 1px solid rgba(255,255,255,.08); }
.specs-table tr:hover th { background: var(--c-navy-900); }
.specs-table tr:hover td { background: var(--c-band); color: var(--c-navy); }
/* Especificaciones técnicas (debajo de "Tipos de panel") — mismo criterio
de diseño que la tabla de Adaptables: acento navy, sin negritas. Tres
grupos (Paneles / Placas / Accesorios) con una etiqueta lateral vertical,
cada uno con sus sub-tablas de medidas (pedido de Alan, ref. cassasip.com). */
.spec-groups { display: flex; flex-direction: column; gap: 34px; margin-top: 92px; } /* separación de los productos ×2 (antes 46px), pedido de Alan */
.spec-group { display: flex; align-items: stretch; gap: 22px; }
.spec-group__label {
flex-shrink: 0; width: 46px; border-radius: 4px;
background: var(--c-accent); color: var(--c-white); /* naranja del logo CassaSIP + texto blanco (pedido de Alan) */
display: flex; align-items: center; justify-content: center;
writing-mode: vertical-rl; transform: rotate(180deg);
font-size: 15.6px; /* 13px +20% (pedido de Alan) */
font-weight: var(--fw-reg); text-transform: uppercase; letter-spacing: .1em;
}
.spec-group__tables { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.spec-block__title { font-size: 14.5px; font-weight: var(--fw-reg); color: var(--c-navy-900); margin-bottom: 10px; }
.spec-block__title .spec-block__note { font-weight: var(--fw-light); color: var(--c-navy); font-size: 13px; }
.spec-block .specs-table-wrap { overflow-x: auto; }
.specs-table--grid { min-width: 560px; }
.specs-table--grid th, .specs-table--grid td { padding: 12px 14px; font-size: 13.5px; white-space: nowrap; }
.specs-table--grid thead th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: center;
}
.specs-table--grid thead th:first-child { background: var(--c-navy-900); }
.specs-table--grid tbody th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: left; width: auto;
}
.specs-table--grid tbody td {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-light); text-align: center;
}
.specs-table--grid tbody tr:nth-child(even) td { background: var(--c-band); }
.specs-table--grid tbody tr:hover th { background: var(--c-navy-900); }
.specs-table--grid tbody tr:hover td { background: var(--c-band); color: var(--c-navy); }
@media (max-width: 690px) {
.spec-group { flex-direction: column; gap: 10px; }
.spec-group__label {
width: 100%; writing-mode: horizontal-tb; transform: none; padding: 8px; height: auto;
}
}
@media (max-width: 1080px) {
.adaptables__intro { grid-template-columns: 1fr; gap: 20px; }
.adaptables__grid { grid-template-columns: 1fr; gap: 28px; }
/* en una sola columna el desborde a la izquierda no tiene sentido
(no queda margen de página del que sobresalir): se desactiva */
.adaptables__media { margin-left: 0; width: 100%; max-width: 460px; margin-inline: auto; }
.specs-table-wrap { max-width: 460px; margin-inline: auto; width: 100%; }
}
/* ------------------------------------------------------------
PERFILES — Contanos qué necesitás (pedido de Ceci vía Alan).
3 cards con foto en blanco y negro tapada por una "cortina" navy con
textura diagonal sutil; al hacer hover la cortina se corre hacia la
derecha con clip-path (no se desvanece, se desliza), la foto recupera
color + zoom leve, aparece una línea de acento naranja creciendo bajo
el título y la flecha se desplaza. Entrada: swipe hacia arriba
escalonado al entrar en viewport (ver "Perfiles CassaSIP" en
js/script.js), misma familia de efecto que .panel-card pero vertical
en vez de lateral, para variar. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.perfiles-sip__grid {
/* mismo ajuste que .familia-grid: .section__head no trae separación
propia acá (pedido de Alan: se había achicado respecto al prototipo). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.perfil-sip-card {
opacity: 0;
transform: translateY(46px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.perfil-sip-card.is-visible { opacity: 1; transform: translateY(0); }
.perfil-sip-card__link {
position: relative;
display: block;
border: var(--border);
box-shadow: var(--card-shadow);
transition: box-shadow var(--t-base), transform var(--t-base);
}
.perfil-sip-card__link:hover,
.perfil-sip-card__link:focus-visible {
box-shadow: 0 8px 30px rgba(22, 43, 62, .16);
transform: translateY(-4px);
}
.perfil-sip-card__media {
position: relative;
height: 300px;
overflow: hidden;
}
.perfil-sip-card__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.05);
transform: scale(1.03);
transition: transform .6s ease, filter .6s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__img,
.perfil-sip-card__link:focus-visible .perfil-sip-card__img {
filter: grayscale(0) contrast(1);
transform: scale(1.1);
}
.perfil-sip-card__curtain {
position: absolute; inset: 0;
background:
repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px),
linear-gradient(150deg, var(--c-navy-900) 0%, var(--c-navy) 100%);
clip-path: inset(0 0 0 0);
transition: clip-path .55s cubic-bezier(.65,0,.35,1);
}
.perfil-sip-card__link:hover .perfil-sip-card__curtain,
.perfil-sip-card__link:focus-visible .perfil-sip-card__curtain {
clip-path: inset(0 0 0 100%);
}
.perfil-sip-card__num {
position: absolute; top: 18px; left: 20px;
font-size: 13px; font-weight: var(--fw-xbold);
color: rgba(255,255,255,.55);
letter-spacing: .06em;
transition: opacity .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__num,
.perfil-sip-card__link:focus-visible .perfil-sip-card__num { opacity: 0; }
.perfil-sip-card__body {
position: relative;
background: var(--c-white);
padding: 22px 22px 26px;
}
.perfil-sip-card__accent {
display: block;
height: 3px;
width: 0%;
background: var(--c-accent);
transition: width .45s ease;
margin-bottom: 14px;
}
.perfil-sip-card__link:hover .perfil-sip-card__accent,
.perfil-sip-card__link:focus-visible .perfil-sip-card__accent { width: 100%; }
.perfil-sip-card__label {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
font-size: 15px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .02em;
color: var(--c-navy-900);
}
.perfil-sip-card__label svg {
width: 18px; height: 18px; flex-shrink: 0;
fill: none; stroke: var(--c-navy-900); stroke-width: 2;
transform: translateX(0);
transition: transform .35s ease, stroke .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__label svg,
.perfil-sip-card__link:focus-visible .perfil-sip-card__label svg {
transform: translateX(6px);
stroke: var(--c-accent);
}
.perfil-sip-card__desc {
margin-top: 8px;
font-size: 14.7px; line-height: 1.55; font-weight: var(--fw-light);
color: var(--c-gray);
}
@media (max-width: 1080px) {
.perfiles-sip__grid { grid-template-columns: 1fr; gap: 20px; }
.perfil-sip-card { transform: translateY(28px); }
.perfil-sip-card__media { height: 260px; }
}
/* ------------------------------------------------------------
TU PROYECTO — CassaSIP (pedido de Alan).
1 card "hero" a ancho completo (mitad de alto que una card de
grilla) + grilla 2x2 con las 4 restantes. Título siempre
visible sobre la foto; párrafo + CTA revelados al hover con
swipe desde la izquierda. Hover "tecla de piano" con zoom IN:
toda la card crece y el fondo de color sube al mismo tiempo
(--bg-delay: 0s); el texto arranca cuando ese swipe del fondo
va por la mitad (--text-delay: .15s, 50% de --bg-dur), para que
no se sienta "atrasado". Mismo mecanismo de contra-escala que
Familia Cassaforma para que el texto no crezca junto con la
card.
------------------------------------------------------------ */
.tuproyecto-grid {
margin-top: 46px;
list-style: none; padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
--press-scale: 1.035;
--press-dur: .3s;
--bg-dur: .3s;
--bg-delay: 0s;
--text-dur: .3s;
--text-delay: .15s; /* arranca cuando el swipe del fondo va por la mitad (50% de .3s) */
}
.tuproyecto-card--hero { grid-column: 1 / -1; }
.tuproyecto-card { opacity: 0; transform: translateY(40px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1); }
.tuproyecto-card.is-visible { opacity: 1; transform: translateY(0); }
.tuproyecto-card__link {
position: relative; display: block;
aspect-ratio: 2.1573 / 1;
background: var(--c-white); border: 1px solid var(--c-line); box-shadow: var(--card-shadow);
overflow: hidden; transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* Card hero: mismo ancho, la mitad del alto proporcional (el doble de "achatada") */
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 4.3147 / 1; }
.tuproyecto-card__link:hover, .tuproyecto-card__link:focus-visible {
transform: scale(var(--press-scale));
box-shadow: 0 14px 34px rgba(22, 43, 62, .28);
z-index: 5;
}
.tuproyecto-card__media { position: absolute; inset: 0; }
.tuproyecto-card__media img {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: grayscale(1); transition: filter .5s ease;
}
.tuproyecto-card__link:hover .tuproyecto-card__media img,
.tuproyecto-card__link:focus-visible .tuproyecto-card__media img { filter: grayscale(0); }
/* Scrim permanente para que el título siempre se lea */
.tuproyecto-card__link::after {
content: ""; position: absolute; z-index: 1; inset: 0;
background: linear-gradient(160deg, rgba(22,43,62,.55) 0%, rgba(22,43,62,.22) 45%, rgba(22,43,62,.05) 70%);
}
.tuproyecto-card__title {
position: relative; z-index: 2; display: block;
padding: 30px 0 0 34px;
font-size: 25.6px; line-height: 1.2; font-weight: var(--fw-light); color: var(--c-white);
}
/* Filete arriba en el naranja del logo CassaSIP, para resaltar cada card */
.tuproyecto-card__link::before {
content: ""; position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 2px;
background: var(--c-accent);
}
.tuproyecto-card__panel-bg {
position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__panel-bg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__panel-bg { transform: translateY(0); }
.tuproyecto-card__text {
position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 22px 34px 26px;
max-width: 560px;
color: var(--c-white); opacity: 0;
transform: translateX(-26px) scale(1); transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__text,
.tuproyecto-card__link:focus-visible .tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.tuproyecto-card__claim { display: block; font-size: 19.2px; line-height: 1.5; font-weight: var(--fw-light); color: var(--c-white); }
.tuproyecto-card__cta {
display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
font-size: 16.8px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; color: var(--c-white);
}
.tuproyecto-card__cta svg { width: 16.8px; height: 16.8px; fill: none; stroke: var(--c-white); stroke-width: 2.4; transform: translateX(0); transition: transform .3s ease; }
.tuproyecto-card__link:hover .tuproyecto-card__cta svg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__cta svg { transform: translateX(4px); }
@media (max-width: 900px) {
.tuproyecto-grid { grid-template-columns: 1fr; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 2.1573 / 1; }
}
@media (max-width: 690px) {
.tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card__title { font-size: 19.2px; padding: 20px 0 0 20px; }
.tuproyecto-card__text { padding: 16px 20px 20px; }
/* En touch no hay hover real: panel y CTA quedan siempre visibles,
igual que en Familia Cassaforma (el párrafo se oculta para que
no choque con el título en cards bajas). */
.tuproyecto-card__panel-bg { transform: translateY(0); transition: none; }
.tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
}
.tuproyecto-card__claim { display: none; }
.tuproyecto-card__cta { margin-top: 0; }
}
/* Barra "beneficios clave" — mismas medidas que .sc-ahorros de
cassaforma.com (sistema-constructivo.css, bloque GRANDES AHORROS):
3 columnas centradas, ícono circular de 71px (ya viene con su color
en el propio .svg), separador vertical negro entre columnas. */
.ahorros { padding: 70px 0 62px; text-align: center; } /* +10% arriba y abajo (antes 64px/56px), pedido de Alan */
.ahorros__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.ahorro { display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 24px; }
.ahorro + .ahorro::before {
content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
width: 2px; background: var(--c-black);
}
.ahorro__icon { display: block; width: 71px; height: 71px; margin: 0 auto 20px; }
.ahorro__label { font-size: 23px; line-height: 1.3; font-weight: var(--fw-light); color: var(--c-navy); }
@media (max-width: 690px) {
.ahorros__grid { grid-template-columns: 1fr; row-gap: 32px; }
.ahorro + .ahorro::before { display: none; }
.ahorro__label { font-size: 19px; }
}
/* Beneficios (3 pilares) */
/* Beneficios de la construcción SIP — 2 columnas: pilares apilados con
viñeta numerada + logos de certificaciones a la izquierda, imagen a la
derecha (pedido de Alan). Separación entre columnas ×2 (antes 60px).
La imagen de la derecha no aporta su alto natural al cálculo de la fila
(queda position:absolute dentro de .beneficios__media, que por eso no
tiene alto propio): así la altura de la fila la fija SOLO la columna
izquierda (pilares + logos), y la imagen se recorta arriba/abajo con
object-fit:cover para igualar siempre esa altura — salvo en mobile,
donde se desactiva (ver media query). */
.beneficios__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; align-items: stretch; }
.beneficios__left { display: flex; flex-direction: column; }
.pilares__grid { display: flex; flex-direction: column; gap: 32px; }
.pilar__head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.pilar__num {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
background: var(--c-navy); color: var(--c-white);
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: var(--fw-xbold);
}
.pilar__title { font-size: 19px; font-weight: var(--fw-xbold); color: var(--c-navy-900); text-transform: uppercase; margin: 0; }
.pilar__text { margin-top: 0; font-size: 15.5px; line-height: 1.6; }
/* Logos de certificaciones — una sola imagen ya compuesta con los 6 logos
(2 filas x 3 columnas), mismo ancho que los párrafos de arriba (pedido
de Alan: usar la imagen completa en vez de 6 El sistema permite su aplicación para una variada cartera de proyectos, desde viviendas hasta grandes obras industriales, incluyendo construcción en altura. Los tableros OSB APA son fabricados bajo los estándares de calidad internacional (norma PS2), y utilizan adhesivos MDI y fenol formaldehido, con niveles de emisión de 0,01 a 0,03 ppm, muy bajos respecto a las exigencias de los países desarrollados, quedando exentos de las principales regulaciones mundiales, ya que no provocan ningún daño a la salud humana. La tecnología del OSB es capaz de lograr uniformidad, estabilidad estructural, tableros libres de nudos, grietas e irregularidades, combas y curvaturas propias de la madera. separadas). */
.beneficios__certs {
margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--c-line);
}
.beneficios__certs img { display: block; width: 100%; height: auto; }
.beneficios__media { position: relative; overflow: hidden; border-radius: 4px; } /* recorta el zoom del ken burns dentro de su propio cuadro (mismo criterio que .sobre-sip__media) */
.beneficios__media img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
animation: sobreSipKenBurns 18s ease-in-out infinite alternate; /* mismo ken burns que la foto de "Construcción con paneles SIP" */
}
/* ¿Por qué construir con SIP? — imagen del despiece a la izquierda, lista
de items con bullets a la derecha. Tipografía tomada de la lista de capas
de cassaforma.com (sistema-constructivo.css: .sc-panellosa__label/__item):
Heebo Light, navy, bullet "•" y divisor fino bajo cada renglón. */
.porque-sip { display: grid; grid-template-columns: minmax(300px, 460px) 1fr; gap: 60px; align-items: center; margin-top: 46px; }
.porque-sip__media img { width: 100%; display: block; }
.porque-sip__list {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto);
column-gap: 48px;
}
.porque-sip__list li {
padding: 14px 0;
border-bottom: 1px solid rgba(22, 43, 62, .15);
font-size: 19px; letter-spacing: .02em;
font-weight: var(--fw-light); color: var(--c-navy);
}
.porque-sip__list li::before { content: "\2022 "; }
@media (max-width: 1080px) {
.porque-sip { grid-template-columns: 1fr; }
.porque-sip__media { max-width: 460px; margin-inline: auto; }
}
@media (max-width: 690px) {
.porque-sip__list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
}
/* Logística — texto (Logística + Almacenamiento apilados) a la izquierda,
foto en blanco y negro con ken burns a la derecha (pedido de Alan). La
imagen no aporta su alto natural al cálculo de la fila (position:absolute
dentro de .logistica__media, sin alto propio): así la altura de la fila
la fija SOLO la columna de texto, y la foto se recorta con object-fit:cover
para igualar siempre esa altura — mismo criterio que .beneficios__media. */
.logistica__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: stretch; }
.logistica__text { display: flex; flex-direction: column; gap: 32px; }
.logistica__item h3 { font-size: 19px; font-weight: var(--fw-xbold); text-transform: uppercase; color: var(--c-navy-900); margin-bottom: 12px; }
.logistica__media { position: relative; overflow: hidden; border-radius: 4px; }
.logistica__img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
transition: filter .45s ease;
/* Es una sola foto fija (no un carrusel): un zoom-in ÚNICO de 10s que
termina y se queda ahí (forwards, sin infinite/alternate) — solo
"ida", nunca vuelve para atrás y nunca vuelve a saltar (pedido de
Alan). */
animation: destacadoKenBurns 10s ease-out forwards;
}
.logistica__media:hover .logistica__img { filter: grayscale(0); }
/* FAQ */
.faq { max-width: 880px; }
.faq__item { border-bottom: var(--border); }
.faq__item summary {
cursor: pointer; list-style: none; padding: 20px 0;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
font-size: 16.5px; font-weight: var(--fw-med); color: var(--c-navy-900);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
content: "+"; font-size: 22px; font-weight: var(--fw-light); color: var(--c-navy); flex-shrink: 0;
}
.faq__item[open] summary::after { content: "–"; }
.faq__body { padding: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: var(--c-gray); }
.faq__body ul { list-style: disc; padding-left: 20px; margin-top: 10px; }
.faq__body li { margin-bottom: 6px; }
.faq__body p + p { margin-top: 12px; }
/* Proceso constructivo — solo título + video a todo el ancho del
contenido (pedido de Alan; antes había una lista de pasos numerados). */
.proceso__video { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.proceso__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Capacitación */
.capacitacion { text-align: center; }
.capacitacion h2 { max-width: 620px; margin-inline: auto; }
.capacitacion .btn { margin-top: 30px; }
/* Presupuesto / form */
.presupuesto__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.form__field { margin-bottom: 16px; }
.form__label { display: block; font-size: 14px; font-weight: var(--fw-med); margin-bottom: 7px; }
.form__input, .form__select {
display: block; width: 100%; height: 46px; padding: 0 14px;
border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-navy-900);
font-family: var(--ff); font-size: 15px;
}
.form__input:focus, .form__select:focus { border-color: var(--c-navy); outline: none; }
.form__submit { margin-top: 6px; width: 100%; }
/* ------------------------------------------------------------
FOOTER
------------------------------------------------------------ */
.footer { background: var(--c-navy-900); color: var(--c-white); padding-block: 64px 32px; }
.footer__top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.footer__brand img { height: 40px; }
.footer__brand p { margin-top: 18px; font-size: 14px; color: rgba(255,255,255,.65); max-width: 260px; }
.footer__col h3 { font-size: 13px; font-weight: var(--fw-xbold); letter-spacing: .06em; text-transform: uppercase; color: var(--c-white); margin-bottom: 16px; }
.footer__col ul li { margin-bottom: 10px; }
.footer__col a { font-size: 14px; color: rgba(255,255,255,.75); }
.footer__col a:hover { color: var(--c-white); }
.footer__bottom {
margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15);
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
font-size: 13.5px; color: rgba(255,255,255,.6);
}
.footer__social { display: flex; gap: 14px; }
.footer__social svg { width: 16px; height: 16px; fill: rgba(255,255,255,.75); }
.footer__social a:hover svg { fill: var(--c-white); }
.footer__scrolltop { font-size: 13px; color: rgba(255,255,255,.6); }
.footer__scrolltop:hover { color: var(--c-white); }
/* ------------------------------------------------------------
RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 1169px) {
:root {
--fs-hero: 42px; --lh-hero: 46px;
--fs-hero-lead: 23px; --lh-hero-lead: 28px;
--h-hero: 660px;
}
.site-nav { gap: 15px; }
.site-nav__link { font-size: 13px; }
}
@media (max-width: 1080px) {
.site-nav { display: none; }
.destacado, .dos-columnas, .logistica__grid, .presupuesto__grid { grid-template-columns: 1fr; }
.paneles__grid { grid-template-columns: repeat(3, 1fr); }
/* En mobile se desactiva el recorte a la altura de la columna izquierda
(pedido de Alan): la imagen vuelve a su aspecto natural, en flujo. */
.beneficios__grid { grid-template-columns: 1fr; gap: 28px; align-items: normal; }
.beneficios__media img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
/* Mismo criterio que .beneficios__media: en mobile la foto de logística
vuelve a su aspecto natural, en flujo, debajo del texto. */
.logistica__grid { gap: 28px; }
.logistica__img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
.footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
:root {
--fs-hero: 34px; --lh-hero: 38px;
--fs-hero-lead: 19px; --lh-hero-lead: 26px;
--h-header: 84px; --h-hero: 560px;
}
.site-header__logo img { height: 40px; }
.hero .rule--light { width: 200px; margin: 24px 0 22px; }
}
@media (max-width: 690px) {
.site-topbar { display: none; }
:root {
--fs-hero: 27px; --lh-hero: 31px;
--fs-hero-lead: 16px; --lh-hero-lead: 24px;
--h-header: 70px; --h-hero: 520px;
}
.site-header__logo img { height: 34px; }
.hero .rule--light { width: 140px; margin: 20px 0 18px; }
.section { padding-block: 56px; }
.paneles__grid { grid-template-columns: 1fr 1fr; }
.footer__top { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------
FAMILIA CASSAFORMA — Conocé el resto de nuestras líneas
(pedido de Alan). Grilla de 5 cards (las otras líneas Cassaforma;
CassaSIP es esta misma web, no se lista a sí misma), cada una con
su color de marca en --linea-accent. Efecto "tecla de piano" v2:
TODA la card se hunde junta al pasar el mouse (borde, sombra,
logo, foto y fondo de color son todos descendientes del mismo
.familia-card__link escalado), así el degradé de color queda
siempre alineado con el borde mientras se achica. El texto es la
ÚNICA capa que NO se achica: usa un contra-escalado
(scale(calc(1 / var(--press-scale)))) que cancela el de su padre,
y entra con swipe desde la izquierda + fade-in medio segundo
después de que arranca el fondo de color. La foto NO hace zoom en
el hover (chocaba visualmente con el "hundido", pedido de Alan):
solo recupera color. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.familia-grid {
/* .section__head no trae separación propia (solo la agrega vía
".section__head + .section__grid", que esta grilla no usa) — se
fija acá a mano, mismo valor que esa regla general, para que quede
igual que en el prototipo (pedido de Alan: se había achicado). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
/* Timings del hover — un 50% más rápidos que la v1 (pedido de Alan). */
--press-scale: .965;
--press-dur: .167s;
--bg-dur: .3s;
--bg-delay: var(--press-dur);
--text-dur: .3s;
--text-delay: .5s;
}
.familia-card {
opacity: 0;
transform: translateY(40px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.familia-card.is-visible { opacity: 1; transform: translateY(0); }
.familia-card__link {
position: relative;
display: block;
height: 470px;
background: var(--c-white);
border: 1px solid var(--c-line);
box-shadow: var(--card-shadow);
overflow: hidden;
transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* "Tecla de piano": se achica y baja un poco, sombra se cierra en vez
de crecer (efecto de hundirse contra la superficie). */
.familia-card__link:hover,
.familia-card__link:focus-visible {
transform: scale(var(--press-scale)) translateY(3px);
box-shadow: 0 2px 10px rgba(22, 43, 62, .22);
}
.familia-card__logo {
position: relative;
z-index: 2;
height: 26px;
width: auto;
max-width: 74%;
margin: 26px auto 0;
object-fit: contain;
}
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 32px; margin-top: 23px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 31px; margin-top: 23px; }
.familia-card__media {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 72%;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
}
.familia-card__media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: bottom center;
filter: grayscale(1);
transition: filter .5s ease;
}
.familia-card__link[data-line="cassadeco"] .familia-card__media img { object-position: center bottom; }
/* Sin zoom en la foto: solo recupera color (pedido de Alan). */
.familia-card__link:hover .familia-card__media img,
.familia-card__link:focus-visible .familia-card__media img {
filter: grayscale(0);
}
/* Fondo de color: degradé del color de marca hacia transparente, 3/4
de la altura de la card. Hijo directo de .familia-card__link (no un
hermano aparte): se achica JUNTO con el resto de la card, así sus
márgenes quedan siempre alineados con el borde (pedido de Alan).
Entra con swipe de abajo hacia arriba apenas termina el "press". */
.familia-card__panel-bg {
position: absolute;
z-index: 2;
left: 0; right: 0; bottom: 0;
height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.familia-card__link:hover .familia-card__panel-bg,
.familia-card__link:focus-visible .familia-card__panel-bg {
transform: translateY(0);
}
/* Texto: la ÚNICA capa que NO se achica. Sigue siendo hijo de
.familia-card__link, pero en hover se le aplica un contra-escalado
(1 / var(--press-scale)) que cancela el de la card y lo deja
siempre a tamaño real (pedido de Alan). Entra con swipe desde la
izquierda + fade-in, medio segundo después de que arrancó el fondo
de color. */
.familia-card__text {
position: absolute;
z-index: 3;
left: 0; right: 0; bottom: 0;
padding: 18px 20px 20px;
color: var(--c-white);
opacity: 0;
transform: translateX(-26px) scale(1);
transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.familia-card__link:hover .familia-card__text,
.familia-card__link:focus-visible .familia-card__text {
opacity: 1;
transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.familia-card__claim {
display: block;
font-size: 14.6px; line-height: 1.45; font-weight: var(--fw-light);
color: var(--c-white);
}
.familia-card__cta {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 10px;
font-size: 13.8px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .03em;
color: var(--c-white);
}
.familia-card__cta svg {
width: 13px; height: 13px;
fill: none; stroke: var(--c-white); stroke-width: 2.4;
transform: translateX(0);
transition: transform .3s ease;
}
.familia-card__link:hover .familia-card__cta svg,
.familia-card__link:focus-visible .familia-card__cta svg {
transform: translateX(4px);
}
/* Filete de color arriba de la card: siempre visible, identifica la
marca aun antes del hover. Al ser ::before de .familia-card__link
también se hunde con toda la card (pedido de Alan). */
.familia-card__link::before {
content: "";
position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 4px;
background: var(--linea-accent, var(--c-navy-900));
}
@media (max-width: 1080px) {
.familia-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.familia-card__link { height: 420px; }
}
@media (max-width: 690px) {
.familia-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.familia-card__link { height: 340px; }
.familia-card__logo { height: 22px; margin-top: 20px; }
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 27px; margin-top: 18px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 26px; margin-top: 18px; }
/* En touch no hay hover real: el fondo de color y el CTA quedan
siempre visibles, para no depender de un tap sostenido. */
.familia-card__panel-bg { transform: translateY(0); transition: none; }
.familia-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
padding: 10px 14px 14px;
}
.familia-card__claim { display: none; }
.familia-card__cta { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; }
.hero__img, .destacado__img, .sobre-sip__img, .beneficios__media img { animation: none !important; transform: none; }
.hero__slide, .destacado__slide { transition-duration: .2s; }
.familia-card__link { transition-duration: .001ms; }
}
Adaptables a cada proyecto
Resistencia a la flexión 270 kg/cm2 Resistencia a la tracción 2.10 kg/cm2 Resistencia a la compresión (Pandeo) 15.6 tn/m Resistencia térmica del núcleo 2.56 m2°k/W Resistencia térmica total 2.74 m2°k/W Conductividad térmica (10°C) 0.036 W/m°K Peso Panel 48/50 kg
por columna
(son hermanos en el DOM aunque visualmente queden uno al lado del
otro), así que el combinador de hermano adyacente lo tomaba también
y el 2º párrafo (columna derecha) quedaba corrido hacia abajo. Se
anula explícitamente para dejar ambas columnas alineadas por su top
(bug reportado por Alan). */
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.dos-columnas p + p { margin-top: 0; }
/* Construcción con paneles SIP — foto a la derecha (pedido de Alan). En
reposo: efecto ken burns continuo (zoom/paneo lento) y desaturada. Al
pasar el mouse: la animación se detiene, la imagen vuelve a su
posición/escala inicial (mismo mecanismo de siempre: se quita la
animation y la transition la lleva de vuelta suavemente) y recupera
el color — mismo criterio que .linea-card__media img en cassaforma.com,
invertido a pedido de Alan. */
/* padding-bottom reducido a la mitad (42px, antes 84px): acerca esta
sección a "Paneles CassaSIP" (pedido de Alan); el resto de los
paddings de .section quedan igual. */
#sobre-sip { padding-bottom: 42px; }
.sobre-sip__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: start; }
/* Párrafo "Incorporamos una nueva línea de producción..." destacado en
negrita y color naranja del logo (pedido de Alan) */
.sobre-sip__highlight { font-weight: var(--fw-xbold); color: var(--c-accent); }
.sobre-sip__media { position: relative; overflow: hidden; aspect-ratio: 4/5; }
.sobre-sip__img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
animation: sobreSipKenBurns 16s ease-in-out infinite alternate;
transition: filter .45s ease, transform .6s ease;
}
@keyframes sobreSipKenBurns {
0% { transform: scale(1) translate(0, 0); }
100% { transform: scale(1.14) translate(-2.5%, 2%); }
}
.sobre-sip__media:hover .sobre-sip__img,
.sobre-sip__media:focus-within .sobre-sip__img {
filter: grayscale(0);
animation: none;
transform: scale(1) translate(0, 0);
}
@media (max-width: 1080px) {
.sobre-sip__grid { grid-template-columns: 1fr; gap: 32px; }
.sobre-sip__media { order: -1; max-width: 460px; margin-inline: auto; aspect-ratio: 4/3; }
}
/* Tipos de panel */
.paneles__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.panel-card {
/* sin recuadro: panel, título y botón flotan directamente sobre el fondo
de la sección (pedido de Alan) */
border: none; box-shadow: none; background: transparent; display: flex; flex-direction: column;
/* entrada tipo swipe (derecha → izquierda), escalonada vía JS
(.is-visible); velocidad aumentada otra vez (antes .5s/card cada 1000ms,
ahora .35s/card cada 220ms — pedido de Alan) */
opacity: 0; transform: translateX(70px); transition: opacity .35s ease, transform .35s ease;
}
.panel-card.is-visible { opacity: 1; transform: translateX(0); }
/* Render con fondo transparente: se muestra completo (sin recortar), centrado,
con un drop-shadow muy leve para dar un efecto 3D sutil (pedido de Alan).
max-height ampliado (antes 210px) para que la imagen use todo el ancho
disponible de la card en vez de quedar acotada por la altura: efecto neto,
~120% más grande (pedido de Alan). */
.panel-card__media { min-height: 465px; padding: 10px 8px 6px; display: flex; align-items: center; justify-content: center; }
/* El render es también un link de descarga de su ficha técnica (mismo PDF
que el botón); al pasar el mouse, zoom leve sobre la imagen (pedido de
Alan). */
.panel-card__media a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.panel-card__media img {
width: 100%; max-width: 100%; height: auto; max-height: 465px; object-fit: contain;
filter: drop-shadow(0 6px 10px rgba(22, 43, 62, .16));
transition: transform .35s ease;
}
.panel-card__media a:hover img,
.panel-card__media a:focus-visible img {
transform: scale(1.06);
}
.panel-card__body { padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.panel-card__name { font-size: 15px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; }
/* Botón "Descargar ficha" — mismo "tipo" que .sc-panel__cta en
sistema-constructivo.css (cassaforma.com): .btn.btn--navy de base,
ancho completo y compacto. Usar esta combinación cada vez que se
agregue un botón de descarga de ficha en el sitio (pedido de Alan). */
.panel-card__cta { margin-top: auto; width: 100%; height: 40px; font-size: 14.7px; padding: 0 12px; }
/* Adaptables a cada proyecto — texto en 2 columnas: cartera de proyectos a la
izquierda, y el párrafo de la tecnología OSB destacado en un recuadro con
fondo blanco y en negrita, a la derecha (pedido de Alan). */
.adaptables__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.adaptables__highlight {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-med); /* antes fw-xbold: menos peso (pedido de Alan) */
padding: 22px 26px; border-radius: 4px; box-shadow: var(--card-shadow);
}
/* Adaptables a cada proyecto — foto + tabla de resistencias (pedido de Alan).
margin-top +20% (antes 46px) para separar más el render del texto de
arriba. */
.adaptables__grid { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: center; margin-top: 55px; }
/* Render con fondo transparente: se muestra completo, sin recortar ni caja
fija, con un drop-shadow muy leve (mismo criterio que .panel-card__media).
Se desplaza hacia la izquierda hasta sobresalir un 10% del ancho de
contenido (pedido de Alan): crece hacia la izquierda, ancla derecha
sin cambios (mismo criterio que .panel-corte__sandwich). */
.adaptables__media {
display: flex; align-items: center; justify-content: center;
margin-left: calc(-1 * var(--w-content) * 0.10);
width: calc(100% + var(--w-content) * 0.10);
}
.adaptables__media img {
width: 100%; height: auto; max-width: 100%;
filter: drop-shadow(0 8px 14px rgba(22, 43, 62, .16));
}
/* Tabla de especificaciones: misma paleta navy/blanco y tipografía Heebo
del resto del sitio. Columna izquierda (propiedad) en navy —el mismo azul
del botón "Descargar ficha"— con texto blanco, columna derecha (valor)
alterna blanco/gris banda. Ninguna fuente en negrita (pedido de Alan). Al
pasar el mouse por una fila, se resalta en navy oscuro (izquierda) y en la
banda gris (derecha) para que se lea qué fila se está mirando. */
.specs-table-wrap { border: var(--border); border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table th, .specs-table td { padding: 15px 18px; font-size: 14.5px; line-height: 1.3; transition: background-color .2s ease, color .2s ease; }
.specs-table th {
background: var(--c-navy); color: var(--c-white);
font-weight: var(--fw-reg); text-align: left; width: 60%;
}
.specs-table td {
background: var(--c-white); color: var(--c-navy-900);
font-weight: var(--fw-light); text-align: center;
}
.specs-table tr:nth-child(even) td { background: var(--c-band); }
.specs-table tr:not(:last-child) th,
.specs-table tr:not(:last-child) td { border-bottom: 1px solid rgba(255,255,255,.08); }
.specs-table tr:hover th { background: var(--c-navy-900); }
.specs-table tr:hover td { background: var(--c-band); color: var(--c-navy); }
/* Especificaciones técnicas (debajo de "Tipos de panel") — mismo criterio
de diseño que la tabla de Adaptables: acento navy, sin negritas. Tres
grupos (Paneles / Placas / Accesorios) con una etiqueta lateral vertical,
cada uno con sus sub-tablas de medidas (pedido de Alan, ref. cassasip.com). */
.spec-groups { display: flex; flex-direction: column; gap: 34px; margin-top: 92px; } /* separación de los productos ×2 (antes 46px), pedido de Alan */
.spec-group { display: flex; align-items: stretch; gap: 22px; }
.spec-group__label {
flex-shrink: 0; width: 46px; border-radius: 4px;
background: var(--c-accent); color: var(--c-white); /* naranja del logo CassaSIP + texto blanco (pedido de Alan) */
display: flex; align-items: center; justify-content: center;
writing-mode: vertical-rl; transform: rotate(180deg);
font-size: 15.6px; /* 13px +20% (pedido de Alan) */
font-weight: var(--fw-reg); text-transform: uppercase; letter-spacing: .1em;
}
.spec-group__tables { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.spec-block__title { font-size: 14.5px; font-weight: var(--fw-reg); color: var(--c-navy-900); margin-bottom: 10px; }
.spec-block__title .spec-block__note { font-weight: var(--fw-light); color: var(--c-navy); font-size: 13px; }
.spec-block .specs-table-wrap { overflow-x: auto; }
.specs-table--grid { min-width: 560px; }
.specs-table--grid th, .specs-table--grid td { padding: 12px 14px; font-size: 13.5px; white-space: nowrap; }
.specs-table--grid thead th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: center;
}
.specs-table--grid thead th:first-child { background: var(--c-navy-900); }
.specs-table--grid tbody th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: left; width: auto;
}
.specs-table--grid tbody td {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-light); text-align: center;
}
.specs-table--grid tbody tr:nth-child(even) td { background: var(--c-band); }
.specs-table--grid tbody tr:hover th { background: var(--c-navy-900); }
.specs-table--grid tbody tr:hover td { background: var(--c-band); color: var(--c-navy); }
@media (max-width: 690px) {
.spec-group { flex-direction: column; gap: 10px; }
.spec-group__label {
width: 100%; writing-mode: horizontal-tb; transform: none; padding: 8px; height: auto;
}
}
@media (max-width: 1080px) {
.adaptables__intro { grid-template-columns: 1fr; gap: 20px; }
.adaptables__grid { grid-template-columns: 1fr; gap: 28px; }
/* en una sola columna el desborde a la izquierda no tiene sentido
(no queda margen de página del que sobresalir): se desactiva */
.adaptables__media { margin-left: 0; width: 100%; max-width: 460px; margin-inline: auto; }
.specs-table-wrap { max-width: 460px; margin-inline: auto; width: 100%; }
}
/* ------------------------------------------------------------
PERFILES — Contanos qué necesitás (pedido de Ceci vía Alan).
3 cards con foto en blanco y negro tapada por una "cortina" navy con
textura diagonal sutil; al hacer hover la cortina se corre hacia la
derecha con clip-path (no se desvanece, se desliza), la foto recupera
color + zoom leve, aparece una línea de acento naranja creciendo bajo
el título y la flecha se desplaza. Entrada: swipe hacia arriba
escalonado al entrar en viewport (ver "Perfiles CassaSIP" en
js/script.js), misma familia de efecto que .panel-card pero vertical
en vez de lateral, para variar. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.perfiles-sip__grid {
/* mismo ajuste que .familia-grid: .section__head no trae separación
propia acá (pedido de Alan: se había achicado respecto al prototipo). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.perfil-sip-card {
opacity: 0;
transform: translateY(46px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.perfil-sip-card.is-visible { opacity: 1; transform: translateY(0); }
.perfil-sip-card__link {
position: relative;
display: block;
border: var(--border);
box-shadow: var(--card-shadow);
transition: box-shadow var(--t-base), transform var(--t-base);
}
.perfil-sip-card__link:hover,
.perfil-sip-card__link:focus-visible {
box-shadow: 0 8px 30px rgba(22, 43, 62, .16);
transform: translateY(-4px);
}
.perfil-sip-card__media {
position: relative;
height: 300px;
overflow: hidden;
}
.perfil-sip-card__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.05);
transform: scale(1.03);
transition: transform .6s ease, filter .6s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__img,
.perfil-sip-card__link:focus-visible .perfil-sip-card__img {
filter: grayscale(0) contrast(1);
transform: scale(1.1);
}
.perfil-sip-card__curtain {
position: absolute; inset: 0;
background:
repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px),
linear-gradient(150deg, var(--c-navy-900) 0%, var(--c-navy) 100%);
clip-path: inset(0 0 0 0);
transition: clip-path .55s cubic-bezier(.65,0,.35,1);
}
.perfil-sip-card__link:hover .perfil-sip-card__curtain,
.perfil-sip-card__link:focus-visible .perfil-sip-card__curtain {
clip-path: inset(0 0 0 100%);
}
.perfil-sip-card__num {
position: absolute; top: 18px; left: 20px;
font-size: 13px; font-weight: var(--fw-xbold);
color: rgba(255,255,255,.55);
letter-spacing: .06em;
transition: opacity .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__num,
.perfil-sip-card__link:focus-visible .perfil-sip-card__num { opacity: 0; }
.perfil-sip-card__body {
position: relative;
background: var(--c-white);
padding: 22px 22px 26px;
}
.perfil-sip-card__accent {
display: block;
height: 3px;
width: 0%;
background: var(--c-accent);
transition: width .45s ease;
margin-bottom: 14px;
}
.perfil-sip-card__link:hover .perfil-sip-card__accent,
.perfil-sip-card__link:focus-visible .perfil-sip-card__accent { width: 100%; }
.perfil-sip-card__label {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
font-size: 15px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .02em;
color: var(--c-navy-900);
}
.perfil-sip-card__label svg {
width: 18px; height: 18px; flex-shrink: 0;
fill: none; stroke: var(--c-navy-900); stroke-width: 2;
transform: translateX(0);
transition: transform .35s ease, stroke .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__label svg,
.perfil-sip-card__link:focus-visible .perfil-sip-card__label svg {
transform: translateX(6px);
stroke: var(--c-accent);
}
.perfil-sip-card__desc {
margin-top: 8px;
font-size: 14.7px; line-height: 1.55; font-weight: var(--fw-light);
color: var(--c-gray);
}
@media (max-width: 1080px) {
.perfiles-sip__grid { grid-template-columns: 1fr; gap: 20px; }
.perfil-sip-card { transform: translateY(28px); }
.perfil-sip-card__media { height: 260px; }
}
/* ------------------------------------------------------------
TU PROYECTO — CassaSIP (pedido de Alan).
1 card "hero" a ancho completo (mitad de alto que una card de
grilla) + grilla 2x2 con las 4 restantes. Título siempre
visible sobre la foto; párrafo + CTA revelados al hover con
swipe desde la izquierda. Hover "tecla de piano" con zoom IN:
toda la card crece y el fondo de color sube al mismo tiempo
(--bg-delay: 0s); el texto arranca cuando ese swipe del fondo
va por la mitad (--text-delay: .15s, 50% de --bg-dur), para que
no se sienta "atrasado". Mismo mecanismo de contra-escala que
Familia Cassaforma para que el texto no crezca junto con la
card.
------------------------------------------------------------ */
.tuproyecto-grid {
margin-top: 46px;
list-style: none; padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
--press-scale: 1.035;
--press-dur: .3s;
--bg-dur: .3s;
--bg-delay: 0s;
--text-dur: .3s;
--text-delay: .15s; /* arranca cuando el swipe del fondo va por la mitad (50% de .3s) */
}
.tuproyecto-card--hero { grid-column: 1 / -1; }
.tuproyecto-card { opacity: 0; transform: translateY(40px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1); }
.tuproyecto-card.is-visible { opacity: 1; transform: translateY(0); }
.tuproyecto-card__link {
position: relative; display: block;
aspect-ratio: 2.1573 / 1;
background: var(--c-white); border: 1px solid var(--c-line); box-shadow: var(--card-shadow);
overflow: hidden; transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* Card hero: mismo ancho, la mitad del alto proporcional (el doble de "achatada") */
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 4.3147 / 1; }
.tuproyecto-card__link:hover, .tuproyecto-card__link:focus-visible {
transform: scale(var(--press-scale));
box-shadow: 0 14px 34px rgba(22, 43, 62, .28);
z-index: 5;
}
.tuproyecto-card__media { position: absolute; inset: 0; }
.tuproyecto-card__media img {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: grayscale(1); transition: filter .5s ease;
}
.tuproyecto-card__link:hover .tuproyecto-card__media img,
.tuproyecto-card__link:focus-visible .tuproyecto-card__media img { filter: grayscale(0); }
/* Scrim permanente para que el título siempre se lea */
.tuproyecto-card__link::after {
content: ""; position: absolute; z-index: 1; inset: 0;
background: linear-gradient(160deg, rgba(22,43,62,.55) 0%, rgba(22,43,62,.22) 45%, rgba(22,43,62,.05) 70%);
}
.tuproyecto-card__title {
position: relative; z-index: 2; display: block;
padding: 30px 0 0 34px;
font-size: 25.6px; line-height: 1.2; font-weight: var(--fw-light); color: var(--c-white);
}
/* Filete arriba en el naranja del logo CassaSIP, para resaltar cada card */
.tuproyecto-card__link::before {
content: ""; position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 2px;
background: var(--c-accent);
}
.tuproyecto-card__panel-bg {
position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__panel-bg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__panel-bg { transform: translateY(0); }
.tuproyecto-card__text {
position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 22px 34px 26px;
max-width: 560px;
color: var(--c-white); opacity: 0;
transform: translateX(-26px) scale(1); transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__text,
.tuproyecto-card__link:focus-visible .tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.tuproyecto-card__claim { display: block; font-size: 19.2px; line-height: 1.5; font-weight: var(--fw-light); color: var(--c-white); }
.tuproyecto-card__cta {
display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
font-size: 16.8px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; color: var(--c-white);
}
.tuproyecto-card__cta svg { width: 16.8px; height: 16.8px; fill: none; stroke: var(--c-white); stroke-width: 2.4; transform: translateX(0); transition: transform .3s ease; }
.tuproyecto-card__link:hover .tuproyecto-card__cta svg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__cta svg { transform: translateX(4px); }
@media (max-width: 900px) {
.tuproyecto-grid { grid-template-columns: 1fr; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 2.1573 / 1; }
}
@media (max-width: 690px) {
.tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card__title { font-size: 19.2px; padding: 20px 0 0 20px; }
.tuproyecto-card__text { padding: 16px 20px 20px; }
/* En touch no hay hover real: panel y CTA quedan siempre visibles,
igual que en Familia Cassaforma (el párrafo se oculta para que
no choque con el título en cards bajas). */
.tuproyecto-card__panel-bg { transform: translateY(0); transition: none; }
.tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
}
.tuproyecto-card__claim { display: none; }
.tuproyecto-card__cta { margin-top: 0; }
}
/* Barra "beneficios clave" — mismas medidas que .sc-ahorros de
cassaforma.com (sistema-constructivo.css, bloque GRANDES AHORROS):
3 columnas centradas, ícono circular de 71px (ya viene con su color
en el propio .svg), separador vertical negro entre columnas. */
.ahorros { padding: 70px 0 62px; text-align: center; } /* +10% arriba y abajo (antes 64px/56px), pedido de Alan */
.ahorros__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.ahorro { display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 24px; }
.ahorro + .ahorro::before {
content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
width: 2px; background: var(--c-black);
}
.ahorro__icon { display: block; width: 71px; height: 71px; margin: 0 auto 20px; }
.ahorro__label { font-size: 23px; line-height: 1.3; font-weight: var(--fw-light); color: var(--c-navy); }
@media (max-width: 690px) {
.ahorros__grid { grid-template-columns: 1fr; row-gap: 32px; }
.ahorro + .ahorro::before { display: none; }
.ahorro__label { font-size: 19px; }
}
/* Beneficios (3 pilares) */
/* Beneficios de la construcción SIP — 2 columnas: pilares apilados con
viñeta numerada + logos de certificaciones a la izquierda, imagen a la
derecha (pedido de Alan). Separación entre columnas ×2 (antes 60px).
La imagen de la derecha no aporta su alto natural al cálculo de la fila
(queda position:absolute dentro de .beneficios__media, que por eso no
tiene alto propio): así la altura de la fila la fija SOLO la columna
izquierda (pilares + logos), y la imagen se recorta arriba/abajo con
object-fit:cover para igualar siempre esa altura — salvo en mobile,
donde se desactiva (ver media query). */
.beneficios__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; align-items: stretch; }
.beneficios__left { display: flex; flex-direction: column; }
.pilares__grid { display: flex; flex-direction: column; gap: 32px; }
.pilar__head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.pilar__num {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
background: var(--c-navy); color: var(--c-white);
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: var(--fw-xbold);
}
.pilar__title { font-size: 19px; font-weight: var(--fw-xbold); color: var(--c-navy-900); text-transform: uppercase; margin: 0; }
.pilar__text { margin-top: 0; font-size: 15.5px; line-height: 1.6; }
/* Logos de certificaciones — una sola imagen ya compuesta con los 6 logos
(2 filas x 3 columnas), mismo ancho que los párrafos de arriba (pedido
de Alan: usar la imagen completa en vez de 6 No importa cuál sea tu rol en la obra: particular, constructor o distribuidor. Te acercamos la información y el soporte técnico que tu proyecto necesita. Vas a construir o ampliar tu casa y querés conocer el sistema, los tiempos y los costos. Necesitás ficha técnica, plazos de entrega y soporte para incorporar CassaSIP a tu obra. Sumá CassaSIP a tu portfolio: te contamos condiciones comerciales y logística. separadas). */
.beneficios__certs {
margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--c-line);
}
.beneficios__certs img { display: block; width: 100%; height: auto; }
.beneficios__media { position: relative; overflow: hidden; border-radius: 4px; } /* recorta el zoom del ken burns dentro de su propio cuadro (mismo criterio que .sobre-sip__media) */
.beneficios__media img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
animation: sobreSipKenBurns 18s ease-in-out infinite alternate; /* mismo ken burns que la foto de "Construcción con paneles SIP" */
}
/* ¿Por qué construir con SIP? — imagen del despiece a la izquierda, lista
de items con bullets a la derecha. Tipografía tomada de la lista de capas
de cassaforma.com (sistema-constructivo.css: .sc-panellosa__label/__item):
Heebo Light, navy, bullet "•" y divisor fino bajo cada renglón. */
.porque-sip { display: grid; grid-template-columns: minmax(300px, 460px) 1fr; gap: 60px; align-items: center; margin-top: 46px; }
.porque-sip__media img { width: 100%; display: block; }
.porque-sip__list {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto);
column-gap: 48px;
}
.porque-sip__list li {
padding: 14px 0;
border-bottom: 1px solid rgba(22, 43, 62, .15);
font-size: 19px; letter-spacing: .02em;
font-weight: var(--fw-light); color: var(--c-navy);
}
.porque-sip__list li::before { content: "\2022 "; }
@media (max-width: 1080px) {
.porque-sip { grid-template-columns: 1fr; }
.porque-sip__media { max-width: 460px; margin-inline: auto; }
}
@media (max-width: 690px) {
.porque-sip__list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
}
/* Logística — texto (Logística + Almacenamiento apilados) a la izquierda,
foto en blanco y negro con ken burns a la derecha (pedido de Alan). La
imagen no aporta su alto natural al cálculo de la fila (position:absolute
dentro de .logistica__media, sin alto propio): así la altura de la fila
la fija SOLO la columna de texto, y la foto se recorta con object-fit:cover
para igualar siempre esa altura — mismo criterio que .beneficios__media. */
.logistica__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: stretch; }
.logistica__text { display: flex; flex-direction: column; gap: 32px; }
.logistica__item h3 { font-size: 19px; font-weight: var(--fw-xbold); text-transform: uppercase; color: var(--c-navy-900); margin-bottom: 12px; }
.logistica__media { position: relative; overflow: hidden; border-radius: 4px; }
.logistica__img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
transition: filter .45s ease;
/* Es una sola foto fija (no un carrusel): un zoom-in ÚNICO de 10s que
termina y se queda ahí (forwards, sin infinite/alternate) — solo
"ida", nunca vuelve para atrás y nunca vuelve a saltar (pedido de
Alan). */
animation: destacadoKenBurns 10s ease-out forwards;
}
.logistica__media:hover .logistica__img { filter: grayscale(0); }
/* FAQ */
.faq { max-width: 880px; }
.faq__item { border-bottom: var(--border); }
.faq__item summary {
cursor: pointer; list-style: none; padding: 20px 0;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
font-size: 16.5px; font-weight: var(--fw-med); color: var(--c-navy-900);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
content: "+"; font-size: 22px; font-weight: var(--fw-light); color: var(--c-navy); flex-shrink: 0;
}
.faq__item[open] summary::after { content: "–"; }
.faq__body { padding: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: var(--c-gray); }
.faq__body ul { list-style: disc; padding-left: 20px; margin-top: 10px; }
.faq__body li { margin-bottom: 6px; }
.faq__body p + p { margin-top: 12px; }
/* Proceso constructivo — solo título + video a todo el ancho del
contenido (pedido de Alan; antes había una lista de pasos numerados). */
.proceso__video { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.proceso__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Capacitación */
.capacitacion { text-align: center; }
.capacitacion h2 { max-width: 620px; margin-inline: auto; }
.capacitacion .btn { margin-top: 30px; }
/* Presupuesto / form */
.presupuesto__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.form__field { margin-bottom: 16px; }
.form__label { display: block; font-size: 14px; font-weight: var(--fw-med); margin-bottom: 7px; }
.form__input, .form__select {
display: block; width: 100%; height: 46px; padding: 0 14px;
border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-navy-900);
font-family: var(--ff); font-size: 15px;
}
.form__input:focus, .form__select:focus { border-color: var(--c-navy); outline: none; }
.form__submit { margin-top: 6px; width: 100%; }
/* ------------------------------------------------------------
FOOTER
------------------------------------------------------------ */
.footer { background: var(--c-navy-900); color: var(--c-white); padding-block: 64px 32px; }
.footer__top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.footer__brand img { height: 40px; }
.footer__brand p { margin-top: 18px; font-size: 14px; color: rgba(255,255,255,.65); max-width: 260px; }
.footer__col h3 { font-size: 13px; font-weight: var(--fw-xbold); letter-spacing: .06em; text-transform: uppercase; color: var(--c-white); margin-bottom: 16px; }
.footer__col ul li { margin-bottom: 10px; }
.footer__col a { font-size: 14px; color: rgba(255,255,255,.75); }
.footer__col a:hover { color: var(--c-white); }
.footer__bottom {
margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15);
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
font-size: 13.5px; color: rgba(255,255,255,.6);
}
.footer__social { display: flex; gap: 14px; }
.footer__social svg { width: 16px; height: 16px; fill: rgba(255,255,255,.75); }
.footer__social a:hover svg { fill: var(--c-white); }
.footer__scrolltop { font-size: 13px; color: rgba(255,255,255,.6); }
.footer__scrolltop:hover { color: var(--c-white); }
/* ------------------------------------------------------------
RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 1169px) {
:root {
--fs-hero: 42px; --lh-hero: 46px;
--fs-hero-lead: 23px; --lh-hero-lead: 28px;
--h-hero: 660px;
}
.site-nav { gap: 15px; }
.site-nav__link { font-size: 13px; }
}
@media (max-width: 1080px) {
.site-nav { display: none; }
.destacado, .dos-columnas, .logistica__grid, .presupuesto__grid { grid-template-columns: 1fr; }
.paneles__grid { grid-template-columns: repeat(3, 1fr); }
/* En mobile se desactiva el recorte a la altura de la columna izquierda
(pedido de Alan): la imagen vuelve a su aspecto natural, en flujo. */
.beneficios__grid { grid-template-columns: 1fr; gap: 28px; align-items: normal; }
.beneficios__media img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
/* Mismo criterio que .beneficios__media: en mobile la foto de logística
vuelve a su aspecto natural, en flujo, debajo del texto. */
.logistica__grid { gap: 28px; }
.logistica__img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
.footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
:root {
--fs-hero: 34px; --lh-hero: 38px;
--fs-hero-lead: 19px; --lh-hero-lead: 26px;
--h-header: 84px; --h-hero: 560px;
}
.site-header__logo img { height: 40px; }
.hero .rule--light { width: 200px; margin: 24px 0 22px; }
}
@media (max-width: 690px) {
.site-topbar { display: none; }
:root {
--fs-hero: 27px; --lh-hero: 31px;
--fs-hero-lead: 16px; --lh-hero-lead: 24px;
--h-header: 70px; --h-hero: 520px;
}
.site-header__logo img { height: 34px; }
.hero .rule--light { width: 140px; margin: 20px 0 18px; }
.section { padding-block: 56px; }
.paneles__grid { grid-template-columns: 1fr 1fr; }
.footer__top { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------
FAMILIA CASSAFORMA — Conocé el resto de nuestras líneas
(pedido de Alan). Grilla de 5 cards (las otras líneas Cassaforma;
CassaSIP es esta misma web, no se lista a sí misma), cada una con
su color de marca en --linea-accent. Efecto "tecla de piano" v2:
TODA la card se hunde junta al pasar el mouse (borde, sombra,
logo, foto y fondo de color son todos descendientes del mismo
.familia-card__link escalado), así el degradé de color queda
siempre alineado con el borde mientras se achica. El texto es la
ÚNICA capa que NO se achica: usa un contra-escalado
(scale(calc(1 / var(--press-scale)))) que cancela el de su padre,
y entra con swipe desde la izquierda + fade-in medio segundo
después de que arranca el fondo de color. La foto NO hace zoom en
el hover (chocaba visualmente con el "hundido", pedido de Alan):
solo recupera color. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.familia-grid {
/* .section__head no trae separación propia (solo la agrega vía
".section__head + .section__grid", que esta grilla no usa) — se
fija acá a mano, mismo valor que esa regla general, para que quede
igual que en el prototipo (pedido de Alan: se había achicado). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
/* Timings del hover — un 50% más rápidos que la v1 (pedido de Alan). */
--press-scale: .965;
--press-dur: .167s;
--bg-dur: .3s;
--bg-delay: var(--press-dur);
--text-dur: .3s;
--text-delay: .5s;
}
.familia-card {
opacity: 0;
transform: translateY(40px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.familia-card.is-visible { opacity: 1; transform: translateY(0); }
.familia-card__link {
position: relative;
display: block;
height: 470px;
background: var(--c-white);
border: 1px solid var(--c-line);
box-shadow: var(--card-shadow);
overflow: hidden;
transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* "Tecla de piano": se achica y baja un poco, sombra se cierra en vez
de crecer (efecto de hundirse contra la superficie). */
.familia-card__link:hover,
.familia-card__link:focus-visible {
transform: scale(var(--press-scale)) translateY(3px);
box-shadow: 0 2px 10px rgba(22, 43, 62, .22);
}
.familia-card__logo {
position: relative;
z-index: 2;
height: 26px;
width: auto;
max-width: 74%;
margin: 26px auto 0;
object-fit: contain;
}
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 32px; margin-top: 23px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 31px; margin-top: 23px; }
.familia-card__media {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 72%;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
}
.familia-card__media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: bottom center;
filter: grayscale(1);
transition: filter .5s ease;
}
.familia-card__link[data-line="cassadeco"] .familia-card__media img { object-position: center bottom; }
/* Sin zoom en la foto: solo recupera color (pedido de Alan). */
.familia-card__link:hover .familia-card__media img,
.familia-card__link:focus-visible .familia-card__media img {
filter: grayscale(0);
}
/* Fondo de color: degradé del color de marca hacia transparente, 3/4
de la altura de la card. Hijo directo de .familia-card__link (no un
hermano aparte): se achica JUNTO con el resto de la card, así sus
márgenes quedan siempre alineados con el borde (pedido de Alan).
Entra con swipe de abajo hacia arriba apenas termina el "press". */
.familia-card__panel-bg {
position: absolute;
z-index: 2;
left: 0; right: 0; bottom: 0;
height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.familia-card__link:hover .familia-card__panel-bg,
.familia-card__link:focus-visible .familia-card__panel-bg {
transform: translateY(0);
}
/* Texto: la ÚNICA capa que NO se achica. Sigue siendo hijo de
.familia-card__link, pero en hover se le aplica un contra-escalado
(1 / var(--press-scale)) que cancela el de la card y lo deja
siempre a tamaño real (pedido de Alan). Entra con swipe desde la
izquierda + fade-in, medio segundo después de que arrancó el fondo
de color. */
.familia-card__text {
position: absolute;
z-index: 3;
left: 0; right: 0; bottom: 0;
padding: 18px 20px 20px;
color: var(--c-white);
opacity: 0;
transform: translateX(-26px) scale(1);
transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.familia-card__link:hover .familia-card__text,
.familia-card__link:focus-visible .familia-card__text {
opacity: 1;
transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.familia-card__claim {
display: block;
font-size: 14.6px; line-height: 1.45; font-weight: var(--fw-light);
color: var(--c-white);
}
.familia-card__cta {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 10px;
font-size: 13.8px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .03em;
color: var(--c-white);
}
.familia-card__cta svg {
width: 13px; height: 13px;
fill: none; stroke: var(--c-white); stroke-width: 2.4;
transform: translateX(0);
transition: transform .3s ease;
}
.familia-card__link:hover .familia-card__cta svg,
.familia-card__link:focus-visible .familia-card__cta svg {
transform: translateX(4px);
}
/* Filete de color arriba de la card: siempre visible, identifica la
marca aun antes del hover. Al ser ::before de .familia-card__link
también se hunde con toda la card (pedido de Alan). */
.familia-card__link::before {
content: "";
position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 4px;
background: var(--linea-accent, var(--c-navy-900));
}
@media (max-width: 1080px) {
.familia-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.familia-card__link { height: 420px; }
}
@media (max-width: 690px) {
.familia-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.familia-card__link { height: 340px; }
.familia-card__logo { height: 22px; margin-top: 20px; }
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 27px; margin-top: 18px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 26px; margin-top: 18px; }
/* En touch no hay hover real: el fondo de color y el CTA quedan
siempre visibles, para no depender de un tap sostenido. */
.familia-card__panel-bg { transform: translateY(0); transition: none; }
.familia-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
padding: 10px 14px 14px;
}
.familia-card__claim { display: none; }
.familia-card__cta { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; }
.hero__img, .destacado__img, .sobre-sip__img, .beneficios__media img { animation: none !important; transform: none; }
.hero__slide, .destacado__slide { transition-duration: .2s; }
.familia-card__link { transition-duration: .001ms; }
}
Contanos qué necesitás
por columna
(son hermanos en el DOM aunque visualmente queden uno al lado del
otro), así que el combinador de hermano adyacente lo tomaba también
y el 2º párrafo (columna derecha) quedaba corrido hacia abajo. Se
anula explícitamente para dejar ambas columnas alineadas por su top
(bug reportado por Alan). */
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.dos-columnas p + p { margin-top: 0; }
/* Construcción con paneles SIP — foto a la derecha (pedido de Alan). En
reposo: efecto ken burns continuo (zoom/paneo lento) y desaturada. Al
pasar el mouse: la animación se detiene, la imagen vuelve a su
posición/escala inicial (mismo mecanismo de siempre: se quita la
animation y la transition la lleva de vuelta suavemente) y recupera
el color — mismo criterio que .linea-card__media img en cassaforma.com,
invertido a pedido de Alan. */
/* padding-bottom reducido a la mitad (42px, antes 84px): acerca esta
sección a "Paneles CassaSIP" (pedido de Alan); el resto de los
paddings de .section quedan igual. */
#sobre-sip { padding-bottom: 42px; }
.sobre-sip__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: start; }
/* Párrafo "Incorporamos una nueva línea de producción..." destacado en
negrita y color naranja del logo (pedido de Alan) */
.sobre-sip__highlight { font-weight: var(--fw-xbold); color: var(--c-accent); }
.sobre-sip__media { position: relative; overflow: hidden; aspect-ratio: 4/5; }
.sobre-sip__img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
animation: sobreSipKenBurns 16s ease-in-out infinite alternate;
transition: filter .45s ease, transform .6s ease;
}
@keyframes sobreSipKenBurns {
0% { transform: scale(1) translate(0, 0); }
100% { transform: scale(1.14) translate(-2.5%, 2%); }
}
.sobre-sip__media:hover .sobre-sip__img,
.sobre-sip__media:focus-within .sobre-sip__img {
filter: grayscale(0);
animation: none;
transform: scale(1) translate(0, 0);
}
@media (max-width: 1080px) {
.sobre-sip__grid { grid-template-columns: 1fr; gap: 32px; }
.sobre-sip__media { order: -1; max-width: 460px; margin-inline: auto; aspect-ratio: 4/3; }
}
/* Tipos de panel */
.paneles__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.panel-card {
/* sin recuadro: panel, título y botón flotan directamente sobre el fondo
de la sección (pedido de Alan) */
border: none; box-shadow: none; background: transparent; display: flex; flex-direction: column;
/* entrada tipo swipe (derecha → izquierda), escalonada vía JS
(.is-visible); velocidad aumentada otra vez (antes .5s/card cada 1000ms,
ahora .35s/card cada 220ms — pedido de Alan) */
opacity: 0; transform: translateX(70px); transition: opacity .35s ease, transform .35s ease;
}
.panel-card.is-visible { opacity: 1; transform: translateX(0); }
/* Render con fondo transparente: se muestra completo (sin recortar), centrado,
con un drop-shadow muy leve para dar un efecto 3D sutil (pedido de Alan).
max-height ampliado (antes 210px) para que la imagen use todo el ancho
disponible de la card en vez de quedar acotada por la altura: efecto neto,
~120% más grande (pedido de Alan). */
.panel-card__media { min-height: 465px; padding: 10px 8px 6px; display: flex; align-items: center; justify-content: center; }
/* El render es también un link de descarga de su ficha técnica (mismo PDF
que el botón); al pasar el mouse, zoom leve sobre la imagen (pedido de
Alan). */
.panel-card__media a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.panel-card__media img {
width: 100%; max-width: 100%; height: auto; max-height: 465px; object-fit: contain;
filter: drop-shadow(0 6px 10px rgba(22, 43, 62, .16));
transition: transform .35s ease;
}
.panel-card__media a:hover img,
.panel-card__media a:focus-visible img {
transform: scale(1.06);
}
.panel-card__body { padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.panel-card__name { font-size: 15px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; }
/* Botón "Descargar ficha" — mismo "tipo" que .sc-panel__cta en
sistema-constructivo.css (cassaforma.com): .btn.btn--navy de base,
ancho completo y compacto. Usar esta combinación cada vez que se
agregue un botón de descarga de ficha en el sitio (pedido de Alan). */
.panel-card__cta { margin-top: auto; width: 100%; height: 40px; font-size: 14.7px; padding: 0 12px; }
/* Adaptables a cada proyecto — texto en 2 columnas: cartera de proyectos a la
izquierda, y el párrafo de la tecnología OSB destacado en un recuadro con
fondo blanco y en negrita, a la derecha (pedido de Alan). */
.adaptables__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.adaptables__highlight {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-med); /* antes fw-xbold: menos peso (pedido de Alan) */
padding: 22px 26px; border-radius: 4px; box-shadow: var(--card-shadow);
}
/* Adaptables a cada proyecto — foto + tabla de resistencias (pedido de Alan).
margin-top +20% (antes 46px) para separar más el render del texto de
arriba. */
.adaptables__grid { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: center; margin-top: 55px; }
/* Render con fondo transparente: se muestra completo, sin recortar ni caja
fija, con un drop-shadow muy leve (mismo criterio que .panel-card__media).
Se desplaza hacia la izquierda hasta sobresalir un 10% del ancho de
contenido (pedido de Alan): crece hacia la izquierda, ancla derecha
sin cambios (mismo criterio que .panel-corte__sandwich). */
.adaptables__media {
display: flex; align-items: center; justify-content: center;
margin-left: calc(-1 * var(--w-content) * 0.10);
width: calc(100% + var(--w-content) * 0.10);
}
.adaptables__media img {
width: 100%; height: auto; max-width: 100%;
filter: drop-shadow(0 8px 14px rgba(22, 43, 62, .16));
}
/* Tabla de especificaciones: misma paleta navy/blanco y tipografía Heebo
del resto del sitio. Columna izquierda (propiedad) en navy —el mismo azul
del botón "Descargar ficha"— con texto blanco, columna derecha (valor)
alterna blanco/gris banda. Ninguna fuente en negrita (pedido de Alan). Al
pasar el mouse por una fila, se resalta en navy oscuro (izquierda) y en la
banda gris (derecha) para que se lea qué fila se está mirando. */
.specs-table-wrap { border: var(--border); border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table th, .specs-table td { padding: 15px 18px; font-size: 14.5px; line-height: 1.3; transition: background-color .2s ease, color .2s ease; }
.specs-table th {
background: var(--c-navy); color: var(--c-white);
font-weight: var(--fw-reg); text-align: left; width: 60%;
}
.specs-table td {
background: var(--c-white); color: var(--c-navy-900);
font-weight: var(--fw-light); text-align: center;
}
.specs-table tr:nth-child(even) td { background: var(--c-band); }
.specs-table tr:not(:last-child) th,
.specs-table tr:not(:last-child) td { border-bottom: 1px solid rgba(255,255,255,.08); }
.specs-table tr:hover th { background: var(--c-navy-900); }
.specs-table tr:hover td { background: var(--c-band); color: var(--c-navy); }
/* Especificaciones técnicas (debajo de "Tipos de panel") — mismo criterio
de diseño que la tabla de Adaptables: acento navy, sin negritas. Tres
grupos (Paneles / Placas / Accesorios) con una etiqueta lateral vertical,
cada uno con sus sub-tablas de medidas (pedido de Alan, ref. cassasip.com). */
.spec-groups { display: flex; flex-direction: column; gap: 34px; margin-top: 92px; } /* separación de los productos ×2 (antes 46px), pedido de Alan */
.spec-group { display: flex; align-items: stretch; gap: 22px; }
.spec-group__label {
flex-shrink: 0; width: 46px; border-radius: 4px;
background: var(--c-accent); color: var(--c-white); /* naranja del logo CassaSIP + texto blanco (pedido de Alan) */
display: flex; align-items: center; justify-content: center;
writing-mode: vertical-rl; transform: rotate(180deg);
font-size: 15.6px; /* 13px +20% (pedido de Alan) */
font-weight: var(--fw-reg); text-transform: uppercase; letter-spacing: .1em;
}
.spec-group__tables { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.spec-block__title { font-size: 14.5px; font-weight: var(--fw-reg); color: var(--c-navy-900); margin-bottom: 10px; }
.spec-block__title .spec-block__note { font-weight: var(--fw-light); color: var(--c-navy); font-size: 13px; }
.spec-block .specs-table-wrap { overflow-x: auto; }
.specs-table--grid { min-width: 560px; }
.specs-table--grid th, .specs-table--grid td { padding: 12px 14px; font-size: 13.5px; white-space: nowrap; }
.specs-table--grid thead th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: center;
}
.specs-table--grid thead th:first-child { background: var(--c-navy-900); }
.specs-table--grid tbody th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: left; width: auto;
}
.specs-table--grid tbody td {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-light); text-align: center;
}
.specs-table--grid tbody tr:nth-child(even) td { background: var(--c-band); }
.specs-table--grid tbody tr:hover th { background: var(--c-navy-900); }
.specs-table--grid tbody tr:hover td { background: var(--c-band); color: var(--c-navy); }
@media (max-width: 690px) {
.spec-group { flex-direction: column; gap: 10px; }
.spec-group__label {
width: 100%; writing-mode: horizontal-tb; transform: none; padding: 8px; height: auto;
}
}
@media (max-width: 1080px) {
.adaptables__intro { grid-template-columns: 1fr; gap: 20px; }
.adaptables__grid { grid-template-columns: 1fr; gap: 28px; }
/* en una sola columna el desborde a la izquierda no tiene sentido
(no queda margen de página del que sobresalir): se desactiva */
.adaptables__media { margin-left: 0; width: 100%; max-width: 460px; margin-inline: auto; }
.specs-table-wrap { max-width: 460px; margin-inline: auto; width: 100%; }
}
/* ------------------------------------------------------------
PERFILES — Contanos qué necesitás (pedido de Ceci vía Alan).
3 cards con foto en blanco y negro tapada por una "cortina" navy con
textura diagonal sutil; al hacer hover la cortina se corre hacia la
derecha con clip-path (no se desvanece, se desliza), la foto recupera
color + zoom leve, aparece una línea de acento naranja creciendo bajo
el título y la flecha se desplaza. Entrada: swipe hacia arriba
escalonado al entrar en viewport (ver "Perfiles CassaSIP" en
js/script.js), misma familia de efecto que .panel-card pero vertical
en vez de lateral, para variar. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.perfiles-sip__grid {
/* mismo ajuste que .familia-grid: .section__head no trae separación
propia acá (pedido de Alan: se había achicado respecto al prototipo). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.perfil-sip-card {
opacity: 0;
transform: translateY(46px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.perfil-sip-card.is-visible { opacity: 1; transform: translateY(0); }
.perfil-sip-card__link {
position: relative;
display: block;
border: var(--border);
box-shadow: var(--card-shadow);
transition: box-shadow var(--t-base), transform var(--t-base);
}
.perfil-sip-card__link:hover,
.perfil-sip-card__link:focus-visible {
box-shadow: 0 8px 30px rgba(22, 43, 62, .16);
transform: translateY(-4px);
}
.perfil-sip-card__media {
position: relative;
height: 300px;
overflow: hidden;
}
.perfil-sip-card__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.05);
transform: scale(1.03);
transition: transform .6s ease, filter .6s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__img,
.perfil-sip-card__link:focus-visible .perfil-sip-card__img {
filter: grayscale(0) contrast(1);
transform: scale(1.1);
}
.perfil-sip-card__curtain {
position: absolute; inset: 0;
background:
repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px),
linear-gradient(150deg, var(--c-navy-900) 0%, var(--c-navy) 100%);
clip-path: inset(0 0 0 0);
transition: clip-path .55s cubic-bezier(.65,0,.35,1);
}
.perfil-sip-card__link:hover .perfil-sip-card__curtain,
.perfil-sip-card__link:focus-visible .perfil-sip-card__curtain {
clip-path: inset(0 0 0 100%);
}
.perfil-sip-card__num {
position: absolute; top: 18px; left: 20px;
font-size: 13px; font-weight: var(--fw-xbold);
color: rgba(255,255,255,.55);
letter-spacing: .06em;
transition: opacity .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__num,
.perfil-sip-card__link:focus-visible .perfil-sip-card__num { opacity: 0; }
.perfil-sip-card__body {
position: relative;
background: var(--c-white);
padding: 22px 22px 26px;
}
.perfil-sip-card__accent {
display: block;
height: 3px;
width: 0%;
background: var(--c-accent);
transition: width .45s ease;
margin-bottom: 14px;
}
.perfil-sip-card__link:hover .perfil-sip-card__accent,
.perfil-sip-card__link:focus-visible .perfil-sip-card__accent { width: 100%; }
.perfil-sip-card__label {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
font-size: 15px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .02em;
color: var(--c-navy-900);
}
.perfil-sip-card__label svg {
width: 18px; height: 18px; flex-shrink: 0;
fill: none; stroke: var(--c-navy-900); stroke-width: 2;
transform: translateX(0);
transition: transform .35s ease, stroke .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__label svg,
.perfil-sip-card__link:focus-visible .perfil-sip-card__label svg {
transform: translateX(6px);
stroke: var(--c-accent);
}
.perfil-sip-card__desc {
margin-top: 8px;
font-size: 14.7px; line-height: 1.55; font-weight: var(--fw-light);
color: var(--c-gray);
}
@media (max-width: 1080px) {
.perfiles-sip__grid { grid-template-columns: 1fr; gap: 20px; }
.perfil-sip-card { transform: translateY(28px); }
.perfil-sip-card__media { height: 260px; }
}
/* ------------------------------------------------------------
TU PROYECTO — CassaSIP (pedido de Alan).
1 card "hero" a ancho completo (mitad de alto que una card de
grilla) + grilla 2x2 con las 4 restantes. Título siempre
visible sobre la foto; párrafo + CTA revelados al hover con
swipe desde la izquierda. Hover "tecla de piano" con zoom IN:
toda la card crece y el fondo de color sube al mismo tiempo
(--bg-delay: 0s); el texto arranca cuando ese swipe del fondo
va por la mitad (--text-delay: .15s, 50% de --bg-dur), para que
no se sienta "atrasado". Mismo mecanismo de contra-escala que
Familia Cassaforma para que el texto no crezca junto con la
card.
------------------------------------------------------------ */
.tuproyecto-grid {
margin-top: 46px;
list-style: none; padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
--press-scale: 1.035;
--press-dur: .3s;
--bg-dur: .3s;
--bg-delay: 0s;
--text-dur: .3s;
--text-delay: .15s; /* arranca cuando el swipe del fondo va por la mitad (50% de .3s) */
}
.tuproyecto-card--hero { grid-column: 1 / -1; }
.tuproyecto-card { opacity: 0; transform: translateY(40px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1); }
.tuproyecto-card.is-visible { opacity: 1; transform: translateY(0); }
.tuproyecto-card__link {
position: relative; display: block;
aspect-ratio: 2.1573 / 1;
background: var(--c-white); border: 1px solid var(--c-line); box-shadow: var(--card-shadow);
overflow: hidden; transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* Card hero: mismo ancho, la mitad del alto proporcional (el doble de "achatada") */
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 4.3147 / 1; }
.tuproyecto-card__link:hover, .tuproyecto-card__link:focus-visible {
transform: scale(var(--press-scale));
box-shadow: 0 14px 34px rgba(22, 43, 62, .28);
z-index: 5;
}
.tuproyecto-card__media { position: absolute; inset: 0; }
.tuproyecto-card__media img {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: grayscale(1); transition: filter .5s ease;
}
.tuproyecto-card__link:hover .tuproyecto-card__media img,
.tuproyecto-card__link:focus-visible .tuproyecto-card__media img { filter: grayscale(0); }
/* Scrim permanente para que el título siempre se lea */
.tuproyecto-card__link::after {
content: ""; position: absolute; z-index: 1; inset: 0;
background: linear-gradient(160deg, rgba(22,43,62,.55) 0%, rgba(22,43,62,.22) 45%, rgba(22,43,62,.05) 70%);
}
.tuproyecto-card__title {
position: relative; z-index: 2; display: block;
padding: 30px 0 0 34px;
font-size: 25.6px; line-height: 1.2; font-weight: var(--fw-light); color: var(--c-white);
}
/* Filete arriba en el naranja del logo CassaSIP, para resaltar cada card */
.tuproyecto-card__link::before {
content: ""; position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 2px;
background: var(--c-accent);
}
.tuproyecto-card__panel-bg {
position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__panel-bg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__panel-bg { transform: translateY(0); }
.tuproyecto-card__text {
position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 22px 34px 26px;
max-width: 560px;
color: var(--c-white); opacity: 0;
transform: translateX(-26px) scale(1); transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__text,
.tuproyecto-card__link:focus-visible .tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.tuproyecto-card__claim { display: block; font-size: 19.2px; line-height: 1.5; font-weight: var(--fw-light); color: var(--c-white); }
.tuproyecto-card__cta {
display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
font-size: 16.8px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; color: var(--c-white);
}
.tuproyecto-card__cta svg { width: 16.8px; height: 16.8px; fill: none; stroke: var(--c-white); stroke-width: 2.4; transform: translateX(0); transition: transform .3s ease; }
.tuproyecto-card__link:hover .tuproyecto-card__cta svg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__cta svg { transform: translateX(4px); }
@media (max-width: 900px) {
.tuproyecto-grid { grid-template-columns: 1fr; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 2.1573 / 1; }
}
@media (max-width: 690px) {
.tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card__title { font-size: 19.2px; padding: 20px 0 0 20px; }
.tuproyecto-card__text { padding: 16px 20px 20px; }
/* En touch no hay hover real: panel y CTA quedan siempre visibles,
igual que en Familia Cassaforma (el párrafo se oculta para que
no choque con el título en cards bajas). */
.tuproyecto-card__panel-bg { transform: translateY(0); transition: none; }
.tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
}
.tuproyecto-card__claim { display: none; }
.tuproyecto-card__cta { margin-top: 0; }
}
/* Barra "beneficios clave" — mismas medidas que .sc-ahorros de
cassaforma.com (sistema-constructivo.css, bloque GRANDES AHORROS):
3 columnas centradas, ícono circular de 71px (ya viene con su color
en el propio .svg), separador vertical negro entre columnas. */
.ahorros { padding: 70px 0 62px; text-align: center; } /* +10% arriba y abajo (antes 64px/56px), pedido de Alan */
.ahorros__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.ahorro { display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 24px; }
.ahorro + .ahorro::before {
content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
width: 2px; background: var(--c-black);
}
.ahorro__icon { display: block; width: 71px; height: 71px; margin: 0 auto 20px; }
.ahorro__label { font-size: 23px; line-height: 1.3; font-weight: var(--fw-light); color: var(--c-navy); }
@media (max-width: 690px) {
.ahorros__grid { grid-template-columns: 1fr; row-gap: 32px; }
.ahorro + .ahorro::before { display: none; }
.ahorro__label { font-size: 19px; }
}
/* Beneficios (3 pilares) */
/* Beneficios de la construcción SIP — 2 columnas: pilares apilados con
viñeta numerada + logos de certificaciones a la izquierda, imagen a la
derecha (pedido de Alan). Separación entre columnas ×2 (antes 60px).
La imagen de la derecha no aporta su alto natural al cálculo de la fila
(queda position:absolute dentro de .beneficios__media, que por eso no
tiene alto propio): así la altura de la fila la fija SOLO la columna
izquierda (pilares + logos), y la imagen se recorta arriba/abajo con
object-fit:cover para igualar siempre esa altura — salvo en mobile,
donde se desactiva (ver media query). */
.beneficios__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; align-items: stretch; }
.beneficios__left { display: flex; flex-direction: column; }
.pilares__grid { display: flex; flex-direction: column; gap: 32px; }
.pilar__head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.pilar__num {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
background: var(--c-navy); color: var(--c-white);
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: var(--fw-xbold);
}
.pilar__title { font-size: 19px; font-weight: var(--fw-xbold); color: var(--c-navy-900); text-transform: uppercase; margin: 0; }
.pilar__text { margin-top: 0; font-size: 15.5px; line-height: 1.6; }
/* Logos de certificaciones — una sola imagen ya compuesta con los 6 logos
(2 filas x 3 columnas), mismo ancho que los párrafos de arriba (pedido
de Alan: usar la imagen completa en vez de 6 Cada obra presenta desafíos únicos. Por eso CassaSIP se adapta a distintos escenarios: construcciones nuevas, ampliaciones, proyectos en altura, autoconstrucción o soluciones modulares. separadas). */
.beneficios__certs {
margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--c-line);
}
.beneficios__certs img { display: block; width: 100%; height: auto; }
.beneficios__media { position: relative; overflow: hidden; border-radius: 4px; } /* recorta el zoom del ken burns dentro de su propio cuadro (mismo criterio que .sobre-sip__media) */
.beneficios__media img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
animation: sobreSipKenBurns 18s ease-in-out infinite alternate; /* mismo ken burns que la foto de "Construcción con paneles SIP" */
}
/* ¿Por qué construir con SIP? — imagen del despiece a la izquierda, lista
de items con bullets a la derecha. Tipografía tomada de la lista de capas
de cassaforma.com (sistema-constructivo.css: .sc-panellosa__label/__item):
Heebo Light, navy, bullet "•" y divisor fino bajo cada renglón. */
.porque-sip { display: grid; grid-template-columns: minmax(300px, 460px) 1fr; gap: 60px; align-items: center; margin-top: 46px; }
.porque-sip__media img { width: 100%; display: block; }
.porque-sip__list {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto);
column-gap: 48px;
}
.porque-sip__list li {
padding: 14px 0;
border-bottom: 1px solid rgba(22, 43, 62, .15);
font-size: 19px; letter-spacing: .02em;
font-weight: var(--fw-light); color: var(--c-navy);
}
.porque-sip__list li::before { content: "\2022 "; }
@media (max-width: 1080px) {
.porque-sip { grid-template-columns: 1fr; }
.porque-sip__media { max-width: 460px; margin-inline: auto; }
}
@media (max-width: 690px) {
.porque-sip__list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
}
/* Logística — texto (Logística + Almacenamiento apilados) a la izquierda,
foto en blanco y negro con ken burns a la derecha (pedido de Alan). La
imagen no aporta su alto natural al cálculo de la fila (position:absolute
dentro de .logistica__media, sin alto propio): así la altura de la fila
la fija SOLO la columna de texto, y la foto se recorta con object-fit:cover
para igualar siempre esa altura — mismo criterio que .beneficios__media. */
.logistica__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: stretch; }
.logistica__text { display: flex; flex-direction: column; gap: 32px; }
.logistica__item h3 { font-size: 19px; font-weight: var(--fw-xbold); text-transform: uppercase; color: var(--c-navy-900); margin-bottom: 12px; }
.logistica__media { position: relative; overflow: hidden; border-radius: 4px; }
.logistica__img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
transition: filter .45s ease;
/* Es una sola foto fija (no un carrusel): un zoom-in ÚNICO de 10s que
termina y se queda ahí (forwards, sin infinite/alternate) — solo
"ida", nunca vuelve para atrás y nunca vuelve a saltar (pedido de
Alan). */
animation: destacadoKenBurns 10s ease-out forwards;
}
.logistica__media:hover .logistica__img { filter: grayscale(0); }
/* FAQ */
.faq { max-width: 880px; }
.faq__item { border-bottom: var(--border); }
.faq__item summary {
cursor: pointer; list-style: none; padding: 20px 0;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
font-size: 16.5px; font-weight: var(--fw-med); color: var(--c-navy-900);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
content: "+"; font-size: 22px; font-weight: var(--fw-light); color: var(--c-navy); flex-shrink: 0;
}
.faq__item[open] summary::after { content: "–"; }
.faq__body { padding: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: var(--c-gray); }
.faq__body ul { list-style: disc; padding-left: 20px; margin-top: 10px; }
.faq__body li { margin-bottom: 6px; }
.faq__body p + p { margin-top: 12px; }
/* Proceso constructivo — solo título + video a todo el ancho del
contenido (pedido de Alan; antes había una lista de pasos numerados). */
.proceso__video { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.proceso__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Capacitación */
.capacitacion { text-align: center; }
.capacitacion h2 { max-width: 620px; margin-inline: auto; }
.capacitacion .btn { margin-top: 30px; }
/* Presupuesto / form */
.presupuesto__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.form__field { margin-bottom: 16px; }
.form__label { display: block; font-size: 14px; font-weight: var(--fw-med); margin-bottom: 7px; }
.form__input, .form__select {
display: block; width: 100%; height: 46px; padding: 0 14px;
border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-navy-900);
font-family: var(--ff); font-size: 15px;
}
.form__input:focus, .form__select:focus { border-color: var(--c-navy); outline: none; }
.form__submit { margin-top: 6px; width: 100%; }
/* ------------------------------------------------------------
FOOTER
------------------------------------------------------------ */
.footer { background: var(--c-navy-900); color: var(--c-white); padding-block: 64px 32px; }
.footer__top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.footer__brand img { height: 40px; }
.footer__brand p { margin-top: 18px; font-size: 14px; color: rgba(255,255,255,.65); max-width: 260px; }
.footer__col h3 { font-size: 13px; font-weight: var(--fw-xbold); letter-spacing: .06em; text-transform: uppercase; color: var(--c-white); margin-bottom: 16px; }
.footer__col ul li { margin-bottom: 10px; }
.footer__col a { font-size: 14px; color: rgba(255,255,255,.75); }
.footer__col a:hover { color: var(--c-white); }
.footer__bottom {
margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15);
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
font-size: 13.5px; color: rgba(255,255,255,.6);
}
.footer__social { display: flex; gap: 14px; }
.footer__social svg { width: 16px; height: 16px; fill: rgba(255,255,255,.75); }
.footer__social a:hover svg { fill: var(--c-white); }
.footer__scrolltop { font-size: 13px; color: rgba(255,255,255,.6); }
.footer__scrolltop:hover { color: var(--c-white); }
/* ------------------------------------------------------------
RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 1169px) {
:root {
--fs-hero: 42px; --lh-hero: 46px;
--fs-hero-lead: 23px; --lh-hero-lead: 28px;
--h-hero: 660px;
}
.site-nav { gap: 15px; }
.site-nav__link { font-size: 13px; }
}
@media (max-width: 1080px) {
.site-nav { display: none; }
.destacado, .dos-columnas, .logistica__grid, .presupuesto__grid { grid-template-columns: 1fr; }
.paneles__grid { grid-template-columns: repeat(3, 1fr); }
/* En mobile se desactiva el recorte a la altura de la columna izquierda
(pedido de Alan): la imagen vuelve a su aspecto natural, en flujo. */
.beneficios__grid { grid-template-columns: 1fr; gap: 28px; align-items: normal; }
.beneficios__media img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
/* Mismo criterio que .beneficios__media: en mobile la foto de logística
vuelve a su aspecto natural, en flujo, debajo del texto. */
.logistica__grid { gap: 28px; }
.logistica__img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
.footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
:root {
--fs-hero: 34px; --lh-hero: 38px;
--fs-hero-lead: 19px; --lh-hero-lead: 26px;
--h-header: 84px; --h-hero: 560px;
}
.site-header__logo img { height: 40px; }
.hero .rule--light { width: 200px; margin: 24px 0 22px; }
}
@media (max-width: 690px) {
.site-topbar { display: none; }
:root {
--fs-hero: 27px; --lh-hero: 31px;
--fs-hero-lead: 16px; --lh-hero-lead: 24px;
--h-header: 70px; --h-hero: 520px;
}
.site-header__logo img { height: 34px; }
.hero .rule--light { width: 140px; margin: 20px 0 18px; }
.section { padding-block: 56px; }
.paneles__grid { grid-template-columns: 1fr 1fr; }
.footer__top { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------
FAMILIA CASSAFORMA — Conocé el resto de nuestras líneas
(pedido de Alan). Grilla de 5 cards (las otras líneas Cassaforma;
CassaSIP es esta misma web, no se lista a sí misma), cada una con
su color de marca en --linea-accent. Efecto "tecla de piano" v2:
TODA la card se hunde junta al pasar el mouse (borde, sombra,
logo, foto y fondo de color son todos descendientes del mismo
.familia-card__link escalado), así el degradé de color queda
siempre alineado con el borde mientras se achica. El texto es la
ÚNICA capa que NO se achica: usa un contra-escalado
(scale(calc(1 / var(--press-scale)))) que cancela el de su padre,
y entra con swipe desde la izquierda + fade-in medio segundo
después de que arranca el fondo de color. La foto NO hace zoom en
el hover (chocaba visualmente con el "hundido", pedido de Alan):
solo recupera color. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.familia-grid {
/* .section__head no trae separación propia (solo la agrega vía
".section__head + .section__grid", que esta grilla no usa) — se
fija acá a mano, mismo valor que esa regla general, para que quede
igual que en el prototipo (pedido de Alan: se había achicado). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
/* Timings del hover — un 50% más rápidos que la v1 (pedido de Alan). */
--press-scale: .965;
--press-dur: .167s;
--bg-dur: .3s;
--bg-delay: var(--press-dur);
--text-dur: .3s;
--text-delay: .5s;
}
.familia-card {
opacity: 0;
transform: translateY(40px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.familia-card.is-visible { opacity: 1; transform: translateY(0); }
.familia-card__link {
position: relative;
display: block;
height: 470px;
background: var(--c-white);
border: 1px solid var(--c-line);
box-shadow: var(--card-shadow);
overflow: hidden;
transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* "Tecla de piano": se achica y baja un poco, sombra se cierra en vez
de crecer (efecto de hundirse contra la superficie). */
.familia-card__link:hover,
.familia-card__link:focus-visible {
transform: scale(var(--press-scale)) translateY(3px);
box-shadow: 0 2px 10px rgba(22, 43, 62, .22);
}
.familia-card__logo {
position: relative;
z-index: 2;
height: 26px;
width: auto;
max-width: 74%;
margin: 26px auto 0;
object-fit: contain;
}
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 32px; margin-top: 23px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 31px; margin-top: 23px; }
.familia-card__media {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 72%;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
}
.familia-card__media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: bottom center;
filter: grayscale(1);
transition: filter .5s ease;
}
.familia-card__link[data-line="cassadeco"] .familia-card__media img { object-position: center bottom; }
/* Sin zoom en la foto: solo recupera color (pedido de Alan). */
.familia-card__link:hover .familia-card__media img,
.familia-card__link:focus-visible .familia-card__media img {
filter: grayscale(0);
}
/* Fondo de color: degradé del color de marca hacia transparente, 3/4
de la altura de la card. Hijo directo de .familia-card__link (no un
hermano aparte): se achica JUNTO con el resto de la card, así sus
márgenes quedan siempre alineados con el borde (pedido de Alan).
Entra con swipe de abajo hacia arriba apenas termina el "press". */
.familia-card__panel-bg {
position: absolute;
z-index: 2;
left: 0; right: 0; bottom: 0;
height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.familia-card__link:hover .familia-card__panel-bg,
.familia-card__link:focus-visible .familia-card__panel-bg {
transform: translateY(0);
}
/* Texto: la ÚNICA capa que NO se achica. Sigue siendo hijo de
.familia-card__link, pero en hover se le aplica un contra-escalado
(1 / var(--press-scale)) que cancela el de la card y lo deja
siempre a tamaño real (pedido de Alan). Entra con swipe desde la
izquierda + fade-in, medio segundo después de que arrancó el fondo
de color. */
.familia-card__text {
position: absolute;
z-index: 3;
left: 0; right: 0; bottom: 0;
padding: 18px 20px 20px;
color: var(--c-white);
opacity: 0;
transform: translateX(-26px) scale(1);
transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.familia-card__link:hover .familia-card__text,
.familia-card__link:focus-visible .familia-card__text {
opacity: 1;
transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.familia-card__claim {
display: block;
font-size: 14.6px; line-height: 1.45; font-weight: var(--fw-light);
color: var(--c-white);
}
.familia-card__cta {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 10px;
font-size: 13.8px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .03em;
color: var(--c-white);
}
.familia-card__cta svg {
width: 13px; height: 13px;
fill: none; stroke: var(--c-white); stroke-width: 2.4;
transform: translateX(0);
transition: transform .3s ease;
}
.familia-card__link:hover .familia-card__cta svg,
.familia-card__link:focus-visible .familia-card__cta svg {
transform: translateX(4px);
}
/* Filete de color arriba de la card: siempre visible, identifica la
marca aun antes del hover. Al ser ::before de .familia-card__link
también se hunde con toda la card (pedido de Alan). */
.familia-card__link::before {
content: "";
position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 4px;
background: var(--linea-accent, var(--c-navy-900));
}
@media (max-width: 1080px) {
.familia-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.familia-card__link { height: 420px; }
}
@media (max-width: 690px) {
.familia-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.familia-card__link { height: 340px; }
.familia-card__logo { height: 22px; margin-top: 20px; }
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 27px; margin-top: 18px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 26px; margin-top: 18px; }
/* En touch no hay hover real: el fondo de color y el CTA quedan
siempre visibles, para no depender de un tap sostenido. */
.familia-card__panel-bg { transform: translateY(0); transition: none; }
.familia-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
padding: 10px 14px 14px;
}
.familia-card__claim { display: none; }
.familia-card__cta { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; }
.hero__img, .destacado__img, .sobre-sip__img, .beneficios__media img { animation: none !important; transform: none; }
.hero__slide, .destacado__slide { transition-duration: .2s; }
.familia-card__link { transition-duration: .001ms; }
}
Para cada etapa, una solución a tu medida
desde cero
Viviendas completas en paneles CassaSIP, con menores tiempos de obra y aislación térmica superior desde los cimientos.
Conocé más
por columna
(son hermanos en el DOM aunque visualmente queden uno al lado del
otro), así que el combinador de hermano adyacente lo tomaba también
y el 2º párrafo (columna derecha) quedaba corrido hacia abajo. Se
anula explícitamente para dejar ambas columnas alineadas por su top
(bug reportado por Alan). */
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.dos-columnas p + p { margin-top: 0; }
/* Construcción con paneles SIP — foto a la derecha (pedido de Alan). En
reposo: efecto ken burns continuo (zoom/paneo lento) y desaturada. Al
pasar el mouse: la animación se detiene, la imagen vuelve a su
posición/escala inicial (mismo mecanismo de siempre: se quita la
animation y la transition la lleva de vuelta suavemente) y recupera
el color — mismo criterio que .linea-card__media img en cassaforma.com,
invertido a pedido de Alan. */
/* padding-bottom reducido a la mitad (42px, antes 84px): acerca esta
sección a "Paneles CassaSIP" (pedido de Alan); el resto de los
paddings de .section quedan igual. */
#sobre-sip { padding-bottom: 42px; }
.sobre-sip__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: start; }
/* Párrafo "Incorporamos una nueva línea de producción..." destacado en
negrita y color naranja del logo (pedido de Alan) */
.sobre-sip__highlight { font-weight: var(--fw-xbold); color: var(--c-accent); }
.sobre-sip__media { position: relative; overflow: hidden; aspect-ratio: 4/5; }
.sobre-sip__img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
animation: sobreSipKenBurns 16s ease-in-out infinite alternate;
transition: filter .45s ease, transform .6s ease;
}
@keyframes sobreSipKenBurns {
0% { transform: scale(1) translate(0, 0); }
100% { transform: scale(1.14) translate(-2.5%, 2%); }
}
.sobre-sip__media:hover .sobre-sip__img,
.sobre-sip__media:focus-within .sobre-sip__img {
filter: grayscale(0);
animation: none;
transform: scale(1) translate(0, 0);
}
@media (max-width: 1080px) {
.sobre-sip__grid { grid-template-columns: 1fr; gap: 32px; }
.sobre-sip__media { order: -1; max-width: 460px; margin-inline: auto; aspect-ratio: 4/3; }
}
/* Tipos de panel */
.paneles__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.panel-card {
/* sin recuadro: panel, título y botón flotan directamente sobre el fondo
de la sección (pedido de Alan) */
border: none; box-shadow: none; background: transparent; display: flex; flex-direction: column;
/* entrada tipo swipe (derecha → izquierda), escalonada vía JS
(.is-visible); velocidad aumentada otra vez (antes .5s/card cada 1000ms,
ahora .35s/card cada 220ms — pedido de Alan) */
opacity: 0; transform: translateX(70px); transition: opacity .35s ease, transform .35s ease;
}
.panel-card.is-visible { opacity: 1; transform: translateX(0); }
/* Render con fondo transparente: se muestra completo (sin recortar), centrado,
con un drop-shadow muy leve para dar un efecto 3D sutil (pedido de Alan).
max-height ampliado (antes 210px) para que la imagen use todo el ancho
disponible de la card en vez de quedar acotada por la altura: efecto neto,
~120% más grande (pedido de Alan). */
.panel-card__media { min-height: 465px; padding: 10px 8px 6px; display: flex; align-items: center; justify-content: center; }
/* El render es también un link de descarga de su ficha técnica (mismo PDF
que el botón); al pasar el mouse, zoom leve sobre la imagen (pedido de
Alan). */
.panel-card__media a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.panel-card__media img {
width: 100%; max-width: 100%; height: auto; max-height: 465px; object-fit: contain;
filter: drop-shadow(0 6px 10px rgba(22, 43, 62, .16));
transition: transform .35s ease;
}
.panel-card__media a:hover img,
.panel-card__media a:focus-visible img {
transform: scale(1.06);
}
.panel-card__body { padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.panel-card__name { font-size: 15px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; }
/* Botón "Descargar ficha" — mismo "tipo" que .sc-panel__cta en
sistema-constructivo.css (cassaforma.com): .btn.btn--navy de base,
ancho completo y compacto. Usar esta combinación cada vez que se
agregue un botón de descarga de ficha en el sitio (pedido de Alan). */
.panel-card__cta { margin-top: auto; width: 100%; height: 40px; font-size: 14.7px; padding: 0 12px; }
/* Adaptables a cada proyecto — texto en 2 columnas: cartera de proyectos a la
izquierda, y el párrafo de la tecnología OSB destacado en un recuadro con
fondo blanco y en negrita, a la derecha (pedido de Alan). */
.adaptables__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.adaptables__highlight {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-med); /* antes fw-xbold: menos peso (pedido de Alan) */
padding: 22px 26px; border-radius: 4px; box-shadow: var(--card-shadow);
}
/* Adaptables a cada proyecto — foto + tabla de resistencias (pedido de Alan).
margin-top +20% (antes 46px) para separar más el render del texto de
arriba. */
.adaptables__grid { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: center; margin-top: 55px; }
/* Render con fondo transparente: se muestra completo, sin recortar ni caja
fija, con un drop-shadow muy leve (mismo criterio que .panel-card__media).
Se desplaza hacia la izquierda hasta sobresalir un 10% del ancho de
contenido (pedido de Alan): crece hacia la izquierda, ancla derecha
sin cambios (mismo criterio que .panel-corte__sandwich). */
.adaptables__media {
display: flex; align-items: center; justify-content: center;
margin-left: calc(-1 * var(--w-content) * 0.10);
width: calc(100% + var(--w-content) * 0.10);
}
.adaptables__media img {
width: 100%; height: auto; max-width: 100%;
filter: drop-shadow(0 8px 14px rgba(22, 43, 62, .16));
}
/* Tabla de especificaciones: misma paleta navy/blanco y tipografía Heebo
del resto del sitio. Columna izquierda (propiedad) en navy —el mismo azul
del botón "Descargar ficha"— con texto blanco, columna derecha (valor)
alterna blanco/gris banda. Ninguna fuente en negrita (pedido de Alan). Al
pasar el mouse por una fila, se resalta en navy oscuro (izquierda) y en la
banda gris (derecha) para que se lea qué fila se está mirando. */
.specs-table-wrap { border: var(--border); border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table th, .specs-table td { padding: 15px 18px; font-size: 14.5px; line-height: 1.3; transition: background-color .2s ease, color .2s ease; }
.specs-table th {
background: var(--c-navy); color: var(--c-white);
font-weight: var(--fw-reg); text-align: left; width: 60%;
}
.specs-table td {
background: var(--c-white); color: var(--c-navy-900);
font-weight: var(--fw-light); text-align: center;
}
.specs-table tr:nth-child(even) td { background: var(--c-band); }
.specs-table tr:not(:last-child) th,
.specs-table tr:not(:last-child) td { border-bottom: 1px solid rgba(255,255,255,.08); }
.specs-table tr:hover th { background: var(--c-navy-900); }
.specs-table tr:hover td { background: var(--c-band); color: var(--c-navy); }
/* Especificaciones técnicas (debajo de "Tipos de panel") — mismo criterio
de diseño que la tabla de Adaptables: acento navy, sin negritas. Tres
grupos (Paneles / Placas / Accesorios) con una etiqueta lateral vertical,
cada uno con sus sub-tablas de medidas (pedido de Alan, ref. cassasip.com). */
.spec-groups { display: flex; flex-direction: column; gap: 34px; margin-top: 92px; } /* separación de los productos ×2 (antes 46px), pedido de Alan */
.spec-group { display: flex; align-items: stretch; gap: 22px; }
.spec-group__label {
flex-shrink: 0; width: 46px; border-radius: 4px;
background: var(--c-accent); color: var(--c-white); /* naranja del logo CassaSIP + texto blanco (pedido de Alan) */
display: flex; align-items: center; justify-content: center;
writing-mode: vertical-rl; transform: rotate(180deg);
font-size: 15.6px; /* 13px +20% (pedido de Alan) */
font-weight: var(--fw-reg); text-transform: uppercase; letter-spacing: .1em;
}
.spec-group__tables { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.spec-block__title { font-size: 14.5px; font-weight: var(--fw-reg); color: var(--c-navy-900); margin-bottom: 10px; }
.spec-block__title .spec-block__note { font-weight: var(--fw-light); color: var(--c-navy); font-size: 13px; }
.spec-block .specs-table-wrap { overflow-x: auto; }
.specs-table--grid { min-width: 560px; }
.specs-table--grid th, .specs-table--grid td { padding: 12px 14px; font-size: 13.5px; white-space: nowrap; }
.specs-table--grid thead th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: center;
}
.specs-table--grid thead th:first-child { background: var(--c-navy-900); }
.specs-table--grid tbody th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: left; width: auto;
}
.specs-table--grid tbody td {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-light); text-align: center;
}
.specs-table--grid tbody tr:nth-child(even) td { background: var(--c-band); }
.specs-table--grid tbody tr:hover th { background: var(--c-navy-900); }
.specs-table--grid tbody tr:hover td { background: var(--c-band); color: var(--c-navy); }
@media (max-width: 690px) {
.spec-group { flex-direction: column; gap: 10px; }
.spec-group__label {
width: 100%; writing-mode: horizontal-tb; transform: none; padding: 8px; height: auto;
}
}
@media (max-width: 1080px) {
.adaptables__intro { grid-template-columns: 1fr; gap: 20px; }
.adaptables__grid { grid-template-columns: 1fr; gap: 28px; }
/* en una sola columna el desborde a la izquierda no tiene sentido
(no queda margen de página del que sobresalir): se desactiva */
.adaptables__media { margin-left: 0; width: 100%; max-width: 460px; margin-inline: auto; }
.specs-table-wrap { max-width: 460px; margin-inline: auto; width: 100%; }
}
/* ------------------------------------------------------------
PERFILES — Contanos qué necesitás (pedido de Ceci vía Alan).
3 cards con foto en blanco y negro tapada por una "cortina" navy con
textura diagonal sutil; al hacer hover la cortina se corre hacia la
derecha con clip-path (no se desvanece, se desliza), la foto recupera
color + zoom leve, aparece una línea de acento naranja creciendo bajo
el título y la flecha se desplaza. Entrada: swipe hacia arriba
escalonado al entrar en viewport (ver "Perfiles CassaSIP" en
js/script.js), misma familia de efecto que .panel-card pero vertical
en vez de lateral, para variar. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.perfiles-sip__grid {
/* mismo ajuste que .familia-grid: .section__head no trae separación
propia acá (pedido de Alan: se había achicado respecto al prototipo). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.perfil-sip-card {
opacity: 0;
transform: translateY(46px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.perfil-sip-card.is-visible { opacity: 1; transform: translateY(0); }
.perfil-sip-card__link {
position: relative;
display: block;
border: var(--border);
box-shadow: var(--card-shadow);
transition: box-shadow var(--t-base), transform var(--t-base);
}
.perfil-sip-card__link:hover,
.perfil-sip-card__link:focus-visible {
box-shadow: 0 8px 30px rgba(22, 43, 62, .16);
transform: translateY(-4px);
}
.perfil-sip-card__media {
position: relative;
height: 300px;
overflow: hidden;
}
.perfil-sip-card__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.05);
transform: scale(1.03);
transition: transform .6s ease, filter .6s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__img,
.perfil-sip-card__link:focus-visible .perfil-sip-card__img {
filter: grayscale(0) contrast(1);
transform: scale(1.1);
}
.perfil-sip-card__curtain {
position: absolute; inset: 0;
background:
repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px),
linear-gradient(150deg, var(--c-navy-900) 0%, var(--c-navy) 100%);
clip-path: inset(0 0 0 0);
transition: clip-path .55s cubic-bezier(.65,0,.35,1);
}
.perfil-sip-card__link:hover .perfil-sip-card__curtain,
.perfil-sip-card__link:focus-visible .perfil-sip-card__curtain {
clip-path: inset(0 0 0 100%);
}
.perfil-sip-card__num {
position: absolute; top: 18px; left: 20px;
font-size: 13px; font-weight: var(--fw-xbold);
color: rgba(255,255,255,.55);
letter-spacing: .06em;
transition: opacity .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__num,
.perfil-sip-card__link:focus-visible .perfil-sip-card__num { opacity: 0; }
.perfil-sip-card__body {
position: relative;
background: var(--c-white);
padding: 22px 22px 26px;
}
.perfil-sip-card__accent {
display: block;
height: 3px;
width: 0%;
background: var(--c-accent);
transition: width .45s ease;
margin-bottom: 14px;
}
.perfil-sip-card__link:hover .perfil-sip-card__accent,
.perfil-sip-card__link:focus-visible .perfil-sip-card__accent { width: 100%; }
.perfil-sip-card__label {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
font-size: 15px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .02em;
color: var(--c-navy-900);
}
.perfil-sip-card__label svg {
width: 18px; height: 18px; flex-shrink: 0;
fill: none; stroke: var(--c-navy-900); stroke-width: 2;
transform: translateX(0);
transition: transform .35s ease, stroke .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__label svg,
.perfil-sip-card__link:focus-visible .perfil-sip-card__label svg {
transform: translateX(6px);
stroke: var(--c-accent);
}
.perfil-sip-card__desc {
margin-top: 8px;
font-size: 14.7px; line-height: 1.55; font-weight: var(--fw-light);
color: var(--c-gray);
}
@media (max-width: 1080px) {
.perfiles-sip__grid { grid-template-columns: 1fr; gap: 20px; }
.perfil-sip-card { transform: translateY(28px); }
.perfil-sip-card__media { height: 260px; }
}
/* ------------------------------------------------------------
TU PROYECTO — CassaSIP (pedido de Alan).
1 card "hero" a ancho completo (mitad de alto que una card de
grilla) + grilla 2x2 con las 4 restantes. Título siempre
visible sobre la foto; párrafo + CTA revelados al hover con
swipe desde la izquierda. Hover "tecla de piano" con zoom IN:
toda la card crece y el fondo de color sube al mismo tiempo
(--bg-delay: 0s); el texto arranca cuando ese swipe del fondo
va por la mitad (--text-delay: .15s, 50% de --bg-dur), para que
no se sienta "atrasado". Mismo mecanismo de contra-escala que
Familia Cassaforma para que el texto no crezca junto con la
card.
------------------------------------------------------------ */
.tuproyecto-grid {
margin-top: 46px;
list-style: none; padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
--press-scale: 1.035;
--press-dur: .3s;
--bg-dur: .3s;
--bg-delay: 0s;
--text-dur: .3s;
--text-delay: .15s; /* arranca cuando el swipe del fondo va por la mitad (50% de .3s) */
}
.tuproyecto-card--hero { grid-column: 1 / -1; }
.tuproyecto-card { opacity: 0; transform: translateY(40px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1); }
.tuproyecto-card.is-visible { opacity: 1; transform: translateY(0); }
.tuproyecto-card__link {
position: relative; display: block;
aspect-ratio: 2.1573 / 1;
background: var(--c-white); border: 1px solid var(--c-line); box-shadow: var(--card-shadow);
overflow: hidden; transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* Card hero: mismo ancho, la mitad del alto proporcional (el doble de "achatada") */
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 4.3147 / 1; }
.tuproyecto-card__link:hover, .tuproyecto-card__link:focus-visible {
transform: scale(var(--press-scale));
box-shadow: 0 14px 34px rgba(22, 43, 62, .28);
z-index: 5;
}
.tuproyecto-card__media { position: absolute; inset: 0; }
.tuproyecto-card__media img {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: grayscale(1); transition: filter .5s ease;
}
.tuproyecto-card__link:hover .tuproyecto-card__media img,
.tuproyecto-card__link:focus-visible .tuproyecto-card__media img { filter: grayscale(0); }
/* Scrim permanente para que el título siempre se lea */
.tuproyecto-card__link::after {
content: ""; position: absolute; z-index: 1; inset: 0;
background: linear-gradient(160deg, rgba(22,43,62,.55) 0%, rgba(22,43,62,.22) 45%, rgba(22,43,62,.05) 70%);
}
.tuproyecto-card__title {
position: relative; z-index: 2; display: block;
padding: 30px 0 0 34px;
font-size: 25.6px; line-height: 1.2; font-weight: var(--fw-light); color: var(--c-white);
}
/* Filete arriba en el naranja del logo CassaSIP, para resaltar cada card */
.tuproyecto-card__link::before {
content: ""; position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 2px;
background: var(--c-accent);
}
.tuproyecto-card__panel-bg {
position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__panel-bg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__panel-bg { transform: translateY(0); }
.tuproyecto-card__text {
position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 22px 34px 26px;
max-width: 560px;
color: var(--c-white); opacity: 0;
transform: translateX(-26px) scale(1); transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__text,
.tuproyecto-card__link:focus-visible .tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.tuproyecto-card__claim { display: block; font-size: 19.2px; line-height: 1.5; font-weight: var(--fw-light); color: var(--c-white); }
.tuproyecto-card__cta {
display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
font-size: 16.8px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; color: var(--c-white);
}
.tuproyecto-card__cta svg { width: 16.8px; height: 16.8px; fill: none; stroke: var(--c-white); stroke-width: 2.4; transform: translateX(0); transition: transform .3s ease; }
.tuproyecto-card__link:hover .tuproyecto-card__cta svg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__cta svg { transform: translateX(4px); }
@media (max-width: 900px) {
.tuproyecto-grid { grid-template-columns: 1fr; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 2.1573 / 1; }
}
@media (max-width: 690px) {
.tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card__title { font-size: 19.2px; padding: 20px 0 0 20px; }
.tuproyecto-card__text { padding: 16px 20px 20px; }
/* En touch no hay hover real: panel y CTA quedan siempre visibles,
igual que en Familia Cassaforma (el párrafo se oculta para que
no choque con el título en cards bajas). */
.tuproyecto-card__panel-bg { transform: translateY(0); transition: none; }
.tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
}
.tuproyecto-card__claim { display: none; }
.tuproyecto-card__cta { margin-top: 0; }
}
/* Barra "beneficios clave" — mismas medidas que .sc-ahorros de
cassaforma.com (sistema-constructivo.css, bloque GRANDES AHORROS):
3 columnas centradas, ícono circular de 71px (ya viene con su color
en el propio .svg), separador vertical negro entre columnas. */
.ahorros { padding: 70px 0 62px; text-align: center; } /* +10% arriba y abajo (antes 64px/56px), pedido de Alan */
.ahorros__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.ahorro { display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 24px; }
.ahorro + .ahorro::before {
content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
width: 2px; background: var(--c-black);
}
.ahorro__icon { display: block; width: 71px; height: 71px; margin: 0 auto 20px; }
.ahorro__label { font-size: 23px; line-height: 1.3; font-weight: var(--fw-light); color: var(--c-navy); }
@media (max-width: 690px) {
.ahorros__grid { grid-template-columns: 1fr; row-gap: 32px; }
.ahorro + .ahorro::before { display: none; }
.ahorro__label { font-size: 19px; }
}
/* Beneficios (3 pilares) */
/* Beneficios de la construcción SIP — 2 columnas: pilares apilados con
viñeta numerada + logos de certificaciones a la izquierda, imagen a la
derecha (pedido de Alan). Separación entre columnas ×2 (antes 60px).
La imagen de la derecha no aporta su alto natural al cálculo de la fila
(queda position:absolute dentro de .beneficios__media, que por eso no
tiene alto propio): así la altura de la fila la fija SOLO la columna
izquierda (pilares + logos), y la imagen se recorta arriba/abajo con
object-fit:cover para igualar siempre esa altura — salvo en mobile,
donde se desactiva (ver media query). */
.beneficios__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; align-items: stretch; }
.beneficios__left { display: flex; flex-direction: column; }
.pilares__grid { display: flex; flex-direction: column; gap: 32px; }
.pilar__head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.pilar__num {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
background: var(--c-navy); color: var(--c-white);
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: var(--fw-xbold);
}
.pilar__title { font-size: 19px; font-weight: var(--fw-xbold); color: var(--c-navy-900); text-transform: uppercase; margin: 0; }
.pilar__text { margin-top: 0; font-size: 15.5px; line-height: 1.6; }
/* Logos de certificaciones — una sola imagen ya compuesta con los 6 logos
(2 filas x 3 columnas), mismo ancho que los párrafos de arriba (pedido
de Alan: usar la imagen completa en vez de 6 Los paneles brindan un aislamiento incorporado que proporciona bajos costos de funcionamiento de energía durante la vida útil del proyecto. Diseño sin retrasos La flexibilidad de la construcción SIP rompe las barreras para crear y diseñar. La complejidad del diseño es adaptativa al sistema constructivo. Simplicidad La construcción de ladrillos y bloques requiere que se coloque aislamiento entre las cavidades durante el proceso de construcción y necesita soluciones más complejas y costosas para lograr valores K similares a los de una construcción SIP. Los beneficios de los SIP superan con creces la construcción tradicional. Velocidad constructiva La construcción tradicional está sujeta a una variedad de factores externos, incluyendo retrasos a causa del mal tiempo como lluvia, nieve y temperaturas bajo cero, lo que provoca interrupciones en el planning de obra. separadas). */
.beneficios__certs {
margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--c-line);
}
.beneficios__certs img { display: block; width: 100%; height: auto; }
.beneficios__media { position: relative; overflow: hidden; border-radius: 4px; } /* recorta el zoom del ken burns dentro de su propio cuadro (mismo criterio que .sobre-sip__media) */
.beneficios__media img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
animation: sobreSipKenBurns 18s ease-in-out infinite alternate; /* mismo ken burns que la foto de "Construcción con paneles SIP" */
}
/* ¿Por qué construir con SIP? — imagen del despiece a la izquierda, lista
de items con bullets a la derecha. Tipografía tomada de la lista de capas
de cassaforma.com (sistema-constructivo.css: .sc-panellosa__label/__item):
Heebo Light, navy, bullet "•" y divisor fino bajo cada renglón. */
.porque-sip { display: grid; grid-template-columns: minmax(300px, 460px) 1fr; gap: 60px; align-items: center; margin-top: 46px; }
.porque-sip__media img { width: 100%; display: block; }
.porque-sip__list {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto);
column-gap: 48px;
}
.porque-sip__list li {
padding: 14px 0;
border-bottom: 1px solid rgba(22, 43, 62, .15);
font-size: 19px; letter-spacing: .02em;
font-weight: var(--fw-light); color: var(--c-navy);
}
.porque-sip__list li::before { content: "\2022 "; }
@media (max-width: 1080px) {
.porque-sip { grid-template-columns: 1fr; }
.porque-sip__media { max-width: 460px; margin-inline: auto; }
}
@media (max-width: 690px) {
.porque-sip__list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
}
/* Logística — texto (Logística + Almacenamiento apilados) a la izquierda,
foto en blanco y negro con ken burns a la derecha (pedido de Alan). La
imagen no aporta su alto natural al cálculo de la fila (position:absolute
dentro de .logistica__media, sin alto propio): así la altura de la fila
la fija SOLO la columna de texto, y la foto se recorta con object-fit:cover
para igualar siempre esa altura — mismo criterio que .beneficios__media. */
.logistica__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: stretch; }
.logistica__text { display: flex; flex-direction: column; gap: 32px; }
.logistica__item h3 { font-size: 19px; font-weight: var(--fw-xbold); text-transform: uppercase; color: var(--c-navy-900); margin-bottom: 12px; }
.logistica__media { position: relative; overflow: hidden; border-radius: 4px; }
.logistica__img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
transition: filter .45s ease;
/* Es una sola foto fija (no un carrusel): un zoom-in ÚNICO de 10s que
termina y se queda ahí (forwards, sin infinite/alternate) — solo
"ida", nunca vuelve para atrás y nunca vuelve a saltar (pedido de
Alan). */
animation: destacadoKenBurns 10s ease-out forwards;
}
.logistica__media:hover .logistica__img { filter: grayscale(0); }
/* FAQ */
.faq { max-width: 880px; }
.faq__item { border-bottom: var(--border); }
.faq__item summary {
cursor: pointer; list-style: none; padding: 20px 0;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
font-size: 16.5px; font-weight: var(--fw-med); color: var(--c-navy-900);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
content: "+"; font-size: 22px; font-weight: var(--fw-light); color: var(--c-navy); flex-shrink: 0;
}
.faq__item[open] summary::after { content: "–"; }
.faq__body { padding: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: var(--c-gray); }
.faq__body ul { list-style: disc; padding-left: 20px; margin-top: 10px; }
.faq__body li { margin-bottom: 6px; }
.faq__body p + p { margin-top: 12px; }
/* Proceso constructivo — solo título + video a todo el ancho del
contenido (pedido de Alan; antes había una lista de pasos numerados). */
.proceso__video { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.proceso__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Capacitación */
.capacitacion { text-align: center; }
.capacitacion h2 { max-width: 620px; margin-inline: auto; }
.capacitacion .btn { margin-top: 30px; }
/* Presupuesto / form */
.presupuesto__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.form__field { margin-bottom: 16px; }
.form__label { display: block; font-size: 14px; font-weight: var(--fw-med); margin-bottom: 7px; }
.form__input, .form__select {
display: block; width: 100%; height: 46px; padding: 0 14px;
border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-navy-900);
font-family: var(--ff); font-size: 15px;
}
.form__input:focus, .form__select:focus { border-color: var(--c-navy); outline: none; }
.form__submit { margin-top: 6px; width: 100%; }
/* ------------------------------------------------------------
FOOTER
------------------------------------------------------------ */
.footer { background: var(--c-navy-900); color: var(--c-white); padding-block: 64px 32px; }
.footer__top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.footer__brand img { height: 40px; }
.footer__brand p { margin-top: 18px; font-size: 14px; color: rgba(255,255,255,.65); max-width: 260px; }
.footer__col h3 { font-size: 13px; font-weight: var(--fw-xbold); letter-spacing: .06em; text-transform: uppercase; color: var(--c-white); margin-bottom: 16px; }
.footer__col ul li { margin-bottom: 10px; }
.footer__col a { font-size: 14px; color: rgba(255,255,255,.75); }
.footer__col a:hover { color: var(--c-white); }
.footer__bottom {
margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15);
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
font-size: 13.5px; color: rgba(255,255,255,.6);
}
.footer__social { display: flex; gap: 14px; }
.footer__social svg { width: 16px; height: 16px; fill: rgba(255,255,255,.75); }
.footer__social a:hover svg { fill: var(--c-white); }
.footer__scrolltop { font-size: 13px; color: rgba(255,255,255,.6); }
.footer__scrolltop:hover { color: var(--c-white); }
/* ------------------------------------------------------------
RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 1169px) {
:root {
--fs-hero: 42px; --lh-hero: 46px;
--fs-hero-lead: 23px; --lh-hero-lead: 28px;
--h-hero: 660px;
}
.site-nav { gap: 15px; }
.site-nav__link { font-size: 13px; }
}
@media (max-width: 1080px) {
.site-nav { display: none; }
.destacado, .dos-columnas, .logistica__grid, .presupuesto__grid { grid-template-columns: 1fr; }
.paneles__grid { grid-template-columns: repeat(3, 1fr); }
/* En mobile se desactiva el recorte a la altura de la columna izquierda
(pedido de Alan): la imagen vuelve a su aspecto natural, en flujo. */
.beneficios__grid { grid-template-columns: 1fr; gap: 28px; align-items: normal; }
.beneficios__media img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
/* Mismo criterio que .beneficios__media: en mobile la foto de logística
vuelve a su aspecto natural, en flujo, debajo del texto. */
.logistica__grid { gap: 28px; }
.logistica__img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
.footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
:root {
--fs-hero: 34px; --lh-hero: 38px;
--fs-hero-lead: 19px; --lh-hero-lead: 26px;
--h-header: 84px; --h-hero: 560px;
}
.site-header__logo img { height: 40px; }
.hero .rule--light { width: 200px; margin: 24px 0 22px; }
}
@media (max-width: 690px) {
.site-topbar { display: none; }
:root {
--fs-hero: 27px; --lh-hero: 31px;
--fs-hero-lead: 16px; --lh-hero-lead: 24px;
--h-header: 70px; --h-hero: 520px;
}
.site-header__logo img { height: 34px; }
.hero .rule--light { width: 140px; margin: 20px 0 18px; }
.section { padding-block: 56px; }
.paneles__grid { grid-template-columns: 1fr 1fr; }
.footer__top { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------
FAMILIA CASSAFORMA — Conocé el resto de nuestras líneas
(pedido de Alan). Grilla de 5 cards (las otras líneas Cassaforma;
CassaSIP es esta misma web, no se lista a sí misma), cada una con
su color de marca en --linea-accent. Efecto "tecla de piano" v2:
TODA la card se hunde junta al pasar el mouse (borde, sombra,
logo, foto y fondo de color son todos descendientes del mismo
.familia-card__link escalado), así el degradé de color queda
siempre alineado con el borde mientras se achica. El texto es la
ÚNICA capa que NO se achica: usa un contra-escalado
(scale(calc(1 / var(--press-scale)))) que cancela el de su padre,
y entra con swipe desde la izquierda + fade-in medio segundo
después de que arranca el fondo de color. La foto NO hace zoom en
el hover (chocaba visualmente con el "hundido", pedido de Alan):
solo recupera color. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.familia-grid {
/* .section__head no trae separación propia (solo la agrega vía
".section__head + .section__grid", que esta grilla no usa) — se
fija acá a mano, mismo valor que esa regla general, para que quede
igual que en el prototipo (pedido de Alan: se había achicado). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
/* Timings del hover — un 50% más rápidos que la v1 (pedido de Alan). */
--press-scale: .965;
--press-dur: .167s;
--bg-dur: .3s;
--bg-delay: var(--press-dur);
--text-dur: .3s;
--text-delay: .5s;
}
.familia-card {
opacity: 0;
transform: translateY(40px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.familia-card.is-visible { opacity: 1; transform: translateY(0); }
.familia-card__link {
position: relative;
display: block;
height: 470px;
background: var(--c-white);
border: 1px solid var(--c-line);
box-shadow: var(--card-shadow);
overflow: hidden;
transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* "Tecla de piano": se achica y baja un poco, sombra se cierra en vez
de crecer (efecto de hundirse contra la superficie). */
.familia-card__link:hover,
.familia-card__link:focus-visible {
transform: scale(var(--press-scale)) translateY(3px);
box-shadow: 0 2px 10px rgba(22, 43, 62, .22);
}
.familia-card__logo {
position: relative;
z-index: 2;
height: 26px;
width: auto;
max-width: 74%;
margin: 26px auto 0;
object-fit: contain;
}
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 32px; margin-top: 23px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 31px; margin-top: 23px; }
.familia-card__media {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 72%;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
}
.familia-card__media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: bottom center;
filter: grayscale(1);
transition: filter .5s ease;
}
.familia-card__link[data-line="cassadeco"] .familia-card__media img { object-position: center bottom; }
/* Sin zoom en la foto: solo recupera color (pedido de Alan). */
.familia-card__link:hover .familia-card__media img,
.familia-card__link:focus-visible .familia-card__media img {
filter: grayscale(0);
}
/* Fondo de color: degradé del color de marca hacia transparente, 3/4
de la altura de la card. Hijo directo de .familia-card__link (no un
hermano aparte): se achica JUNTO con el resto de la card, así sus
márgenes quedan siempre alineados con el borde (pedido de Alan).
Entra con swipe de abajo hacia arriba apenas termina el "press". */
.familia-card__panel-bg {
position: absolute;
z-index: 2;
left: 0; right: 0; bottom: 0;
height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.familia-card__link:hover .familia-card__panel-bg,
.familia-card__link:focus-visible .familia-card__panel-bg {
transform: translateY(0);
}
/* Texto: la ÚNICA capa que NO se achica. Sigue siendo hijo de
.familia-card__link, pero en hover se le aplica un contra-escalado
(1 / var(--press-scale)) que cancela el de la card y lo deja
siempre a tamaño real (pedido de Alan). Entra con swipe desde la
izquierda + fade-in, medio segundo después de que arrancó el fondo
de color. */
.familia-card__text {
position: absolute;
z-index: 3;
left: 0; right: 0; bottom: 0;
padding: 18px 20px 20px;
color: var(--c-white);
opacity: 0;
transform: translateX(-26px) scale(1);
transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.familia-card__link:hover .familia-card__text,
.familia-card__link:focus-visible .familia-card__text {
opacity: 1;
transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.familia-card__claim {
display: block;
font-size: 14.6px; line-height: 1.45; font-weight: var(--fw-light);
color: var(--c-white);
}
.familia-card__cta {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 10px;
font-size: 13.8px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .03em;
color: var(--c-white);
}
.familia-card__cta svg {
width: 13px; height: 13px;
fill: none; stroke: var(--c-white); stroke-width: 2.4;
transform: translateX(0);
transition: transform .3s ease;
}
.familia-card__link:hover .familia-card__cta svg,
.familia-card__link:focus-visible .familia-card__cta svg {
transform: translateX(4px);
}
/* Filete de color arriba de la card: siempre visible, identifica la
marca aun antes del hover. Al ser ::before de .familia-card__link
también se hunde con toda la card (pedido de Alan). */
.familia-card__link::before {
content: "";
position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 4px;
background: var(--linea-accent, var(--c-navy-900));
}
@media (max-width: 1080px) {
.familia-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.familia-card__link { height: 420px; }
}
@media (max-width: 690px) {
.familia-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.familia-card__link { height: 340px; }
.familia-card__logo { height: 22px; margin-top: 20px; }
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 27px; margin-top: 18px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 26px; margin-top: 18px; }
/* En touch no hay hover real: el fondo de color y el CTA quedan
siempre visibles, para no depender de un tap sostenido. */
.familia-card__panel-bg { transform: translateY(0); transition: none; }
.familia-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
padding: 10px 14px 14px;
}
.familia-card__claim { display: none; }
.familia-card__cta { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; }
.hero__img, .destacado__img, .sobre-sip__img, .beneficios__media img { animation: none !important; transform: none; }
.hero__slide, .destacado__slide { transition-duration: .2s; }
.familia-card__link { transition-duration: .001ms; }
}
Beneficios de la construcción SIP
individuales — pedido de Alan) -->
por columna
(son hermanos en el DOM aunque visualmente queden uno al lado del
otro), así que el combinador de hermano adyacente lo tomaba también
y el 2º párrafo (columna derecha) quedaba corrido hacia abajo. Se
anula explícitamente para dejar ambas columnas alineadas por su top
(bug reportado por Alan). */
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.dos-columnas p + p { margin-top: 0; }
/* Construcción con paneles SIP — foto a la derecha (pedido de Alan). En
reposo: efecto ken burns continuo (zoom/paneo lento) y desaturada. Al
pasar el mouse: la animación se detiene, la imagen vuelve a su
posición/escala inicial (mismo mecanismo de siempre: se quita la
animation y la transition la lleva de vuelta suavemente) y recupera
el color — mismo criterio que .linea-card__media img en cassaforma.com,
invertido a pedido de Alan. */
/* padding-bottom reducido a la mitad (42px, antes 84px): acerca esta
sección a "Paneles CassaSIP" (pedido de Alan); el resto de los
paddings de .section quedan igual. */
#sobre-sip { padding-bottom: 42px; }
.sobre-sip__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: start; }
/* Párrafo "Incorporamos una nueva línea de producción..." destacado en
negrita y color naranja del logo (pedido de Alan) */
.sobre-sip__highlight { font-weight: var(--fw-xbold); color: var(--c-accent); }
.sobre-sip__media { position: relative; overflow: hidden; aspect-ratio: 4/5; }
.sobre-sip__img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
animation: sobreSipKenBurns 16s ease-in-out infinite alternate;
transition: filter .45s ease, transform .6s ease;
}
@keyframes sobreSipKenBurns {
0% { transform: scale(1) translate(0, 0); }
100% { transform: scale(1.14) translate(-2.5%, 2%); }
}
.sobre-sip__media:hover .sobre-sip__img,
.sobre-sip__media:focus-within .sobre-sip__img {
filter: grayscale(0);
animation: none;
transform: scale(1) translate(0, 0);
}
@media (max-width: 1080px) {
.sobre-sip__grid { grid-template-columns: 1fr; gap: 32px; }
.sobre-sip__media { order: -1; max-width: 460px; margin-inline: auto; aspect-ratio: 4/3; }
}
/* Tipos de panel */
.paneles__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.panel-card {
/* sin recuadro: panel, título y botón flotan directamente sobre el fondo
de la sección (pedido de Alan) */
border: none; box-shadow: none; background: transparent; display: flex; flex-direction: column;
/* entrada tipo swipe (derecha → izquierda), escalonada vía JS
(.is-visible); velocidad aumentada otra vez (antes .5s/card cada 1000ms,
ahora .35s/card cada 220ms — pedido de Alan) */
opacity: 0; transform: translateX(70px); transition: opacity .35s ease, transform .35s ease;
}
.panel-card.is-visible { opacity: 1; transform: translateX(0); }
/* Render con fondo transparente: se muestra completo (sin recortar), centrado,
con un drop-shadow muy leve para dar un efecto 3D sutil (pedido de Alan).
max-height ampliado (antes 210px) para que la imagen use todo el ancho
disponible de la card en vez de quedar acotada por la altura: efecto neto,
~120% más grande (pedido de Alan). */
.panel-card__media { min-height: 465px; padding: 10px 8px 6px; display: flex; align-items: center; justify-content: center; }
/* El render es también un link de descarga de su ficha técnica (mismo PDF
que el botón); al pasar el mouse, zoom leve sobre la imagen (pedido de
Alan). */
.panel-card__media a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.panel-card__media img {
width: 100%; max-width: 100%; height: auto; max-height: 465px; object-fit: contain;
filter: drop-shadow(0 6px 10px rgba(22, 43, 62, .16));
transition: transform .35s ease;
}
.panel-card__media a:hover img,
.panel-card__media a:focus-visible img {
transform: scale(1.06);
}
.panel-card__body { padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.panel-card__name { font-size: 15px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; }
/* Botón "Descargar ficha" — mismo "tipo" que .sc-panel__cta en
sistema-constructivo.css (cassaforma.com): .btn.btn--navy de base,
ancho completo y compacto. Usar esta combinación cada vez que se
agregue un botón de descarga de ficha en el sitio (pedido de Alan). */
.panel-card__cta { margin-top: auto; width: 100%; height: 40px; font-size: 14.7px; padding: 0 12px; }
/* Adaptables a cada proyecto — texto en 2 columnas: cartera de proyectos a la
izquierda, y el párrafo de la tecnología OSB destacado en un recuadro con
fondo blanco y en negrita, a la derecha (pedido de Alan). */
.adaptables__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.adaptables__highlight {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-med); /* antes fw-xbold: menos peso (pedido de Alan) */
padding: 22px 26px; border-radius: 4px; box-shadow: var(--card-shadow);
}
/* Adaptables a cada proyecto — foto + tabla de resistencias (pedido de Alan).
margin-top +20% (antes 46px) para separar más el render del texto de
arriba. */
.adaptables__grid { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: center; margin-top: 55px; }
/* Render con fondo transparente: se muestra completo, sin recortar ni caja
fija, con un drop-shadow muy leve (mismo criterio que .panel-card__media).
Se desplaza hacia la izquierda hasta sobresalir un 10% del ancho de
contenido (pedido de Alan): crece hacia la izquierda, ancla derecha
sin cambios (mismo criterio que .panel-corte__sandwich). */
.adaptables__media {
display: flex; align-items: center; justify-content: center;
margin-left: calc(-1 * var(--w-content) * 0.10);
width: calc(100% + var(--w-content) * 0.10);
}
.adaptables__media img {
width: 100%; height: auto; max-width: 100%;
filter: drop-shadow(0 8px 14px rgba(22, 43, 62, .16));
}
/* Tabla de especificaciones: misma paleta navy/blanco y tipografía Heebo
del resto del sitio. Columna izquierda (propiedad) en navy —el mismo azul
del botón "Descargar ficha"— con texto blanco, columna derecha (valor)
alterna blanco/gris banda. Ninguna fuente en negrita (pedido de Alan). Al
pasar el mouse por una fila, se resalta en navy oscuro (izquierda) y en la
banda gris (derecha) para que se lea qué fila se está mirando. */
.specs-table-wrap { border: var(--border); border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table th, .specs-table td { padding: 15px 18px; font-size: 14.5px; line-height: 1.3; transition: background-color .2s ease, color .2s ease; }
.specs-table th {
background: var(--c-navy); color: var(--c-white);
font-weight: var(--fw-reg); text-align: left; width: 60%;
}
.specs-table td {
background: var(--c-white); color: var(--c-navy-900);
font-weight: var(--fw-light); text-align: center;
}
.specs-table tr:nth-child(even) td { background: var(--c-band); }
.specs-table tr:not(:last-child) th,
.specs-table tr:not(:last-child) td { border-bottom: 1px solid rgba(255,255,255,.08); }
.specs-table tr:hover th { background: var(--c-navy-900); }
.specs-table tr:hover td { background: var(--c-band); color: var(--c-navy); }
/* Especificaciones técnicas (debajo de "Tipos de panel") — mismo criterio
de diseño que la tabla de Adaptables: acento navy, sin negritas. Tres
grupos (Paneles / Placas / Accesorios) con una etiqueta lateral vertical,
cada uno con sus sub-tablas de medidas (pedido de Alan, ref. cassasip.com). */
.spec-groups { display: flex; flex-direction: column; gap: 34px; margin-top: 92px; } /* separación de los productos ×2 (antes 46px), pedido de Alan */
.spec-group { display: flex; align-items: stretch; gap: 22px; }
.spec-group__label {
flex-shrink: 0; width: 46px; border-radius: 4px;
background: var(--c-accent); color: var(--c-white); /* naranja del logo CassaSIP + texto blanco (pedido de Alan) */
display: flex; align-items: center; justify-content: center;
writing-mode: vertical-rl; transform: rotate(180deg);
font-size: 15.6px; /* 13px +20% (pedido de Alan) */
font-weight: var(--fw-reg); text-transform: uppercase; letter-spacing: .1em;
}
.spec-group__tables { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.spec-block__title { font-size: 14.5px; font-weight: var(--fw-reg); color: var(--c-navy-900); margin-bottom: 10px; }
.spec-block__title .spec-block__note { font-weight: var(--fw-light); color: var(--c-navy); font-size: 13px; }
.spec-block .specs-table-wrap { overflow-x: auto; }
.specs-table--grid { min-width: 560px; }
.specs-table--grid th, .specs-table--grid td { padding: 12px 14px; font-size: 13.5px; white-space: nowrap; }
.specs-table--grid thead th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: center;
}
.specs-table--grid thead th:first-child { background: var(--c-navy-900); }
.specs-table--grid tbody th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: left; width: auto;
}
.specs-table--grid tbody td {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-light); text-align: center;
}
.specs-table--grid tbody tr:nth-child(even) td { background: var(--c-band); }
.specs-table--grid tbody tr:hover th { background: var(--c-navy-900); }
.specs-table--grid tbody tr:hover td { background: var(--c-band); color: var(--c-navy); }
@media (max-width: 690px) {
.spec-group { flex-direction: column; gap: 10px; }
.spec-group__label {
width: 100%; writing-mode: horizontal-tb; transform: none; padding: 8px; height: auto;
}
}
@media (max-width: 1080px) {
.adaptables__intro { grid-template-columns: 1fr; gap: 20px; }
.adaptables__grid { grid-template-columns: 1fr; gap: 28px; }
/* en una sola columna el desborde a la izquierda no tiene sentido
(no queda margen de página del que sobresalir): se desactiva */
.adaptables__media { margin-left: 0; width: 100%; max-width: 460px; margin-inline: auto; }
.specs-table-wrap { max-width: 460px; margin-inline: auto; width: 100%; }
}
/* ------------------------------------------------------------
PERFILES — Contanos qué necesitás (pedido de Ceci vía Alan).
3 cards con foto en blanco y negro tapada por una "cortina" navy con
textura diagonal sutil; al hacer hover la cortina se corre hacia la
derecha con clip-path (no se desvanece, se desliza), la foto recupera
color + zoom leve, aparece una línea de acento naranja creciendo bajo
el título y la flecha se desplaza. Entrada: swipe hacia arriba
escalonado al entrar en viewport (ver "Perfiles CassaSIP" en
js/script.js), misma familia de efecto que .panel-card pero vertical
en vez de lateral, para variar. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.perfiles-sip__grid {
/* mismo ajuste que .familia-grid: .section__head no trae separación
propia acá (pedido de Alan: se había achicado respecto al prototipo). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.perfil-sip-card {
opacity: 0;
transform: translateY(46px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.perfil-sip-card.is-visible { opacity: 1; transform: translateY(0); }
.perfil-sip-card__link {
position: relative;
display: block;
border: var(--border);
box-shadow: var(--card-shadow);
transition: box-shadow var(--t-base), transform var(--t-base);
}
.perfil-sip-card__link:hover,
.perfil-sip-card__link:focus-visible {
box-shadow: 0 8px 30px rgba(22, 43, 62, .16);
transform: translateY(-4px);
}
.perfil-sip-card__media {
position: relative;
height: 300px;
overflow: hidden;
}
.perfil-sip-card__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.05);
transform: scale(1.03);
transition: transform .6s ease, filter .6s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__img,
.perfil-sip-card__link:focus-visible .perfil-sip-card__img {
filter: grayscale(0) contrast(1);
transform: scale(1.1);
}
.perfil-sip-card__curtain {
position: absolute; inset: 0;
background:
repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px),
linear-gradient(150deg, var(--c-navy-900) 0%, var(--c-navy) 100%);
clip-path: inset(0 0 0 0);
transition: clip-path .55s cubic-bezier(.65,0,.35,1);
}
.perfil-sip-card__link:hover .perfil-sip-card__curtain,
.perfil-sip-card__link:focus-visible .perfil-sip-card__curtain {
clip-path: inset(0 0 0 100%);
}
.perfil-sip-card__num {
position: absolute; top: 18px; left: 20px;
font-size: 13px; font-weight: var(--fw-xbold);
color: rgba(255,255,255,.55);
letter-spacing: .06em;
transition: opacity .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__num,
.perfil-sip-card__link:focus-visible .perfil-sip-card__num { opacity: 0; }
.perfil-sip-card__body {
position: relative;
background: var(--c-white);
padding: 22px 22px 26px;
}
.perfil-sip-card__accent {
display: block;
height: 3px;
width: 0%;
background: var(--c-accent);
transition: width .45s ease;
margin-bottom: 14px;
}
.perfil-sip-card__link:hover .perfil-sip-card__accent,
.perfil-sip-card__link:focus-visible .perfil-sip-card__accent { width: 100%; }
.perfil-sip-card__label {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
font-size: 15px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .02em;
color: var(--c-navy-900);
}
.perfil-sip-card__label svg {
width: 18px; height: 18px; flex-shrink: 0;
fill: none; stroke: var(--c-navy-900); stroke-width: 2;
transform: translateX(0);
transition: transform .35s ease, stroke .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__label svg,
.perfil-sip-card__link:focus-visible .perfil-sip-card__label svg {
transform: translateX(6px);
stroke: var(--c-accent);
}
.perfil-sip-card__desc {
margin-top: 8px;
font-size: 14.7px; line-height: 1.55; font-weight: var(--fw-light);
color: var(--c-gray);
}
@media (max-width: 1080px) {
.perfiles-sip__grid { grid-template-columns: 1fr; gap: 20px; }
.perfil-sip-card { transform: translateY(28px); }
.perfil-sip-card__media { height: 260px; }
}
/* ------------------------------------------------------------
TU PROYECTO — CassaSIP (pedido de Alan).
1 card "hero" a ancho completo (mitad de alto que una card de
grilla) + grilla 2x2 con las 4 restantes. Título siempre
visible sobre la foto; párrafo + CTA revelados al hover con
swipe desde la izquierda. Hover "tecla de piano" con zoom IN:
toda la card crece y el fondo de color sube al mismo tiempo
(--bg-delay: 0s); el texto arranca cuando ese swipe del fondo
va por la mitad (--text-delay: .15s, 50% de --bg-dur), para que
no se sienta "atrasado". Mismo mecanismo de contra-escala que
Familia Cassaforma para que el texto no crezca junto con la
card.
------------------------------------------------------------ */
.tuproyecto-grid {
margin-top: 46px;
list-style: none; padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
--press-scale: 1.035;
--press-dur: .3s;
--bg-dur: .3s;
--bg-delay: 0s;
--text-dur: .3s;
--text-delay: .15s; /* arranca cuando el swipe del fondo va por la mitad (50% de .3s) */
}
.tuproyecto-card--hero { grid-column: 1 / -1; }
.tuproyecto-card { opacity: 0; transform: translateY(40px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1); }
.tuproyecto-card.is-visible { opacity: 1; transform: translateY(0); }
.tuproyecto-card__link {
position: relative; display: block;
aspect-ratio: 2.1573 / 1;
background: var(--c-white); border: 1px solid var(--c-line); box-shadow: var(--card-shadow);
overflow: hidden; transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* Card hero: mismo ancho, la mitad del alto proporcional (el doble de "achatada") */
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 4.3147 / 1; }
.tuproyecto-card__link:hover, .tuproyecto-card__link:focus-visible {
transform: scale(var(--press-scale));
box-shadow: 0 14px 34px rgba(22, 43, 62, .28);
z-index: 5;
}
.tuproyecto-card__media { position: absolute; inset: 0; }
.tuproyecto-card__media img {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: grayscale(1); transition: filter .5s ease;
}
.tuproyecto-card__link:hover .tuproyecto-card__media img,
.tuproyecto-card__link:focus-visible .tuproyecto-card__media img { filter: grayscale(0); }
/* Scrim permanente para que el título siempre se lea */
.tuproyecto-card__link::after {
content: ""; position: absolute; z-index: 1; inset: 0;
background: linear-gradient(160deg, rgba(22,43,62,.55) 0%, rgba(22,43,62,.22) 45%, rgba(22,43,62,.05) 70%);
}
.tuproyecto-card__title {
position: relative; z-index: 2; display: block;
padding: 30px 0 0 34px;
font-size: 25.6px; line-height: 1.2; font-weight: var(--fw-light); color: var(--c-white);
}
/* Filete arriba en el naranja del logo CassaSIP, para resaltar cada card */
.tuproyecto-card__link::before {
content: ""; position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 2px;
background: var(--c-accent);
}
.tuproyecto-card__panel-bg {
position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__panel-bg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__panel-bg { transform: translateY(0); }
.tuproyecto-card__text {
position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 22px 34px 26px;
max-width: 560px;
color: var(--c-white); opacity: 0;
transform: translateX(-26px) scale(1); transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__text,
.tuproyecto-card__link:focus-visible .tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.tuproyecto-card__claim { display: block; font-size: 19.2px; line-height: 1.5; font-weight: var(--fw-light); color: var(--c-white); }
.tuproyecto-card__cta {
display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
font-size: 16.8px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; color: var(--c-white);
}
.tuproyecto-card__cta svg { width: 16.8px; height: 16.8px; fill: none; stroke: var(--c-white); stroke-width: 2.4; transform: translateX(0); transition: transform .3s ease; }
.tuproyecto-card__link:hover .tuproyecto-card__cta svg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__cta svg { transform: translateX(4px); }
@media (max-width: 900px) {
.tuproyecto-grid { grid-template-columns: 1fr; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 2.1573 / 1; }
}
@media (max-width: 690px) {
.tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card__title { font-size: 19.2px; padding: 20px 0 0 20px; }
.tuproyecto-card__text { padding: 16px 20px 20px; }
/* En touch no hay hover real: panel y CTA quedan siempre visibles,
igual que en Familia Cassaforma (el párrafo se oculta para que
no choque con el título en cards bajas). */
.tuproyecto-card__panel-bg { transform: translateY(0); transition: none; }
.tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
}
.tuproyecto-card__claim { display: none; }
.tuproyecto-card__cta { margin-top: 0; }
}
/* Barra "beneficios clave" — mismas medidas que .sc-ahorros de
cassaforma.com (sistema-constructivo.css, bloque GRANDES AHORROS):
3 columnas centradas, ícono circular de 71px (ya viene con su color
en el propio .svg), separador vertical negro entre columnas. */
.ahorros { padding: 70px 0 62px; text-align: center; } /* +10% arriba y abajo (antes 64px/56px), pedido de Alan */
.ahorros__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.ahorro { display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 24px; }
.ahorro + .ahorro::before {
content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
width: 2px; background: var(--c-black);
}
.ahorro__icon { display: block; width: 71px; height: 71px; margin: 0 auto 20px; }
.ahorro__label { font-size: 23px; line-height: 1.3; font-weight: var(--fw-light); color: var(--c-navy); }
@media (max-width: 690px) {
.ahorros__grid { grid-template-columns: 1fr; row-gap: 32px; }
.ahorro + .ahorro::before { display: none; }
.ahorro__label { font-size: 19px; }
}
/* Beneficios (3 pilares) */
/* Beneficios de la construcción SIP — 2 columnas: pilares apilados con
viñeta numerada + logos de certificaciones a la izquierda, imagen a la
derecha (pedido de Alan). Separación entre columnas ×2 (antes 60px).
La imagen de la derecha no aporta su alto natural al cálculo de la fila
(queda position:absolute dentro de .beneficios__media, que por eso no
tiene alto propio): así la altura de la fila la fija SOLO la columna
izquierda (pilares + logos), y la imagen se recorta arriba/abajo con
object-fit:cover para igualar siempre esa altura — salvo en mobile,
donde se desactiva (ver media query). */
.beneficios__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; align-items: stretch; }
.beneficios__left { display: flex; flex-direction: column; }
.pilares__grid { display: flex; flex-direction: column; gap: 32px; }
.pilar__head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.pilar__num {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
background: var(--c-navy); color: var(--c-white);
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: var(--fw-xbold);
}
.pilar__title { font-size: 19px; font-weight: var(--fw-xbold); color: var(--c-navy-900); text-transform: uppercase; margin: 0; }
.pilar__text { margin-top: 0; font-size: 15.5px; line-height: 1.6; }
/* Logos de certificaciones — una sola imagen ya compuesta con los 6 logos
(2 filas x 3 columnas), mismo ancho que los párrafos de arriba (pedido
de Alan: usar la imagen completa en vez de 6 La tecnología OSB es capaz de lograr uniformidad, estabilidad estructural, tableros libres de nudos, grietas e irregularidades, combas y curvaturas propias de la madera. separadas). */
.beneficios__certs {
margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--c-line);
}
.beneficios__certs img { display: block; width: 100%; height: auto; }
.beneficios__media { position: relative; overflow: hidden; border-radius: 4px; } /* recorta el zoom del ken burns dentro de su propio cuadro (mismo criterio que .sobre-sip__media) */
.beneficios__media img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
animation: sobreSipKenBurns 18s ease-in-out infinite alternate; /* mismo ken burns que la foto de "Construcción con paneles SIP" */
}
/* ¿Por qué construir con SIP? — imagen del despiece a la izquierda, lista
de items con bullets a la derecha. Tipografía tomada de la lista de capas
de cassaforma.com (sistema-constructivo.css: .sc-panellosa__label/__item):
Heebo Light, navy, bullet "•" y divisor fino bajo cada renglón. */
.porque-sip { display: grid; grid-template-columns: minmax(300px, 460px) 1fr; gap: 60px; align-items: center; margin-top: 46px; }
.porque-sip__media img { width: 100%; display: block; }
.porque-sip__list {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto);
column-gap: 48px;
}
.porque-sip__list li {
padding: 14px 0;
border-bottom: 1px solid rgba(22, 43, 62, .15);
font-size: 19px; letter-spacing: .02em;
font-weight: var(--fw-light); color: var(--c-navy);
}
.porque-sip__list li::before { content: "\2022 "; }
@media (max-width: 1080px) {
.porque-sip { grid-template-columns: 1fr; }
.porque-sip__media { max-width: 460px; margin-inline: auto; }
}
@media (max-width: 690px) {
.porque-sip__list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
}
/* Logística — texto (Logística + Almacenamiento apilados) a la izquierda,
foto en blanco y negro con ken burns a la derecha (pedido de Alan). La
imagen no aporta su alto natural al cálculo de la fila (position:absolute
dentro de .logistica__media, sin alto propio): así la altura de la fila
la fija SOLO la columna de texto, y la foto se recorta con object-fit:cover
para igualar siempre esa altura — mismo criterio que .beneficios__media. */
.logistica__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: stretch; }
.logistica__text { display: flex; flex-direction: column; gap: 32px; }
.logistica__item h3 { font-size: 19px; font-weight: var(--fw-xbold); text-transform: uppercase; color: var(--c-navy-900); margin-bottom: 12px; }
.logistica__media { position: relative; overflow: hidden; border-radius: 4px; }
.logistica__img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
transition: filter .45s ease;
/* Es una sola foto fija (no un carrusel): un zoom-in ÚNICO de 10s que
termina y se queda ahí (forwards, sin infinite/alternate) — solo
"ida", nunca vuelve para atrás y nunca vuelve a saltar (pedido de
Alan). */
animation: destacadoKenBurns 10s ease-out forwards;
}
.logistica__media:hover .logistica__img { filter: grayscale(0); }
/* FAQ */
.faq { max-width: 880px; }
.faq__item { border-bottom: var(--border); }
.faq__item summary {
cursor: pointer; list-style: none; padding: 20px 0;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
font-size: 16.5px; font-weight: var(--fw-med); color: var(--c-navy-900);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
content: "+"; font-size: 22px; font-weight: var(--fw-light); color: var(--c-navy); flex-shrink: 0;
}
.faq__item[open] summary::after { content: "–"; }
.faq__body { padding: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: var(--c-gray); }
.faq__body ul { list-style: disc; padding-left: 20px; margin-top: 10px; }
.faq__body li { margin-bottom: 6px; }
.faq__body p + p { margin-top: 12px; }
/* Proceso constructivo — solo título + video a todo el ancho del
contenido (pedido de Alan; antes había una lista de pasos numerados). */
.proceso__video { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.proceso__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Capacitación */
.capacitacion { text-align: center; }
.capacitacion h2 { max-width: 620px; margin-inline: auto; }
.capacitacion .btn { margin-top: 30px; }
/* Presupuesto / form */
.presupuesto__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.form__field { margin-bottom: 16px; }
.form__label { display: block; font-size: 14px; font-weight: var(--fw-med); margin-bottom: 7px; }
.form__input, .form__select {
display: block; width: 100%; height: 46px; padding: 0 14px;
border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-navy-900);
font-family: var(--ff); font-size: 15px;
}
.form__input:focus, .form__select:focus { border-color: var(--c-navy); outline: none; }
.form__submit { margin-top: 6px; width: 100%; }
/* ------------------------------------------------------------
FOOTER
------------------------------------------------------------ */
.footer { background: var(--c-navy-900); color: var(--c-white); padding-block: 64px 32px; }
.footer__top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.footer__brand img { height: 40px; }
.footer__brand p { margin-top: 18px; font-size: 14px; color: rgba(255,255,255,.65); max-width: 260px; }
.footer__col h3 { font-size: 13px; font-weight: var(--fw-xbold); letter-spacing: .06em; text-transform: uppercase; color: var(--c-white); margin-bottom: 16px; }
.footer__col ul li { margin-bottom: 10px; }
.footer__col a { font-size: 14px; color: rgba(255,255,255,.75); }
.footer__col a:hover { color: var(--c-white); }
.footer__bottom {
margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15);
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
font-size: 13.5px; color: rgba(255,255,255,.6);
}
.footer__social { display: flex; gap: 14px; }
.footer__social svg { width: 16px; height: 16px; fill: rgba(255,255,255,.75); }
.footer__social a:hover svg { fill: var(--c-white); }
.footer__scrolltop { font-size: 13px; color: rgba(255,255,255,.6); }
.footer__scrolltop:hover { color: var(--c-white); }
/* ------------------------------------------------------------
RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 1169px) {
:root {
--fs-hero: 42px; --lh-hero: 46px;
--fs-hero-lead: 23px; --lh-hero-lead: 28px;
--h-hero: 660px;
}
.site-nav { gap: 15px; }
.site-nav__link { font-size: 13px; }
}
@media (max-width: 1080px) {
.site-nav { display: none; }
.destacado, .dos-columnas, .logistica__grid, .presupuesto__grid { grid-template-columns: 1fr; }
.paneles__grid { grid-template-columns: repeat(3, 1fr); }
/* En mobile se desactiva el recorte a la altura de la columna izquierda
(pedido de Alan): la imagen vuelve a su aspecto natural, en flujo. */
.beneficios__grid { grid-template-columns: 1fr; gap: 28px; align-items: normal; }
.beneficios__media img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
/* Mismo criterio que .beneficios__media: en mobile la foto de logística
vuelve a su aspecto natural, en flujo, debajo del texto. */
.logistica__grid { gap: 28px; }
.logistica__img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
.footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
:root {
--fs-hero: 34px; --lh-hero: 38px;
--fs-hero-lead: 19px; --lh-hero-lead: 26px;
--h-header: 84px; --h-hero: 560px;
}
.site-header__logo img { height: 40px; }
.hero .rule--light { width: 200px; margin: 24px 0 22px; }
}
@media (max-width: 690px) {
.site-topbar { display: none; }
:root {
--fs-hero: 27px; --lh-hero: 31px;
--fs-hero-lead: 16px; --lh-hero-lead: 24px;
--h-header: 70px; --h-hero: 520px;
}
.site-header__logo img { height: 34px; }
.hero .rule--light { width: 140px; margin: 20px 0 18px; }
.section { padding-block: 56px; }
.paneles__grid { grid-template-columns: 1fr 1fr; }
.footer__top { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------
FAMILIA CASSAFORMA — Conocé el resto de nuestras líneas
(pedido de Alan). Grilla de 5 cards (las otras líneas Cassaforma;
CassaSIP es esta misma web, no se lista a sí misma), cada una con
su color de marca en --linea-accent. Efecto "tecla de piano" v2:
TODA la card se hunde junta al pasar el mouse (borde, sombra,
logo, foto y fondo de color son todos descendientes del mismo
.familia-card__link escalado), así el degradé de color queda
siempre alineado con el borde mientras se achica. El texto es la
ÚNICA capa que NO se achica: usa un contra-escalado
(scale(calc(1 / var(--press-scale)))) que cancela el de su padre,
y entra con swipe desde la izquierda + fade-in medio segundo
después de que arranca el fondo de color. La foto NO hace zoom en
el hover (chocaba visualmente con el "hundido", pedido de Alan):
solo recupera color. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.familia-grid {
/* .section__head no trae separación propia (solo la agrega vía
".section__head + .section__grid", que esta grilla no usa) — se
fija acá a mano, mismo valor que esa regla general, para que quede
igual que en el prototipo (pedido de Alan: se había achicado). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
/* Timings del hover — un 50% más rápidos que la v1 (pedido de Alan). */
--press-scale: .965;
--press-dur: .167s;
--bg-dur: .3s;
--bg-delay: var(--press-dur);
--text-dur: .3s;
--text-delay: .5s;
}
.familia-card {
opacity: 0;
transform: translateY(40px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.familia-card.is-visible { opacity: 1; transform: translateY(0); }
.familia-card__link {
position: relative;
display: block;
height: 470px;
background: var(--c-white);
border: 1px solid var(--c-line);
box-shadow: var(--card-shadow);
overflow: hidden;
transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* "Tecla de piano": se achica y baja un poco, sombra se cierra en vez
de crecer (efecto de hundirse contra la superficie). */
.familia-card__link:hover,
.familia-card__link:focus-visible {
transform: scale(var(--press-scale)) translateY(3px);
box-shadow: 0 2px 10px rgba(22, 43, 62, .22);
}
.familia-card__logo {
position: relative;
z-index: 2;
height: 26px;
width: auto;
max-width: 74%;
margin: 26px auto 0;
object-fit: contain;
}
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 32px; margin-top: 23px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 31px; margin-top: 23px; }
.familia-card__media {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 72%;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
}
.familia-card__media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: bottom center;
filter: grayscale(1);
transition: filter .5s ease;
}
.familia-card__link[data-line="cassadeco"] .familia-card__media img { object-position: center bottom; }
/* Sin zoom en la foto: solo recupera color (pedido de Alan). */
.familia-card__link:hover .familia-card__media img,
.familia-card__link:focus-visible .familia-card__media img {
filter: grayscale(0);
}
/* Fondo de color: degradé del color de marca hacia transparente, 3/4
de la altura de la card. Hijo directo de .familia-card__link (no un
hermano aparte): se achica JUNTO con el resto de la card, así sus
márgenes quedan siempre alineados con el borde (pedido de Alan).
Entra con swipe de abajo hacia arriba apenas termina el "press". */
.familia-card__panel-bg {
position: absolute;
z-index: 2;
left: 0; right: 0; bottom: 0;
height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.familia-card__link:hover .familia-card__panel-bg,
.familia-card__link:focus-visible .familia-card__panel-bg {
transform: translateY(0);
}
/* Texto: la ÚNICA capa que NO se achica. Sigue siendo hijo de
.familia-card__link, pero en hover se le aplica un contra-escalado
(1 / var(--press-scale)) que cancela el de la card y lo deja
siempre a tamaño real (pedido de Alan). Entra con swipe desde la
izquierda + fade-in, medio segundo después de que arrancó el fondo
de color. */
.familia-card__text {
position: absolute;
z-index: 3;
left: 0; right: 0; bottom: 0;
padding: 18px 20px 20px;
color: var(--c-white);
opacity: 0;
transform: translateX(-26px) scale(1);
transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.familia-card__link:hover .familia-card__text,
.familia-card__link:focus-visible .familia-card__text {
opacity: 1;
transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.familia-card__claim {
display: block;
font-size: 14.6px; line-height: 1.45; font-weight: var(--fw-light);
color: var(--c-white);
}
.familia-card__cta {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 10px;
font-size: 13.8px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .03em;
color: var(--c-white);
}
.familia-card__cta svg {
width: 13px; height: 13px;
fill: none; stroke: var(--c-white); stroke-width: 2.4;
transform: translateX(0);
transition: transform .3s ease;
}
.familia-card__link:hover .familia-card__cta svg,
.familia-card__link:focus-visible .familia-card__cta svg {
transform: translateX(4px);
}
/* Filete de color arriba de la card: siempre visible, identifica la
marca aun antes del hover. Al ser ::before de .familia-card__link
también se hunde con toda la card (pedido de Alan). */
.familia-card__link::before {
content: "";
position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 4px;
background: var(--linea-accent, var(--c-navy-900));
}
@media (max-width: 1080px) {
.familia-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.familia-card__link { height: 420px; }
}
@media (max-width: 690px) {
.familia-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.familia-card__link { height: 340px; }
.familia-card__logo { height: 22px; margin-top: 20px; }
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 27px; margin-top: 18px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 26px; margin-top: 18px; }
/* En touch no hay hover real: el fondo de color y el CTA quedan
siempre visibles, para no depender de un tap sostenido. */
.familia-card__panel-bg { transform: translateY(0); transition: none; }
.familia-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
padding: 10px 14px 14px;
}
.familia-card__claim { display: none; }
.familia-card__cta { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; }
.hero__img, .destacado__img, .sobre-sip__img, .beneficios__media img { animation: none !important; transform: none; }
.hero__slide, .destacado__slide { transition-duration: .2s; }
.familia-card__link { transition-duration: .001ms; }
}
¿Por qué construir con SIP?
por columna
(son hermanos en el DOM aunque visualmente queden uno al lado del
otro), así que el combinador de hermano adyacente lo tomaba también
y el 2º párrafo (columna derecha) quedaba corrido hacia abajo. Se
anula explícitamente para dejar ambas columnas alineadas por su top
(bug reportado por Alan). */
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.dos-columnas p + p { margin-top: 0; }
/* Construcción con paneles SIP — foto a la derecha (pedido de Alan). En
reposo: efecto ken burns continuo (zoom/paneo lento) y desaturada. Al
pasar el mouse: la animación se detiene, la imagen vuelve a su
posición/escala inicial (mismo mecanismo de siempre: se quita la
animation y la transition la lleva de vuelta suavemente) y recupera
el color — mismo criterio que .linea-card__media img en cassaforma.com,
invertido a pedido de Alan. */
/* padding-bottom reducido a la mitad (42px, antes 84px): acerca esta
sección a "Paneles CassaSIP" (pedido de Alan); el resto de los
paddings de .section quedan igual. */
#sobre-sip { padding-bottom: 42px; }
.sobre-sip__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: start; }
/* Párrafo "Incorporamos una nueva línea de producción..." destacado en
negrita y color naranja del logo (pedido de Alan) */
.sobre-sip__highlight { font-weight: var(--fw-xbold); color: var(--c-accent); }
.sobre-sip__media { position: relative; overflow: hidden; aspect-ratio: 4/5; }
.sobre-sip__img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
animation: sobreSipKenBurns 16s ease-in-out infinite alternate;
transition: filter .45s ease, transform .6s ease;
}
@keyframes sobreSipKenBurns {
0% { transform: scale(1) translate(0, 0); }
100% { transform: scale(1.14) translate(-2.5%, 2%); }
}
.sobre-sip__media:hover .sobre-sip__img,
.sobre-sip__media:focus-within .sobre-sip__img {
filter: grayscale(0);
animation: none;
transform: scale(1) translate(0, 0);
}
@media (max-width: 1080px) {
.sobre-sip__grid { grid-template-columns: 1fr; gap: 32px; }
.sobre-sip__media { order: -1; max-width: 460px; margin-inline: auto; aspect-ratio: 4/3; }
}
/* Tipos de panel */
.paneles__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.panel-card {
/* sin recuadro: panel, título y botón flotan directamente sobre el fondo
de la sección (pedido de Alan) */
border: none; box-shadow: none; background: transparent; display: flex; flex-direction: column;
/* entrada tipo swipe (derecha → izquierda), escalonada vía JS
(.is-visible); velocidad aumentada otra vez (antes .5s/card cada 1000ms,
ahora .35s/card cada 220ms — pedido de Alan) */
opacity: 0; transform: translateX(70px); transition: opacity .35s ease, transform .35s ease;
}
.panel-card.is-visible { opacity: 1; transform: translateX(0); }
/* Render con fondo transparente: se muestra completo (sin recortar), centrado,
con un drop-shadow muy leve para dar un efecto 3D sutil (pedido de Alan).
max-height ampliado (antes 210px) para que la imagen use todo el ancho
disponible de la card en vez de quedar acotada por la altura: efecto neto,
~120% más grande (pedido de Alan). */
.panel-card__media { min-height: 465px; padding: 10px 8px 6px; display: flex; align-items: center; justify-content: center; }
/* El render es también un link de descarga de su ficha técnica (mismo PDF
que el botón); al pasar el mouse, zoom leve sobre la imagen (pedido de
Alan). */
.panel-card__media a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.panel-card__media img {
width: 100%; max-width: 100%; height: auto; max-height: 465px; object-fit: contain;
filter: drop-shadow(0 6px 10px rgba(22, 43, 62, .16));
transition: transform .35s ease;
}
.panel-card__media a:hover img,
.panel-card__media a:focus-visible img {
transform: scale(1.06);
}
.panel-card__body { padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.panel-card__name { font-size: 15px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; }
/* Botón "Descargar ficha" — mismo "tipo" que .sc-panel__cta en
sistema-constructivo.css (cassaforma.com): .btn.btn--navy de base,
ancho completo y compacto. Usar esta combinación cada vez que se
agregue un botón de descarga de ficha en el sitio (pedido de Alan). */
.panel-card__cta { margin-top: auto; width: 100%; height: 40px; font-size: 14.7px; padding: 0 12px; }
/* Adaptables a cada proyecto — texto en 2 columnas: cartera de proyectos a la
izquierda, y el párrafo de la tecnología OSB destacado en un recuadro con
fondo blanco y en negrita, a la derecha (pedido de Alan). */
.adaptables__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.adaptables__highlight {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-med); /* antes fw-xbold: menos peso (pedido de Alan) */
padding: 22px 26px; border-radius: 4px; box-shadow: var(--card-shadow);
}
/* Adaptables a cada proyecto — foto + tabla de resistencias (pedido de Alan).
margin-top +20% (antes 46px) para separar más el render del texto de
arriba. */
.adaptables__grid { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: center; margin-top: 55px; }
/* Render con fondo transparente: se muestra completo, sin recortar ni caja
fija, con un drop-shadow muy leve (mismo criterio que .panel-card__media).
Se desplaza hacia la izquierda hasta sobresalir un 10% del ancho de
contenido (pedido de Alan): crece hacia la izquierda, ancla derecha
sin cambios (mismo criterio que .panel-corte__sandwich). */
.adaptables__media {
display: flex; align-items: center; justify-content: center;
margin-left: calc(-1 * var(--w-content) * 0.10);
width: calc(100% + var(--w-content) * 0.10);
}
.adaptables__media img {
width: 100%; height: auto; max-width: 100%;
filter: drop-shadow(0 8px 14px rgba(22, 43, 62, .16));
}
/* Tabla de especificaciones: misma paleta navy/blanco y tipografía Heebo
del resto del sitio. Columna izquierda (propiedad) en navy —el mismo azul
del botón "Descargar ficha"— con texto blanco, columna derecha (valor)
alterna blanco/gris banda. Ninguna fuente en negrita (pedido de Alan). Al
pasar el mouse por una fila, se resalta en navy oscuro (izquierda) y en la
banda gris (derecha) para que se lea qué fila se está mirando. */
.specs-table-wrap { border: var(--border); border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table th, .specs-table td { padding: 15px 18px; font-size: 14.5px; line-height: 1.3; transition: background-color .2s ease, color .2s ease; }
.specs-table th {
background: var(--c-navy); color: var(--c-white);
font-weight: var(--fw-reg); text-align: left; width: 60%;
}
.specs-table td {
background: var(--c-white); color: var(--c-navy-900);
font-weight: var(--fw-light); text-align: center;
}
.specs-table tr:nth-child(even) td { background: var(--c-band); }
.specs-table tr:not(:last-child) th,
.specs-table tr:not(:last-child) td { border-bottom: 1px solid rgba(255,255,255,.08); }
.specs-table tr:hover th { background: var(--c-navy-900); }
.specs-table tr:hover td { background: var(--c-band); color: var(--c-navy); }
/* Especificaciones técnicas (debajo de "Tipos de panel") — mismo criterio
de diseño que la tabla de Adaptables: acento navy, sin negritas. Tres
grupos (Paneles / Placas / Accesorios) con una etiqueta lateral vertical,
cada uno con sus sub-tablas de medidas (pedido de Alan, ref. cassasip.com). */
.spec-groups { display: flex; flex-direction: column; gap: 34px; margin-top: 92px; } /* separación de los productos ×2 (antes 46px), pedido de Alan */
.spec-group { display: flex; align-items: stretch; gap: 22px; }
.spec-group__label {
flex-shrink: 0; width: 46px; border-radius: 4px;
background: var(--c-accent); color: var(--c-white); /* naranja del logo CassaSIP + texto blanco (pedido de Alan) */
display: flex; align-items: center; justify-content: center;
writing-mode: vertical-rl; transform: rotate(180deg);
font-size: 15.6px; /* 13px +20% (pedido de Alan) */
font-weight: var(--fw-reg); text-transform: uppercase; letter-spacing: .1em;
}
.spec-group__tables { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.spec-block__title { font-size: 14.5px; font-weight: var(--fw-reg); color: var(--c-navy-900); margin-bottom: 10px; }
.spec-block__title .spec-block__note { font-weight: var(--fw-light); color: var(--c-navy); font-size: 13px; }
.spec-block .specs-table-wrap { overflow-x: auto; }
.specs-table--grid { min-width: 560px; }
.specs-table--grid th, .specs-table--grid td { padding: 12px 14px; font-size: 13.5px; white-space: nowrap; }
.specs-table--grid thead th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: center;
}
.specs-table--grid thead th:first-child { background: var(--c-navy-900); }
.specs-table--grid tbody th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: left; width: auto;
}
.specs-table--grid tbody td {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-light); text-align: center;
}
.specs-table--grid tbody tr:nth-child(even) td { background: var(--c-band); }
.specs-table--grid tbody tr:hover th { background: var(--c-navy-900); }
.specs-table--grid tbody tr:hover td { background: var(--c-band); color: var(--c-navy); }
@media (max-width: 690px) {
.spec-group { flex-direction: column; gap: 10px; }
.spec-group__label {
width: 100%; writing-mode: horizontal-tb; transform: none; padding: 8px; height: auto;
}
}
@media (max-width: 1080px) {
.adaptables__intro { grid-template-columns: 1fr; gap: 20px; }
.adaptables__grid { grid-template-columns: 1fr; gap: 28px; }
/* en una sola columna el desborde a la izquierda no tiene sentido
(no queda margen de página del que sobresalir): se desactiva */
.adaptables__media { margin-left: 0; width: 100%; max-width: 460px; margin-inline: auto; }
.specs-table-wrap { max-width: 460px; margin-inline: auto; width: 100%; }
}
/* ------------------------------------------------------------
PERFILES — Contanos qué necesitás (pedido de Ceci vía Alan).
3 cards con foto en blanco y negro tapada por una "cortina" navy con
textura diagonal sutil; al hacer hover la cortina se corre hacia la
derecha con clip-path (no se desvanece, se desliza), la foto recupera
color + zoom leve, aparece una línea de acento naranja creciendo bajo
el título y la flecha se desplaza. Entrada: swipe hacia arriba
escalonado al entrar en viewport (ver "Perfiles CassaSIP" en
js/script.js), misma familia de efecto que .panel-card pero vertical
en vez de lateral, para variar. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.perfiles-sip__grid {
/* mismo ajuste que .familia-grid: .section__head no trae separación
propia acá (pedido de Alan: se había achicado respecto al prototipo). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.perfil-sip-card {
opacity: 0;
transform: translateY(46px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.perfil-sip-card.is-visible { opacity: 1; transform: translateY(0); }
.perfil-sip-card__link {
position: relative;
display: block;
border: var(--border);
box-shadow: var(--card-shadow);
transition: box-shadow var(--t-base), transform var(--t-base);
}
.perfil-sip-card__link:hover,
.perfil-sip-card__link:focus-visible {
box-shadow: 0 8px 30px rgba(22, 43, 62, .16);
transform: translateY(-4px);
}
.perfil-sip-card__media {
position: relative;
height: 300px;
overflow: hidden;
}
.perfil-sip-card__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.05);
transform: scale(1.03);
transition: transform .6s ease, filter .6s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__img,
.perfil-sip-card__link:focus-visible .perfil-sip-card__img {
filter: grayscale(0) contrast(1);
transform: scale(1.1);
}
.perfil-sip-card__curtain {
position: absolute; inset: 0;
background:
repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px),
linear-gradient(150deg, var(--c-navy-900) 0%, var(--c-navy) 100%);
clip-path: inset(0 0 0 0);
transition: clip-path .55s cubic-bezier(.65,0,.35,1);
}
.perfil-sip-card__link:hover .perfil-sip-card__curtain,
.perfil-sip-card__link:focus-visible .perfil-sip-card__curtain {
clip-path: inset(0 0 0 100%);
}
.perfil-sip-card__num {
position: absolute; top: 18px; left: 20px;
font-size: 13px; font-weight: var(--fw-xbold);
color: rgba(255,255,255,.55);
letter-spacing: .06em;
transition: opacity .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__num,
.perfil-sip-card__link:focus-visible .perfil-sip-card__num { opacity: 0; }
.perfil-sip-card__body {
position: relative;
background: var(--c-white);
padding: 22px 22px 26px;
}
.perfil-sip-card__accent {
display: block;
height: 3px;
width: 0%;
background: var(--c-accent);
transition: width .45s ease;
margin-bottom: 14px;
}
.perfil-sip-card__link:hover .perfil-sip-card__accent,
.perfil-sip-card__link:focus-visible .perfil-sip-card__accent { width: 100%; }
.perfil-sip-card__label {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
font-size: 15px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .02em;
color: var(--c-navy-900);
}
.perfil-sip-card__label svg {
width: 18px; height: 18px; flex-shrink: 0;
fill: none; stroke: var(--c-navy-900); stroke-width: 2;
transform: translateX(0);
transition: transform .35s ease, stroke .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__label svg,
.perfil-sip-card__link:focus-visible .perfil-sip-card__label svg {
transform: translateX(6px);
stroke: var(--c-accent);
}
.perfil-sip-card__desc {
margin-top: 8px;
font-size: 14.7px; line-height: 1.55; font-weight: var(--fw-light);
color: var(--c-gray);
}
@media (max-width: 1080px) {
.perfiles-sip__grid { grid-template-columns: 1fr; gap: 20px; }
.perfil-sip-card { transform: translateY(28px); }
.perfil-sip-card__media { height: 260px; }
}
/* ------------------------------------------------------------
TU PROYECTO — CassaSIP (pedido de Alan).
1 card "hero" a ancho completo (mitad de alto que una card de
grilla) + grilla 2x2 con las 4 restantes. Título siempre
visible sobre la foto; párrafo + CTA revelados al hover con
swipe desde la izquierda. Hover "tecla de piano" con zoom IN:
toda la card crece y el fondo de color sube al mismo tiempo
(--bg-delay: 0s); el texto arranca cuando ese swipe del fondo
va por la mitad (--text-delay: .15s, 50% de --bg-dur), para que
no se sienta "atrasado". Mismo mecanismo de contra-escala que
Familia Cassaforma para que el texto no crezca junto con la
card.
------------------------------------------------------------ */
.tuproyecto-grid {
margin-top: 46px;
list-style: none; padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
--press-scale: 1.035;
--press-dur: .3s;
--bg-dur: .3s;
--bg-delay: 0s;
--text-dur: .3s;
--text-delay: .15s; /* arranca cuando el swipe del fondo va por la mitad (50% de .3s) */
}
.tuproyecto-card--hero { grid-column: 1 / -1; }
.tuproyecto-card { opacity: 0; transform: translateY(40px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1); }
.tuproyecto-card.is-visible { opacity: 1; transform: translateY(0); }
.tuproyecto-card__link {
position: relative; display: block;
aspect-ratio: 2.1573 / 1;
background: var(--c-white); border: 1px solid var(--c-line); box-shadow: var(--card-shadow);
overflow: hidden; transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* Card hero: mismo ancho, la mitad del alto proporcional (el doble de "achatada") */
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 4.3147 / 1; }
.tuproyecto-card__link:hover, .tuproyecto-card__link:focus-visible {
transform: scale(var(--press-scale));
box-shadow: 0 14px 34px rgba(22, 43, 62, .28);
z-index: 5;
}
.tuproyecto-card__media { position: absolute; inset: 0; }
.tuproyecto-card__media img {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: grayscale(1); transition: filter .5s ease;
}
.tuproyecto-card__link:hover .tuproyecto-card__media img,
.tuproyecto-card__link:focus-visible .tuproyecto-card__media img { filter: grayscale(0); }
/* Scrim permanente para que el título siempre se lea */
.tuproyecto-card__link::after {
content: ""; position: absolute; z-index: 1; inset: 0;
background: linear-gradient(160deg, rgba(22,43,62,.55) 0%, rgba(22,43,62,.22) 45%, rgba(22,43,62,.05) 70%);
}
.tuproyecto-card__title {
position: relative; z-index: 2; display: block;
padding: 30px 0 0 34px;
font-size: 25.6px; line-height: 1.2; font-weight: var(--fw-light); color: var(--c-white);
}
/* Filete arriba en el naranja del logo CassaSIP, para resaltar cada card */
.tuproyecto-card__link::before {
content: ""; position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 2px;
background: var(--c-accent);
}
.tuproyecto-card__panel-bg {
position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__panel-bg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__panel-bg { transform: translateY(0); }
.tuproyecto-card__text {
position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 22px 34px 26px;
max-width: 560px;
color: var(--c-white); opacity: 0;
transform: translateX(-26px) scale(1); transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__text,
.tuproyecto-card__link:focus-visible .tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.tuproyecto-card__claim { display: block; font-size: 19.2px; line-height: 1.5; font-weight: var(--fw-light); color: var(--c-white); }
.tuproyecto-card__cta {
display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
font-size: 16.8px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; color: var(--c-white);
}
.tuproyecto-card__cta svg { width: 16.8px; height: 16.8px; fill: none; stroke: var(--c-white); stroke-width: 2.4; transform: translateX(0); transition: transform .3s ease; }
.tuproyecto-card__link:hover .tuproyecto-card__cta svg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__cta svg { transform: translateX(4px); }
@media (max-width: 900px) {
.tuproyecto-grid { grid-template-columns: 1fr; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 2.1573 / 1; }
}
@media (max-width: 690px) {
.tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card__title { font-size: 19.2px; padding: 20px 0 0 20px; }
.tuproyecto-card__text { padding: 16px 20px 20px; }
/* En touch no hay hover real: panel y CTA quedan siempre visibles,
igual que en Familia Cassaforma (el párrafo se oculta para que
no choque con el título en cards bajas). */
.tuproyecto-card__panel-bg { transform: translateY(0); transition: none; }
.tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
}
.tuproyecto-card__claim { display: none; }
.tuproyecto-card__cta { margin-top: 0; }
}
/* Barra "beneficios clave" — mismas medidas que .sc-ahorros de
cassaforma.com (sistema-constructivo.css, bloque GRANDES AHORROS):
3 columnas centradas, ícono circular de 71px (ya viene con su color
en el propio .svg), separador vertical negro entre columnas. */
.ahorros { padding: 70px 0 62px; text-align: center; } /* +10% arriba y abajo (antes 64px/56px), pedido de Alan */
.ahorros__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.ahorro { display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 24px; }
.ahorro + .ahorro::before {
content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
width: 2px; background: var(--c-black);
}
.ahorro__icon { display: block; width: 71px; height: 71px; margin: 0 auto 20px; }
.ahorro__label { font-size: 23px; line-height: 1.3; font-weight: var(--fw-light); color: var(--c-navy); }
@media (max-width: 690px) {
.ahorros__grid { grid-template-columns: 1fr; row-gap: 32px; }
.ahorro + .ahorro::before { display: none; }
.ahorro__label { font-size: 19px; }
}
/* Beneficios (3 pilares) */
/* Beneficios de la construcción SIP — 2 columnas: pilares apilados con
viñeta numerada + logos de certificaciones a la izquierda, imagen a la
derecha (pedido de Alan). Separación entre columnas ×2 (antes 60px).
La imagen de la derecha no aporta su alto natural al cálculo de la fila
(queda position:absolute dentro de .beneficios__media, que por eso no
tiene alto propio): así la altura de la fila la fija SOLO la columna
izquierda (pilares + logos), y la imagen se recorta arriba/abajo con
object-fit:cover para igualar siempre esa altura — salvo en mobile,
donde se desactiva (ver media query). */
.beneficios__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; align-items: stretch; }
.beneficios__left { display: flex; flex-direction: column; }
.pilares__grid { display: flex; flex-direction: column; gap: 32px; }
.pilar__head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.pilar__num {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
background: var(--c-navy); color: var(--c-white);
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: var(--fw-xbold);
}
.pilar__title { font-size: 19px; font-weight: var(--fw-xbold); color: var(--c-navy-900); text-transform: uppercase; margin: 0; }
.pilar__text { margin-top: 0; font-size: 15.5px; line-height: 1.6; }
/* Logos de certificaciones — una sola imagen ya compuesta con los 6 logos
(2 filas x 3 columnas), mismo ancho que los párrafos de arriba (pedido
de Alan: usar la imagen completa en vez de 6 Usualmente sus paneles llegarán en un camión de plancha. Los paneles se deben descargar y colocar en una zona limpia y plana con suficiente espacio para poderlos acomodar (un montacargas le sería útil para agilizar el proceso). Recomendamos que al descargar los paneles, se los agrupe para que tenga más espacio para movilizarlos y organizarlos. Los paneles deben almacenarse cerca del lugar que va a ser su destino final. Colocar al menos 3 reglas de soporte de un máximo de 4' en el centro debajo de los paneles, para asegurarse que se almacenen de forma plana. Las reglas deben ser de por lo menos 3½" de ancho. separadas). */
.beneficios__certs {
margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--c-line);
}
.beneficios__certs img { display: block; width: 100%; height: auto; }
.beneficios__media { position: relative; overflow: hidden; border-radius: 4px; } /* recorta el zoom del ken burns dentro de su propio cuadro (mismo criterio que .sobre-sip__media) */
.beneficios__media img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
animation: sobreSipKenBurns 18s ease-in-out infinite alternate; /* mismo ken burns que la foto de "Construcción con paneles SIP" */
}
/* ¿Por qué construir con SIP? — imagen del despiece a la izquierda, lista
de items con bullets a la derecha. Tipografía tomada de la lista de capas
de cassaforma.com (sistema-constructivo.css: .sc-panellosa__label/__item):
Heebo Light, navy, bullet "•" y divisor fino bajo cada renglón. */
.porque-sip { display: grid; grid-template-columns: minmax(300px, 460px) 1fr; gap: 60px; align-items: center; margin-top: 46px; }
.porque-sip__media img { width: 100%; display: block; }
.porque-sip__list {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto);
column-gap: 48px;
}
.porque-sip__list li {
padding: 14px 0;
border-bottom: 1px solid rgba(22, 43, 62, .15);
font-size: 19px; letter-spacing: .02em;
font-weight: var(--fw-light); color: var(--c-navy);
}
.porque-sip__list li::before { content: "\2022 "; }
@media (max-width: 1080px) {
.porque-sip { grid-template-columns: 1fr; }
.porque-sip__media { max-width: 460px; margin-inline: auto; }
}
@media (max-width: 690px) {
.porque-sip__list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
}
/* Logística — texto (Logística + Almacenamiento apilados) a la izquierda,
foto en blanco y negro con ken burns a la derecha (pedido de Alan). La
imagen no aporta su alto natural al cálculo de la fila (position:absolute
dentro de .logistica__media, sin alto propio): así la altura de la fila
la fija SOLO la columna de texto, y la foto se recorta con object-fit:cover
para igualar siempre esa altura — mismo criterio que .beneficios__media. */
.logistica__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: stretch; }
.logistica__text { display: flex; flex-direction: column; gap: 32px; }
.logistica__item h3 { font-size: 19px; font-weight: var(--fw-xbold); text-transform: uppercase; color: var(--c-navy-900); margin-bottom: 12px; }
.logistica__media { position: relative; overflow: hidden; border-radius: 4px; }
.logistica__img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
transition: filter .45s ease;
/* Es una sola foto fija (no un carrusel): un zoom-in ÚNICO de 10s que
termina y se queda ahí (forwards, sin infinite/alternate) — solo
"ida", nunca vuelve para atrás y nunca vuelve a saltar (pedido de
Alan). */
animation: destacadoKenBurns 10s ease-out forwards;
}
.logistica__media:hover .logistica__img { filter: grayscale(0); }
/* FAQ */
.faq { max-width: 880px; }
.faq__item { border-bottom: var(--border); }
.faq__item summary {
cursor: pointer; list-style: none; padding: 20px 0;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
font-size: 16.5px; font-weight: var(--fw-med); color: var(--c-navy-900);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
content: "+"; font-size: 22px; font-weight: var(--fw-light); color: var(--c-navy); flex-shrink: 0;
}
.faq__item[open] summary::after { content: "–"; }
.faq__body { padding: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: var(--c-gray); }
.faq__body ul { list-style: disc; padding-left: 20px; margin-top: 10px; }
.faq__body li { margin-bottom: 6px; }
.faq__body p + p { margin-top: 12px; }
/* Proceso constructivo — solo título + video a todo el ancho del
contenido (pedido de Alan; antes había una lista de pasos numerados). */
.proceso__video { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.proceso__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Capacitación */
.capacitacion { text-align: center; }
.capacitacion h2 { max-width: 620px; margin-inline: auto; }
.capacitacion .btn { margin-top: 30px; }
/* Presupuesto / form */
.presupuesto__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.form__field { margin-bottom: 16px; }
.form__label { display: block; font-size: 14px; font-weight: var(--fw-med); margin-bottom: 7px; }
.form__input, .form__select {
display: block; width: 100%; height: 46px; padding: 0 14px;
border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-navy-900);
font-family: var(--ff); font-size: 15px;
}
.form__input:focus, .form__select:focus { border-color: var(--c-navy); outline: none; }
.form__submit { margin-top: 6px; width: 100%; }
/* ------------------------------------------------------------
FOOTER
------------------------------------------------------------ */
.footer { background: var(--c-navy-900); color: var(--c-white); padding-block: 64px 32px; }
.footer__top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.footer__brand img { height: 40px; }
.footer__brand p { margin-top: 18px; font-size: 14px; color: rgba(255,255,255,.65); max-width: 260px; }
.footer__col h3 { font-size: 13px; font-weight: var(--fw-xbold); letter-spacing: .06em; text-transform: uppercase; color: var(--c-white); margin-bottom: 16px; }
.footer__col ul li { margin-bottom: 10px; }
.footer__col a { font-size: 14px; color: rgba(255,255,255,.75); }
.footer__col a:hover { color: var(--c-white); }
.footer__bottom {
margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15);
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
font-size: 13.5px; color: rgba(255,255,255,.6);
}
.footer__social { display: flex; gap: 14px; }
.footer__social svg { width: 16px; height: 16px; fill: rgba(255,255,255,.75); }
.footer__social a:hover svg { fill: var(--c-white); }
.footer__scrolltop { font-size: 13px; color: rgba(255,255,255,.6); }
.footer__scrolltop:hover { color: var(--c-white); }
/* ------------------------------------------------------------
RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 1169px) {
:root {
--fs-hero: 42px; --lh-hero: 46px;
--fs-hero-lead: 23px; --lh-hero-lead: 28px;
--h-hero: 660px;
}
.site-nav { gap: 15px; }
.site-nav__link { font-size: 13px; }
}
@media (max-width: 1080px) {
.site-nav { display: none; }
.destacado, .dos-columnas, .logistica__grid, .presupuesto__grid { grid-template-columns: 1fr; }
.paneles__grid { grid-template-columns: repeat(3, 1fr); }
/* En mobile se desactiva el recorte a la altura de la columna izquierda
(pedido de Alan): la imagen vuelve a su aspecto natural, en flujo. */
.beneficios__grid { grid-template-columns: 1fr; gap: 28px; align-items: normal; }
.beneficios__media img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
/* Mismo criterio que .beneficios__media: en mobile la foto de logística
vuelve a su aspecto natural, en flujo, debajo del texto. */
.logistica__grid { gap: 28px; }
.logistica__img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
.footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
:root {
--fs-hero: 34px; --lh-hero: 38px;
--fs-hero-lead: 19px; --lh-hero-lead: 26px;
--h-header: 84px; --h-hero: 560px;
}
.site-header__logo img { height: 40px; }
.hero .rule--light { width: 200px; margin: 24px 0 22px; }
}
@media (max-width: 690px) {
.site-topbar { display: none; }
:root {
--fs-hero: 27px; --lh-hero: 31px;
--fs-hero-lead: 16px; --lh-hero-lead: 24px;
--h-header: 70px; --h-hero: 520px;
}
.site-header__logo img { height: 34px; }
.hero .rule--light { width: 140px; margin: 20px 0 18px; }
.section { padding-block: 56px; }
.paneles__grid { grid-template-columns: 1fr 1fr; }
.footer__top { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------
FAMILIA CASSAFORMA — Conocé el resto de nuestras líneas
(pedido de Alan). Grilla de 5 cards (las otras líneas Cassaforma;
CassaSIP es esta misma web, no se lista a sí misma), cada una con
su color de marca en --linea-accent. Efecto "tecla de piano" v2:
TODA la card se hunde junta al pasar el mouse (borde, sombra,
logo, foto y fondo de color son todos descendientes del mismo
.familia-card__link escalado), así el degradé de color queda
siempre alineado con el borde mientras se achica. El texto es la
ÚNICA capa que NO se achica: usa un contra-escalado
(scale(calc(1 / var(--press-scale)))) que cancela el de su padre,
y entra con swipe desde la izquierda + fade-in medio segundo
después de que arranca el fondo de color. La foto NO hace zoom en
el hover (chocaba visualmente con el "hundido", pedido de Alan):
solo recupera color. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.familia-grid {
/* .section__head no trae separación propia (solo la agrega vía
".section__head + .section__grid", que esta grilla no usa) — se
fija acá a mano, mismo valor que esa regla general, para que quede
igual que en el prototipo (pedido de Alan: se había achicado). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
/* Timings del hover — un 50% más rápidos que la v1 (pedido de Alan). */
--press-scale: .965;
--press-dur: .167s;
--bg-dur: .3s;
--bg-delay: var(--press-dur);
--text-dur: .3s;
--text-delay: .5s;
}
.familia-card {
opacity: 0;
transform: translateY(40px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.familia-card.is-visible { opacity: 1; transform: translateY(0); }
.familia-card__link {
position: relative;
display: block;
height: 470px;
background: var(--c-white);
border: 1px solid var(--c-line);
box-shadow: var(--card-shadow);
overflow: hidden;
transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* "Tecla de piano": se achica y baja un poco, sombra se cierra en vez
de crecer (efecto de hundirse contra la superficie). */
.familia-card__link:hover,
.familia-card__link:focus-visible {
transform: scale(var(--press-scale)) translateY(3px);
box-shadow: 0 2px 10px rgba(22, 43, 62, .22);
}
.familia-card__logo {
position: relative;
z-index: 2;
height: 26px;
width: auto;
max-width: 74%;
margin: 26px auto 0;
object-fit: contain;
}
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 32px; margin-top: 23px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 31px; margin-top: 23px; }
.familia-card__media {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 72%;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
}
.familia-card__media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: bottom center;
filter: grayscale(1);
transition: filter .5s ease;
}
.familia-card__link[data-line="cassadeco"] .familia-card__media img { object-position: center bottom; }
/* Sin zoom en la foto: solo recupera color (pedido de Alan). */
.familia-card__link:hover .familia-card__media img,
.familia-card__link:focus-visible .familia-card__media img {
filter: grayscale(0);
}
/* Fondo de color: degradé del color de marca hacia transparente, 3/4
de la altura de la card. Hijo directo de .familia-card__link (no un
hermano aparte): se achica JUNTO con el resto de la card, así sus
márgenes quedan siempre alineados con el borde (pedido de Alan).
Entra con swipe de abajo hacia arriba apenas termina el "press". */
.familia-card__panel-bg {
position: absolute;
z-index: 2;
left: 0; right: 0; bottom: 0;
height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.familia-card__link:hover .familia-card__panel-bg,
.familia-card__link:focus-visible .familia-card__panel-bg {
transform: translateY(0);
}
/* Texto: la ÚNICA capa que NO se achica. Sigue siendo hijo de
.familia-card__link, pero en hover se le aplica un contra-escalado
(1 / var(--press-scale)) que cancela el de la card y lo deja
siempre a tamaño real (pedido de Alan). Entra con swipe desde la
izquierda + fade-in, medio segundo después de que arrancó el fondo
de color. */
.familia-card__text {
position: absolute;
z-index: 3;
left: 0; right: 0; bottom: 0;
padding: 18px 20px 20px;
color: var(--c-white);
opacity: 0;
transform: translateX(-26px) scale(1);
transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.familia-card__link:hover .familia-card__text,
.familia-card__link:focus-visible .familia-card__text {
opacity: 1;
transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.familia-card__claim {
display: block;
font-size: 14.6px; line-height: 1.45; font-weight: var(--fw-light);
color: var(--c-white);
}
.familia-card__cta {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 10px;
font-size: 13.8px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .03em;
color: var(--c-white);
}
.familia-card__cta svg {
width: 13px; height: 13px;
fill: none; stroke: var(--c-white); stroke-width: 2.4;
transform: translateX(0);
transition: transform .3s ease;
}
.familia-card__link:hover .familia-card__cta svg,
.familia-card__link:focus-visible .familia-card__cta svg {
transform: translateX(4px);
}
/* Filete de color arriba de la card: siempre visible, identifica la
marca aun antes del hover. Al ser ::before de .familia-card__link
también se hunde con toda la card (pedido de Alan). */
.familia-card__link::before {
content: "";
position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 4px;
background: var(--linea-accent, var(--c-navy-900));
}
@media (max-width: 1080px) {
.familia-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.familia-card__link { height: 420px; }
}
@media (max-width: 690px) {
.familia-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.familia-card__link { height: 340px; }
.familia-card__logo { height: 22px; margin-top: 20px; }
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 27px; margin-top: 18px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 26px; margin-top: 18px; }
/* En touch no hay hover real: el fondo de color y el CTA quedan
siempre visibles, para no depender de un tap sostenido. */
.familia-card__panel-bg { transform: translateY(0); transition: none; }
.familia-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
padding: 10px 14px 14px;
}
.familia-card__claim { display: none; }
.familia-card__cta { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; }
.hero__img, .destacado__img, .sobre-sip__img, .beneficios__media img { animation: none !important; transform: none; }
.hero__slide, .destacado__slide { transition-duration: .2s; }
.familia-card__link { transition-duration: .001ms; }
}
Manejo de los paneles en obra
Logística
Almacenamiento
por columna
(son hermanos en el DOM aunque visualmente queden uno al lado del
otro), así que el combinador de hermano adyacente lo tomaba también
y el 2º párrafo (columna derecha) quedaba corrido hacia abajo. Se
anula explícitamente para dejar ambas columnas alineadas por su top
(bug reportado por Alan). */
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.dos-columnas p + p { margin-top: 0; }
/* Construcción con paneles SIP — foto a la derecha (pedido de Alan). En
reposo: efecto ken burns continuo (zoom/paneo lento) y desaturada. Al
pasar el mouse: la animación se detiene, la imagen vuelve a su
posición/escala inicial (mismo mecanismo de siempre: se quita la
animation y la transition la lleva de vuelta suavemente) y recupera
el color — mismo criterio que .linea-card__media img en cassaforma.com,
invertido a pedido de Alan. */
/* padding-bottom reducido a la mitad (42px, antes 84px): acerca esta
sección a "Paneles CassaSIP" (pedido de Alan); el resto de los
paddings de .section quedan igual. */
#sobre-sip { padding-bottom: 42px; }
.sobre-sip__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: start; }
/* Párrafo "Incorporamos una nueva línea de producción..." destacado en
negrita y color naranja del logo (pedido de Alan) */
.sobre-sip__highlight { font-weight: var(--fw-xbold); color: var(--c-accent); }
.sobre-sip__media { position: relative; overflow: hidden; aspect-ratio: 4/5; }
.sobre-sip__img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
animation: sobreSipKenBurns 16s ease-in-out infinite alternate;
transition: filter .45s ease, transform .6s ease;
}
@keyframes sobreSipKenBurns {
0% { transform: scale(1) translate(0, 0); }
100% { transform: scale(1.14) translate(-2.5%, 2%); }
}
.sobre-sip__media:hover .sobre-sip__img,
.sobre-sip__media:focus-within .sobre-sip__img {
filter: grayscale(0);
animation: none;
transform: scale(1) translate(0, 0);
}
@media (max-width: 1080px) {
.sobre-sip__grid { grid-template-columns: 1fr; gap: 32px; }
.sobre-sip__media { order: -1; max-width: 460px; margin-inline: auto; aspect-ratio: 4/3; }
}
/* Tipos de panel */
.paneles__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.panel-card {
/* sin recuadro: panel, título y botón flotan directamente sobre el fondo
de la sección (pedido de Alan) */
border: none; box-shadow: none; background: transparent; display: flex; flex-direction: column;
/* entrada tipo swipe (derecha → izquierda), escalonada vía JS
(.is-visible); velocidad aumentada otra vez (antes .5s/card cada 1000ms,
ahora .35s/card cada 220ms — pedido de Alan) */
opacity: 0; transform: translateX(70px); transition: opacity .35s ease, transform .35s ease;
}
.panel-card.is-visible { opacity: 1; transform: translateX(0); }
/* Render con fondo transparente: se muestra completo (sin recortar), centrado,
con un drop-shadow muy leve para dar un efecto 3D sutil (pedido de Alan).
max-height ampliado (antes 210px) para que la imagen use todo el ancho
disponible de la card en vez de quedar acotada por la altura: efecto neto,
~120% más grande (pedido de Alan). */
.panel-card__media { min-height: 465px; padding: 10px 8px 6px; display: flex; align-items: center; justify-content: center; }
/* El render es también un link de descarga de su ficha técnica (mismo PDF
que el botón); al pasar el mouse, zoom leve sobre la imagen (pedido de
Alan). */
.panel-card__media a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.panel-card__media img {
width: 100%; max-width: 100%; height: auto; max-height: 465px; object-fit: contain;
filter: drop-shadow(0 6px 10px rgba(22, 43, 62, .16));
transition: transform .35s ease;
}
.panel-card__media a:hover img,
.panel-card__media a:focus-visible img {
transform: scale(1.06);
}
.panel-card__body { padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.panel-card__name { font-size: 15px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; }
/* Botón "Descargar ficha" — mismo "tipo" que .sc-panel__cta en
sistema-constructivo.css (cassaforma.com): .btn.btn--navy de base,
ancho completo y compacto. Usar esta combinación cada vez que se
agregue un botón de descarga de ficha en el sitio (pedido de Alan). */
.panel-card__cta { margin-top: auto; width: 100%; height: 40px; font-size: 14.7px; padding: 0 12px; }
/* Adaptables a cada proyecto — texto en 2 columnas: cartera de proyectos a la
izquierda, y el párrafo de la tecnología OSB destacado en un recuadro con
fondo blanco y en negrita, a la derecha (pedido de Alan). */
.adaptables__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.adaptables__highlight {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-med); /* antes fw-xbold: menos peso (pedido de Alan) */
padding: 22px 26px; border-radius: 4px; box-shadow: var(--card-shadow);
}
/* Adaptables a cada proyecto — foto + tabla de resistencias (pedido de Alan).
margin-top +20% (antes 46px) para separar más el render del texto de
arriba. */
.adaptables__grid { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: center; margin-top: 55px; }
/* Render con fondo transparente: se muestra completo, sin recortar ni caja
fija, con un drop-shadow muy leve (mismo criterio que .panel-card__media).
Se desplaza hacia la izquierda hasta sobresalir un 10% del ancho de
contenido (pedido de Alan): crece hacia la izquierda, ancla derecha
sin cambios (mismo criterio que .panel-corte__sandwich). */
.adaptables__media {
display: flex; align-items: center; justify-content: center;
margin-left: calc(-1 * var(--w-content) * 0.10);
width: calc(100% + var(--w-content) * 0.10);
}
.adaptables__media img {
width: 100%; height: auto; max-width: 100%;
filter: drop-shadow(0 8px 14px rgba(22, 43, 62, .16));
}
/* Tabla de especificaciones: misma paleta navy/blanco y tipografía Heebo
del resto del sitio. Columna izquierda (propiedad) en navy —el mismo azul
del botón "Descargar ficha"— con texto blanco, columna derecha (valor)
alterna blanco/gris banda. Ninguna fuente en negrita (pedido de Alan). Al
pasar el mouse por una fila, se resalta en navy oscuro (izquierda) y en la
banda gris (derecha) para que se lea qué fila se está mirando. */
.specs-table-wrap { border: var(--border); border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table th, .specs-table td { padding: 15px 18px; font-size: 14.5px; line-height: 1.3; transition: background-color .2s ease, color .2s ease; }
.specs-table th {
background: var(--c-navy); color: var(--c-white);
font-weight: var(--fw-reg); text-align: left; width: 60%;
}
.specs-table td {
background: var(--c-white); color: var(--c-navy-900);
font-weight: var(--fw-light); text-align: center;
}
.specs-table tr:nth-child(even) td { background: var(--c-band); }
.specs-table tr:not(:last-child) th,
.specs-table tr:not(:last-child) td { border-bottom: 1px solid rgba(255,255,255,.08); }
.specs-table tr:hover th { background: var(--c-navy-900); }
.specs-table tr:hover td { background: var(--c-band); color: var(--c-navy); }
/* Especificaciones técnicas (debajo de "Tipos de panel") — mismo criterio
de diseño que la tabla de Adaptables: acento navy, sin negritas. Tres
grupos (Paneles / Placas / Accesorios) con una etiqueta lateral vertical,
cada uno con sus sub-tablas de medidas (pedido de Alan, ref. cassasip.com). */
.spec-groups { display: flex; flex-direction: column; gap: 34px; margin-top: 92px; } /* separación de los productos ×2 (antes 46px), pedido de Alan */
.spec-group { display: flex; align-items: stretch; gap: 22px; }
.spec-group__label {
flex-shrink: 0; width: 46px; border-radius: 4px;
background: var(--c-accent); color: var(--c-white); /* naranja del logo CassaSIP + texto blanco (pedido de Alan) */
display: flex; align-items: center; justify-content: center;
writing-mode: vertical-rl; transform: rotate(180deg);
font-size: 15.6px; /* 13px +20% (pedido de Alan) */
font-weight: var(--fw-reg); text-transform: uppercase; letter-spacing: .1em;
}
.spec-group__tables { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.spec-block__title { font-size: 14.5px; font-weight: var(--fw-reg); color: var(--c-navy-900); margin-bottom: 10px; }
.spec-block__title .spec-block__note { font-weight: var(--fw-light); color: var(--c-navy); font-size: 13px; }
.spec-block .specs-table-wrap { overflow-x: auto; }
.specs-table--grid { min-width: 560px; }
.specs-table--grid th, .specs-table--grid td { padding: 12px 14px; font-size: 13.5px; white-space: nowrap; }
.specs-table--grid thead th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: center;
}
.specs-table--grid thead th:first-child { background: var(--c-navy-900); }
.specs-table--grid tbody th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: left; width: auto;
}
.specs-table--grid tbody td {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-light); text-align: center;
}
.specs-table--grid tbody tr:nth-child(even) td { background: var(--c-band); }
.specs-table--grid tbody tr:hover th { background: var(--c-navy-900); }
.specs-table--grid tbody tr:hover td { background: var(--c-band); color: var(--c-navy); }
@media (max-width: 690px) {
.spec-group { flex-direction: column; gap: 10px; }
.spec-group__label {
width: 100%; writing-mode: horizontal-tb; transform: none; padding: 8px; height: auto;
}
}
@media (max-width: 1080px) {
.adaptables__intro { grid-template-columns: 1fr; gap: 20px; }
.adaptables__grid { grid-template-columns: 1fr; gap: 28px; }
/* en una sola columna el desborde a la izquierda no tiene sentido
(no queda margen de página del que sobresalir): se desactiva */
.adaptables__media { margin-left: 0; width: 100%; max-width: 460px; margin-inline: auto; }
.specs-table-wrap { max-width: 460px; margin-inline: auto; width: 100%; }
}
/* ------------------------------------------------------------
PERFILES — Contanos qué necesitás (pedido de Ceci vía Alan).
3 cards con foto en blanco y negro tapada por una "cortina" navy con
textura diagonal sutil; al hacer hover la cortina se corre hacia la
derecha con clip-path (no se desvanece, se desliza), la foto recupera
color + zoom leve, aparece una línea de acento naranja creciendo bajo
el título y la flecha se desplaza. Entrada: swipe hacia arriba
escalonado al entrar en viewport (ver "Perfiles CassaSIP" en
js/script.js), misma familia de efecto que .panel-card pero vertical
en vez de lateral, para variar. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.perfiles-sip__grid {
/* mismo ajuste que .familia-grid: .section__head no trae separación
propia acá (pedido de Alan: se había achicado respecto al prototipo). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.perfil-sip-card {
opacity: 0;
transform: translateY(46px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.perfil-sip-card.is-visible { opacity: 1; transform: translateY(0); }
.perfil-sip-card__link {
position: relative;
display: block;
border: var(--border);
box-shadow: var(--card-shadow);
transition: box-shadow var(--t-base), transform var(--t-base);
}
.perfil-sip-card__link:hover,
.perfil-sip-card__link:focus-visible {
box-shadow: 0 8px 30px rgba(22, 43, 62, .16);
transform: translateY(-4px);
}
.perfil-sip-card__media {
position: relative;
height: 300px;
overflow: hidden;
}
.perfil-sip-card__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.05);
transform: scale(1.03);
transition: transform .6s ease, filter .6s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__img,
.perfil-sip-card__link:focus-visible .perfil-sip-card__img {
filter: grayscale(0) contrast(1);
transform: scale(1.1);
}
.perfil-sip-card__curtain {
position: absolute; inset: 0;
background:
repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px),
linear-gradient(150deg, var(--c-navy-900) 0%, var(--c-navy) 100%);
clip-path: inset(0 0 0 0);
transition: clip-path .55s cubic-bezier(.65,0,.35,1);
}
.perfil-sip-card__link:hover .perfil-sip-card__curtain,
.perfil-sip-card__link:focus-visible .perfil-sip-card__curtain {
clip-path: inset(0 0 0 100%);
}
.perfil-sip-card__num {
position: absolute; top: 18px; left: 20px;
font-size: 13px; font-weight: var(--fw-xbold);
color: rgba(255,255,255,.55);
letter-spacing: .06em;
transition: opacity .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__num,
.perfil-sip-card__link:focus-visible .perfil-sip-card__num { opacity: 0; }
.perfil-sip-card__body {
position: relative;
background: var(--c-white);
padding: 22px 22px 26px;
}
.perfil-sip-card__accent {
display: block;
height: 3px;
width: 0%;
background: var(--c-accent);
transition: width .45s ease;
margin-bottom: 14px;
}
.perfil-sip-card__link:hover .perfil-sip-card__accent,
.perfil-sip-card__link:focus-visible .perfil-sip-card__accent { width: 100%; }
.perfil-sip-card__label {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
font-size: 15px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .02em;
color: var(--c-navy-900);
}
.perfil-sip-card__label svg {
width: 18px; height: 18px; flex-shrink: 0;
fill: none; stroke: var(--c-navy-900); stroke-width: 2;
transform: translateX(0);
transition: transform .35s ease, stroke .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__label svg,
.perfil-sip-card__link:focus-visible .perfil-sip-card__label svg {
transform: translateX(6px);
stroke: var(--c-accent);
}
.perfil-sip-card__desc {
margin-top: 8px;
font-size: 14.7px; line-height: 1.55; font-weight: var(--fw-light);
color: var(--c-gray);
}
@media (max-width: 1080px) {
.perfiles-sip__grid { grid-template-columns: 1fr; gap: 20px; }
.perfil-sip-card { transform: translateY(28px); }
.perfil-sip-card__media { height: 260px; }
}
/* ------------------------------------------------------------
TU PROYECTO — CassaSIP (pedido de Alan).
1 card "hero" a ancho completo (mitad de alto que una card de
grilla) + grilla 2x2 con las 4 restantes. Título siempre
visible sobre la foto; párrafo + CTA revelados al hover con
swipe desde la izquierda. Hover "tecla de piano" con zoom IN:
toda la card crece y el fondo de color sube al mismo tiempo
(--bg-delay: 0s); el texto arranca cuando ese swipe del fondo
va por la mitad (--text-delay: .15s, 50% de --bg-dur), para que
no se sienta "atrasado". Mismo mecanismo de contra-escala que
Familia Cassaforma para que el texto no crezca junto con la
card.
------------------------------------------------------------ */
.tuproyecto-grid {
margin-top: 46px;
list-style: none; padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
--press-scale: 1.035;
--press-dur: .3s;
--bg-dur: .3s;
--bg-delay: 0s;
--text-dur: .3s;
--text-delay: .15s; /* arranca cuando el swipe del fondo va por la mitad (50% de .3s) */
}
.tuproyecto-card--hero { grid-column: 1 / -1; }
.tuproyecto-card { opacity: 0; transform: translateY(40px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1); }
.tuproyecto-card.is-visible { opacity: 1; transform: translateY(0); }
.tuproyecto-card__link {
position: relative; display: block;
aspect-ratio: 2.1573 / 1;
background: var(--c-white); border: 1px solid var(--c-line); box-shadow: var(--card-shadow);
overflow: hidden; transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* Card hero: mismo ancho, la mitad del alto proporcional (el doble de "achatada") */
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 4.3147 / 1; }
.tuproyecto-card__link:hover, .tuproyecto-card__link:focus-visible {
transform: scale(var(--press-scale));
box-shadow: 0 14px 34px rgba(22, 43, 62, .28);
z-index: 5;
}
.tuproyecto-card__media { position: absolute; inset: 0; }
.tuproyecto-card__media img {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: grayscale(1); transition: filter .5s ease;
}
.tuproyecto-card__link:hover .tuproyecto-card__media img,
.tuproyecto-card__link:focus-visible .tuproyecto-card__media img { filter: grayscale(0); }
/* Scrim permanente para que el título siempre se lea */
.tuproyecto-card__link::after {
content: ""; position: absolute; z-index: 1; inset: 0;
background: linear-gradient(160deg, rgba(22,43,62,.55) 0%, rgba(22,43,62,.22) 45%, rgba(22,43,62,.05) 70%);
}
.tuproyecto-card__title {
position: relative; z-index: 2; display: block;
padding: 30px 0 0 34px;
font-size: 25.6px; line-height: 1.2; font-weight: var(--fw-light); color: var(--c-white);
}
/* Filete arriba en el naranja del logo CassaSIP, para resaltar cada card */
.tuproyecto-card__link::before {
content: ""; position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 2px;
background: var(--c-accent);
}
.tuproyecto-card__panel-bg {
position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__panel-bg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__panel-bg { transform: translateY(0); }
.tuproyecto-card__text {
position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 22px 34px 26px;
max-width: 560px;
color: var(--c-white); opacity: 0;
transform: translateX(-26px) scale(1); transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__text,
.tuproyecto-card__link:focus-visible .tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.tuproyecto-card__claim { display: block; font-size: 19.2px; line-height: 1.5; font-weight: var(--fw-light); color: var(--c-white); }
.tuproyecto-card__cta {
display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
font-size: 16.8px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; color: var(--c-white);
}
.tuproyecto-card__cta svg { width: 16.8px; height: 16.8px; fill: none; stroke: var(--c-white); stroke-width: 2.4; transform: translateX(0); transition: transform .3s ease; }
.tuproyecto-card__link:hover .tuproyecto-card__cta svg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__cta svg { transform: translateX(4px); }
@media (max-width: 900px) {
.tuproyecto-grid { grid-template-columns: 1fr; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 2.1573 / 1; }
}
@media (max-width: 690px) {
.tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card__title { font-size: 19.2px; padding: 20px 0 0 20px; }
.tuproyecto-card__text { padding: 16px 20px 20px; }
/* En touch no hay hover real: panel y CTA quedan siempre visibles,
igual que en Familia Cassaforma (el párrafo se oculta para que
no choque con el título en cards bajas). */
.tuproyecto-card__panel-bg { transform: translateY(0); transition: none; }
.tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
}
.tuproyecto-card__claim { display: none; }
.tuproyecto-card__cta { margin-top: 0; }
}
/* Barra "beneficios clave" — mismas medidas que .sc-ahorros de
cassaforma.com (sistema-constructivo.css, bloque GRANDES AHORROS):
3 columnas centradas, ícono circular de 71px (ya viene con su color
en el propio .svg), separador vertical negro entre columnas. */
.ahorros { padding: 70px 0 62px; text-align: center; } /* +10% arriba y abajo (antes 64px/56px), pedido de Alan */
.ahorros__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.ahorro { display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 24px; }
.ahorro + .ahorro::before {
content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
width: 2px; background: var(--c-black);
}
.ahorro__icon { display: block; width: 71px; height: 71px; margin: 0 auto 20px; }
.ahorro__label { font-size: 23px; line-height: 1.3; font-weight: var(--fw-light); color: var(--c-navy); }
@media (max-width: 690px) {
.ahorros__grid { grid-template-columns: 1fr; row-gap: 32px; }
.ahorro + .ahorro::before { display: none; }
.ahorro__label { font-size: 19px; }
}
/* Beneficios (3 pilares) */
/* Beneficios de la construcción SIP — 2 columnas: pilares apilados con
viñeta numerada + logos de certificaciones a la izquierda, imagen a la
derecha (pedido de Alan). Separación entre columnas ×2 (antes 60px).
La imagen de la derecha no aporta su alto natural al cálculo de la fila
(queda position:absolute dentro de .beneficios__media, que por eso no
tiene alto propio): así la altura de la fila la fija SOLO la columna
izquierda (pilares + logos), y la imagen se recorta arriba/abajo con
object-fit:cover para igualar siempre esa altura — salvo en mobile,
donde se desactiva (ver media query). */
.beneficios__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; align-items: stretch; }
.beneficios__left { display: flex; flex-direction: column; }
.pilares__grid { display: flex; flex-direction: column; gap: 32px; }
.pilar__head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.pilar__num {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
background: var(--c-navy); color: var(--c-white);
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: var(--fw-xbold);
}
.pilar__title { font-size: 19px; font-weight: var(--fw-xbold); color: var(--c-navy-900); text-transform: uppercase; margin: 0; }
.pilar__text { margin-top: 0; font-size: 15.5px; line-height: 1.6; }
/* Logos de certificaciones — una sola imagen ya compuesta con los 6 logos
(2 filas x 3 columnas), mismo ancho que los párrafos de arriba (pedido
de Alan: usar la imagen completa en vez de 6 separadas). */
.beneficios__certs {
margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--c-line);
}
.beneficios__certs img { display: block; width: 100%; height: auto; }
.beneficios__media { position: relative; overflow: hidden; border-radius: 4px; } /* recorta el zoom del ken burns dentro de su propio cuadro (mismo criterio que .sobre-sip__media) */
.beneficios__media img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
animation: sobreSipKenBurns 18s ease-in-out infinite alternate; /* mismo ken burns que la foto de "Construcción con paneles SIP" */
}
/* ¿Por qué construir con SIP? — imagen del despiece a la izquierda, lista
de items con bullets a la derecha. Tipografía tomada de la lista de capas
de cassaforma.com (sistema-constructivo.css: .sc-panellosa__label/__item):
Heebo Light, navy, bullet "•" y divisor fino bajo cada renglón. */
.porque-sip { display: grid; grid-template-columns: minmax(300px, 460px) 1fr; gap: 60px; align-items: center; margin-top: 46px; }
.porque-sip__media img { width: 100%; display: block; }
.porque-sip__list {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto);
column-gap: 48px;
}
.porque-sip__list li {
padding: 14px 0;
border-bottom: 1px solid rgba(22, 43, 62, .15);
font-size: 19px; letter-spacing: .02em;
font-weight: var(--fw-light); color: var(--c-navy);
}
.porque-sip__list li::before { content: "\2022 "; }
@media (max-width: 1080px) {
.porque-sip { grid-template-columns: 1fr; }
.porque-sip__media { max-width: 460px; margin-inline: auto; }
}
@media (max-width: 690px) {
.porque-sip__list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
}
/* Logística — texto (Logística + Almacenamiento apilados) a la izquierda,
foto en blanco y negro con ken burns a la derecha (pedido de Alan). La
imagen no aporta su alto natural al cálculo de la fila (position:absolute
dentro de .logistica__media, sin alto propio): así la altura de la fila
la fija SOLO la columna de texto, y la foto se recorta con object-fit:cover
para igualar siempre esa altura — mismo criterio que .beneficios__media. */
.logistica__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: stretch; }
.logistica__text { display: flex; flex-direction: column; gap: 32px; }
.logistica__item h3 { font-size: 19px; font-weight: var(--fw-xbold); text-transform: uppercase; color: var(--c-navy-900); margin-bottom: 12px; }
.logistica__media { position: relative; overflow: hidden; border-radius: 4px; }
.logistica__img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
transition: filter .45s ease;
/* Es una sola foto fija (no un carrusel): un zoom-in ÚNICO de 10s que
termina y se queda ahí (forwards, sin infinite/alternate) — solo
"ida", nunca vuelve para atrás y nunca vuelve a saltar (pedido de
Alan). */
animation: destacadoKenBurns 10s ease-out forwards;
}
.logistica__media:hover .logistica__img { filter: grayscale(0); }
/* FAQ */
.faq { max-width: 880px; }
.faq__item { border-bottom: var(--border); }
.faq__item summary {
cursor: pointer; list-style: none; padding: 20px 0;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
font-size: 16.5px; font-weight: var(--fw-med); color: var(--c-navy-900);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
content: "+"; font-size: 22px; font-weight: var(--fw-light); color: var(--c-navy); flex-shrink: 0;
}
.faq__item[open] summary::after { content: "–"; }
.faq__body { padding: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: var(--c-gray); }
.faq__body ul { list-style: disc; padding-left: 20px; margin-top: 10px; }
.faq__body li { margin-bottom: 6px; }
.faq__body p + p { margin-top: 12px; }
/* Proceso constructivo — solo título + video a todo el ancho del
contenido (pedido de Alan; antes había una lista de pasos numerados). */
.proceso__video { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.proceso__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Capacitación */
.capacitacion { text-align: center; }
.capacitacion h2 { max-width: 620px; margin-inline: auto; }
.capacitacion .btn { margin-top: 30px; }
/* Presupuesto / form */
.presupuesto__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.form__field { margin-bottom: 16px; }
.form__label { display: block; font-size: 14px; font-weight: var(--fw-med); margin-bottom: 7px; }
.form__input, .form__select {
display: block; width: 100%; height: 46px; padding: 0 14px;
border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-navy-900);
font-family: var(--ff); font-size: 15px;
}
.form__input:focus, .form__select:focus { border-color: var(--c-navy); outline: none; }
.form__submit { margin-top: 6px; width: 100%; }
/* ------------------------------------------------------------
FOOTER
------------------------------------------------------------ */
.footer { background: var(--c-navy-900); color: var(--c-white); padding-block: 64px 32px; }
.footer__top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.footer__brand img { height: 40px; }
.footer__brand p { margin-top: 18px; font-size: 14px; color: rgba(255,255,255,.65); max-width: 260px; }
.footer__col h3 { font-size: 13px; font-weight: var(--fw-xbold); letter-spacing: .06em; text-transform: uppercase; color: var(--c-white); margin-bottom: 16px; }
.footer__col ul li { margin-bottom: 10px; }
.footer__col a { font-size: 14px; color: rgba(255,255,255,.75); }
.footer__col a:hover { color: var(--c-white); }
.footer__bottom {
margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15);
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
font-size: 13.5px; color: rgba(255,255,255,.6);
}
.footer__social { display: flex; gap: 14px; }
.footer__social svg { width: 16px; height: 16px; fill: rgba(255,255,255,.75); }
.footer__social a:hover svg { fill: var(--c-white); }
.footer__scrolltop { font-size: 13px; color: rgba(255,255,255,.6); }
.footer__scrolltop:hover { color: var(--c-white); }
/* ------------------------------------------------------------
RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 1169px) {
:root {
--fs-hero: 42px; --lh-hero: 46px;
--fs-hero-lead: 23px; --lh-hero-lead: 28px;
--h-hero: 660px;
}
.site-nav { gap: 15px; }
.site-nav__link { font-size: 13px; }
}
@media (max-width: 1080px) {
.site-nav { display: none; }
.destacado, .dos-columnas, .logistica__grid, .presupuesto__grid { grid-template-columns: 1fr; }
.paneles__grid { grid-template-columns: repeat(3, 1fr); }
/* En mobile se desactiva el recorte a la altura de la columna izquierda
(pedido de Alan): la imagen vuelve a su aspecto natural, en flujo. */
.beneficios__grid { grid-template-columns: 1fr; gap: 28px; align-items: normal; }
.beneficios__media img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
/* Mismo criterio que .beneficios__media: en mobile la foto de logística
vuelve a su aspecto natural, en flujo, debajo del texto. */
.logistica__grid { gap: 28px; }
.logistica__img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
.footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
:root {
--fs-hero: 34px; --lh-hero: 38px;
--fs-hero-lead: 19px; --lh-hero-lead: 26px;
--h-header: 84px; --h-hero: 560px;
}
.site-header__logo img { height: 40px; }
.hero .rule--light { width: 200px; margin: 24px 0 22px; }
}
@media (max-width: 690px) {
.site-topbar { display: none; }
:root {
--fs-hero: 27px; --lh-hero: 31px;
--fs-hero-lead: 16px; --lh-hero-lead: 24px;
--h-header: 70px; --h-hero: 520px;
}
.site-header__logo img { height: 34px; }
.hero .rule--light { width: 140px; margin: 20px 0 18px; }
.section { padding-block: 56px; }
.paneles__grid { grid-template-columns: 1fr 1fr; }
.footer__top { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------
FAMILIA CASSAFORMA — Conocé el resto de nuestras líneas
(pedido de Alan). Grilla de 5 cards (las otras líneas Cassaforma;
CassaSIP es esta misma web, no se lista a sí misma), cada una con
su color de marca en --linea-accent. Efecto "tecla de piano" v2:
TODA la card se hunde junta al pasar el mouse (borde, sombra,
logo, foto y fondo de color son todos descendientes del mismo
.familia-card__link escalado), así el degradé de color queda
siempre alineado con el borde mientras se achica. El texto es la
ÚNICA capa que NO se achica: usa un contra-escalado
(scale(calc(1 / var(--press-scale)))) que cancela el de su padre,
y entra con swipe desde la izquierda + fade-in medio segundo
después de que arranca el fondo de color. La foto NO hace zoom en
el hover (chocaba visualmente con el "hundido", pedido de Alan):
solo recupera color. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.familia-grid {
/* .section__head no trae separación propia (solo la agrega vía
".section__head + .section__grid", que esta grilla no usa) — se
fija acá a mano, mismo valor que esa regla general, para que quede
igual que en el prototipo (pedido de Alan: se había achicado). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
/* Timings del hover — un 50% más rápidos que la v1 (pedido de Alan). */
--press-scale: .965;
--press-dur: .167s;
--bg-dur: .3s;
--bg-delay: var(--press-dur);
--text-dur: .3s;
--text-delay: .5s;
}
.familia-card {
opacity: 0;
transform: translateY(40px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.familia-card.is-visible { opacity: 1; transform: translateY(0); }
.familia-card__link {
position: relative;
display: block;
height: 470px;
background: var(--c-white);
border: 1px solid var(--c-line);
box-shadow: var(--card-shadow);
overflow: hidden;
transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* "Tecla de piano": se achica y baja un poco, sombra se cierra en vez
de crecer (efecto de hundirse contra la superficie). */
.familia-card__link:hover,
.familia-card__link:focus-visible {
transform: scale(var(--press-scale)) translateY(3px);
box-shadow: 0 2px 10px rgba(22, 43, 62, .22);
}
.familia-card__logo {
position: relative;
z-index: 2;
height: 26px;
width: auto;
max-width: 74%;
margin: 26px auto 0;
object-fit: contain;
}
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 32px; margin-top: 23px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 31px; margin-top: 23px; }
.familia-card__media {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 72%;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
}
.familia-card__media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: bottom center;
filter: grayscale(1);
transition: filter .5s ease;
}
.familia-card__link[data-line="cassadeco"] .familia-card__media img { object-position: center bottom; }
/* Sin zoom en la foto: solo recupera color (pedido de Alan). */
.familia-card__link:hover .familia-card__media img,
.familia-card__link:focus-visible .familia-card__media img {
filter: grayscale(0);
}
/* Fondo de color: degradé del color de marca hacia transparente, 3/4
de la altura de la card. Hijo directo de .familia-card__link (no un
hermano aparte): se achica JUNTO con el resto de la card, así sus
márgenes quedan siempre alineados con el borde (pedido de Alan).
Entra con swipe de abajo hacia arriba apenas termina el "press". */
.familia-card__panel-bg {
position: absolute;
z-index: 2;
left: 0; right: 0; bottom: 0;
height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.familia-card__link:hover .familia-card__panel-bg,
.familia-card__link:focus-visible .familia-card__panel-bg {
transform: translateY(0);
}
/* Texto: la ÚNICA capa que NO se achica. Sigue siendo hijo de
.familia-card__link, pero en hover se le aplica un contra-escalado
(1 / var(--press-scale)) que cancela el de la card y lo deja
siempre a tamaño real (pedido de Alan). Entra con swipe desde la
izquierda + fade-in, medio segundo después de que arrancó el fondo
de color. */
.familia-card__text {
position: absolute;
z-index: 3;
left: 0; right: 0; bottom: 0;
padding: 18px 20px 20px;
color: var(--c-white);
opacity: 0;
transform: translateX(-26px) scale(1);
transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.familia-card__link:hover .familia-card__text,
.familia-card__link:focus-visible .familia-card__text {
opacity: 1;
transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.familia-card__claim {
display: block;
font-size: 14.6px; line-height: 1.45; font-weight: var(--fw-light);
color: var(--c-white);
}
.familia-card__cta {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 10px;
font-size: 13.8px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .03em;
color: var(--c-white);
}
.familia-card__cta svg {
width: 13px; height: 13px;
fill: none; stroke: var(--c-white); stroke-width: 2.4;
transform: translateX(0);
transition: transform .3s ease;
}
.familia-card__link:hover .familia-card__cta svg,
.familia-card__link:focus-visible .familia-card__cta svg {
transform: translateX(4px);
}
/* Filete de color arriba de la card: siempre visible, identifica la
marca aun antes del hover. Al ser ::before de .familia-card__link
también se hunde con toda la card (pedido de Alan). */
.familia-card__link::before {
content: "";
position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 4px;
background: var(--linea-accent, var(--c-navy-900));
}
@media (max-width: 1080px) {
.familia-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.familia-card__link { height: 420px; }
}
@media (max-width: 690px) {
.familia-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.familia-card__link { height: 340px; }
.familia-card__logo { height: 22px; margin-top: 20px; }
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 27px; margin-top: 18px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 26px; margin-top: 18px; }
/* En touch no hay hover real: el fondo de color y el CTA quedan
siempre visibles, para no depender de un tap sostenido. */
.familia-card__panel-bg { transform: translateY(0); transition: none; }
.familia-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
padding: 10px 14px 14px;
}
.familia-card__claim { display: none; }
.familia-card__cta { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; }
.hero__img, .destacado__img, .sobre-sip__img, .beneficios__media img { animation: none !important; transform: none; }
.hero__slide, .destacado__slide { transition-duration: .2s; }
.familia-card__link { transition-duration: .001ms; }
}
Proceso constructivo
por columna
(son hermanos en el DOM aunque visualmente queden uno al lado del
otro), así que el combinador de hermano adyacente lo tomaba también
y el 2º párrafo (columna derecha) quedaba corrido hacia abajo. Se
anula explícitamente para dejar ambas columnas alineadas por su top
(bug reportado por Alan). */
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.dos-columnas p + p { margin-top: 0; }
/* Construcción con paneles SIP — foto a la derecha (pedido de Alan). En
reposo: efecto ken burns continuo (zoom/paneo lento) y desaturada. Al
pasar el mouse: la animación se detiene, la imagen vuelve a su
posición/escala inicial (mismo mecanismo de siempre: se quita la
animation y la transition la lleva de vuelta suavemente) y recupera
el color — mismo criterio que .linea-card__media img en cassaforma.com,
invertido a pedido de Alan. */
/* padding-bottom reducido a la mitad (42px, antes 84px): acerca esta
sección a "Paneles CassaSIP" (pedido de Alan); el resto de los
paddings de .section quedan igual. */
#sobre-sip { padding-bottom: 42px; }
.sobre-sip__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: start; }
/* Párrafo "Incorporamos una nueva línea de producción..." destacado en
negrita y color naranja del logo (pedido de Alan) */
.sobre-sip__highlight { font-weight: var(--fw-xbold); color: var(--c-accent); }
.sobre-sip__media { position: relative; overflow: hidden; aspect-ratio: 4/5; }
.sobre-sip__img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
animation: sobreSipKenBurns 16s ease-in-out infinite alternate;
transition: filter .45s ease, transform .6s ease;
}
@keyframes sobreSipKenBurns {
0% { transform: scale(1) translate(0, 0); }
100% { transform: scale(1.14) translate(-2.5%, 2%); }
}
.sobre-sip__media:hover .sobre-sip__img,
.sobre-sip__media:focus-within .sobre-sip__img {
filter: grayscale(0);
animation: none;
transform: scale(1) translate(0, 0);
}
@media (max-width: 1080px) {
.sobre-sip__grid { grid-template-columns: 1fr; gap: 32px; }
.sobre-sip__media { order: -1; max-width: 460px; margin-inline: auto; aspect-ratio: 4/3; }
}
/* Tipos de panel */
.paneles__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.panel-card {
/* sin recuadro: panel, título y botón flotan directamente sobre el fondo
de la sección (pedido de Alan) */
border: none; box-shadow: none; background: transparent; display: flex; flex-direction: column;
/* entrada tipo swipe (derecha → izquierda), escalonada vía JS
(.is-visible); velocidad aumentada otra vez (antes .5s/card cada 1000ms,
ahora .35s/card cada 220ms — pedido de Alan) */
opacity: 0; transform: translateX(70px); transition: opacity .35s ease, transform .35s ease;
}
.panel-card.is-visible { opacity: 1; transform: translateX(0); }
/* Render con fondo transparente: se muestra completo (sin recortar), centrado,
con un drop-shadow muy leve para dar un efecto 3D sutil (pedido de Alan).
max-height ampliado (antes 210px) para que la imagen use todo el ancho
disponible de la card en vez de quedar acotada por la altura: efecto neto,
~120% más grande (pedido de Alan). */
.panel-card__media { min-height: 465px; padding: 10px 8px 6px; display: flex; align-items: center; justify-content: center; }
/* El render es también un link de descarga de su ficha técnica (mismo PDF
que el botón); al pasar el mouse, zoom leve sobre la imagen (pedido de
Alan). */
.panel-card__media a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.panel-card__media img {
width: 100%; max-width: 100%; height: auto; max-height: 465px; object-fit: contain;
filter: drop-shadow(0 6px 10px rgba(22, 43, 62, .16));
transition: transform .35s ease;
}
.panel-card__media a:hover img,
.panel-card__media a:focus-visible img {
transform: scale(1.06);
}
.panel-card__body { padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.panel-card__name { font-size: 15px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; }
/* Botón "Descargar ficha" — mismo "tipo" que .sc-panel__cta en
sistema-constructivo.css (cassaforma.com): .btn.btn--navy de base,
ancho completo y compacto. Usar esta combinación cada vez que se
agregue un botón de descarga de ficha en el sitio (pedido de Alan). */
.panel-card__cta { margin-top: auto; width: 100%; height: 40px; font-size: 14.7px; padding: 0 12px; }
/* Adaptables a cada proyecto — texto en 2 columnas: cartera de proyectos a la
izquierda, y el párrafo de la tecnología OSB destacado en un recuadro con
fondo blanco y en negrita, a la derecha (pedido de Alan). */
.adaptables__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.adaptables__highlight {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-med); /* antes fw-xbold: menos peso (pedido de Alan) */
padding: 22px 26px; border-radius: 4px; box-shadow: var(--card-shadow);
}
/* Adaptables a cada proyecto — foto + tabla de resistencias (pedido de Alan).
margin-top +20% (antes 46px) para separar más el render del texto de
arriba. */
.adaptables__grid { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: center; margin-top: 55px; }
/* Render con fondo transparente: se muestra completo, sin recortar ni caja
fija, con un drop-shadow muy leve (mismo criterio que .panel-card__media).
Se desplaza hacia la izquierda hasta sobresalir un 10% del ancho de
contenido (pedido de Alan): crece hacia la izquierda, ancla derecha
sin cambios (mismo criterio que .panel-corte__sandwich). */
.adaptables__media {
display: flex; align-items: center; justify-content: center;
margin-left: calc(-1 * var(--w-content) * 0.10);
width: calc(100% + var(--w-content) * 0.10);
}
.adaptables__media img {
width: 100%; height: auto; max-width: 100%;
filter: drop-shadow(0 8px 14px rgba(22, 43, 62, .16));
}
/* Tabla de especificaciones: misma paleta navy/blanco y tipografía Heebo
del resto del sitio. Columna izquierda (propiedad) en navy —el mismo azul
del botón "Descargar ficha"— con texto blanco, columna derecha (valor)
alterna blanco/gris banda. Ninguna fuente en negrita (pedido de Alan). Al
pasar el mouse por una fila, se resalta en navy oscuro (izquierda) y en la
banda gris (derecha) para que se lea qué fila se está mirando. */
.specs-table-wrap { border: var(--border); border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table th, .specs-table td { padding: 15px 18px; font-size: 14.5px; line-height: 1.3; transition: background-color .2s ease, color .2s ease; }
.specs-table th {
background: var(--c-navy); color: var(--c-white);
font-weight: var(--fw-reg); text-align: left; width: 60%;
}
.specs-table td {
background: var(--c-white); color: var(--c-navy-900);
font-weight: var(--fw-light); text-align: center;
}
.specs-table tr:nth-child(even) td { background: var(--c-band); }
.specs-table tr:not(:last-child) th,
.specs-table tr:not(:last-child) td { border-bottom: 1px solid rgba(255,255,255,.08); }
.specs-table tr:hover th { background: var(--c-navy-900); }
.specs-table tr:hover td { background: var(--c-band); color: var(--c-navy); }
/* Especificaciones técnicas (debajo de "Tipos de panel") — mismo criterio
de diseño que la tabla de Adaptables: acento navy, sin negritas. Tres
grupos (Paneles / Placas / Accesorios) con una etiqueta lateral vertical,
cada uno con sus sub-tablas de medidas (pedido de Alan, ref. cassasip.com). */
.spec-groups { display: flex; flex-direction: column; gap: 34px; margin-top: 92px; } /* separación de los productos ×2 (antes 46px), pedido de Alan */
.spec-group { display: flex; align-items: stretch; gap: 22px; }
.spec-group__label {
flex-shrink: 0; width: 46px; border-radius: 4px;
background: var(--c-accent); color: var(--c-white); /* naranja del logo CassaSIP + texto blanco (pedido de Alan) */
display: flex; align-items: center; justify-content: center;
writing-mode: vertical-rl; transform: rotate(180deg);
font-size: 15.6px; /* 13px +20% (pedido de Alan) */
font-weight: var(--fw-reg); text-transform: uppercase; letter-spacing: .1em;
}
.spec-group__tables { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.spec-block__title { font-size: 14.5px; font-weight: var(--fw-reg); color: var(--c-navy-900); margin-bottom: 10px; }
.spec-block__title .spec-block__note { font-weight: var(--fw-light); color: var(--c-navy); font-size: 13px; }
.spec-block .specs-table-wrap { overflow-x: auto; }
.specs-table--grid { min-width: 560px; }
.specs-table--grid th, .specs-table--grid td { padding: 12px 14px; font-size: 13.5px; white-space: nowrap; }
.specs-table--grid thead th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: center;
}
.specs-table--grid thead th:first-child { background: var(--c-navy-900); }
.specs-table--grid tbody th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: left; width: auto;
}
.specs-table--grid tbody td {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-light); text-align: center;
}
.specs-table--grid tbody tr:nth-child(even) td { background: var(--c-band); }
.specs-table--grid tbody tr:hover th { background: var(--c-navy-900); }
.specs-table--grid tbody tr:hover td { background: var(--c-band); color: var(--c-navy); }
@media (max-width: 690px) {
.spec-group { flex-direction: column; gap: 10px; }
.spec-group__label {
width: 100%; writing-mode: horizontal-tb; transform: none; padding: 8px; height: auto;
}
}
@media (max-width: 1080px) {
.adaptables__intro { grid-template-columns: 1fr; gap: 20px; }
.adaptables__grid { grid-template-columns: 1fr; gap: 28px; }
/* en una sola columna el desborde a la izquierda no tiene sentido
(no queda margen de página del que sobresalir): se desactiva */
.adaptables__media { margin-left: 0; width: 100%; max-width: 460px; margin-inline: auto; }
.specs-table-wrap { max-width: 460px; margin-inline: auto; width: 100%; }
}
/* ------------------------------------------------------------
PERFILES — Contanos qué necesitás (pedido de Ceci vía Alan).
3 cards con foto en blanco y negro tapada por una "cortina" navy con
textura diagonal sutil; al hacer hover la cortina se corre hacia la
derecha con clip-path (no se desvanece, se desliza), la foto recupera
color + zoom leve, aparece una línea de acento naranja creciendo bajo
el título y la flecha se desplaza. Entrada: swipe hacia arriba
escalonado al entrar en viewport (ver "Perfiles CassaSIP" en
js/script.js), misma familia de efecto que .panel-card pero vertical
en vez de lateral, para variar. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.perfiles-sip__grid {
/* mismo ajuste que .familia-grid: .section__head no trae separación
propia acá (pedido de Alan: se había achicado respecto al prototipo). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.perfil-sip-card {
opacity: 0;
transform: translateY(46px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.perfil-sip-card.is-visible { opacity: 1; transform: translateY(0); }
.perfil-sip-card__link {
position: relative;
display: block;
border: var(--border);
box-shadow: var(--card-shadow);
transition: box-shadow var(--t-base), transform var(--t-base);
}
.perfil-sip-card__link:hover,
.perfil-sip-card__link:focus-visible {
box-shadow: 0 8px 30px rgba(22, 43, 62, .16);
transform: translateY(-4px);
}
.perfil-sip-card__media {
position: relative;
height: 300px;
overflow: hidden;
}
.perfil-sip-card__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.05);
transform: scale(1.03);
transition: transform .6s ease, filter .6s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__img,
.perfil-sip-card__link:focus-visible .perfil-sip-card__img {
filter: grayscale(0) contrast(1);
transform: scale(1.1);
}
.perfil-sip-card__curtain {
position: absolute; inset: 0;
background:
repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px),
linear-gradient(150deg, var(--c-navy-900) 0%, var(--c-navy) 100%);
clip-path: inset(0 0 0 0);
transition: clip-path .55s cubic-bezier(.65,0,.35,1);
}
.perfil-sip-card__link:hover .perfil-sip-card__curtain,
.perfil-sip-card__link:focus-visible .perfil-sip-card__curtain {
clip-path: inset(0 0 0 100%);
}
.perfil-sip-card__num {
position: absolute; top: 18px; left: 20px;
font-size: 13px; font-weight: var(--fw-xbold);
color: rgba(255,255,255,.55);
letter-spacing: .06em;
transition: opacity .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__num,
.perfil-sip-card__link:focus-visible .perfil-sip-card__num { opacity: 0; }
.perfil-sip-card__body {
position: relative;
background: var(--c-white);
padding: 22px 22px 26px;
}
.perfil-sip-card__accent {
display: block;
height: 3px;
width: 0%;
background: var(--c-accent);
transition: width .45s ease;
margin-bottom: 14px;
}
.perfil-sip-card__link:hover .perfil-sip-card__accent,
.perfil-sip-card__link:focus-visible .perfil-sip-card__accent { width: 100%; }
.perfil-sip-card__label {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
font-size: 15px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .02em;
color: var(--c-navy-900);
}
.perfil-sip-card__label svg {
width: 18px; height: 18px; flex-shrink: 0;
fill: none; stroke: var(--c-navy-900); stroke-width: 2;
transform: translateX(0);
transition: transform .35s ease, stroke .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__label svg,
.perfil-sip-card__link:focus-visible .perfil-sip-card__label svg {
transform: translateX(6px);
stroke: var(--c-accent);
}
.perfil-sip-card__desc {
margin-top: 8px;
font-size: 14.7px; line-height: 1.55; font-weight: var(--fw-light);
color: var(--c-gray);
}
@media (max-width: 1080px) {
.perfiles-sip__grid { grid-template-columns: 1fr; gap: 20px; }
.perfil-sip-card { transform: translateY(28px); }
.perfil-sip-card__media { height: 260px; }
}
/* ------------------------------------------------------------
TU PROYECTO — CassaSIP (pedido de Alan).
1 card "hero" a ancho completo (mitad de alto que una card de
grilla) + grilla 2x2 con las 4 restantes. Título siempre
visible sobre la foto; párrafo + CTA revelados al hover con
swipe desde la izquierda. Hover "tecla de piano" con zoom IN:
toda la card crece y el fondo de color sube al mismo tiempo
(--bg-delay: 0s); el texto arranca cuando ese swipe del fondo
va por la mitad (--text-delay: .15s, 50% de --bg-dur), para que
no se sienta "atrasado". Mismo mecanismo de contra-escala que
Familia Cassaforma para que el texto no crezca junto con la
card.
------------------------------------------------------------ */
.tuproyecto-grid {
margin-top: 46px;
list-style: none; padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
--press-scale: 1.035;
--press-dur: .3s;
--bg-dur: .3s;
--bg-delay: 0s;
--text-dur: .3s;
--text-delay: .15s; /* arranca cuando el swipe del fondo va por la mitad (50% de .3s) */
}
.tuproyecto-card--hero { grid-column: 1 / -1; }
.tuproyecto-card { opacity: 0; transform: translateY(40px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1); }
.tuproyecto-card.is-visible { opacity: 1; transform: translateY(0); }
.tuproyecto-card__link {
position: relative; display: block;
aspect-ratio: 2.1573 / 1;
background: var(--c-white); border: 1px solid var(--c-line); box-shadow: var(--card-shadow);
overflow: hidden; transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* Card hero: mismo ancho, la mitad del alto proporcional (el doble de "achatada") */
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 4.3147 / 1; }
.tuproyecto-card__link:hover, .tuproyecto-card__link:focus-visible {
transform: scale(var(--press-scale));
box-shadow: 0 14px 34px rgba(22, 43, 62, .28);
z-index: 5;
}
.tuproyecto-card__media { position: absolute; inset: 0; }
.tuproyecto-card__media img {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: grayscale(1); transition: filter .5s ease;
}
.tuproyecto-card__link:hover .tuproyecto-card__media img,
.tuproyecto-card__link:focus-visible .tuproyecto-card__media img { filter: grayscale(0); }
/* Scrim permanente para que el título siempre se lea */
.tuproyecto-card__link::after {
content: ""; position: absolute; z-index: 1; inset: 0;
background: linear-gradient(160deg, rgba(22,43,62,.55) 0%, rgba(22,43,62,.22) 45%, rgba(22,43,62,.05) 70%);
}
.tuproyecto-card__title {
position: relative; z-index: 2; display: block;
padding: 30px 0 0 34px;
font-size: 25.6px; line-height: 1.2; font-weight: var(--fw-light); color: var(--c-white);
}
/* Filete arriba en el naranja del logo CassaSIP, para resaltar cada card */
.tuproyecto-card__link::before {
content: ""; position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 2px;
background: var(--c-accent);
}
.tuproyecto-card__panel-bg {
position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__panel-bg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__panel-bg { transform: translateY(0); }
.tuproyecto-card__text {
position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 22px 34px 26px;
max-width: 560px;
color: var(--c-white); opacity: 0;
transform: translateX(-26px) scale(1); transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__text,
.tuproyecto-card__link:focus-visible .tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.tuproyecto-card__claim { display: block; font-size: 19.2px; line-height: 1.5; font-weight: var(--fw-light); color: var(--c-white); }
.tuproyecto-card__cta {
display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
font-size: 16.8px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; color: var(--c-white);
}
.tuproyecto-card__cta svg { width: 16.8px; height: 16.8px; fill: none; stroke: var(--c-white); stroke-width: 2.4; transform: translateX(0); transition: transform .3s ease; }
.tuproyecto-card__link:hover .tuproyecto-card__cta svg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__cta svg { transform: translateX(4px); }
@media (max-width: 900px) {
.tuproyecto-grid { grid-template-columns: 1fr; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 2.1573 / 1; }
}
@media (max-width: 690px) {
.tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card__title { font-size: 19.2px; padding: 20px 0 0 20px; }
.tuproyecto-card__text { padding: 16px 20px 20px; }
/* En touch no hay hover real: panel y CTA quedan siempre visibles,
igual que en Familia Cassaforma (el párrafo se oculta para que
no choque con el título en cards bajas). */
.tuproyecto-card__panel-bg { transform: translateY(0); transition: none; }
.tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
}
.tuproyecto-card__claim { display: none; }
.tuproyecto-card__cta { margin-top: 0; }
}
/* Barra "beneficios clave" — mismas medidas que .sc-ahorros de
cassaforma.com (sistema-constructivo.css, bloque GRANDES AHORROS):
3 columnas centradas, ícono circular de 71px (ya viene con su color
en el propio .svg), separador vertical negro entre columnas. */
.ahorros { padding: 70px 0 62px; text-align: center; } /* +10% arriba y abajo (antes 64px/56px), pedido de Alan */
.ahorros__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.ahorro { display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 24px; }
.ahorro + .ahorro::before {
content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
width: 2px; background: var(--c-black);
}
.ahorro__icon { display: block; width: 71px; height: 71px; margin: 0 auto 20px; }
.ahorro__label { font-size: 23px; line-height: 1.3; font-weight: var(--fw-light); color: var(--c-navy); }
@media (max-width: 690px) {
.ahorros__grid { grid-template-columns: 1fr; row-gap: 32px; }
.ahorro + .ahorro::before { display: none; }
.ahorro__label { font-size: 19px; }
}
/* Beneficios (3 pilares) */
/* Beneficios de la construcción SIP — 2 columnas: pilares apilados con
viñeta numerada + logos de certificaciones a la izquierda, imagen a la
derecha (pedido de Alan). Separación entre columnas ×2 (antes 60px).
La imagen de la derecha no aporta su alto natural al cálculo de la fila
(queda position:absolute dentro de .beneficios__media, que por eso no
tiene alto propio): así la altura de la fila la fija SOLO la columna
izquierda (pilares + logos), y la imagen se recorta arriba/abajo con
object-fit:cover para igualar siempre esa altura — salvo en mobile,
donde se desactiva (ver media query). */
.beneficios__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; align-items: stretch; }
.beneficios__left { display: flex; flex-direction: column; }
.pilares__grid { display: flex; flex-direction: column; gap: 32px; }
.pilar__head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.pilar__num {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
background: var(--c-navy); color: var(--c-white);
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: var(--fw-xbold);
}
.pilar__title { font-size: 19px; font-weight: var(--fw-xbold); color: var(--c-navy-900); text-transform: uppercase; margin: 0; }
.pilar__text { margin-top: 0; font-size: 15.5px; line-height: 1.6; }
/* Logos de certificaciones — una sola imagen ya compuesta con los 6 logos
(2 filas x 3 columnas), mismo ancho que los párrafos de arriba (pedido
de Alan: usar la imagen completa en vez de 6 CassaSIP forma parte de un sistema más amplio de soluciones constructivas en EPS. Descubrí el resto de las líneas Cassaforma. separadas). */
.beneficios__certs {
margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--c-line);
}
.beneficios__certs img { display: block; width: 100%; height: auto; }
.beneficios__media { position: relative; overflow: hidden; border-radius: 4px; } /* recorta el zoom del ken burns dentro de su propio cuadro (mismo criterio que .sobre-sip__media) */
.beneficios__media img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
animation: sobreSipKenBurns 18s ease-in-out infinite alternate; /* mismo ken burns que la foto de "Construcción con paneles SIP" */
}
/* ¿Por qué construir con SIP? — imagen del despiece a la izquierda, lista
de items con bullets a la derecha. Tipografía tomada de la lista de capas
de cassaforma.com (sistema-constructivo.css: .sc-panellosa__label/__item):
Heebo Light, navy, bullet "•" y divisor fino bajo cada renglón. */
.porque-sip { display: grid; grid-template-columns: minmax(300px, 460px) 1fr; gap: 60px; align-items: center; margin-top: 46px; }
.porque-sip__media img { width: 100%; display: block; }
.porque-sip__list {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto);
column-gap: 48px;
}
.porque-sip__list li {
padding: 14px 0;
border-bottom: 1px solid rgba(22, 43, 62, .15);
font-size: 19px; letter-spacing: .02em;
font-weight: var(--fw-light); color: var(--c-navy);
}
.porque-sip__list li::before { content: "\2022 "; }
@media (max-width: 1080px) {
.porque-sip { grid-template-columns: 1fr; }
.porque-sip__media { max-width: 460px; margin-inline: auto; }
}
@media (max-width: 690px) {
.porque-sip__list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
}
/* Logística — texto (Logística + Almacenamiento apilados) a la izquierda,
foto en blanco y negro con ken burns a la derecha (pedido de Alan). La
imagen no aporta su alto natural al cálculo de la fila (position:absolute
dentro de .logistica__media, sin alto propio): así la altura de la fila
la fija SOLO la columna de texto, y la foto se recorta con object-fit:cover
para igualar siempre esa altura — mismo criterio que .beneficios__media. */
.logistica__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: stretch; }
.logistica__text { display: flex; flex-direction: column; gap: 32px; }
.logistica__item h3 { font-size: 19px; font-weight: var(--fw-xbold); text-transform: uppercase; color: var(--c-navy-900); margin-bottom: 12px; }
.logistica__media { position: relative; overflow: hidden; border-radius: 4px; }
.logistica__img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
transition: filter .45s ease;
/* Es una sola foto fija (no un carrusel): un zoom-in ÚNICO de 10s que
termina y se queda ahí (forwards, sin infinite/alternate) — solo
"ida", nunca vuelve para atrás y nunca vuelve a saltar (pedido de
Alan). */
animation: destacadoKenBurns 10s ease-out forwards;
}
.logistica__media:hover .logistica__img { filter: grayscale(0); }
/* FAQ */
.faq { max-width: 880px; }
.faq__item { border-bottom: var(--border); }
.faq__item summary {
cursor: pointer; list-style: none; padding: 20px 0;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
font-size: 16.5px; font-weight: var(--fw-med); color: var(--c-navy-900);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
content: "+"; font-size: 22px; font-weight: var(--fw-light); color: var(--c-navy); flex-shrink: 0;
}
.faq__item[open] summary::after { content: "–"; }
.faq__body { padding: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: var(--c-gray); }
.faq__body ul { list-style: disc; padding-left: 20px; margin-top: 10px; }
.faq__body li { margin-bottom: 6px; }
.faq__body p + p { margin-top: 12px; }
/* Proceso constructivo — solo título + video a todo el ancho del
contenido (pedido de Alan; antes había una lista de pasos numerados). */
.proceso__video { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.proceso__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Capacitación */
.capacitacion { text-align: center; }
.capacitacion h2 { max-width: 620px; margin-inline: auto; }
.capacitacion .btn { margin-top: 30px; }
/* Presupuesto / form */
.presupuesto__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.form__field { margin-bottom: 16px; }
.form__label { display: block; font-size: 14px; font-weight: var(--fw-med); margin-bottom: 7px; }
.form__input, .form__select {
display: block; width: 100%; height: 46px; padding: 0 14px;
border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-navy-900);
font-family: var(--ff); font-size: 15px;
}
.form__input:focus, .form__select:focus { border-color: var(--c-navy); outline: none; }
.form__submit { margin-top: 6px; width: 100%; }
/* ------------------------------------------------------------
FOOTER
------------------------------------------------------------ */
.footer { background: var(--c-navy-900); color: var(--c-white); padding-block: 64px 32px; }
.footer__top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.footer__brand img { height: 40px; }
.footer__brand p { margin-top: 18px; font-size: 14px; color: rgba(255,255,255,.65); max-width: 260px; }
.footer__col h3 { font-size: 13px; font-weight: var(--fw-xbold); letter-spacing: .06em; text-transform: uppercase; color: var(--c-white); margin-bottom: 16px; }
.footer__col ul li { margin-bottom: 10px; }
.footer__col a { font-size: 14px; color: rgba(255,255,255,.75); }
.footer__col a:hover { color: var(--c-white); }
.footer__bottom {
margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15);
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
font-size: 13.5px; color: rgba(255,255,255,.6);
}
.footer__social { display: flex; gap: 14px; }
.footer__social svg { width: 16px; height: 16px; fill: rgba(255,255,255,.75); }
.footer__social a:hover svg { fill: var(--c-white); }
.footer__scrolltop { font-size: 13px; color: rgba(255,255,255,.6); }
.footer__scrolltop:hover { color: var(--c-white); }
/* ------------------------------------------------------------
RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 1169px) {
:root {
--fs-hero: 42px; --lh-hero: 46px;
--fs-hero-lead: 23px; --lh-hero-lead: 28px;
--h-hero: 660px;
}
.site-nav { gap: 15px; }
.site-nav__link { font-size: 13px; }
}
@media (max-width: 1080px) {
.site-nav { display: none; }
.destacado, .dos-columnas, .logistica__grid, .presupuesto__grid { grid-template-columns: 1fr; }
.paneles__grid { grid-template-columns: repeat(3, 1fr); }
/* En mobile se desactiva el recorte a la altura de la columna izquierda
(pedido de Alan): la imagen vuelve a su aspecto natural, en flujo. */
.beneficios__grid { grid-template-columns: 1fr; gap: 28px; align-items: normal; }
.beneficios__media img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
/* Mismo criterio que .beneficios__media: en mobile la foto de logística
vuelve a su aspecto natural, en flujo, debajo del texto. */
.logistica__grid { gap: 28px; }
.logistica__img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
.footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
:root {
--fs-hero: 34px; --lh-hero: 38px;
--fs-hero-lead: 19px; --lh-hero-lead: 26px;
--h-header: 84px; --h-hero: 560px;
}
.site-header__logo img { height: 40px; }
.hero .rule--light { width: 200px; margin: 24px 0 22px; }
}
@media (max-width: 690px) {
.site-topbar { display: none; }
:root {
--fs-hero: 27px; --lh-hero: 31px;
--fs-hero-lead: 16px; --lh-hero-lead: 24px;
--h-header: 70px; --h-hero: 520px;
}
.site-header__logo img { height: 34px; }
.hero .rule--light { width: 140px; margin: 20px 0 18px; }
.section { padding-block: 56px; }
.paneles__grid { grid-template-columns: 1fr 1fr; }
.footer__top { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------
FAMILIA CASSAFORMA — Conocé el resto de nuestras líneas
(pedido de Alan). Grilla de 5 cards (las otras líneas Cassaforma;
CassaSIP es esta misma web, no se lista a sí misma), cada una con
su color de marca en --linea-accent. Efecto "tecla de piano" v2:
TODA la card se hunde junta al pasar el mouse (borde, sombra,
logo, foto y fondo de color son todos descendientes del mismo
.familia-card__link escalado), así el degradé de color queda
siempre alineado con el borde mientras se achica. El texto es la
ÚNICA capa que NO se achica: usa un contra-escalado
(scale(calc(1 / var(--press-scale)))) que cancela el de su padre,
y entra con swipe desde la izquierda + fade-in medio segundo
después de que arranca el fondo de color. La foto NO hace zoom en
el hover (chocaba visualmente con el "hundido", pedido de Alan):
solo recupera color. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.familia-grid {
/* .section__head no trae separación propia (solo la agrega vía
".section__head + .section__grid", que esta grilla no usa) — se
fija acá a mano, mismo valor que esa regla general, para que quede
igual que en el prototipo (pedido de Alan: se había achicado). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
/* Timings del hover — un 50% más rápidos que la v1 (pedido de Alan). */
--press-scale: .965;
--press-dur: .167s;
--bg-dur: .3s;
--bg-delay: var(--press-dur);
--text-dur: .3s;
--text-delay: .5s;
}
.familia-card {
opacity: 0;
transform: translateY(40px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.familia-card.is-visible { opacity: 1; transform: translateY(0); }
.familia-card__link {
position: relative;
display: block;
height: 470px;
background: var(--c-white);
border: 1px solid var(--c-line);
box-shadow: var(--card-shadow);
overflow: hidden;
transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* "Tecla de piano": se achica y baja un poco, sombra se cierra en vez
de crecer (efecto de hundirse contra la superficie). */
.familia-card__link:hover,
.familia-card__link:focus-visible {
transform: scale(var(--press-scale)) translateY(3px);
box-shadow: 0 2px 10px rgba(22, 43, 62, .22);
}
.familia-card__logo {
position: relative;
z-index: 2;
height: 26px;
width: auto;
max-width: 74%;
margin: 26px auto 0;
object-fit: contain;
}
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 32px; margin-top: 23px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 31px; margin-top: 23px; }
.familia-card__media {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 72%;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
}
.familia-card__media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: bottom center;
filter: grayscale(1);
transition: filter .5s ease;
}
.familia-card__link[data-line="cassadeco"] .familia-card__media img { object-position: center bottom; }
/* Sin zoom en la foto: solo recupera color (pedido de Alan). */
.familia-card__link:hover .familia-card__media img,
.familia-card__link:focus-visible .familia-card__media img {
filter: grayscale(0);
}
/* Fondo de color: degradé del color de marca hacia transparente, 3/4
de la altura de la card. Hijo directo de .familia-card__link (no un
hermano aparte): se achica JUNTO con el resto de la card, así sus
márgenes quedan siempre alineados con el borde (pedido de Alan).
Entra con swipe de abajo hacia arriba apenas termina el "press". */
.familia-card__panel-bg {
position: absolute;
z-index: 2;
left: 0; right: 0; bottom: 0;
height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.familia-card__link:hover .familia-card__panel-bg,
.familia-card__link:focus-visible .familia-card__panel-bg {
transform: translateY(0);
}
/* Texto: la ÚNICA capa que NO se achica. Sigue siendo hijo de
.familia-card__link, pero en hover se le aplica un contra-escalado
(1 / var(--press-scale)) que cancela el de la card y lo deja
siempre a tamaño real (pedido de Alan). Entra con swipe desde la
izquierda + fade-in, medio segundo después de que arrancó el fondo
de color. */
.familia-card__text {
position: absolute;
z-index: 3;
left: 0; right: 0; bottom: 0;
padding: 18px 20px 20px;
color: var(--c-white);
opacity: 0;
transform: translateX(-26px) scale(1);
transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.familia-card__link:hover .familia-card__text,
.familia-card__link:focus-visible .familia-card__text {
opacity: 1;
transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.familia-card__claim {
display: block;
font-size: 14.6px; line-height: 1.45; font-weight: var(--fw-light);
color: var(--c-white);
}
.familia-card__cta {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 10px;
font-size: 13.8px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .03em;
color: var(--c-white);
}
.familia-card__cta svg {
width: 13px; height: 13px;
fill: none; stroke: var(--c-white); stroke-width: 2.4;
transform: translateX(0);
transition: transform .3s ease;
}
.familia-card__link:hover .familia-card__cta svg,
.familia-card__link:focus-visible .familia-card__cta svg {
transform: translateX(4px);
}
/* Filete de color arriba de la card: siempre visible, identifica la
marca aun antes del hover. Al ser ::before de .familia-card__link
también se hunde con toda la card (pedido de Alan). */
.familia-card__link::before {
content: "";
position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 4px;
background: var(--linea-accent, var(--c-navy-900));
}
@media (max-width: 1080px) {
.familia-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.familia-card__link { height: 420px; }
}
@media (max-width: 690px) {
.familia-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.familia-card__link { height: 340px; }
.familia-card__logo { height: 22px; margin-top: 20px; }
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 27px; margin-top: 18px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 26px; margin-top: 18px; }
/* En touch no hay hover real: el fondo de color y el CTA quedan
siempre visibles, para no depender de un tap sostenido. */
.familia-card__panel-bg { transform: translateY(0); transition: none; }
.familia-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
padding: 10px 14px 14px;
}
.familia-card__claim { display: none; }
.familia-card__cta { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; }
.hero__img, .destacado__img, .sobre-sip__img, .beneficios__media img { animation: none !important; transform: none; }
.hero__slide, .destacado__slide { transition-duration: .2s; }
.familia-card__link { transition-duration: .001ms; }
}
Conocé el resto de nuestras líneas
Sistema constructivo integral en paneles EPS, sismorresistente y aislante.
Visitar sitio
Aislantes, vinculantes y alivianantes en EPS para tu obra.
Visitar sitio
Molduras y placas decorativas en EPS crudo o terminadas.
Visitar sitio
Construcción modular industrializada y transportable.
Visitar sitio
Muebles y corpóreos en EPS revestidos en poliurea.
Visitar sitio
por columna
(son hermanos en el DOM aunque visualmente queden uno al lado del
otro), así que el combinador de hermano adyacente lo tomaba también
y el 2º párrafo (columna derecha) quedaba corrido hacia abajo. Se
anula explícitamente para dejar ambas columnas alineadas por su top
(bug reportado por Alan). */
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.dos-columnas p + p { margin-top: 0; }
/* Construcción con paneles SIP — foto a la derecha (pedido de Alan). En
reposo: efecto ken burns continuo (zoom/paneo lento) y desaturada. Al
pasar el mouse: la animación se detiene, la imagen vuelve a su
posición/escala inicial (mismo mecanismo de siempre: se quita la
animation y la transition la lleva de vuelta suavemente) y recupera
el color — mismo criterio que .linea-card__media img en cassaforma.com,
invertido a pedido de Alan. */
/* padding-bottom reducido a la mitad (42px, antes 84px): acerca esta
sección a "Paneles CassaSIP" (pedido de Alan); el resto de los
paddings de .section quedan igual. */
#sobre-sip { padding-bottom: 42px; }
.sobre-sip__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: start; }
/* Párrafo "Incorporamos una nueva línea de producción..." destacado en
negrita y color naranja del logo (pedido de Alan) */
.sobre-sip__highlight { font-weight: var(--fw-xbold); color: var(--c-accent); }
.sobre-sip__media { position: relative; overflow: hidden; aspect-ratio: 4/5; }
.sobre-sip__img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
animation: sobreSipKenBurns 16s ease-in-out infinite alternate;
transition: filter .45s ease, transform .6s ease;
}
@keyframes sobreSipKenBurns {
0% { transform: scale(1) translate(0, 0); }
100% { transform: scale(1.14) translate(-2.5%, 2%); }
}
.sobre-sip__media:hover .sobre-sip__img,
.sobre-sip__media:focus-within .sobre-sip__img {
filter: grayscale(0);
animation: none;
transform: scale(1) translate(0, 0);
}
@media (max-width: 1080px) {
.sobre-sip__grid { grid-template-columns: 1fr; gap: 32px; }
.sobre-sip__media { order: -1; max-width: 460px; margin-inline: auto; aspect-ratio: 4/3; }
}
/* Tipos de panel */
.paneles__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.panel-card {
/* sin recuadro: panel, título y botón flotan directamente sobre el fondo
de la sección (pedido de Alan) */
border: none; box-shadow: none; background: transparent; display: flex; flex-direction: column;
/* entrada tipo swipe (derecha → izquierda), escalonada vía JS
(.is-visible); velocidad aumentada otra vez (antes .5s/card cada 1000ms,
ahora .35s/card cada 220ms — pedido de Alan) */
opacity: 0; transform: translateX(70px); transition: opacity .35s ease, transform .35s ease;
}
.panel-card.is-visible { opacity: 1; transform: translateX(0); }
/* Render con fondo transparente: se muestra completo (sin recortar), centrado,
con un drop-shadow muy leve para dar un efecto 3D sutil (pedido de Alan).
max-height ampliado (antes 210px) para que la imagen use todo el ancho
disponible de la card en vez de quedar acotada por la altura: efecto neto,
~120% más grande (pedido de Alan). */
.panel-card__media { min-height: 465px; padding: 10px 8px 6px; display: flex; align-items: center; justify-content: center; }
/* El render es también un link de descarga de su ficha técnica (mismo PDF
que el botón); al pasar el mouse, zoom leve sobre la imagen (pedido de
Alan). */
.panel-card__media a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.panel-card__media img {
width: 100%; max-width: 100%; height: auto; max-height: 465px; object-fit: contain;
filter: drop-shadow(0 6px 10px rgba(22, 43, 62, .16));
transition: transform .35s ease;
}
.panel-card__media a:hover img,
.panel-card__media a:focus-visible img {
transform: scale(1.06);
}
.panel-card__body { padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.panel-card__name { font-size: 15px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; }
/* Botón "Descargar ficha" — mismo "tipo" que .sc-panel__cta en
sistema-constructivo.css (cassaforma.com): .btn.btn--navy de base,
ancho completo y compacto. Usar esta combinación cada vez que se
agregue un botón de descarga de ficha en el sitio (pedido de Alan). */
.panel-card__cta { margin-top: auto; width: 100%; height: 40px; font-size: 14.7px; padding: 0 12px; }
/* Adaptables a cada proyecto — texto en 2 columnas: cartera de proyectos a la
izquierda, y el párrafo de la tecnología OSB destacado en un recuadro con
fondo blanco y en negrita, a la derecha (pedido de Alan). */
.adaptables__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.adaptables__highlight {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-med); /* antes fw-xbold: menos peso (pedido de Alan) */
padding: 22px 26px; border-radius: 4px; box-shadow: var(--card-shadow);
}
/* Adaptables a cada proyecto — foto + tabla de resistencias (pedido de Alan).
margin-top +20% (antes 46px) para separar más el render del texto de
arriba. */
.adaptables__grid { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: center; margin-top: 55px; }
/* Render con fondo transparente: se muestra completo, sin recortar ni caja
fija, con un drop-shadow muy leve (mismo criterio que .panel-card__media).
Se desplaza hacia la izquierda hasta sobresalir un 10% del ancho de
contenido (pedido de Alan): crece hacia la izquierda, ancla derecha
sin cambios (mismo criterio que .panel-corte__sandwich). */
.adaptables__media {
display: flex; align-items: center; justify-content: center;
margin-left: calc(-1 * var(--w-content) * 0.10);
width: calc(100% + var(--w-content) * 0.10);
}
.adaptables__media img {
width: 100%; height: auto; max-width: 100%;
filter: drop-shadow(0 8px 14px rgba(22, 43, 62, .16));
}
/* Tabla de especificaciones: misma paleta navy/blanco y tipografía Heebo
del resto del sitio. Columna izquierda (propiedad) en navy —el mismo azul
del botón "Descargar ficha"— con texto blanco, columna derecha (valor)
alterna blanco/gris banda. Ninguna fuente en negrita (pedido de Alan). Al
pasar el mouse por una fila, se resalta en navy oscuro (izquierda) y en la
banda gris (derecha) para que se lea qué fila se está mirando. */
.specs-table-wrap { border: var(--border); border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table th, .specs-table td { padding: 15px 18px; font-size: 14.5px; line-height: 1.3; transition: background-color .2s ease, color .2s ease; }
.specs-table th {
background: var(--c-navy); color: var(--c-white);
font-weight: var(--fw-reg); text-align: left; width: 60%;
}
.specs-table td {
background: var(--c-white); color: var(--c-navy-900);
font-weight: var(--fw-light); text-align: center;
}
.specs-table tr:nth-child(even) td { background: var(--c-band); }
.specs-table tr:not(:last-child) th,
.specs-table tr:not(:last-child) td { border-bottom: 1px solid rgba(255,255,255,.08); }
.specs-table tr:hover th { background: var(--c-navy-900); }
.specs-table tr:hover td { background: var(--c-band); color: var(--c-navy); }
/* Especificaciones técnicas (debajo de "Tipos de panel") — mismo criterio
de diseño que la tabla de Adaptables: acento navy, sin negritas. Tres
grupos (Paneles / Placas / Accesorios) con una etiqueta lateral vertical,
cada uno con sus sub-tablas de medidas (pedido de Alan, ref. cassasip.com). */
.spec-groups { display: flex; flex-direction: column; gap: 34px; margin-top: 92px; } /* separación de los productos ×2 (antes 46px), pedido de Alan */
.spec-group { display: flex; align-items: stretch; gap: 22px; }
.spec-group__label {
flex-shrink: 0; width: 46px; border-radius: 4px;
background: var(--c-accent); color: var(--c-white); /* naranja del logo CassaSIP + texto blanco (pedido de Alan) */
display: flex; align-items: center; justify-content: center;
writing-mode: vertical-rl; transform: rotate(180deg);
font-size: 15.6px; /* 13px +20% (pedido de Alan) */
font-weight: var(--fw-reg); text-transform: uppercase; letter-spacing: .1em;
}
.spec-group__tables { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.spec-block__title { font-size: 14.5px; font-weight: var(--fw-reg); color: var(--c-navy-900); margin-bottom: 10px; }
.spec-block__title .spec-block__note { font-weight: var(--fw-light); color: var(--c-navy); font-size: 13px; }
.spec-block .specs-table-wrap { overflow-x: auto; }
.specs-table--grid { min-width: 560px; }
.specs-table--grid th, .specs-table--grid td { padding: 12px 14px; font-size: 13.5px; white-space: nowrap; }
.specs-table--grid thead th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: center;
}
.specs-table--grid thead th:first-child { background: var(--c-navy-900); }
.specs-table--grid tbody th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: left; width: auto;
}
.specs-table--grid tbody td {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-light); text-align: center;
}
.specs-table--grid tbody tr:nth-child(even) td { background: var(--c-band); }
.specs-table--grid tbody tr:hover th { background: var(--c-navy-900); }
.specs-table--grid tbody tr:hover td { background: var(--c-band); color: var(--c-navy); }
@media (max-width: 690px) {
.spec-group { flex-direction: column; gap: 10px; }
.spec-group__label {
width: 100%; writing-mode: horizontal-tb; transform: none; padding: 8px; height: auto;
}
}
@media (max-width: 1080px) {
.adaptables__intro { grid-template-columns: 1fr; gap: 20px; }
.adaptables__grid { grid-template-columns: 1fr; gap: 28px; }
/* en una sola columna el desborde a la izquierda no tiene sentido
(no queda margen de página del que sobresalir): se desactiva */
.adaptables__media { margin-left: 0; width: 100%; max-width: 460px; margin-inline: auto; }
.specs-table-wrap { max-width: 460px; margin-inline: auto; width: 100%; }
}
/* ------------------------------------------------------------
PERFILES — Contanos qué necesitás (pedido de Ceci vía Alan).
3 cards con foto en blanco y negro tapada por una "cortina" navy con
textura diagonal sutil; al hacer hover la cortina se corre hacia la
derecha con clip-path (no se desvanece, se desliza), la foto recupera
color + zoom leve, aparece una línea de acento naranja creciendo bajo
el título y la flecha se desplaza. Entrada: swipe hacia arriba
escalonado al entrar en viewport (ver "Perfiles CassaSIP" en
js/script.js), misma familia de efecto que .panel-card pero vertical
en vez de lateral, para variar. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.perfiles-sip__grid {
/* mismo ajuste que .familia-grid: .section__head no trae separación
propia acá (pedido de Alan: se había achicado respecto al prototipo). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.perfil-sip-card {
opacity: 0;
transform: translateY(46px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.perfil-sip-card.is-visible { opacity: 1; transform: translateY(0); }
.perfil-sip-card__link {
position: relative;
display: block;
border: var(--border);
box-shadow: var(--card-shadow);
transition: box-shadow var(--t-base), transform var(--t-base);
}
.perfil-sip-card__link:hover,
.perfil-sip-card__link:focus-visible {
box-shadow: 0 8px 30px rgba(22, 43, 62, .16);
transform: translateY(-4px);
}
.perfil-sip-card__media {
position: relative;
height: 300px;
overflow: hidden;
}
.perfil-sip-card__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.05);
transform: scale(1.03);
transition: transform .6s ease, filter .6s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__img,
.perfil-sip-card__link:focus-visible .perfil-sip-card__img {
filter: grayscale(0) contrast(1);
transform: scale(1.1);
}
.perfil-sip-card__curtain {
position: absolute; inset: 0;
background:
repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px),
linear-gradient(150deg, var(--c-navy-900) 0%, var(--c-navy) 100%);
clip-path: inset(0 0 0 0);
transition: clip-path .55s cubic-bezier(.65,0,.35,1);
}
.perfil-sip-card__link:hover .perfil-sip-card__curtain,
.perfil-sip-card__link:focus-visible .perfil-sip-card__curtain {
clip-path: inset(0 0 0 100%);
}
.perfil-sip-card__num {
position: absolute; top: 18px; left: 20px;
font-size: 13px; font-weight: var(--fw-xbold);
color: rgba(255,255,255,.55);
letter-spacing: .06em;
transition: opacity .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__num,
.perfil-sip-card__link:focus-visible .perfil-sip-card__num { opacity: 0; }
.perfil-sip-card__body {
position: relative;
background: var(--c-white);
padding: 22px 22px 26px;
}
.perfil-sip-card__accent {
display: block;
height: 3px;
width: 0%;
background: var(--c-accent);
transition: width .45s ease;
margin-bottom: 14px;
}
.perfil-sip-card__link:hover .perfil-sip-card__accent,
.perfil-sip-card__link:focus-visible .perfil-sip-card__accent { width: 100%; }
.perfil-sip-card__label {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
font-size: 15px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .02em;
color: var(--c-navy-900);
}
.perfil-sip-card__label svg {
width: 18px; height: 18px; flex-shrink: 0;
fill: none; stroke: var(--c-navy-900); stroke-width: 2;
transform: translateX(0);
transition: transform .35s ease, stroke .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__label svg,
.perfil-sip-card__link:focus-visible .perfil-sip-card__label svg {
transform: translateX(6px);
stroke: var(--c-accent);
}
.perfil-sip-card__desc {
margin-top: 8px;
font-size: 14.7px; line-height: 1.55; font-weight: var(--fw-light);
color: var(--c-gray);
}
@media (max-width: 1080px) {
.perfiles-sip__grid { grid-template-columns: 1fr; gap: 20px; }
.perfil-sip-card { transform: translateY(28px); }
.perfil-sip-card__media { height: 260px; }
}
/* ------------------------------------------------------------
TU PROYECTO — CassaSIP (pedido de Alan).
1 card "hero" a ancho completo (mitad de alto que una card de
grilla) + grilla 2x2 con las 4 restantes. Título siempre
visible sobre la foto; párrafo + CTA revelados al hover con
swipe desde la izquierda. Hover "tecla de piano" con zoom IN:
toda la card crece y el fondo de color sube al mismo tiempo
(--bg-delay: 0s); el texto arranca cuando ese swipe del fondo
va por la mitad (--text-delay: .15s, 50% de --bg-dur), para que
no se sienta "atrasado". Mismo mecanismo de contra-escala que
Familia Cassaforma para que el texto no crezca junto con la
card.
------------------------------------------------------------ */
.tuproyecto-grid {
margin-top: 46px;
list-style: none; padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
--press-scale: 1.035;
--press-dur: .3s;
--bg-dur: .3s;
--bg-delay: 0s;
--text-dur: .3s;
--text-delay: .15s; /* arranca cuando el swipe del fondo va por la mitad (50% de .3s) */
}
.tuproyecto-card--hero { grid-column: 1 / -1; }
.tuproyecto-card { opacity: 0; transform: translateY(40px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1); }
.tuproyecto-card.is-visible { opacity: 1; transform: translateY(0); }
.tuproyecto-card__link {
position: relative; display: block;
aspect-ratio: 2.1573 / 1;
background: var(--c-white); border: 1px solid var(--c-line); box-shadow: var(--card-shadow);
overflow: hidden; transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* Card hero: mismo ancho, la mitad del alto proporcional (el doble de "achatada") */
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 4.3147 / 1; }
.tuproyecto-card__link:hover, .tuproyecto-card__link:focus-visible {
transform: scale(var(--press-scale));
box-shadow: 0 14px 34px rgba(22, 43, 62, .28);
z-index: 5;
}
.tuproyecto-card__media { position: absolute; inset: 0; }
.tuproyecto-card__media img {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: grayscale(1); transition: filter .5s ease;
}
.tuproyecto-card__link:hover .tuproyecto-card__media img,
.tuproyecto-card__link:focus-visible .tuproyecto-card__media img { filter: grayscale(0); }
/* Scrim permanente para que el título siempre se lea */
.tuproyecto-card__link::after {
content: ""; position: absolute; z-index: 1; inset: 0;
background: linear-gradient(160deg, rgba(22,43,62,.55) 0%, rgba(22,43,62,.22) 45%, rgba(22,43,62,.05) 70%);
}
.tuproyecto-card__title {
position: relative; z-index: 2; display: block;
padding: 30px 0 0 34px;
font-size: 25.6px; line-height: 1.2; font-weight: var(--fw-light); color: var(--c-white);
}
/* Filete arriba en el naranja del logo CassaSIP, para resaltar cada card */
.tuproyecto-card__link::before {
content: ""; position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 2px;
background: var(--c-accent);
}
.tuproyecto-card__panel-bg {
position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__panel-bg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__panel-bg { transform: translateY(0); }
.tuproyecto-card__text {
position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 22px 34px 26px;
max-width: 560px;
color: var(--c-white); opacity: 0;
transform: translateX(-26px) scale(1); transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__text,
.tuproyecto-card__link:focus-visible .tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.tuproyecto-card__claim { display: block; font-size: 19.2px; line-height: 1.5; font-weight: var(--fw-light); color: var(--c-white); }
.tuproyecto-card__cta {
display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
font-size: 16.8px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; color: var(--c-white);
}
.tuproyecto-card__cta svg { width: 16.8px; height: 16.8px; fill: none; stroke: var(--c-white); stroke-width: 2.4; transform: translateX(0); transition: transform .3s ease; }
.tuproyecto-card__link:hover .tuproyecto-card__cta svg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__cta svg { transform: translateX(4px); }
@media (max-width: 900px) {
.tuproyecto-grid { grid-template-columns: 1fr; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 2.1573 / 1; }
}
@media (max-width: 690px) {
.tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card__title { font-size: 19.2px; padding: 20px 0 0 20px; }
.tuproyecto-card__text { padding: 16px 20px 20px; }
/* En touch no hay hover real: panel y CTA quedan siempre visibles,
igual que en Familia Cassaforma (el párrafo se oculta para que
no choque con el título en cards bajas). */
.tuproyecto-card__panel-bg { transform: translateY(0); transition: none; }
.tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
}
.tuproyecto-card__claim { display: none; }
.tuproyecto-card__cta { margin-top: 0; }
}
/* Barra "beneficios clave" — mismas medidas que .sc-ahorros de
cassaforma.com (sistema-constructivo.css, bloque GRANDES AHORROS):
3 columnas centradas, ícono circular de 71px (ya viene con su color
en el propio .svg), separador vertical negro entre columnas. */
.ahorros { padding: 70px 0 62px; text-align: center; } /* +10% arriba y abajo (antes 64px/56px), pedido de Alan */
.ahorros__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.ahorro { display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 24px; }
.ahorro + .ahorro::before {
content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
width: 2px; background: var(--c-black);
}
.ahorro__icon { display: block; width: 71px; height: 71px; margin: 0 auto 20px; }
.ahorro__label { font-size: 23px; line-height: 1.3; font-weight: var(--fw-light); color: var(--c-navy); }
@media (max-width: 690px) {
.ahorros__grid { grid-template-columns: 1fr; row-gap: 32px; }
.ahorro + .ahorro::before { display: none; }
.ahorro__label { font-size: 19px; }
}
/* Beneficios (3 pilares) */
/* Beneficios de la construcción SIP — 2 columnas: pilares apilados con
viñeta numerada + logos de certificaciones a la izquierda, imagen a la
derecha (pedido de Alan). Separación entre columnas ×2 (antes 60px).
La imagen de la derecha no aporta su alto natural al cálculo de la fila
(queda position:absolute dentro de .beneficios__media, que por eso no
tiene alto propio): así la altura de la fila la fija SOLO la columna
izquierda (pilares + logos), y la imagen se recorta arriba/abajo con
object-fit:cover para igualar siempre esa altura — salvo en mobile,
donde se desactiva (ver media query). */
.beneficios__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; align-items: stretch; }
.beneficios__left { display: flex; flex-direction: column; }
.pilares__grid { display: flex; flex-direction: column; gap: 32px; }
.pilar__head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.pilar__num {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
background: var(--c-navy); color: var(--c-white);
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: var(--fw-xbold);
}
.pilar__title { font-size: 19px; font-weight: var(--fw-xbold); color: var(--c-navy-900); text-transform: uppercase; margin: 0; }
.pilar__text { margin-top: 0; font-size: 15.5px; line-height: 1.6; }
/* Logos de certificaciones — una sola imagen ya compuesta con los 6 logos
(2 filas x 3 columnas), mismo ancho que los párrafos de arriba (pedido
de Alan: usar la imagen completa en vez de 6 El panel SIP es uno de los sistemas de construcción en seco más tecnológicos del mundo, sus siglas significan Structural Insulated Panel o Panel Aislante Estructural. Consiste en dos placas de OSB (Oriented Strand Board), vinculadas a un alma de poliestireno expandido de alta densidad (EPS), a través de un adhesivo de alta capacidad estructural. Los paneles CASSASIP se fabrican en una de nuestras dos plantas que tenemos en el país. La planta se encuentra en Villa Mercedes, San Luis. Desde allí, abastecemos a todo el país. Contamos con representaciones en varias provincias como Mendoza, Córdoba, Chubut, Chaco y Tucumán. Más un punto de acopio de diversos materiales relacionados al EPS en zona norte de Buenos Aires. Los materiales utilizados son placas OSB con certificación APA (The Engineered Wood Association), agencia de calidad que certifica la mayor cantidad de tableros estructurales del mundo. Es un sello de calidad de cumplimiento de normas estructurales de EE.UU. El núcleo del panel es de EPS de 15 kg/m3 de densidad. Todos nuestros productos son certificados con altos estándares de calidad. El panel SIP se caracteriza por su eficiencia térmica, capacidad estructural, economía, sustentabilidad y rápida construcción. Es uno de los sistemas constructivos más avanzados en el mundo. Se utiliza especialmente en países con bajas temperaturas por su alto nivel de eficiencia térmica. La construcción con paneles SIP representa varias ventajas en comparación con otros sistemas tradicionales: El sistema CASSASIP es uno de los sistemas de construcción en seco más responsables con el medio ambiente debido al aislamiento interno de EPS. La envolvente de un edificio realizado con paneles SIP proporciona: Estudios demuestran que el ahorro puede llegar al 60%, sin embargo este porcentaje debe ser apoyado por buenas prácticas constructivas que aseguren la buena estanqueidad en cada ensamble y encuentro de los paneles. La pérdida térmica de una vivienda depende de la aislación de la envolvente y, de manera relevante, de la estanqueidad de las juntas. El panel puede ser utilizado tanto en muros exteriores como interiores, techos y pisos, para todo tipo de proyectos arquitectónicos. Los paneles CASSASIP permiten el trazado de las instalaciones de manera interna, por medio de canalizaciones previamente deprimidas en el EPS. Los ductos también pueden instalarse por el exterior, en el espacio entre clavaderas de revestimiento, debiendo perforar el muro para realizar las acometidas donde se requiera. Se puede aplicar todo tipo de revestimientos, siempre y cuando se coloque la barrera de agua y viento. Se puede aplicar todo tipo de alternativas como siding, encapados, elementos de PVC, etc. Al aplicar una barrera hidrófuga, resistente al agua y viento, en toda la envolvente exterior, las estructuras quedan herméticas en comparación con otros métodos de construcción. En el caso de utilizar estructura de madera se deberá aplicar pintura a base de goma tanto en las clavaderas exteriores como en todos los elementos de cierre. También se deberá colocar una cinta de empalme que garantice una excelente fuerza de adhesión y resistencia en todas las superficies, asegurando su funcionalidad en el tiempo, incluso en condiciones desfavorables, por ejemplo sobre superficies con polvo o húmedas. Los paneles CASSASIP se fabrican y utilizan, como sistema constructivo, hace más de 70 años en países como Estados Unidos, Canadá, Australia y norte de Europa. Cumplen con la norma ASTM E C-481 de Estados Unidos, la cual garantiza su durabilidad, asegurando tanto la calidad aislante como la estructura del panel. El crecimiento del sistema constructivo continúa en auge, debido a sus características térmicas y a la rapidez en la ejecución de obra. Sí, el sistema es apto PRO.CRE.AR. Realizamos capacitaciones y asesoramiento técnico. De necesitar ejecutar y/o construir una obra, brindamos contactos de empresas constructoras e instaladores que trabajan con el sistema, según el tipo de proyecto y ubicación de la obra. Todos los materiales utilizados en la fabricación de nuestros paneles SIP están certificados por cada una de las empresas proveedoras, de acuerdo a las normas de construcción vigentes. Los paneles fabricados por CASSASIP cumplen con las exigencias nacionales de acuerdo a los ensayos de compresión, cargas horizontales y flexión. Nuestros paneles están testeados en laboratorios como el INTI (Instituto Nacional de Tecnología Industrial) y contamos con el Certificado de Aptitud Técnica (CAT), otorgado por el Ministerio de Desarrollo Territorial y Hábitat. Contamos con dos opciones de armado de presupuestos: separadas). */
.beneficios__certs {
margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--c-line);
}
.beneficios__certs img { display: block; width: 100%; height: auto; }
.beneficios__media { position: relative; overflow: hidden; border-radius: 4px; } /* recorta el zoom del ken burns dentro de su propio cuadro (mismo criterio que .sobre-sip__media) */
.beneficios__media img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
animation: sobreSipKenBurns 18s ease-in-out infinite alternate; /* mismo ken burns que la foto de "Construcción con paneles SIP" */
}
/* ¿Por qué construir con SIP? — imagen del despiece a la izquierda, lista
de items con bullets a la derecha. Tipografía tomada de la lista de capas
de cassaforma.com (sistema-constructivo.css: .sc-panellosa__label/__item):
Heebo Light, navy, bullet "•" y divisor fino bajo cada renglón. */
.porque-sip { display: grid; grid-template-columns: minmax(300px, 460px) 1fr; gap: 60px; align-items: center; margin-top: 46px; }
.porque-sip__media img { width: 100%; display: block; }
.porque-sip__list {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto);
column-gap: 48px;
}
.porque-sip__list li {
padding: 14px 0;
border-bottom: 1px solid rgba(22, 43, 62, .15);
font-size: 19px; letter-spacing: .02em;
font-weight: var(--fw-light); color: var(--c-navy);
}
.porque-sip__list li::before { content: "\2022 "; }
@media (max-width: 1080px) {
.porque-sip { grid-template-columns: 1fr; }
.porque-sip__media { max-width: 460px; margin-inline: auto; }
}
@media (max-width: 690px) {
.porque-sip__list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
}
/* Logística — texto (Logística + Almacenamiento apilados) a la izquierda,
foto en blanco y negro con ken burns a la derecha (pedido de Alan). La
imagen no aporta su alto natural al cálculo de la fila (position:absolute
dentro de .logistica__media, sin alto propio): así la altura de la fila
la fija SOLO la columna de texto, y la foto se recorta con object-fit:cover
para igualar siempre esa altura — mismo criterio que .beneficios__media. */
.logistica__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: stretch; }
.logistica__text { display: flex; flex-direction: column; gap: 32px; }
.logistica__item h3 { font-size: 19px; font-weight: var(--fw-xbold); text-transform: uppercase; color: var(--c-navy-900); margin-bottom: 12px; }
.logistica__media { position: relative; overflow: hidden; border-radius: 4px; }
.logistica__img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
transition: filter .45s ease;
/* Es una sola foto fija (no un carrusel): un zoom-in ÚNICO de 10s que
termina y se queda ahí (forwards, sin infinite/alternate) — solo
"ida", nunca vuelve para atrás y nunca vuelve a saltar (pedido de
Alan). */
animation: destacadoKenBurns 10s ease-out forwards;
}
.logistica__media:hover .logistica__img { filter: grayscale(0); }
/* FAQ */
.faq { max-width: 880px; }
.faq__item { border-bottom: var(--border); }
.faq__item summary {
cursor: pointer; list-style: none; padding: 20px 0;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
font-size: 16.5px; font-weight: var(--fw-med); color: var(--c-navy-900);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
content: "+"; font-size: 22px; font-weight: var(--fw-light); color: var(--c-navy); flex-shrink: 0;
}
.faq__item[open] summary::after { content: "–"; }
.faq__body { padding: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: var(--c-gray); }
.faq__body ul { list-style: disc; padding-left: 20px; margin-top: 10px; }
.faq__body li { margin-bottom: 6px; }
.faq__body p + p { margin-top: 12px; }
/* Proceso constructivo — solo título + video a todo el ancho del
contenido (pedido de Alan; antes había una lista de pasos numerados). */
.proceso__video { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.proceso__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Capacitación */
.capacitacion { text-align: center; }
.capacitacion h2 { max-width: 620px; margin-inline: auto; }
.capacitacion .btn { margin-top: 30px; }
/* Presupuesto / form */
.presupuesto__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.form__field { margin-bottom: 16px; }
.form__label { display: block; font-size: 14px; font-weight: var(--fw-med); margin-bottom: 7px; }
.form__input, .form__select {
display: block; width: 100%; height: 46px; padding: 0 14px;
border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-navy-900);
font-family: var(--ff); font-size: 15px;
}
.form__input:focus, .form__select:focus { border-color: var(--c-navy); outline: none; }
.form__submit { margin-top: 6px; width: 100%; }
/* ------------------------------------------------------------
FOOTER
------------------------------------------------------------ */
.footer { background: var(--c-navy-900); color: var(--c-white); padding-block: 64px 32px; }
.footer__top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.footer__brand img { height: 40px; }
.footer__brand p { margin-top: 18px; font-size: 14px; color: rgba(255,255,255,.65); max-width: 260px; }
.footer__col h3 { font-size: 13px; font-weight: var(--fw-xbold); letter-spacing: .06em; text-transform: uppercase; color: var(--c-white); margin-bottom: 16px; }
.footer__col ul li { margin-bottom: 10px; }
.footer__col a { font-size: 14px; color: rgba(255,255,255,.75); }
.footer__col a:hover { color: var(--c-white); }
.footer__bottom {
margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15);
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
font-size: 13.5px; color: rgba(255,255,255,.6);
}
.footer__social { display: flex; gap: 14px; }
.footer__social svg { width: 16px; height: 16px; fill: rgba(255,255,255,.75); }
.footer__social a:hover svg { fill: var(--c-white); }
.footer__scrolltop { font-size: 13px; color: rgba(255,255,255,.6); }
.footer__scrolltop:hover { color: var(--c-white); }
/* ------------------------------------------------------------
RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 1169px) {
:root {
--fs-hero: 42px; --lh-hero: 46px;
--fs-hero-lead: 23px; --lh-hero-lead: 28px;
--h-hero: 660px;
}
.site-nav { gap: 15px; }
.site-nav__link { font-size: 13px; }
}
@media (max-width: 1080px) {
.site-nav { display: none; }
.destacado, .dos-columnas, .logistica__grid, .presupuesto__grid { grid-template-columns: 1fr; }
.paneles__grid { grid-template-columns: repeat(3, 1fr); }
/* En mobile se desactiva el recorte a la altura de la columna izquierda
(pedido de Alan): la imagen vuelve a su aspecto natural, en flujo. */
.beneficios__grid { grid-template-columns: 1fr; gap: 28px; align-items: normal; }
.beneficios__media img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
/* Mismo criterio que .beneficios__media: en mobile la foto de logística
vuelve a su aspecto natural, en flujo, debajo del texto. */
.logistica__grid { gap: 28px; }
.logistica__img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
.footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
:root {
--fs-hero: 34px; --lh-hero: 38px;
--fs-hero-lead: 19px; --lh-hero-lead: 26px;
--h-header: 84px; --h-hero: 560px;
}
.site-header__logo img { height: 40px; }
.hero .rule--light { width: 200px; margin: 24px 0 22px; }
}
@media (max-width: 690px) {
.site-topbar { display: none; }
:root {
--fs-hero: 27px; --lh-hero: 31px;
--fs-hero-lead: 16px; --lh-hero-lead: 24px;
--h-header: 70px; --h-hero: 520px;
}
.site-header__logo img { height: 34px; }
.hero .rule--light { width: 140px; margin: 20px 0 18px; }
.section { padding-block: 56px; }
.paneles__grid { grid-template-columns: 1fr 1fr; }
.footer__top { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------
FAMILIA CASSAFORMA — Conocé el resto de nuestras líneas
(pedido de Alan). Grilla de 5 cards (las otras líneas Cassaforma;
CassaSIP es esta misma web, no se lista a sí misma), cada una con
su color de marca en --linea-accent. Efecto "tecla de piano" v2:
TODA la card se hunde junta al pasar el mouse (borde, sombra,
logo, foto y fondo de color son todos descendientes del mismo
.familia-card__link escalado), así el degradé de color queda
siempre alineado con el borde mientras se achica. El texto es la
ÚNICA capa que NO se achica: usa un contra-escalado
(scale(calc(1 / var(--press-scale)))) que cancela el de su padre,
y entra con swipe desde la izquierda + fade-in medio segundo
después de que arranca el fondo de color. La foto NO hace zoom en
el hover (chocaba visualmente con el "hundido", pedido de Alan):
solo recupera color. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.familia-grid {
/* .section__head no trae separación propia (solo la agrega vía
".section__head + .section__grid", que esta grilla no usa) — se
fija acá a mano, mismo valor que esa regla general, para que quede
igual que en el prototipo (pedido de Alan: se había achicado). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
/* Timings del hover — un 50% más rápidos que la v1 (pedido de Alan). */
--press-scale: .965;
--press-dur: .167s;
--bg-dur: .3s;
--bg-delay: var(--press-dur);
--text-dur: .3s;
--text-delay: .5s;
}
.familia-card {
opacity: 0;
transform: translateY(40px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.familia-card.is-visible { opacity: 1; transform: translateY(0); }
.familia-card__link {
position: relative;
display: block;
height: 470px;
background: var(--c-white);
border: 1px solid var(--c-line);
box-shadow: var(--card-shadow);
overflow: hidden;
transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* "Tecla de piano": se achica y baja un poco, sombra se cierra en vez
de crecer (efecto de hundirse contra la superficie). */
.familia-card__link:hover,
.familia-card__link:focus-visible {
transform: scale(var(--press-scale)) translateY(3px);
box-shadow: 0 2px 10px rgba(22, 43, 62, .22);
}
.familia-card__logo {
position: relative;
z-index: 2;
height: 26px;
width: auto;
max-width: 74%;
margin: 26px auto 0;
object-fit: contain;
}
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 32px; margin-top: 23px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 31px; margin-top: 23px; }
.familia-card__media {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 72%;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
}
.familia-card__media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: bottom center;
filter: grayscale(1);
transition: filter .5s ease;
}
.familia-card__link[data-line="cassadeco"] .familia-card__media img { object-position: center bottom; }
/* Sin zoom en la foto: solo recupera color (pedido de Alan). */
.familia-card__link:hover .familia-card__media img,
.familia-card__link:focus-visible .familia-card__media img {
filter: grayscale(0);
}
/* Fondo de color: degradé del color de marca hacia transparente, 3/4
de la altura de la card. Hijo directo de .familia-card__link (no un
hermano aparte): se achica JUNTO con el resto de la card, así sus
márgenes quedan siempre alineados con el borde (pedido de Alan).
Entra con swipe de abajo hacia arriba apenas termina el "press". */
.familia-card__panel-bg {
position: absolute;
z-index: 2;
left: 0; right: 0; bottom: 0;
height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.familia-card__link:hover .familia-card__panel-bg,
.familia-card__link:focus-visible .familia-card__panel-bg {
transform: translateY(0);
}
/* Texto: la ÚNICA capa que NO se achica. Sigue siendo hijo de
.familia-card__link, pero en hover se le aplica un contra-escalado
(1 / var(--press-scale)) que cancela el de la card y lo deja
siempre a tamaño real (pedido de Alan). Entra con swipe desde la
izquierda + fade-in, medio segundo después de que arrancó el fondo
de color. */
.familia-card__text {
position: absolute;
z-index: 3;
left: 0; right: 0; bottom: 0;
padding: 18px 20px 20px;
color: var(--c-white);
opacity: 0;
transform: translateX(-26px) scale(1);
transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.familia-card__link:hover .familia-card__text,
.familia-card__link:focus-visible .familia-card__text {
opacity: 1;
transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.familia-card__claim {
display: block;
font-size: 14.6px; line-height: 1.45; font-weight: var(--fw-light);
color: var(--c-white);
}
.familia-card__cta {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 10px;
font-size: 13.8px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .03em;
color: var(--c-white);
}
.familia-card__cta svg {
width: 13px; height: 13px;
fill: none; stroke: var(--c-white); stroke-width: 2.4;
transform: translateX(0);
transition: transform .3s ease;
}
.familia-card__link:hover .familia-card__cta svg,
.familia-card__link:focus-visible .familia-card__cta svg {
transform: translateX(4px);
}
/* Filete de color arriba de la card: siempre visible, identifica la
marca aun antes del hover. Al ser ::before de .familia-card__link
también se hunde con toda la card (pedido de Alan). */
.familia-card__link::before {
content: "";
position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 4px;
background: var(--linea-accent, var(--c-navy-900));
}
@media (max-width: 1080px) {
.familia-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.familia-card__link { height: 420px; }
}
@media (max-width: 690px) {
.familia-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.familia-card__link { height: 340px; }
.familia-card__logo { height: 22px; margin-top: 20px; }
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 27px; margin-top: 18px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 26px; margin-top: 18px; }
/* En touch no hay hover real: el fondo de color y el CTA quedan
siempre visibles, para no depender de un tap sostenido. */
.familia-card__panel-bg { transform: translateY(0); transition: none; }
.familia-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
padding: 10px 14px 14px;
}
.familia-card__claim { display: none; }
.familia-card__cta { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; }
.hero__img, .destacado__img, .sobre-sip__img, .beneficios__media img { animation: none !important; transform: none; }
.hero__slide, .destacado__slide { transition-duration: .2s; }
.familia-card__link { transition-duration: .001ms; }
}
Preguntas Frecuentes
¿Qué es el panel CassaSIP?
¿Dónde se fabrican los paneles?
¿Qué materiales utiliza CassaSIP en sus paneles?
¿Cuáles son los principales beneficios que tiene el panel?
¿Cuáles son las ventajas de los paneles CASSASIP frente a los sistemas de construcción tradicional?
¿Existen ventajas respecto a otros sistemas de construcción en seco?
¿Es un sistema constructivo sustentable?
¿Cuánto es el ahorro en energía?
¿Para qué se usan?
¿Cómo se realizan las instalaciones?
¿Se pueden revestir?
¿Cómo actúa el panel frente a la humedad?
¿Cuál es la durabilidad de los paneles?
¿Es apto PRO.CRE.AR?
¿Quiero construir con paneles CassaSIP, cómo empiezo?
¿Qué aval me otorga CassaSIP?
¿Cómo hago para cotizar un proyecto?
por columna
(son hermanos en el DOM aunque visualmente queden uno al lado del
otro), así que el combinador de hermano adyacente lo tomaba también
y el 2º párrafo (columna derecha) quedaba corrido hacia abajo. Se
anula explícitamente para dejar ambas columnas alineadas por su top
(bug reportado por Alan). */
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.dos-columnas p + p { margin-top: 0; }
/* Construcción con paneles SIP — foto a la derecha (pedido de Alan). En
reposo: efecto ken burns continuo (zoom/paneo lento) y desaturada. Al
pasar el mouse: la animación se detiene, la imagen vuelve a su
posición/escala inicial (mismo mecanismo de siempre: se quita la
animation y la transition la lleva de vuelta suavemente) y recupera
el color — mismo criterio que .linea-card__media img en cassaforma.com,
invertido a pedido de Alan. */
/* padding-bottom reducido a la mitad (42px, antes 84px): acerca esta
sección a "Paneles CassaSIP" (pedido de Alan); el resto de los
paddings de .section quedan igual. */
#sobre-sip { padding-bottom: 42px; }
.sobre-sip__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: start; }
/* Párrafo "Incorporamos una nueva línea de producción..." destacado en
negrita y color naranja del logo (pedido de Alan) */
.sobre-sip__highlight { font-weight: var(--fw-xbold); color: var(--c-accent); }
.sobre-sip__media { position: relative; overflow: hidden; aspect-ratio: 4/5; }
.sobre-sip__img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
animation: sobreSipKenBurns 16s ease-in-out infinite alternate;
transition: filter .45s ease, transform .6s ease;
}
@keyframes sobreSipKenBurns {
0% { transform: scale(1) translate(0, 0); }
100% { transform: scale(1.14) translate(-2.5%, 2%); }
}
.sobre-sip__media:hover .sobre-sip__img,
.sobre-sip__media:focus-within .sobre-sip__img {
filter: grayscale(0);
animation: none;
transform: scale(1) translate(0, 0);
}
@media (max-width: 1080px) {
.sobre-sip__grid { grid-template-columns: 1fr; gap: 32px; }
.sobre-sip__media { order: -1; max-width: 460px; margin-inline: auto; aspect-ratio: 4/3; }
}
/* Tipos de panel */
.paneles__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.panel-card {
/* sin recuadro: panel, título y botón flotan directamente sobre el fondo
de la sección (pedido de Alan) */
border: none; box-shadow: none; background: transparent; display: flex; flex-direction: column;
/* entrada tipo swipe (derecha → izquierda), escalonada vía JS
(.is-visible); velocidad aumentada otra vez (antes .5s/card cada 1000ms,
ahora .35s/card cada 220ms — pedido de Alan) */
opacity: 0; transform: translateX(70px); transition: opacity .35s ease, transform .35s ease;
}
.panel-card.is-visible { opacity: 1; transform: translateX(0); }
/* Render con fondo transparente: se muestra completo (sin recortar), centrado,
con un drop-shadow muy leve para dar un efecto 3D sutil (pedido de Alan).
max-height ampliado (antes 210px) para que la imagen use todo el ancho
disponible de la card en vez de quedar acotada por la altura: efecto neto,
~120% más grande (pedido de Alan). */
.panel-card__media { min-height: 465px; padding: 10px 8px 6px; display: flex; align-items: center; justify-content: center; }
/* El render es también un link de descarga de su ficha técnica (mismo PDF
que el botón); al pasar el mouse, zoom leve sobre la imagen (pedido de
Alan). */
.panel-card__media a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.panel-card__media img {
width: 100%; max-width: 100%; height: auto; max-height: 465px; object-fit: contain;
filter: drop-shadow(0 6px 10px rgba(22, 43, 62, .16));
transition: transform .35s ease;
}
.panel-card__media a:hover img,
.panel-card__media a:focus-visible img {
transform: scale(1.06);
}
.panel-card__body { padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.panel-card__name { font-size: 15px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; }
/* Botón "Descargar ficha" — mismo "tipo" que .sc-panel__cta en
sistema-constructivo.css (cassaforma.com): .btn.btn--navy de base,
ancho completo y compacto. Usar esta combinación cada vez que se
agregue un botón de descarga de ficha en el sitio (pedido de Alan). */
.panel-card__cta { margin-top: auto; width: 100%; height: 40px; font-size: 14.7px; padding: 0 12px; }
/* Adaptables a cada proyecto — texto en 2 columnas: cartera de proyectos a la
izquierda, y el párrafo de la tecnología OSB destacado en un recuadro con
fondo blanco y en negrita, a la derecha (pedido de Alan). */
.adaptables__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.adaptables__highlight {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-med); /* antes fw-xbold: menos peso (pedido de Alan) */
padding: 22px 26px; border-radius: 4px; box-shadow: var(--card-shadow);
}
/* Adaptables a cada proyecto — foto + tabla de resistencias (pedido de Alan).
margin-top +20% (antes 46px) para separar más el render del texto de
arriba. */
.adaptables__grid { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: center; margin-top: 55px; }
/* Render con fondo transparente: se muestra completo, sin recortar ni caja
fija, con un drop-shadow muy leve (mismo criterio que .panel-card__media).
Se desplaza hacia la izquierda hasta sobresalir un 10% del ancho de
contenido (pedido de Alan): crece hacia la izquierda, ancla derecha
sin cambios (mismo criterio que .panel-corte__sandwich). */
.adaptables__media {
display: flex; align-items: center; justify-content: center;
margin-left: calc(-1 * var(--w-content) * 0.10);
width: calc(100% + var(--w-content) * 0.10);
}
.adaptables__media img {
width: 100%; height: auto; max-width: 100%;
filter: drop-shadow(0 8px 14px rgba(22, 43, 62, .16));
}
/* Tabla de especificaciones: misma paleta navy/blanco y tipografía Heebo
del resto del sitio. Columna izquierda (propiedad) en navy —el mismo azul
del botón "Descargar ficha"— con texto blanco, columna derecha (valor)
alterna blanco/gris banda. Ninguna fuente en negrita (pedido de Alan). Al
pasar el mouse por una fila, se resalta en navy oscuro (izquierda) y en la
banda gris (derecha) para que se lea qué fila se está mirando. */
.specs-table-wrap { border: var(--border); border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table th, .specs-table td { padding: 15px 18px; font-size: 14.5px; line-height: 1.3; transition: background-color .2s ease, color .2s ease; }
.specs-table th {
background: var(--c-navy); color: var(--c-white);
font-weight: var(--fw-reg); text-align: left; width: 60%;
}
.specs-table td {
background: var(--c-white); color: var(--c-navy-900);
font-weight: var(--fw-light); text-align: center;
}
.specs-table tr:nth-child(even) td { background: var(--c-band); }
.specs-table tr:not(:last-child) th,
.specs-table tr:not(:last-child) td { border-bottom: 1px solid rgba(255,255,255,.08); }
.specs-table tr:hover th { background: var(--c-navy-900); }
.specs-table tr:hover td { background: var(--c-band); color: var(--c-navy); }
/* Especificaciones técnicas (debajo de "Tipos de panel") — mismo criterio
de diseño que la tabla de Adaptables: acento navy, sin negritas. Tres
grupos (Paneles / Placas / Accesorios) con una etiqueta lateral vertical,
cada uno con sus sub-tablas de medidas (pedido de Alan, ref. cassasip.com). */
.spec-groups { display: flex; flex-direction: column; gap: 34px; margin-top: 92px; } /* separación de los productos ×2 (antes 46px), pedido de Alan */
.spec-group { display: flex; align-items: stretch; gap: 22px; }
.spec-group__label {
flex-shrink: 0; width: 46px; border-radius: 4px;
background: var(--c-accent); color: var(--c-white); /* naranja del logo CassaSIP + texto blanco (pedido de Alan) */
display: flex; align-items: center; justify-content: center;
writing-mode: vertical-rl; transform: rotate(180deg);
font-size: 15.6px; /* 13px +20% (pedido de Alan) */
font-weight: var(--fw-reg); text-transform: uppercase; letter-spacing: .1em;
}
.spec-group__tables { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.spec-block__title { font-size: 14.5px; font-weight: var(--fw-reg); color: var(--c-navy-900); margin-bottom: 10px; }
.spec-block__title .spec-block__note { font-weight: var(--fw-light); color: var(--c-navy); font-size: 13px; }
.spec-block .specs-table-wrap { overflow-x: auto; }
.specs-table--grid { min-width: 560px; }
.specs-table--grid th, .specs-table--grid td { padding: 12px 14px; font-size: 13.5px; white-space: nowrap; }
.specs-table--grid thead th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: center;
}
.specs-table--grid thead th:first-child { background: var(--c-navy-900); }
.specs-table--grid tbody th {
background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-reg); text-align: left; width: auto;
}
.specs-table--grid tbody td {
background: var(--c-white); color: var(--c-navy-900); font-weight: var(--fw-light); text-align: center;
}
.specs-table--grid tbody tr:nth-child(even) td { background: var(--c-band); }
.specs-table--grid tbody tr:hover th { background: var(--c-navy-900); }
.specs-table--grid tbody tr:hover td { background: var(--c-band); color: var(--c-navy); }
@media (max-width: 690px) {
.spec-group { flex-direction: column; gap: 10px; }
.spec-group__label {
width: 100%; writing-mode: horizontal-tb; transform: none; padding: 8px; height: auto;
}
}
@media (max-width: 1080px) {
.adaptables__intro { grid-template-columns: 1fr; gap: 20px; }
.adaptables__grid { grid-template-columns: 1fr; gap: 28px; }
/* en una sola columna el desborde a la izquierda no tiene sentido
(no queda margen de página del que sobresalir): se desactiva */
.adaptables__media { margin-left: 0; width: 100%; max-width: 460px; margin-inline: auto; }
.specs-table-wrap { max-width: 460px; margin-inline: auto; width: 100%; }
}
/* ------------------------------------------------------------
PERFILES — Contanos qué necesitás (pedido de Ceci vía Alan).
3 cards con foto en blanco y negro tapada por una "cortina" navy con
textura diagonal sutil; al hacer hover la cortina se corre hacia la
derecha con clip-path (no se desvanece, se desliza), la foto recupera
color + zoom leve, aparece una línea de acento naranja creciendo bajo
el título y la flecha se desplaza. Entrada: swipe hacia arriba
escalonado al entrar en viewport (ver "Perfiles CassaSIP" en
js/script.js), misma familia de efecto que .panel-card pero vertical
en vez de lateral, para variar. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.perfiles-sip__grid {
/* mismo ajuste que .familia-grid: .section__head no trae separación
propia acá (pedido de Alan: se había achicado respecto al prototipo). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.perfil-sip-card {
opacity: 0;
transform: translateY(46px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.perfil-sip-card.is-visible { opacity: 1; transform: translateY(0); }
.perfil-sip-card__link {
position: relative;
display: block;
border: var(--border);
box-shadow: var(--card-shadow);
transition: box-shadow var(--t-base), transform var(--t-base);
}
.perfil-sip-card__link:hover,
.perfil-sip-card__link:focus-visible {
box-shadow: 0 8px 30px rgba(22, 43, 62, .16);
transform: translateY(-4px);
}
.perfil-sip-card__media {
position: relative;
height: 300px;
overflow: hidden;
}
.perfil-sip-card__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.05);
transform: scale(1.03);
transition: transform .6s ease, filter .6s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__img,
.perfil-sip-card__link:focus-visible .perfil-sip-card__img {
filter: grayscale(0) contrast(1);
transform: scale(1.1);
}
.perfil-sip-card__curtain {
position: absolute; inset: 0;
background:
repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px),
linear-gradient(150deg, var(--c-navy-900) 0%, var(--c-navy) 100%);
clip-path: inset(0 0 0 0);
transition: clip-path .55s cubic-bezier(.65,0,.35,1);
}
.perfil-sip-card__link:hover .perfil-sip-card__curtain,
.perfil-sip-card__link:focus-visible .perfil-sip-card__curtain {
clip-path: inset(0 0 0 100%);
}
.perfil-sip-card__num {
position: absolute; top: 18px; left: 20px;
font-size: 13px; font-weight: var(--fw-xbold);
color: rgba(255,255,255,.55);
letter-spacing: .06em;
transition: opacity .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__num,
.perfil-sip-card__link:focus-visible .perfil-sip-card__num { opacity: 0; }
.perfil-sip-card__body {
position: relative;
background: var(--c-white);
padding: 22px 22px 26px;
}
.perfil-sip-card__accent {
display: block;
height: 3px;
width: 0%;
background: var(--c-accent);
transition: width .45s ease;
margin-bottom: 14px;
}
.perfil-sip-card__link:hover .perfil-sip-card__accent,
.perfil-sip-card__link:focus-visible .perfil-sip-card__accent { width: 100%; }
.perfil-sip-card__label {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
font-size: 15px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .02em;
color: var(--c-navy-900);
}
.perfil-sip-card__label svg {
width: 18px; height: 18px; flex-shrink: 0;
fill: none; stroke: var(--c-navy-900); stroke-width: 2;
transform: translateX(0);
transition: transform .35s ease, stroke .35s ease;
}
.perfil-sip-card__link:hover .perfil-sip-card__label svg,
.perfil-sip-card__link:focus-visible .perfil-sip-card__label svg {
transform: translateX(6px);
stroke: var(--c-accent);
}
.perfil-sip-card__desc {
margin-top: 8px;
font-size: 14.7px; line-height: 1.55; font-weight: var(--fw-light);
color: var(--c-gray);
}
@media (max-width: 1080px) {
.perfiles-sip__grid { grid-template-columns: 1fr; gap: 20px; }
.perfil-sip-card { transform: translateY(28px); }
.perfil-sip-card__media { height: 260px; }
}
/* ------------------------------------------------------------
TU PROYECTO — CassaSIP (pedido de Alan).
1 card "hero" a ancho completo (mitad de alto que una card de
grilla) + grilla 2x2 con las 4 restantes. Título siempre
visible sobre la foto; párrafo + CTA revelados al hover con
swipe desde la izquierda. Hover "tecla de piano" con zoom IN:
toda la card crece y el fondo de color sube al mismo tiempo
(--bg-delay: 0s); el texto arranca cuando ese swipe del fondo
va por la mitad (--text-delay: .15s, 50% de --bg-dur), para que
no se sienta "atrasado". Mismo mecanismo de contra-escala que
Familia Cassaforma para que el texto no crezca junto con la
card.
------------------------------------------------------------ */
.tuproyecto-grid {
margin-top: 46px;
list-style: none; padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
--press-scale: 1.035;
--press-dur: .3s;
--bg-dur: .3s;
--bg-delay: 0s;
--text-dur: .3s;
--text-delay: .15s; /* arranca cuando el swipe del fondo va por la mitad (50% de .3s) */
}
.tuproyecto-card--hero { grid-column: 1 / -1; }
.tuproyecto-card { opacity: 0; transform: translateY(40px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1); }
.tuproyecto-card.is-visible { opacity: 1; transform: translateY(0); }
.tuproyecto-card__link {
position: relative; display: block;
aspect-ratio: 2.1573 / 1;
background: var(--c-white); border: 1px solid var(--c-line); box-shadow: var(--card-shadow);
overflow: hidden; transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* Card hero: mismo ancho, la mitad del alto proporcional (el doble de "achatada") */
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 4.3147 / 1; }
.tuproyecto-card__link:hover, .tuproyecto-card__link:focus-visible {
transform: scale(var(--press-scale));
box-shadow: 0 14px 34px rgba(22, 43, 62, .28);
z-index: 5;
}
.tuproyecto-card__media { position: absolute; inset: 0; }
.tuproyecto-card__media img {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: grayscale(1); transition: filter .5s ease;
}
.tuproyecto-card__link:hover .tuproyecto-card__media img,
.tuproyecto-card__link:focus-visible .tuproyecto-card__media img { filter: grayscale(0); }
/* Scrim permanente para que el título siempre se lea */
.tuproyecto-card__link::after {
content: ""; position: absolute; z-index: 1; inset: 0;
background: linear-gradient(160deg, rgba(22,43,62,.55) 0%, rgba(22,43,62,.22) 45%, rgba(22,43,62,.05) 70%);
}
.tuproyecto-card__title {
position: relative; z-index: 2; display: block;
padding: 30px 0 0 34px;
font-size: 25.6px; line-height: 1.2; font-weight: var(--fw-light); color: var(--c-white);
}
/* Filete arriba en el naranja del logo CassaSIP, para resaltar cada card */
.tuproyecto-card__link::before {
content: ""; position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 2px;
background: var(--c-accent);
}
.tuproyecto-card__panel-bg {
position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__panel-bg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__panel-bg { transform: translateY(0); }
.tuproyecto-card__text {
position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 22px 34px 26px;
max-width: 560px;
color: var(--c-white); opacity: 0;
transform: translateX(-26px) scale(1); transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.tuproyecto-card__link:hover .tuproyecto-card__text,
.tuproyecto-card__link:focus-visible .tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.tuproyecto-card__claim { display: block; font-size: 19.2px; line-height: 1.5; font-weight: var(--fw-light); color: var(--c-white); }
.tuproyecto-card__cta {
display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
font-size: 16.8px; font-weight: var(--fw-xbold); text-transform: uppercase; letter-spacing: .03em; color: var(--c-white);
}
.tuproyecto-card__cta svg { width: 16.8px; height: 16.8px; fill: none; stroke: var(--c-white); stroke-width: 2.4; transform: translateX(0); transition: transform .3s ease; }
.tuproyecto-card__link:hover .tuproyecto-card__cta svg,
.tuproyecto-card__link:focus-visible .tuproyecto-card__cta svg { transform: translateX(4px); }
@media (max-width: 900px) {
.tuproyecto-grid { grid-template-columns: 1fr; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 2.1573 / 1; }
}
@media (max-width: 690px) {
.tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card--hero .tuproyecto-card__link { aspect-ratio: 1.6 / 1; }
.tuproyecto-card__title { font-size: 19.2px; padding: 20px 0 0 20px; }
.tuproyecto-card__text { padding: 16px 20px 20px; }
/* En touch no hay hover real: panel y CTA quedan siempre visibles,
igual que en Familia Cassaforma (el párrafo se oculta para que
no choque con el título en cards bajas). */
.tuproyecto-card__panel-bg { transform: translateY(0); transition: none; }
.tuproyecto-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
}
.tuproyecto-card__claim { display: none; }
.tuproyecto-card__cta { margin-top: 0; }
}
/* Barra "beneficios clave" — mismas medidas que .sc-ahorros de
cassaforma.com (sistema-constructivo.css, bloque GRANDES AHORROS):
3 columnas centradas, ícono circular de 71px (ya viene con su color
en el propio .svg), separador vertical negro entre columnas. */
.ahorros { padding: 70px 0 62px; text-align: center; } /* +10% arriba y abajo (antes 64px/56px), pedido de Alan */
.ahorros__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.ahorro { display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 24px; }
.ahorro + .ahorro::before {
content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
width: 2px; background: var(--c-black);
}
.ahorro__icon { display: block; width: 71px; height: 71px; margin: 0 auto 20px; }
.ahorro__label { font-size: 23px; line-height: 1.3; font-weight: var(--fw-light); color: var(--c-navy); }
@media (max-width: 690px) {
.ahorros__grid { grid-template-columns: 1fr; row-gap: 32px; }
.ahorro + .ahorro::before { display: none; }
.ahorro__label { font-size: 19px; }
}
/* Beneficios (3 pilares) */
/* Beneficios de la construcción SIP — 2 columnas: pilares apilados con
viñeta numerada + logos de certificaciones a la izquierda, imagen a la
derecha (pedido de Alan). Separación entre columnas ×2 (antes 60px).
La imagen de la derecha no aporta su alto natural al cálculo de la fila
(queda position:absolute dentro de .beneficios__media, que por eso no
tiene alto propio): así la altura de la fila la fija SOLO la columna
izquierda (pilares + logos), y la imagen se recorta arriba/abajo con
object-fit:cover para igualar siempre esa altura — salvo en mobile,
donde se desactiva (ver media query). */
.beneficios__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; align-items: stretch; }
.beneficios__left { display: flex; flex-direction: column; }
.pilares__grid { display: flex; flex-direction: column; gap: 32px; }
.pilar__head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.pilar__num {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
background: var(--c-navy); color: var(--c-white);
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: var(--fw-xbold);
}
.pilar__title { font-size: 19px; font-weight: var(--fw-xbold); color: var(--c-navy-900); text-transform: uppercase; margin: 0; }
.pilar__text { margin-top: 0; font-size: 15.5px; line-height: 1.6; }
/* Logos de certificaciones — una sola imagen ya compuesta con los 6 logos
(2 filas x 3 columnas), mismo ancho que los párrafos de arriba (pedido
de Alan: usar la imagen completa en vez de 6 separadas). */
.beneficios__certs {
margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--c-line);
}
.beneficios__certs img { display: block; width: 100%; height: auto; }
.beneficios__media { position: relative; overflow: hidden; border-radius: 4px; } /* recorta el zoom del ken burns dentro de su propio cuadro (mismo criterio que .sobre-sip__media) */
.beneficios__media img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
animation: sobreSipKenBurns 18s ease-in-out infinite alternate; /* mismo ken burns que la foto de "Construcción con paneles SIP" */
}
/* ¿Por qué construir con SIP? — imagen del despiece a la izquierda, lista
de items con bullets a la derecha. Tipografía tomada de la lista de capas
de cassaforma.com (sistema-constructivo.css: .sc-panellosa__label/__item):
Heebo Light, navy, bullet "•" y divisor fino bajo cada renglón. */
.porque-sip { display: grid; grid-template-columns: minmax(300px, 460px) 1fr; gap: 60px; align-items: center; margin-top: 46px; }
.porque-sip__media img { width: 100%; display: block; }
.porque-sip__list {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto);
column-gap: 48px;
}
.porque-sip__list li {
padding: 14px 0;
border-bottom: 1px solid rgba(22, 43, 62, .15);
font-size: 19px; letter-spacing: .02em;
font-weight: var(--fw-light); color: var(--c-navy);
}
.porque-sip__list li::before { content: "\2022 "; }
@media (max-width: 1080px) {
.porque-sip { grid-template-columns: 1fr; }
.porque-sip__media { max-width: 460px; margin-inline: auto; }
}
@media (max-width: 690px) {
.porque-sip__list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
}
/* Logística — texto (Logística + Almacenamiento apilados) a la izquierda,
foto en blanco y negro con ken burns a la derecha (pedido de Alan). La
imagen no aporta su alto natural al cálculo de la fila (position:absolute
dentro de .logistica__media, sin alto propio): así la altura de la fila
la fija SOLO la columna de texto, y la foto se recorta con object-fit:cover
para igualar siempre esa altura — mismo criterio que .beneficios__media. */
.logistica__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: stretch; }
.logistica__text { display: flex; flex-direction: column; gap: 32px; }
.logistica__item h3 { font-size: 19px; font-weight: var(--fw-xbold); text-transform: uppercase; color: var(--c-navy-900); margin-bottom: 12px; }
.logistica__media { position: relative; overflow: hidden; border-radius: 4px; }
.logistica__img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1);
transform-origin: 50% 50%;
transition: filter .45s ease;
/* Es una sola foto fija (no un carrusel): un zoom-in ÚNICO de 10s que
termina y se queda ahí (forwards, sin infinite/alternate) — solo
"ida", nunca vuelve para atrás y nunca vuelve a saltar (pedido de
Alan). */
animation: destacadoKenBurns 10s ease-out forwards;
}
.logistica__media:hover .logistica__img { filter: grayscale(0); }
/* FAQ */
.faq { max-width: 880px; }
.faq__item { border-bottom: var(--border); }
.faq__item summary {
cursor: pointer; list-style: none; padding: 20px 0;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
font-size: 16.5px; font-weight: var(--fw-med); color: var(--c-navy-900);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
content: "+"; font-size: 22px; font-weight: var(--fw-light); color: var(--c-navy); flex-shrink: 0;
}
.faq__item[open] summary::after { content: "–"; }
.faq__body { padding: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: var(--c-gray); }
.faq__body ul { list-style: disc; padding-left: 20px; margin-top: 10px; }
.faq__body li { margin-bottom: 6px; }
.faq__body p + p { margin-top: 12px; }
/* Proceso constructivo — solo título + video a todo el ancho del
contenido (pedido de Alan; antes había una lista de pasos numerados). */
.proceso__video { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; box-shadow: var(--card-shadow); }
.proceso__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Capacitación */
.capacitacion { text-align: center; }
.capacitacion h2 { max-width: 620px; margin-inline: auto; }
.capacitacion .btn { margin-top: 30px; }
/* Presupuesto / form */
.presupuesto__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.form__field { margin-bottom: 16px; }
.form__label { display: block; font-size: 14px; font-weight: var(--fw-med); margin-bottom: 7px; }
.form__input, .form__select {
display: block; width: 100%; height: 46px; padding: 0 14px;
border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-navy-900);
font-family: var(--ff); font-size: 15px;
}
.form__input:focus, .form__select:focus { border-color: var(--c-navy); outline: none; }
.form__submit { margin-top: 6px; width: 100%; }
/* ------------------------------------------------------------
FOOTER
------------------------------------------------------------ */
.footer { background: var(--c-navy-900); color: var(--c-white); padding-block: 64px 32px; }
.footer__top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.footer__brand img { height: 40px; }
.footer__brand p { margin-top: 18px; font-size: 14px; color: rgba(255,255,255,.65); max-width: 260px; }
.footer__col h3 { font-size: 13px; font-weight: var(--fw-xbold); letter-spacing: .06em; text-transform: uppercase; color: var(--c-white); margin-bottom: 16px; }
.footer__col ul li { margin-bottom: 10px; }
.footer__col a { font-size: 14px; color: rgba(255,255,255,.75); }
.footer__col a:hover { color: var(--c-white); }
.footer__bottom {
margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15);
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
font-size: 13.5px; color: rgba(255,255,255,.6);
}
.footer__social { display: flex; gap: 14px; }
.footer__social svg { width: 16px; height: 16px; fill: rgba(255,255,255,.75); }
.footer__social a:hover svg { fill: var(--c-white); }
.footer__scrolltop { font-size: 13px; color: rgba(255,255,255,.6); }
.footer__scrolltop:hover { color: var(--c-white); }
/* ------------------------------------------------------------
RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 1169px) {
:root {
--fs-hero: 42px; --lh-hero: 46px;
--fs-hero-lead: 23px; --lh-hero-lead: 28px;
--h-hero: 660px;
}
.site-nav { gap: 15px; }
.site-nav__link { font-size: 13px; }
}
@media (max-width: 1080px) {
.site-nav { display: none; }
.destacado, .dos-columnas, .logistica__grid, .presupuesto__grid { grid-template-columns: 1fr; }
.paneles__grid { grid-template-columns: repeat(3, 1fr); }
/* En mobile se desactiva el recorte a la altura de la columna izquierda
(pedido de Alan): la imagen vuelve a su aspecto natural, en flujo. */
.beneficios__grid { grid-template-columns: 1fr; gap: 28px; align-items: normal; }
.beneficios__media img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
/* Mismo criterio que .beneficios__media: en mobile la foto de logística
vuelve a su aspecto natural, en flujo, debajo del texto. */
.logistica__grid { gap: 28px; }
.logistica__img { position: static; width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
.footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
:root {
--fs-hero: 34px; --lh-hero: 38px;
--fs-hero-lead: 19px; --lh-hero-lead: 26px;
--h-header: 84px; --h-hero: 560px;
}
.site-header__logo img { height: 40px; }
.hero .rule--light { width: 200px; margin: 24px 0 22px; }
}
@media (max-width: 690px) {
.site-topbar { display: none; }
:root {
--fs-hero: 27px; --lh-hero: 31px;
--fs-hero-lead: 16px; --lh-hero-lead: 24px;
--h-header: 70px; --h-hero: 520px;
}
.site-header__logo img { height: 34px; }
.hero .rule--light { width: 140px; margin: 20px 0 18px; }
.section { padding-block: 56px; }
.paneles__grid { grid-template-columns: 1fr 1fr; }
.footer__top { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------
FAMILIA CASSAFORMA — Conocé el resto de nuestras líneas
(pedido de Alan). Grilla de 5 cards (las otras líneas Cassaforma;
CassaSIP es esta misma web, no se lista a sí misma), cada una con
su color de marca en --linea-accent. Efecto "tecla de piano" v2:
TODA la card se hunde junta al pasar el mouse (borde, sombra,
logo, foto y fondo de color son todos descendientes del mismo
.familia-card__link escalado), así el degradé de color queda
siempre alineado con el borde mientras se achica. El texto es la
ÚNICA capa que NO se achica: usa un contra-escalado
(scale(calc(1 / var(--press-scale)))) que cancela el de su padre,
y entra con swipe desde la izquierda + fade-in medio segundo
después de que arranca el fondo de color. La foto NO hace zoom en
el hover (chocaba visualmente con el "hundido", pedido de Alan):
solo recupera color. Prototipo aprobado por Alan.
------------------------------------------------------------ */
.familia-grid {
/* .section__head no trae separación propia (solo la agrega vía
".section__head + .section__grid", que esta grilla no usa) — se
fija acá a mano, mismo valor que esa regla general, para que quede
igual que en el prototipo (pedido de Alan: se había achicado). */
margin-top: 46px;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
/* Timings del hover — un 50% más rápidos que la v1 (pedido de Alan). */
--press-scale: .965;
--press-dur: .167s;
--bg-dur: .3s;
--bg-delay: var(--press-dur);
--text-dur: .3s;
--text-delay: .5s;
}
.familia-card {
opacity: 0;
transform: translateY(40px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.68,.36,1);
}
.familia-card.is-visible { opacity: 1; transform: translateY(0); }
.familia-card__link {
position: relative;
display: block;
height: 470px;
background: var(--c-white);
border: 1px solid var(--c-line);
box-shadow: var(--card-shadow);
overflow: hidden;
transform: scale(1);
transition: transform var(--press-dur) cubic-bezier(.4,0,.2,1), box-shadow var(--press-dur) ease;
}
/* "Tecla de piano": se achica y baja un poco, sombra se cierra en vez
de crecer (efecto de hundirse contra la superficie). */
.familia-card__link:hover,
.familia-card__link:focus-visible {
transform: scale(var(--press-scale)) translateY(3px);
box-shadow: 0 2px 10px rgba(22, 43, 62, .22);
}
.familia-card__logo {
position: relative;
z-index: 2;
height: 26px;
width: auto;
max-width: 74%;
margin: 26px auto 0;
object-fit: contain;
}
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 32px; margin-top: 23px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 31px; margin-top: 23px; }
.familia-card__media {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 72%;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 42%);
}
.familia-card__media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: bottom center;
filter: grayscale(1);
transition: filter .5s ease;
}
.familia-card__link[data-line="cassadeco"] .familia-card__media img { object-position: center bottom; }
/* Sin zoom en la foto: solo recupera color (pedido de Alan). */
.familia-card__link:hover .familia-card__media img,
.familia-card__link:focus-visible .familia-card__media img {
filter: grayscale(0);
}
/* Fondo de color: degradé del color de marca hacia transparente, 3/4
de la altura de la card. Hijo directo de .familia-card__link (no un
hermano aparte): se achica JUNTO con el resto de la card, así sus
márgenes quedan siempre alineados con el borde (pedido de Alan).
Entra con swipe de abajo hacia arriba apenas termina el "press". */
.familia-card__panel-bg {
position: absolute;
z-index: 2;
left: 0; right: 0; bottom: 0;
height: 75%;
background: linear-gradient(0deg, var(--linea-accent, var(--c-navy-900)) 0%, transparent 100%);
transform: translateY(100%);
transition: transform var(--bg-dur) ease-out var(--bg-delay);
}
.familia-card__link:hover .familia-card__panel-bg,
.familia-card__link:focus-visible .familia-card__panel-bg {
transform: translateY(0);
}
/* Texto: la ÚNICA capa que NO se achica. Sigue siendo hijo de
.familia-card__link, pero en hover se le aplica un contra-escalado
(1 / var(--press-scale)) que cancela el de la card y lo deja
siempre a tamaño real (pedido de Alan). Entra con swipe desde la
izquierda + fade-in, medio segundo después de que arrancó el fondo
de color. */
.familia-card__text {
position: absolute;
z-index: 3;
left: 0; right: 0; bottom: 0;
padding: 18px 20px 20px;
color: var(--c-white);
opacity: 0;
transform: translateX(-26px) scale(1);
transform-origin: left bottom;
transition: opacity var(--text-dur) ease var(--text-delay),
transform var(--text-dur) cubic-bezier(.22,.68,.36,1) var(--text-delay);
}
.familia-card__link:hover .familia-card__text,
.familia-card__link:focus-visible .familia-card__text {
opacity: 1;
transform: translateX(0) scale(calc(1 / var(--press-scale)));
}
.familia-card__claim {
display: block;
font-size: 14.6px; line-height: 1.45; font-weight: var(--fw-light);
color: var(--c-white);
}
.familia-card__cta {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 10px;
font-size: 13.8px; font-weight: var(--fw-xbold);
text-transform: uppercase; letter-spacing: .03em;
color: var(--c-white);
}
.familia-card__cta svg {
width: 13px; height: 13px;
fill: none; stroke: var(--c-white); stroke-width: 2.4;
transform: translateX(0);
transition: transform .3s ease;
}
.familia-card__link:hover .familia-card__cta svg,
.familia-card__link:focus-visible .familia-card__cta svg {
transform: translateX(4px);
}
/* Filete de color arriba de la card: siempre visible, identifica la
marca aun antes del hover. Al ser ::before de .familia-card__link
también se hunde con toda la card (pedido de Alan). */
.familia-card__link::before {
content: "";
position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 4px;
background: var(--linea-accent, var(--c-navy-900));
}
@media (max-width: 1080px) {
.familia-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.familia-card__link { height: 420px; }
}
@media (max-width: 690px) {
.familia-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.familia-card__link { height: 340px; }
.familia-card__logo { height: 22px; margin-top: 20px; }
.familia-card__link[data-line="cassapronta"] .familia-card__logo { height: 27px; margin-top: 18px; }
.familia-card__link[data-line="cassadeco"] .familia-card__logo { height: 26px; margin-top: 18px; }
/* En touch no hay hover real: el fondo de color y el CTA quedan
siempre visibles, para no depender de un tap sostenido. */
.familia-card__panel-bg { transform: translateY(0); transition: none; }
.familia-card__text {
opacity: 1; transform: translateX(0) scale(1); transition: none;
padding: 10px 14px 14px;
}
.familia-card__claim { display: none; }
.familia-card__cta { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; }
.hero__img, .destacado__img, .sobre-sip__img, .beneficios__media img { animation: none !important; transform: none; }
.hero__slide, .destacado__slide { transition-duration: .2s; }
.familia-card__link { transition-duration: .001ms; }
}
¿Querés aprender a construir con CassaSip?
Solicitar información