/**
 * base.css — Sussanich Turismo
 * Resets, tipografía base, utilidades globales.
 * Todos los colores vía custom properties de tokens.css.
 * Generado: 2026-05-05
 */

/* ─── RESET (Eric Meyer simplificado + box-sizing universal) ─────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote::before, blockquote::after,
q::before, q::after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ─── TIPOGRAFÍA BASE ────────────────────────────────────────────────────── */
html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--color-text-primary);
  background-color: var(--color-background);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-semibold);
  line-height: var(--lh-base);
  color: var(--color-text-primary);
}

h1 { font-family: var(--font-display); font-size: var(--fs-h1);      font-weight: var(--fw-regular);  line-height: var(--lh-tight); }
h2 { font-family: var(--font-display); font-size: var(--fs-h2);      font-weight: var(--fw-regular);  line-height: var(--lh-snug); max-width: 500px; }
h3 { font-family: var(--font-body);    font-size: var(--fs-h3);      font-weight: 500;                line-height: var(--lh-base); }
h4 { font-family: var(--font-body);    font-size: var(--fs-h4);      font-weight: var(--fw-semibold); line-height: var(--lh-base); }
h5 { font-family: var(--font-body);    font-size: var(--fs-h5);      font-weight: var(--fw-semibold); line-height: var(--lh-base); }
h6 { font-family: var(--font-body);    font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); }

p { margin-bottom: var(--space-3); line-height: var(--lh-normal); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-base);
}
a:hover { color: var(--color-primary-hover); }

strong, b { font-weight: var(--fw-bold); }
em, i     { font-style: italic; }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ─── CONTENEDORES ────────────────────────────────────────────────────────── */
/* .container / .container-lg → 80% viewport
 * .container-md              → 70% viewport
 * .container-sm              → 60% viewport
 * `!important` necesario para ganarle a Bootstrap 3.3.7 `.container { max-width: 1170px }`
 */
.container,
.container-lg {
  width: 80% !important;
  max-width: none !important;
  margin-inline: auto;
  padding-inline: 0;
}

.container-md {
  width: 70% !important;
  max-width: none !important;
  margin-inline: auto;
  padding-inline: 0;
}

.container-sm {
  width: 60% !important;
  max-width: none !important;
  margin-inline: auto;
  padding-inline: 0;
}

.container--narrow {
  max-width: var(--container-narrow) !important;
}

@media (max-width: 768px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm { width: 92% !important; }
}

/* ─── ELEMENTOR: CONTENIDO BOXED AL ANCHO REAL DEL SITIO (80%) ──────────────
 * FIX 2026-07-15 (bug sistémico detectado en QA visual de staging):
 * el kit de Elementor (Site Settings → Layout → Content Width) quedó
 * fijado en 1200px, pero el ancho de contenido real del sitio es el
 * `.container` de arriba: 80% del viewport (92% en mobile). Sin este
 * override, CUALQUIER Section "Boxed" construida con widgets nativos de
 * Elementor (headings, "Por qué elegirnos", CTA banner, intros de listados,
 * estáticas) queda angosta — 1200px en vez de ~1536px @1920 — mientras los
 * grids/carruseles inyectados por shortcode (que rompen su propio ancho vía
 * `100vw`, fuera de `.elementor-container`) NO lo sufren, por eso el QA
 * anterior no lo cazó (verificaba similitud de contenido, no extents de
 * sección). Reemplaza en el fondo los alias puntuales `#id .elementor-container`
 * que 4a/4b habían ido agregando página por página (home.css/excursiones.css/
 * shore-tours.css/etc. via _element_id — Section/Column no soportan CSS
 * Classes en Elementor Free, gotcha #1 de 4a): esos alias por ID siguen
 * vigentes (misma especificidad que necesitan, no se retiran para no
 * arriesgar nada que dependa de ellos) pero ahora son redundantes — esta
 * regla global cubre TODAS las secciones boxed, incluidas las que 4a/4b/4c/4d
 * no llegaron a parchear una por una.
 *
 * Selectores NO afectados a propósito:
 *  - Secciones "Full Width" (`.elementor-section-full_width`, sin
 *    `.elementor-container` boxed) — su fondo y contenido ya son full-bleed.
 *  - El Hero de Home (#sus-hero): su Column tiene UNA sola columna
 *    `elementor-col-100` — ensancha el `.elementor-container`/columna, pero
 *    el contenido visible sigue centrado a 860px porque
 *    `#sus-hero-content .elementor-widget-wrap` (home.css) tiene su propio
 *    `max-width:860px` explícito, más específico, intocado por este cambio.
 *  - Grids/carruseles por shortcode: no viven dentro de `.elementor-container`
 *    (rompen su propio ancho con `100vw`), así que ensanchar el container que
 *    los envuelve no cambia su breakout — verificado con browser real en
 *    #excursiones/#shore-tours, que ya corrían a 80% desde 4a sin romper el
 *    grid.
 */
