/* assets/css/sussanich.css — estilos específicos de la landing institucional SUS.
 * Tokens consumidos via tokens.css. NO hardcodear hex.
 */

/* ─── Breadcrumbs (también definidos en excursiones.css para EXC-L/I y viajes.css para VIA) ── */
.breadcrumbs {
    background: inherit;
    border: none;
    padding: var(--space-3) 0 var(--space-4);
}
.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    color: var(--color-text-secondary);
}
.breadcrumbs__item + .breadcrumbs__item::before {
    content: '›';
    color: var(--color-text-muted);
    margin-right: var(--space-1);
}
.breadcrumbs__item a {
    color: var(--color-text-link);
    text-decoration: none;
}
.breadcrumbs__item a:hover { text-decoration: underline; }
.breadcrumbs__item--active {
    color: var(--color-text-primary);
    font-weight: var(--fw-medium);
}

/* ─── 02 — Sobre Sussanich ──────────────────────────────────────────────── */
/* `#sus-sobre-grid` = `_element_id` de la Section Elementor (Nosotros,
   página programática) — Section no admite `_css_classes` (gotcha #1). */
.sobre-sussanich,
#sus-sobre-grid {
  background: var(--color-background);
  padding: var(--space-8) 0 var(--space-7);
}
.sobre-sussanich__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
}
.sobre-sussanich__copy { max-width: 520px; }
/* (inversion capa de estilos, 2026-07-16): color/tipografia/tamano/
   margin de `.sobre-sussanich__title` pasaron a widget settings reales
   (title_color/typography_* /_margin via runner _stgsetup/run-7fs.php
   action=migrate_v1) — editable desde el editor de Elementor. */
/* `.sobre-sussanich__p` (Text Editor widget): migrado a text_color/
   typography_* /_margin via runner migrate_v1. */
.sobre-sussanich__img-wrap { text-align: center; }
.sobre-sussanich__img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}
/* Fix 2026-07-16: gotcha #11 (README §4b) —
 * `_css_classes` de un widget Image de Elementor pinta en el DIV WRAPPER
 * (`.elementor-widget-image`), no en el `<img>` interno. Las reglas de arriba
 * (sin este selector) nunca llegaban al `<img>` real: Elementor deja el `<img>`
 * en su tamaño intrínseco (489×353, el asset `sussanich-agencia-bg1.png`) en
 * vez del tamaño de diseño real. Chequeado el HTML real de prod (`<img
 * width="640" height="420">`): NO es "100% de la columna" — es un tamaño FIJO
 * de diseño, centrado dentro de su columna vía `.sobre-sussanich__img-wrap
 * {text-align:center}` de arriba (columna prod 736px, imagen 640px → ~48px de
 * aire por lado). Replicado tal cual (no 100%, que en la columna real de
 * Elementor — más ancha, ver fix de `#sus-sobre-col-copy` abajo — hubiese
 * estirado la imagen de más). `max-width:100%` como red de seguridad
 * responsive (columnas angostas / mobile). `!important` necesario para ganarle
 * al tamaño inline que Elementor aplica al `<img>` (mismo patrón que el gotcha
 * #11: `.sello-flotante`/`.viajes-list__sello`). */
.sobre-sussanich__img img {
  width: 640px !important;
  max-width: 100% !important;
  height: auto !important;
}

@media (max-width: 768px) {
  .sobre-sussanich__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .sobre-sussanich__copy { max-width: none; }
}

/* ─── 03 — Misión / Visión ──────────────────────────────────────────────── */
.mision-vision,
#sus-mision-vision {
  background: var(--color-background);
  padding: var(--space-7) 0;
}
.mision-vision__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
}
/* (inversion capa de estilos, 2026-07-16): `.mision-vision__texto`
   (widget Text Editor) pasa a text_color/typography_* /_margin en
   _elementor_data via runner _stgsetup/run-7fs.php action=migrate_v1. */
.mision-vision__rule {
  display: block;
  width: 40px;
  height: 3px;
  background: var(--color-primary);
}

