@charset "UTF-8";
/* ============================================================
   CASSASIP — index
   Primera aproximación: estructura y textos del sitio actual
   (cassasip.com), reskin con el lenguaje visual de CASSAFORMA
   (tipografía Heebo, paleta navy/negro/blanco, botones y
   proporciones del sitio hermano). Imágenes reales pendientes:
   se marcan con placeholders [FOTO: ...] para reemplazar.
   ============================================================ */

:root {
  --c-navy-900: #162b3e;
  --c-navy:     #284358;
  --c-accent:   #ff9967; /* acento CASSASIP tomado de la card en cassaforma.com */
  --c-gray:     #606a75;
  --c-black:    #000000;
  --c-white:    #ffffff;
  --c-line:     #e5e5e5;
  --c-band:     #f4f5f6;

  --ff: "Heebo", sans-serif;
  --fw-light: 300;
  --fw-reg:   400;
  --fw-med:   500;
  --fw-xbold: 800;
  --fw-black: 900;

  /* Tamaños tomados 1:1 de cassaforma.com (css/styles.css, bloque 1) */
  --fs-hero:      49.9px;  --lh-hero:      53.8px;
  --fs-hero-lead: 27.6px;  --lh-hero-lead:   33px;
  --h-header:       107px;
  --h-hero:         755px;
  --h-topbar:        44px;

  --w-content: 1200px;
  --pad-side: 24px;
  --radius: 0;
  --border: 1px solid var(--c-line);
  --t-base: .28s ease;
  --card-shadow: 0 0 22px rgba(22, 43, 62, .07);

  /* Carrusel del hero — mismo criterio que cassaforma.com, sin fotos aún */
  --hero-hold: 6s;
  --hero-fade: 1.2s;
  --hero-zoom: 1.09;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ff);
  font-weight: var(--fw-light);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--c-navy-900);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, figure, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font-family: var(--ff); font-size: inherit; }
:focus-visible { outline: 2px solid var(--c-navy); outline-offset: 3px; }

.container { width: 100%; max-width: calc(var(--w-content) + (var(--pad-side) * 2)); margin-inline: auto; padding-inline: var(--pad-side); }

.t-light { font-weight: var(--fw-light); }
.t-reg   { font-weight: var(--fw-reg); }
.t-xbold { font-weight: var(--fw-xbold); }
.t-black { font-weight: var(--fw-black); }

.h-section {
  font-size: 30px; line-height: 1.25;
  text-transform: uppercase;
  color: var(--c-navy-900);
  letter-spacing: .004em;
}
.h-md { font-size: 30px; line-height: 1.3; font-weight: var(--fw-light); color: var(--c-navy-900); }
.eyebrow {
  display: inline-block;
  font-size: 13px; font-weight: var(--fw-med);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-navy);
  margin-bottom: 14px;
}
.body-md { font-size: 16.5px; line-height: 1.65; font-weight: var(--fw-light); }

.rule { display: block; height: 2px; border: 0; background: var(--c-navy-900); }
.rule--w { background: var(--c-white); }
.rule-sm { width: 64px; margin: 22px 0 26px; }

/* Botones — mismo criterio que cassaforma.com */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center; font-size: 16px; font-weight: var(--fw-reg);
  line-height: 1; padding: 16px 30px;
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; transition: background-color var(--t-base), color var(--t-base);
}
.btn--navy  { background: var(--c-navy);  color: var(--c-white); }
.btn--black { background: var(--c-black); color: var(--c-white); }
.btn--white { background: var(--c-white); color: var(--c-black); border-color: var(--c-line); }
.btn--navy:hover  { background: var(--c-navy-900); }
.btn--black:hover { background: var(--c-navy); }
.btn--white:hover { background: var(--c-line); }
.btn--sm { padding: 11px 20px; font-size: 14px; }

/* Placeholder de imagen — hasta reemplazar por fotos reales */
.img-ph {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-band), var(--c-line));
  color: var(--c-gray); font-size: 13px; font-weight: var(--fw-med);
  text-align: center; padding: 12px;
  min-height: 100%;
}