.elementor-section-boxed > .elementor-container {
  width: 80% !important;
  max-width: none !important;
}

@media (max-width: 768px) {
  .elementor-section-boxed > .elementor-container {
    width: 92% !important;
  }
}

/* ─── UTILIDADES DE TEXTO ────────────────────────────────────────────────── */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.text-primary { color: var(--color-primary); }
.text-muted   { color: var(--color-text-muted); }
.text-on-dark { color: var(--color-text-on-dark); }

.kicker {
  font-family: var(--font-display); /* Minerva */
  font-size: var(--fs-kicker);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  letter-spacing: var(--ls-kicker);
  color: var(--color-primary);
  display: block;
  margin-bottom: var(--space-1);
}

.kicker--muted {
  color: var(--color-text-muted);
}

/* ─── ACCESIBILIDAD ──────────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Outlines de foco completamente eliminados.
 * Bootstrap 3 inyecta outlines azules al :focus de a/button/input que rompen el
 * look del sitio. `!important` necesario porque Bootstrap los aplica con la misma
 * especificidad y se carga después.
 * Trade-off: pérdida de a11y para usuarios de teclado (no ven dónde están al tabular).
 * Si se quiere recuperar a11y sin el outline azul fome, restaurar la regla anterior:
 *   :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
 */
:focus,
:focus-visible,
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ─── UTILIDADES DE LAYOUT ───────────────────────────────────────────────── */
.d-flex      { display: flex; }
.d-block     { display: block; }
.d-none      { display: none; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

.mt-auto { margin-top: auto; }
.mb-0    { margin-bottom: 0; }

/* ─── SECCIÓN ────────────────────────────────────────────────────────────── */
.section {
  padding-block: var(--gutter-section);
}

.section--surface {
  background-color: var(--color-surface);
}

/* ─── DIVIDER ────────────────────────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-block: var(--space-3);
}

/* ─── HERO DE LISTADO (Excursiones/Shore Tours/Viajes/Blog) ──────────────
 * Puerto a Elementor de template-parts/page-hero.php (size=sm) para páginas
 * construidas en el editor visual (_elementor_data): el template-part emite
 * su propio <style> inline y solo corre en templates PHP reales (singles),
 * así que estas reglas GLOBALES cubren el mismo resultado visual cuando el
 * hero se arma con Section+Heading nativos de Elementor. La imagen de fondo
 * y el overlay los pone el control nativo `background_*` de la Section
 * (editable por el cliente); acá solo min-height/centrado/tipografía.
 * Selector: `_element_id` fijo `hero-listado`/`hero-listado-content` en la
 * Section/Column de cada página (Section y Column NO soportan `_css_classes`,
 * gotcha #1 de 4a) — el MISMO id se reusa en las 4 páginas porque cada una
 * vive en un post distinto (sin colisión de DOM), así el CSS no se repite 4
 * veces (mismo patrón que #excursiones/#shore-tours en home.css). Los
 * widgets Heading (título/kicker) SÍ soportan `_css_classes`, por eso esos
 * dos siguen siendo selectores de clase normales. */
#hero-listado {
  min-height: calc(380px + var(--header-total-h, 120px));
  /* El header es position:fixed y tapa la parte superior del hero — sin este
     padding-top el `content_position:middle` nativo de Elementor centra el
     título DETRÁS del header (bug real cazado en el primer crop de 4b:
     "Excursiones" quedaba semi-tapado por la nav). Mismo fix que
     page-hero.php original (línea `padding-top: var(--header-total-h)`). */
  padding-top: var(--header-total-h, 120px);
  box-sizing: border-box;
}
#hero-listado-content {
  max-width: 860px;
  margin-inline: auto;
  text-align: center;
}
/* Centrado vertical como el page-hero de las fichas: el contenido (título +
   kicker, con el mismo relleno que `.page-hero__content`) queda centrado
   entre el final del header y el final del hero, y el hero crece si el
   título ocupa más líneas. Sin esto la columna de Elementor medía solo su
   contenido y el título quedaba pegado al header. */