@media (max-width: 768px) {
  .mision-vision__grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ─── 04 — Servicios: 3 tarjetas ────────────────────────────────────────── */
.servicios-tres,
#sus-servicios-grid {
  background: var(--color-background);
  padding: var(--space-7) 0 var(--space-8);
}
/* margin-bottom pasó a `_margin` del widget (migrate_v1). */
.servicios-tres__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.card-servicio {
  position: relative;
  display: block;
  aspect-ratio: 14 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-base),
              box-shadow var(--dur-base) var(--ease-base);
}
.card-servicio:hover,
.card-servicio:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.card-servicio__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-servicio__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.45) 100%);
}
/* Body usa 3 filas de igual alto: el título queda en la fila central (50%)
 * y el CTA en la tercera fila, posicionado verticalmente al ~75% (3/4) de la card. */
.card-servicio__body {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  justify-items: center;
  text-align: center;
  padding: var(--space-5);
}
.card-servicio__title {
  grid-row: 2;
  align-self: center;
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--color-text-on-dark);
  margin: 0;
  line-height: var(--lh-snug);
  text-shadow: 0 2px 12px rgba(0,0,0,0.30);
  max-width: 16ch;
}
.card-servicio__cta-wrap {
  grid-row: 3;
  align-self: center;
}
.card-servicio__cta {
  display: inline-block;
  padding: 8px 22px;
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: var(--radius-pill);
  color: var(--color-text-on-dark);
  font-family: var(--font-body);
  font-size: var(--fs-btn);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-btn);
  background: transparent;
  transition: background var(--dur-fast) var(--ease-base),
              color var(--dur-fast) var(--ease-base);
}
.card-servicio:hover .card-servicio__cta,
.card-servicio:focus-visible .card-servicio__cta {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-on-dark);
}

@media (max-width: 1024px) {
  .servicios-tres__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .servicios-tres__grid { grid-template-columns: 1fr; }
}

/* H2/H3 que vienen de home.css (.section-catalog__title) o de Bootstrap llegan
 * con weight regular/semibold. Se fuerza weight 700 global para h2 y h3
 * — overrides para la sección 05 de SUS que reusa clases de Home. */
.section-catalog__title { font-weight: var(--fw-bold); }

/* ─── Aliases `_element_id` → clases reales ──────────────────────────────────
   Section/Column de Elementor Free no soportan `_css_classes` (gotcha #1,
   monolitico/README.md § 4a) — página /nosotros/ construida programáticamente
   (runner _elementor_data). */
#sus-sobre-grid .elementor-container,
#sus-mision-vision .elementor-container,
#sus-servicios-grid .elementor-container {
    width: 80% !important;
    max-width: none !important;
}
#sus-sobre-grid .elementor-container {
    align-items: center !important;
}
/* Fix 2026-07-16: las 3 columnas de
 * "Qué ofrecemos" (`#sus-servicio-1/2/3`) quedaban pegadas (gap medido: 0px
 * vs 24px real de prod, `--space-4`) — el Kit de Elementor (Section "Columns
 * Gap") no tenía separación propia entre columnas para esta Section. Fix:
 * `gap` CSS directo sobre `.elementor-container` (es `display:flex` nativo de
 * Elementor clásico, `gap` funciona igual que en cualquier flex container). */
#sus-servicios-grid .elementor-container {
    gap: var(--space-4);
}
/* Fix 2026-07-16: el `max-width:520px`
 * ORIGINAL vivía en la COLUMNA (`#sus-sobre-col-copy`, el div con
 * `_element_id`) — eso achicaba la columna Elementor entera de 50%(768px)
 * a 520px, desbalanceando el grid de 2 columnas: la columna de la imagen
 * crecía de más para compensar (medido: 768px, más ancha que la columna real
 * de prod). El 520px de prod es un cap del TEXTO (`.sobre-sussanich__copy`,
 * legibilidad de párrafo), no de la columna — la columna en prod sigue siendo
 * la mitad real del grid (736px vía `1fr 1fr`). Fix: mover el cap al
 * `.elementor-widget-wrap` interno (el contenedor real de los widgets dentro
 * de la columna) — la columna Elementor mantiene su 50% nativo, solo el
 * contenido de texto queda angosto (mismo resultado visual que prod). */
#sus-sobre-col-copy > .elementor-widget-wrap {
    max-width: 520px;
}
@media (max-width: 768px) {
    #sus-sobre-grid .elementor-container,
    #sus-mision-vision .elementor-container,
    #sus-servicios-grid .elementor-container {
        width: 92% !important;
    }
}