/* ------------------------------------------------------------
   TOPBAR + HEADER
   ------------------------------------------------------------ */
.site-topbar { background: var(--c-navy); }
.site-topbar__inner { height: var(--h-topbar); display: flex; align-items: center; justify-content: flex-end; gap: 28px; }
.site-topbar__item { display: flex; align-items: center; gap: 8px; color: var(--c-white); font-size: 14.7px; font-weight: var(--fw-light); white-space: nowrap; }
.site-topbar__item svg { width: 15px; height: 15px; fill: var(--c-white); flex-shrink: 0; }
.site-topbar__sep { width: 1px; height: 16px; background: rgba(255,255,255,.35); }
.site-topbar__social { display: flex; align-items: center; gap: 16px; }
.site-topbar__social svg { width: 18px; height: 18px; fill: var(--c-white); }
.site-topbar__social a:hover svg { opacity: .8; }

/* Header — misma altura, mismo logo y mismo tipo/tamaño de nav que
   cassaforma.com (css/styles.css, bloque 5), acomodado en una sola fila
   logo-a-la-izquierda / nav-a-la-derecha, ambos centrados verticalmente. */
.cassasip-shortcode-wrapper .site-header { height: var(--h-header); background: var(--c-white); border-bottom: var(--border); }
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-header__logo { display: flex; align-items: center; }
.site-header__logo img { height: 51px; width: auto; }
.cassasip-shortcode-wrapper .site-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.site-nav__link {
  display: flex; align-items: center;
  color: var(--c-navy); font-size: 14.7px; font-weight: var(--fw-med);
  letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; line-height: 1;
}
.site-nav__link:hover { color: var(--c-navy-900); }
.site-nav__link--cta { color: var(--c-white); background: var(--c-navy); padding: 12px 20px; }
.site-nav__link--cta:hover { background: var(--c-navy-900); color: var(--c-white); }

/* ------------------------------------------------------------
   HERO — carrusel de 5 slides, mismo mecanismo que cassaforma.com:
   fade + "ken burns" en el fondo, puntos de control abajo, y click
   sostenido (mouse o touch) congela el carrusel hasta soltar.
   A diferencia de cassaforma, el título/bajada NO cambian por slide:
   son fijos y solo el fondo rota. Sin fotos todavía: cada slide es
   un degradado de color a modo de placeholder (ver .hero__slide
   nth-child abajo) — reemplazar por <img> cuando haya material.
   ------------------------------------------------------------ */
.hero { position: relative; height: var(--h-hero); overflow: hidden; color: var(--c-white); }

.hero__media { position: absolute; inset: 0; }

/* Una capa por slide, apiladas — mismo criterio que cassaforma.com.
   El zoom "ken burns" corre en la <img> (no en el contenedor) para que
   overflow:hidden del <figure> recorte el excedente del scale(). */
.hero__slide {
  position: absolute; inset: 0; margin: 0; overflow: hidden;
  opacity: 0; transition: opacity var(--hero-fade) ease;
}
.hero__slide.is-active { opacity: 1; }

.hero__img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 45%;
  transform: scale(var(--hero-zoom));
}
.hero__slide.is-active .hero__img {
  animation: hero-kenburns calc(var(--hero-hold) + var(--hero-fade)) linear both;
}
[data-hero-carousel].is-paused .hero__slide.is-active .hero__img { animation-play-state: paused; }
@keyframes hero-kenburns { from { transform: scale(1); } to { transform: scale(var(--hero-zoom)); } }