#hero-listado {
  display: flex;
  align-items: center;
  overflow: hidden;
}
#hero-listado > .elementor-container {
  width: 100% !important;
}
#hero-listado-content > .elementor-widget-wrap {
  padding: var(--space-8) var(--gutter-page);
}
/* Separación título-kicker: el margen del widget del título, sin sumarle el
   espaciado global entre widgets del kit. */
#hero-listado .hero-listado__title {
  --kit-widget-spacing: 0px;
}
/* Kicker: bloque con interlineado y margen del page-hero (los valores que
   se carguen en el widget siguen mandando: este selector es más débil). */
:where(#hero-listado) .hero-listado__kicker .elementor-heading-title {
  display: block;
  line-height: 1.6;
  margin-bottom: var(--space-1);
}
/* (inversion capa de estilos, 2026-07-16): color/tipografia/tamano/
   line-height/margin/text-shadow de estos 2 headings pasaron a widget
   settings reales (_elementor_data, title_color/typography_* /_margin/
   text_shadow_*) via runner _stgsetup/run-7fs.php action=migrate_v1 — el
   cliente ahora puede cambiarlos desde el editor de Elementor sin pelear
   contra este CSS. Regla de capas: monolitico/README.md. */

/* ─── FALLBACK VISIBLE PARA WIDGETS SHORTCODE VACÍOS EN EL EDITOR ───────────
 * Diagnóstico de código (2026-07-16): el widget nativo "Shortcode" de
 * Elementor (`includes/widgets/shortcode.php`) NO tiene `content_template()`
 * (vacío a
 * propósito, línea ~168) — a diferencia de Heading/Button/etc. que sí
 * renderizan client-side con Backbone, el Shortcode SOLO se re-renderiza
 * server-side vía reload completo del iframe (`is_reload_preview_required():
 * true`). Verificado con `render_check` (server-side, misma función
 * `Frontend::get_builder_content()` que usa el iframe del editor) que el
 * output real de `[sus_google_reviews]`/`[sus_grid_viajes_promo]` es HTML no
 * vacío e idéntico al del front — no hay guard `is_admin()` ni condicional de
 * edit-mode en nuestro código ni en el widget de Elementor. Sin poder
 * reproducir visualmente el hueco reportado, se aplica una red de
 * seguridad: SI alguna vez el div queda vacío
 * dentro del editor (timing, shortcode sin items, etc.), mostrar un
 * placeholder visible con el nombre — nunca un hueco invisible. Scoped SOLO al
 * editor vía `.elementor-editor-active` (clase que Elementor agrega al
 * `<body>` del iframe en modo edición) — cero impacto en el sitio publicado.
 * Aplica a CUALQUIER widget Shortcode del sitio, no solo los 2 de Home. */
body.elementor-editor-active .elementor-widget-shortcode .elementor-shortcode:empty {
  display: block !important;
  min-height: 80px;
  padding: 24px;
  background: repeating-linear-gradient(45deg, #f4f4f4, #f4f4f4 10px, #eaeaea 10px, #eaeaea 20px);
  border: 2px dashed #999;
}
body.elementor-editor-active .elementor-widget-shortcode .elementor-shortcode:empty::before {
  content: "Sección dinámica — shortcode vacío en este preview (verificar en el sitio publicado o forzar 'Reload Preview')";
  display: block;
  color: #555;
  font-family: sans-serif;
  font-size: 14px;
  text-align: center;
}

/* ─── RESPONSIVE BÁSICO ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* px, no rem: el reset rompe la base del rem */
  h1 { font-size: clamp(32px, 8vw, 48px); }
  h2 { font-size: clamp(24px, 5vw, 32px); }
  .container { padding-inline: var(--space-3); }
  /* NO se agrega un shrink de font-size mobile acá a propósito (
     hallazgo verificado con browser real): el `<style>` inline de
     template-parts/page-hero.php SÍ define `.page-hero__title { font-size:
     clamp(2.5rem,9vw,4.25rem) }` en su media query, pero esa regla NUNCA
     gana en prod — pierde contra `.page-hero h1.page-hero__title` (0,2,1)
     por especificidad, aunque aparece después en el archivo. Prod real en
     390px mide 68px (computed), no ~40px. Portar el bug "corregido" acá
     rompería la paridad pixel-a-pixel con el sitio vivo — replicar el
     resultado REAL (68px estático), no la intención del autor original.
     Candidato a limpieza de plataforma fuera de este chunk (no tocar
     page-hero.php fuera de este alcance). */
}