/* Cards de servicio (3 columnas full-bleed): la columna hace de wrapper
 * (position/aspect-ratio/overflow/radius/shadow). Desde 2026-07-31 se
 * reemplaza el centrado flex de 4c por un grid de 3 filas
 * iguales sobre `.elementor-widget-wrap` (paridad con `.card-servicio__body`
 * de PROD, `assets/css/sussanich.css:151-171`) — Column de Elementor no admite
 * un unico wrapper `.card-servicio__body` con grid-row 2/3 (serian 2 widgets
 * separados, Heading+Button), pero cada widget toma su propio `grid-row` via
 * su clase, logrando el mismo resultado visual. */
#sus-servicio-1, #sus-servicio-2, #sus-servicio-3 {
    position: relative;
    aspect-ratio: 14 / 10;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-base) var(--ease-base), box-shadow var(--dur-base) var(--ease-base);
}
#sus-servicio-1:hover, #sus-servicio-2:hover, #sus-servicio-3:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
/* (2026-07-31): flex+justify-content:center desalineaba
 * titulo/CTA contra el centro real de la card (sumaba el hueco fantasma del
 * widget-html del overlay + el `gap` del flex — medido antes del fix: titulos
 * ~15px por encima del centro real; el CTA de la card de titulo de 1 sola
 * linea quedaba ~17px mas arriba que los otros 2). Fix: grid de 3 filas
 * iguales (paridad exacta con PROD, `assets/css/sussanich.css:151-171`) — el
 * Image y el HTML overlay (ambos `position:absolute`) quedan fuera del grid
 * en flujo; solo Heading/Button participan como grid items reales (grid-row
 * asignado mas abajo, por clase). */
#sus-servicio-1 > .elementor-widget-wrap,
#sus-servicio-2 > .elementor-widget-wrap,
#sus-servicio-3 > .elementor-widget-wrap {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    justify-items: center;
    gap: 0;
    padding: var(--space-5);
    text-align: center;
    z-index: 2;
}
.sus-card-servicio__img,
.sus-card-servicio__img .elementor-widget-container,
.sus-card-servicio__img img {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sus-card-servicio__img { z-index: 1; }
/* (2026-07-31): el widget HTML del overlay
 * (`.elementor-widget-html`, ancestro directo del span
 * `.sus-card-servicio__overlay`) media 304x0 en vez de cubrir la card —
 * Elementor declara `.elementor-widget{position:relative}` sobre ese wrapper,
 * pero como grid-item con un unico hijo `position:absolute` (el span)
 * colapsaba a 0 de alto; el `inset:0` del span resolvia contra ESE 0-alto en
 * vez de contra la card entera. Fix: sacar el propio widget-html del flujo
 * (position:absolute; inset:0) para que su containing block pase a ser
 * `.elementor-widget-wrap` (ya position:absolute;inset:0, tamano real de
 * card) — el span adentro ya resuelve bien sin tocarlo. Stacking: z-index 2,
 * arriba de la imagen (1) y debajo de titulo/CTA (3); `pointer-events:none`
 * para que el CTA siga siendo clickeable debajo del overlay. */
#sus-servicio-1 .elementor-widget-html,
#sus-servicio-2 .elementor-widget-html,
#sus-servicio-3 .elementor-widget-html {
    position: absolute;
    inset: 0;
    margin: 0;
    pointer-events: none;
    z-index: 2;
}
#sus-servicio-1 .elementor-widget-html > .elementor-widget-container,
#sus-servicio-2 .elementor-widget-html > .elementor-widget-container,
#sus-servicio-3 .elementor-widget-html > .elementor-widget-container {
    height: 100%;
}
.sus-card-servicio__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.45) 100%);
    z-index: 2;
    pointer-events: none;
}
.sus-card-servicio__title,
.sus-card-servicio__cta {
    /* Bug cazado con browser real: el widget Image/HTML overlay
       tienen `position:absolute` (gotcha nuevo, no documentado en 4a/4b) —
       en CSS, cualquier elemento POSICIONADO pinta por ENCIMA de hermanos
       no-posicionados dentro del mismo stacking context, sin importar el
       orden del DOM ni z-index (z-index solo desempata entre posicionados).
       Heading/Button quedaban tapados por la imagen aunque estuvieran
       después en el DOM. Fix: position:relative + z-index propio para que
       también sean "posicionados" y entren en la comparación de z-index. */
    position: relative;
    z-index: 3;
}
/* (2026-07-31): grid-row explicito (grid definido arriba en
 * `.elementor-widget-wrap`) — titulo en la fila central (paridad con PROD:
 * centro del titulo = alto/2 de la card), CTA en la ultima fila.
 * GOTCHA NUEVO cazado con browser real (document.styleSheets, mismo metodo
 * de los gotchas #31/#37 del README): el widget Heading NO es el ultimo hijo
 * de `.elementor-widget-wrap` (el Button va despues) — Elementor matchea
 * `.elementor-widget:not(:last-child){margin-block-end:var(--kit-widget-spacing,20px)}`
 * (custom-frontend.min.css) Y ADEMAS su propio CSS compilado por-post
 * (`post-<id>.css`, selector de 3 clases `.elementor-<id>
 * .elementor-element.elementor-element-<eid>`, especificidad 0-3-0) usa
 * `margin-bottom:calc(var(--kit-widget-spacing,0px) + 0px)` — el control
 * `_margin` del widget (guardado en 0,0,0,0 via runner) es ADITIVO al
 * espaciado del kit, no lo reemplaza. Esa regla de 3 clases le gana a
 * `.sus-card-servicio__title` (1 clase) SIN IMPORTAR el orden de las hojas
 * — midio 10px de corrimiento constante (20px de margin-bottom sin
 * contrarrestar, repartido por el centrado). Fix: `!important` (mismo patron
 * ya usado en este archivo para `.sus-card-servicio__img`, otro caso de
 * pisar un default de Elementor). */