/* Velo cristal entre el título y el fondo — mismo corte que cassaforma.com
   (css/styles.css, .hero__scrim): más opaco a la izquierda, donde va el
   texto, y se aclara hacia la derecha para dejar ver la foto. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(22,43,62,.78) 0,
      rgba(22,43,62,.78) 57.35%,
      rgba(22,43,62,.16) calc(57.35% + .5px),
      rgba(22,43,62,.16) 100%),
    linear-gradient(180deg, rgba(22,43,62,.22) 0%, rgba(22,43,62,0) 40%);
}
@media (max-width: 920px) {
  .hero__scrim {
    background: linear-gradient(180deg, rgba(22,43,62,.74) 0%, rgba(22,43,62,.78) 100%);
  }
}

.hero__inner { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; }
.hero__content { padding-block: 40px; }
.hero__title {
  font-size: var(--fs-hero); line-height: var(--lh-hero);
  font-weight: var(--fw-black); text-transform: uppercase; letter-spacing: .002em;
  max-width: 780px;
}
/* "Sistema Constructivo" en Heebo Light, el resto mantiene el peso fuerte */
.hero__title .t-light { font-weight: var(--fw-light); }
.hero .rule--light { width: 324.7px; height: 2px; background: var(--c-white); margin: 34px 0 28px; }
.hero__lead { max-width: 620px; font-size: var(--fs-hero-lead); line-height: var(--lh-hero-lead); font-weight: var(--fw-light); }
.hero__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 30px; max-width: 700px; }
.hero__tag { display: flex; align-items: center; font-size: 16.2px; letter-spacing: .01em; } /* sin recuadro (pedido de Alan); +20% sobre 13.5px */
.hero__tag:not(:first-child)::before { content: "\2022"; margin-right: 10px; color: rgba(255,255,255,.6); }
.hero__cta { margin-top: 38px; }

/* Puntos de control — mismo criterio visual que cassaforma.com */
.hero__dots {
  position: absolute; z-index: 3; bottom: 32px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 14px;
}
.hero__dot {
  width: 10.7px; height: 10.7px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.45); cursor: pointer; transition: background-color var(--t-base);
}
.hero__dot.is-active { background: var(--c-white); }
.hero__dot:hover { background: rgba(255,255,255,.75); }

/* ------------------------------------------------------------
   SECCIONES GENERALES
   ------------------------------------------------------------ */
.section { padding-block: 84px; }
.section--band { background: var(--c-band); }
.section--navy { background: var(--c-navy); color: var(--c-white); }
.section__head { max-width: 760px; }
.section__head + .section__grid,
.section__head + .section__body { margin-top: 46px; }

/* Tu CassaSIP (destacado) */
.destacado { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.destacado__lead { margin-top: 20px; max-width: 480px; }
.destacado__cta { margin-top: 30px; }

/* Carrusel de 4 fotos — mismo mecanismo de fade + ken burns que .hero,
   pero en blanco y negro en reposo: recupera color y se congela (carrusel
   + ken burns) al pasar el mouse, y retoma ambos al sacarlo (pedido de
   Alan). Sin puntos de control (no pedidos acá). */
.destacado__media { position: relative; overflow: hidden; aspect-ratio: 4/3; }
.destacado__slide {
  position: absolute; inset: 0; margin: 0; overflow: hidden;
  opacity: 0; transition: opacity .8s ease;
}
.destacado__slide.is-active { opacity: 1; }
.destacado__img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1);
  transform-origin: 50% 50%;
  transition: filter .45s ease;
  transform: scale(1); /* estado de reposo explícito — a esto vuelve al sacarle .is-zooming */
}
/* El zoom-in de cada foto arranca (clase .is-zooming) exactamente cuando
   js/script.js le agrega .is-active — es decir, el zoom nace junto con el
   fade-in. .is-zooming se saca recién cuando termina su fade-out (ver
   FADE_MS en script.js), con la foto ya invisible: por eso el "reset" a
   scale(1) nunca se ve. La duración (6s) es MÁS LARGA que el intervalo del
   carrusel (4.5s) a propósito: nunca llega al zoom máximo antes de que
   empiece el fade a la siguiente, y la siguiente ya arranca con SU zoom
   recién comenzado — sin momentos de imagen estática ni cortes entre foto
   y foto (pedido de Alan). Solo "ida": nunca vuelve para atrás. */