/* ─── AISLAMIENTO DE LOS COMPONENTES DEL TEMA ─────────────────────────────
 * Además del CSS del tema, el sitio carga los estilos por defecto de Elementor
 * (custom-frontend.min.css, widget-*.css). Varias de esas reglas pisan a los
 * componentes propios (tarjetas, grillas, carruseles, sellos) cuando se
 * renderizan por shortcode o dentro de una columna de Elementor. Este bloque
 * devuelve a esos componentes los valores del sitio original, en un solo
 * lugar. (El reset.css de Hello Elementor, que pisaba botones y campos, no se
 * carga: ver functions.php.)
 * Especificidad: alcanza para ganarle a las reglas genéricas de Elementor y
 * queda por debajo de lo que se cargue por elemento desde el editor
 * (post-N.css) y de las reglas por id de cada página. */

/* 1. Columnas de las secciones "Boxed": el contenido arranca en el borde del
 *    contenedor, como `.container` (sin relleno en escritorio, 16 px laterales
 *    hasta 768 px). Elementor agrega 10 px de relleno a cada columna. */
.elementor-section-boxed > .elementor-container > .elementor-column > .elementor-element-populated {
  padding: 0;
}
@media (max-width: 768px) {
  .elementor-section-boxed > .elementor-container > .elementor-column > .elementor-element-populated {
    padding: 0 var(--space-3);
  }
}

/* 2. Imágenes de tarjetas y sellos: `.elementor img { height: auto }` les
 *    quitaba el alto del marco (la foto quedaba recortada desde arriba) y
 *    `.elementor-widget-wrap > .elementor-element { width: 100% }` el ancho
 *    de los sellos cargados como widget de imagen. */
.elementor .card-excursion__img,
.elementor .card-shore__img,
.elementor .card-post__img {
  height: 100%;
}
.elementor .sello-flotante,
.elementor .sho-sello-worryless {
  aspect-ratio: 1 / 1;
}
.elementor .pre-datepicker__icon {
  height: 16px;
}
.elementor-widget-image.exc-sello-flotante {
  width: 110px;
  margin-left: auto;
}
.elementor-widget-image.exc-sello-flotante img {
  width: 110px;
  height: 110px;
  object-fit: contain;
}
.elementor-widget-image.viajes-list__sello img {
  width: 100%;
  height: 100%;
}

/* 3. Divisor de la tarjeta de excursión: `.elementor hr { margin: 0 }` le
 *    quitaba el margen y la duración quedaba montada sobre "Precio". */
.card-excursion .card-excursion__divider {
  margin: var(--space-2) 0;
}

/* 4. Interlineado del tema en los widgets de Elementor que no lo fijan.
 *    Elementor pone `line-height: 1` a títulos y botones; el sitio usa el de
 *    cada nivel de título, 1,6 en el texto y en los botones. En el widget de
 *    texto, el `p` toma el interlineado cargado en el widget (el `p` del tema
 *    lo pisaba). Un valor cargado desde el editor sigue mandando. */
h1.elementor-heading-title { line-height: var(--lh-tight); }
h2.elementor-heading-title { line-height: var(--lh-snug); }
h3.elementor-heading-title,
h4.elementor-heading-title,
h5.elementor-heading-title { line-height: var(--lh-base); }
p.elementor-heading-title,
div.elementor-heading-title,
span.elementor-heading-title { line-height: var(--lh-normal); }
.elementor-button { line-height: var(--lh-normal); }
.elementor-widget-text-editor p { line-height: inherit; }

/* 5. Miga de pan escrita en un widget HTML: sin espacios en el marcado, el
 *    separador quedaba pegado al texto. El espacio va en el propio separador
 *    (si el marcado ya lo trae, se colapsa con este). */
.elementor-widget-html .breadcrumbs__item + .breadcrumbs__item::before {
  content: '\203A\0020';
}