.sus-card-servicio__title {
    grid-row: 2;
    align-self: center;
    margin: 0 !important;
}
.sus-card-servicio__cta {
    grid-row: 3;
    align-self: center;
    margin: 0 !important;
}
/* (inversion capa de estilos, 2026-07-16): font-size/weight/color/
   margin/line-height/text-shadow de `.sus-card-servicio__title` pasaron a
   widget settings (title_color/typography_* /_margin/text_shadow_* via
   runner _stgsetup/run-7fs.php action=migrate_v1). `max-width:16ch` queda
   como EXCEPCION documentada: Elementor Free (Heading widget) no expone un
   control de ancho en unidades `ch` — no pisa color/tipografia/spacing
   editables, solo acota el wrap del texto de la card. */
.sus-card-servicio__title .elementor-heading-title {
    max-width: 16ch;
    margin-block-end: 0;
    /* Centrado en la tarjeta, como `.card-servicio__title` (justify-items:center). */
    margin-inline: auto;
}
/* (inversion capa de estilos, 2026-07-16): idle (background/padding/
   border/radius/color/tipografia) de `.sus-card-servicio__cta` pasó a
   widget settings del Button (button_text_color/background_* /border_* /
   text_padding/border_radius/typography_* via runner migrate_v1) — editable
   desde el editor. EXCEPCION documentada: el hover real del diseño se
   dispara al pasar el mouse sobre TODA LA CARD (`#sus-servicio-N:hover`),
   no sobre el botón — Elementor Free solo expone un tab "Hover" para
   estados del PROPIO widget, no para hover de un ancestro. Se deja este
   selector puntual (sin !important: el CSS generado de Elementor para este
   widget no compite en especificidad contra un selector `#id:hover .clase
   .elementor-button`, así que ya gana solo). */
#sus-servicio-1:hover .sus-card-servicio__cta .elementor-button,
#sus-servicio-2:hover .sus-card-servicio__cta .elementor-button,
#sus-servicio-3:hover .sus-card-servicio__cta .elementor-button {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
@media (max-width: 1024px) {
    #sus-servicios-grid .elementor-container { flex-wrap: wrap !important; }
}

/* ─── Medidas de las secciones 02-04 armadas en Elementor ──────────────────
 * Mismo resultado que `.sobre-sussanich`, `.mision-vision` y `.servicios-tres`:
 * - Márgenes de los widgets tal como se cargan en el editor, sin sumarles el
 *   espaciado global entre widgets del kit, y columnas sin el relleno interno.
 * - El microtítulo no suma su margen inferior: en el diseño se superpone con
 *   el margen superior del bloque que le sigue (12 px en Sobre y Misión, 24 px
 *   en Servicios); dentro de una columna de Elementor no se superponen.
 * - Dos columnas separadas 64 px desde 769 px de ancho; hasta 768, una sola con
 *   32 px entre bloques y 16 px laterales.
 * - Sobre: la miga queda arriba y el texto se centra contra la imagen en el
 *   espacio de abajo (en el diseño la miga va fuera de la grilla).
 * - Servicios: los 64 px de arriba van antes del microtítulo; dos tarjetas por
 *   fila hasta 1024 px y una sola hasta 600 px. */