.destacado__slide.is-zooming .destacado__img {
  animation: destacadoKenBurns 6s ease-out forwards;
}
@keyframes destacadoKenBurns {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.14) translate(-2%, 2%); }
}
.destacado__media:hover .destacado__img {
  filter: grayscale(0);
  animation-play-state: paused;
}

/* Paneles CassaSIP — el corte del panel sobresale del fondo de la sección.
   La franja gris NO es toda la sección — es una franja angosta, más baja
   que la imagen, igual que las franjas de soporte de cassaforma.com
   (.lineas__band/.perfiles__band).
   OJO: la franja ahora se centra sobre el propio .panel-corte-grid (la
   fila del grid, cuya altura la fija la imagen) y NO sobre la sección —
   así el margen entre el borde de la franja y el título/párrafo queda
   siempre simétrico arriba y abajo, sin importar el padding de la sección
   (antes, al depender del padding, el título llegó a quedar por encima
   del borde superior de la franja — bug reportado por Alan). */
.panel-corte-section { position: relative; padding-top: 48px; padding-bottom: 96px; margin-top: -150px; } /* subida 150px (pedido de Alan): el panel vertical se mete en la sección de arriba */

.panel-corte-band {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100vw;               /* a sangre, se sale del .container */
  height: 430px;               /* más baja que la imagen (713px): sobra ~40px simétricos arriba/abajo del título y el párrafo+sandwich */
  background: var(--c-band);
  z-index: -1;                /* detrás del contenido del propio grid (panel e texto), que son estáticos */
}

.panel-corte-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.panel-corte { display: flex; justify-content: flex-start; } /* acercado al margen izquierdo del contenido, separado del texto (pedido de Alan) */
.panel-corte__sandwich {
  display: block; width: calc(100% + 268.5px); max-width: calc(100% + 268.5px); height: auto; margin: 12px 0 0 -268.5px;   /* +30% de tamaño y separación del texto ×2 (12px, antes 6px) sobre la anterior devolución (pedido de Alan); crece hacia la izquierda, ancla derecha sin cambios; max-width override porque "img{max-width:100%}" global la limitaba */
}

/* Panel CassaSIP — ensamblado en 3 capas (pedido de Alan): reemplaza el
   render único por 3 fotos reales del panel (placa OSB trasera → núcleo
   EPS → placa OSB delantera) que entran con swipe desde la izquierda,
   una tras otra, hasta quedar superpuestas en la misma posición — el
   efecto de "armado" del sándwich. Probado antes como prototipo aparte
   (aprobado por Alan) y portado acá con la misma lógica.
   El tamaño visual (max-width/margin-left) es EXACTAMENTE el mismo que
   tenía la antigua .panel-corte__img en cada breakpoint — no hay padding
   achicando la imagen. La separación del hover se deja "asomar" un poco
   afuera de esta caja (no hay overflow:hidden en ningún ancestro:
   .panel-corte/.panel-corte-grid/.container/.panel-corte-section), así
   que no hace falta restarle tamaño a la imagen para dejarle aire —
   corregido: una primera versión sí le restaba tamaño con padding y el
   panel se veía visiblemente más chico que el render anterior (bug
   reportado por Alan). */
.panel-corte__stack {
  position: relative;
  width: 100%; max-width: 286px; margin-left: 47px;
  aspect-ratio: 700 / 1666; /* proporción real de las fotos de las 3 capas */
}
.panel-corte__layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0;
  transform: translateX(-160%);
  transition: transform .62s cubic-bezier(.22,.68,.36,1), opacity .3s ease;
  will-change: transform, opacity;
}
.panel-corte__layer.is-in { opacity: 1; transform: translateX(0); }

.panel-corte__inner {
  position: relative; width: 100%; height: 100%;
  transition: transform .225s ease; /* separación en hover: velocidad (pedido de Alan) */
}
.panel-corte__inner img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  /* mismo criterio de sombra que la .panel-corte__img anterior */
  filter: drop-shadow(0 14px 16px rgba(22, 43, 62, .22));
}