#sus-sobre-grid .elementor-widget,
#sus-mision-vision .elementor-widget,
#sus-servicios-kicker .elementor-widget {
    --kit-widget-spacing: 0px;
}
#sus-sobre-grid > .elementor-container > .elementor-column > .elementor-widget-wrap,
#sus-mision-vision > .elementor-container > .elementor-column > .elementor-widget-wrap,
#sus-servicios-kicker > .elementor-container > .elementor-column > .elementor-widget-wrap {
    padding: 0;
}
#sus-sobre-grid .kicker,
#sus-mision-vision .kicker,
#sus-servicios-kicker .kicker {
    margin-bottom: 0;
}
#sus-sobre-grid > .elementor-container,
#sus-mision-vision > .elementor-container {
    gap: var(--space-7);
}
#sus-sobre-grid > .elementor-container > .elementor-column,
#sus-mision-vision > .elementor-container > .elementor-column {
    min-width: 0;
}
/* La imagen apoya en la línea de texto, como `.sobre-sussanich__img`. */
#sus-sobre-grid .elementor-widget-image img {
    vertical-align: baseline;
}
#sus-servicios-kicker {
    padding-top: var(--space-7);
}
#sus-servicios-grid {
    padding-top: 0;
}
@media (min-width: 769px) {
    #sus-sobre-grid > .elementor-container > .elementor-column,
    #sus-mision-vision > .elementor-container > .elementor-column {
        width: calc((100% - var(--space-7)) / 2);
    }
    /* Alto de la miga (relleno 16 + 24 y una línea de 14 px a 1,6). */
    #sus-sobre-grid > .elementor-container > .elementor-column > .elementor-widget-wrap {
        padding-top: calc(var(--space-3) + var(--space-4) + var(--fs-body-sm) * 1.6);
    }
    #sus-sobre-col-copy {
        align-self: stretch;
    }
    #sus-sobre-col-copy > .elementor-widget-wrap {
        align-content: center;
    }
    #sus-sobre-col-copy .elementor-widget:has(> .breadcrumbs),
    #sus-sobre-col-copy .elementor-widget:has(> .elementor-widget-container > .breadcrumbs) {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }
}
@media (max-width: 1024px) {
    #sus-servicios-grid > .elementor-container > .elementor-column {
        width: calc((100% - var(--space-4)) / 2);
    }
}
@media (max-width: 768px) {
    #sus-sobre-grid > .elementor-container,
    #sus-mision-vision > .elementor-container {
        gap: var(--space-5);
    }
    #sus-sobre-grid > .elementor-container,
    #sus-mision-vision > .elementor-container,
    #sus-servicios-kicker > .elementor-container,
    #sus-servicios-grid > .elementor-container {
        padding-inline: var(--space-3);
    }
    #sus-sobre-col-copy > .elementor-widget-wrap {
        max-width: none;
    }
}
@media (max-width: 600px) {
    #sus-servicios-grid > .elementor-container > .elementor-column {
        width: 100%;
    }
}

/* ─── 05 — Grid de excursiones destacadas ───────────────────────────────── */
/* Layout y cards heredados de home.css (canónico). Sin overrides adicionales. */

.sus-excursiones__empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  padding: var(--space-7) 0;
}

/* ─── (2026-07-31): ergonomia SOLO-editor ──────────────────────────────────
 * El front de `.mision-vision__rule` (barra decorativa 40x3px) esta perfecto
 * y NO cambia (verificado con browser real) — lo que se ve raro en el editor
 * Elementor es el cromo de seleccion (box-shadow/handle) de Elementor sobre
 * un widget HTML de apenas 3px de alto, no un bug del rule en si. Esta regla
 * SOLO aplica dentro del editor (clase `elementor-edit-area-active`,
 * exclusiva del iframe de edicion) y nunca en el front publico (la clase no
 * existe fuera del editor). */
.elementor-edit-area-active .elementor-widget-html:has(.mision-vision__rule) {
    min-height: 14px;
}