/* Separación leve ("exploded") al pasar el mouse, solo una vez terminada
   la secuencia de entrada (.is-ready la agrega el script.js) — distancia
   y velocidad x2 sobre la primera prueba (pedido de Alan). */
.panel-corte__stack.is-ready:hover .panel-corte__inner[data-role="osb-back"]  { transform: translate(20px, 28px); }
.panel-corte__stack.is-ready:hover .panel-corte__inner[data-role="core"]      { transform: translate(2px, 6px); }
.panel-corte__stack.is-ready:hover .panel-corte__inner[data-role="osb-front"] { transform: translate(-18px, -24px); }

/* Hotspots numerados "1" (placas OSB) y "2" (alma EPS): aparecen recién
   cuando termina el ensamblado y viajan pegados a su capa en el hover.
   El "1" de la placa trasera vive en su PROPIA capa intermedia del DOM
   (.panel-corte__hotspot-mid, pintada antes que el núcleo) para que el
   canto del EPS lo tape parcialmente — los otros dos van en el overlay de
   arriba de todo (pedido de Alan). */
.panel-corte__hotspots,
.panel-corte__hotspot-mid { position: absolute; inset: 0; pointer-events: none; }

.panel-corte__hotspot-anchor {
  position: absolute; transform: translate(0, 0);
  transition: transform .225s ease;
}
.panel-corte__stack.is-ready:hover .panel-corte__hotspot-anchor[data-role="osb-back"]  { transform: translate(20px, 28px); }
.panel-corte__stack.is-ready:hover .panel-corte__hotspot-anchor[data-role="core"]      { transform: translate(2px, 6px); }
.panel-corte__stack.is-ready:hover .panel-corte__hotspot-anchor[data-role="osb-front"] { transform: translate(-18px, -24px); }

.panel-corte__hotspot {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--c-navy-900); color: var(--c-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: var(--fw-xbold);
  box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 3px 8px rgba(22,43,62,.35);
  opacity: 0; transform: translate(-50%, -50%) scale(.4);
  transition: opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.panel-corte__stack.is-ready .panel-corte__hotspot { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.panel-corte__hotspot-anchor--1a { left: 46%; top: 38%; } /* placa OSB delantera */
.panel-corte__hotspot-anchor--1b { left: 94%; top: 75%; } /* placa OSB trasera — posición pedida por Alan */
.panel-corte__hotspot-anchor--2  { left: 89%; top: 58%; } /* alma EPS — 15px más a la derecha sobre 286px de ancho (pedido de Alan) */

/* Referencia "1"/"2" dentro del párrafo, apuntando a los hotspots de arriba
   (pedido de Alan). */
.panel-corte__hotspot-ref {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--c-navy-900); color: var(--c-white); font-size: 11px; font-weight: var(--fw-xbold);
  vertical-align: middle; margin: 0 2px; position: relative; top: -1px;
}

@media (max-width: 1080px) {
  /* En este breakpoint el grid pasa a 1 columna (imagen y texto apilados),
     así que centrar la franja sobre el propio .panel-corte-grid (como en
     desktop) la dejaría a mitad de camino entre la imagen y el texto, no
     solo detrás de la imagen. Por eso acá el grid deja de ser el
     "containing block" de la franja (position:static) y esta vuelve a
     centrarse sobre .panel-corte-section (que ya es position:relative,
     fijo, sin importar el layout apilado) — mismo criterio que antes de
     mover la franja adentro del grid, con las alturas ya afinadas abajo
     para este ancho. */
  /* La subida de -150px (pedido de Alan, para que el panel "se meta" en la
     sección de arriba) se pensó para el layout desktop, donde arriba queda
     una imagen/espacio en blanco. En este ancho la sección de arriba
     ("Construcción con paneles SIP") termina en un párrafo de texto (la
     imagen pasa a order:-1, queda arriba del texto) — con -150px el panel
     tapaba ese párrafo. Se reduce el solape a -60px, suficiente para
     acercar las secciones sin invadir texto legible. */
  .panel-corte-section { margin-top: -60px; }
  .panel-corte-grid { position: static; grid-template-columns: 1fr; }
  .panel-corte-band { height: 300px; }
  .panel-corte { justify-content: center; } /* apiladas en una columna: vuelve a centrarse */
  .panel-corte__stack { max-width: 247px; margin-left: 0; }   /* 190px +30%; sin el corrimiento del desktop, ya centrado */
  .panel-corte__sandwich { max-width: 420px; margin-inline: auto; }
}
@media (max-width: 690px) {
  .panel-corte-band { height: 220px; }
  .panel-corte__stack { max-width: 195px; }   /* 150px +30% */
  .panel-corte__sandwich { max-width: 100%; }
}

/* Construcción con paneles SIP / composición — texto a dos columnas.
   OJO: "p + p" solo debe agregar espacio entre párrafos APILADOS dentro
   de una misma columna; acá cada .dos-columnas trae un <p> 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 <img> 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;
  }
  .cassasip-shortcode-wrapper .site-nav { gap: 15px; }
  .site-nav__link { font-size: 13px; }
}

@media (max-width: 1080px) {
  .cassasip-shortcode-wrapper .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; }
}


.site-header-redesign {
  position: relative;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-line);
  font-family: var(--ff);
  z-index: 1000;
  box-shadow: 0 2px 12px rgba(22, 43, 62, 0.04);
}

.site-header-redesign__inner {
  height: var(--h-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.site-header-redesign__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.site-header-redesign__logo img {
  height: 48px;
  width: auto;
  display: block;
  transition: transform .2s ease;
}

.site-header-redesign__logo:hover img {
  transform: scale(1.02);
}

/* Menú Desktop */
.site-header-redesign__nav {
  display: flex;
  align-items: center;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header-redesign__link {
  display: inline-flex;
  align-items: center;
  color: var(--c-navy);
  font-size: 13.5px;
  font-weight: var(--fw-med);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  padding: 8px 6px;
  position: relative;
  transition: color .2s ease;
}

.site-header-redesign__link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 6px;
  right: 6px;
  height: 2px;
  background: var(--c-accent);
  transform: scaleX(0);
  transition: transform .25s ease;
  transform-origin: center;
}

.site-header-redesign__link:hover {
  color: var(--c-navy-900);
}

.site-header-redesign__link:hover::after {
  transform: scaleX(1);
}

/* Botón Contacto destacado en Desktop */
.site-header-redesign__link--cta {
  background: var(--c-navy);
  color: var(--c-white) !important;
  padding: 11px 22px;
  border-radius: 3px;
  margin-left: 4px;
  transition: background-color .2s ease, transform .15s ease;
}

.site-header-redesign__link--cta::after {
  display: none !important;
}

.site-header-redesign__link--cta:hover {
  background: var(--c-navy-900);
  color: var(--c-white) !important;
  transform: translateY(-1px);
}

/* Botón Menú Hamburguesa (Mobile & Tablet) */
.site-header-redesign__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  color: var(--c-navy-900);
  border-radius: 4px;
  transition: background-color .2s ease;
}

.site-header-redesign__toggle:hover {
  background-color: var(--c-band);
}

.site-header-redesign__toggle svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
  display: block;
}

.site-header-redesign__toggle .icon-close {
  display: none;
}

.site-header-redesign.is-menu-open .site-header-redesign__toggle .icon-bars {
  display: none;
}

.site-header-redesign.is-menu-open .site-header-redesign__toggle .icon-close {
  display: block;
}

/* Menú Desplegable Móvil */
.site-header-redesign__mobile-menu {
  display: none;
  background: var(--c-white);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 16px 24px rgba(22, 43, 62, 0.08);
  width: 100%;
}

.site-header-redesign.is-menu-open .site-header-redesign__mobile-menu {
  display: block;
}

.site-header-redesign__mobile-list {
  list-style: none;
  margin: 0;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
}

.site-header-redesign__mobile-item {
  width: 100%;
}

.site-header-redesign__mobile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  color: var(--c-navy-900);
  font-size: 15px;
  font-weight: var(--fw-med);
  text-transform: uppercase;
  letter-spacing: .03em;
  text-decoration: none;
  border-bottom: 1px solid rgba(229, 229, 229, 0.5);
  transition: background-color .2s ease, color .2s ease;
}

.site-header-redesign__mobile-link:hover,
.site-header-redesign__mobile-link:active {
  background: var(--c-band);
  color: var(--c-accent);
}

.site-header-redesign__mobile-link svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
}

.site-header-redesign__mobile-link--cta {
  background: var(--c-navy);
  color: var(--c-white) !important;
  margin: 12px 20px 4px;
  justify-content: center;
  border-radius: 4px;
  border-bottom: none;
  padding: 15px 20px;
}

.site-header-redesign__mobile-link--cta:hover {
  background: var(--c-navy-900);
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 1120px) {
  .site-header-redesign__nav {
    gap: 10px;
  }
  .site-header-redesign__link {
    font-size: 12.5px;
    padding: 6px 4px;
  }
  .site-header-redesign__link--cta {
    padding: 9px 16px;
  }
}

@media (max-width: 980px) {
  :root {
    --h-header: 76px;
  }
  .site-header-redesign__inner {
    height: var(--h-header);
  }
  .site-header-redesign__logo img {
    height: 40px;
  }
  .site-header-redesign__nav {
    display: none !important; /* Oculta navegación desktop */
  }
  .site-header-redesign__toggle {
    display: inline-flex !important;     /* Muestra botón hamburguesa */
  }
}

@media (max-width: 480px) {
  :root {
    --h-header: 68px;
  }
  .site-header-redesign__logo img {
    height: 34px;
  }
}


/* ============================================================
   INTEGRACIÓN NATIVA Y RESPONSIVE CON ELEMENTOR & WORDPRESS
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box !important;
}

/* El wrapper del shortcode ocupa el 100% del contenedor sin desplazamientos */
.cassasip-shortcode-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Las secciones CassaSIP ocupan el 100% y se centran perfectamente */
.cassaforma-block,
.cassasip-shortcode-wrapper > * {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Centrado simétrico de los contenidos a 1200px */
.cassasip-shortcode-wrapper .container,
.cassaforma-block .container {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* Hero Title Contrast & Text Shadow */
.hero__title {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55) !important;
}
.hero__title *,
.hero__title .t-light {
  color: #ffffff !important;
}
.hero__tag {
  color: #ffffff !important;
}

/* ============================================================
   RESPONSIVE EN CELULARES (<= 768px)
   ============================================================ */
@media (max-width: 768px) {
  .cassasip-shortcode-wrapper .container,
  .cassaforma-block .container,
  .hero__inner {
    width: 90% !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .hero {
    height: auto !important;
    min-height: 520px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    overflow: hidden !important;
  }

  .hero__media {
    position: absolute !important;
    inset: 0 !important;
  }

  .hero__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 30% !important;
  }

  .hero__inner {
    padding-top: 40px !important;
    padding-bottom: 50px !important;
  }

  .hero__title {
    font-size: 26px !important;
    line-height: 32px !important;
  }

  .hero__tags {
    gap: 8px !important;
    margin-top: 14px !important;
  }

  .hero__tag {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  .hero__cta .btn {
    width: 100% !important;
    padding: 14px 20px !important;
  }

  /* Grillas de tarjetas en celulares */
  .paneles__grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 16px !important;
  }

  .perfiles-sip__grid,
  .tuproyecto-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .familia-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Panel corte en celulares */
  .panel-corte-section {
    padding-top: 20px !important;
    padding-bottom: 24px !important;
  }
  .panel-corte-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .panel-corte__stack {
    max-width: 180px !important;
    margin: 0 auto !important;
  }
}