/* ==========================================================================
   FICHA TÉCNICA - WEB MULTIFRANQUICIAS
   Lineamientos de implementación - versión base Desktop / Escritorio
   ========================================================================== */

/* -----------------------------
   01. TIPOGRAFÍA
   Coloca los archivos de fuente en assets/fonts/
   - Cocogoose-DemiBold.woff2 / .woff  (Títulos principales)
   - HelveticaNeue-Light.woff2 / .woff (Textos descriptivos)
   - HelveticaNeue-Roman.woff2 / .woff (Botones / CTA)
   Si aún no tienes los archivos, se usan fuentes de reemplazo similares
   (fallback) para no romper el diseño.
------------------------------ */

@font-face {
  font-family: 'Cocogoose';
  src: url('../fonts/Cocogoose-DemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CocogooseSemilight';
  src: url('../fonts/Cocogoose Pro Semilight-trial.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica Neue Light';
  src: url('../fonts/HelveticaNeue-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica Neue Roman';
  src: url('../fonts/HelveticaNeue-Roman.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 02. PALETA DE COLOR */
  --color-primary: #EC690D;
  /* Naranja Multifranquicias */
  --color-dark: #272022;
  /* Gris oscuro */
  --color-white: #FFFFFF;
  /* Blanco */

  /* Tipografía */
  --font-title: 'Cocogoose', 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Helvetica Neue Light', 'Helvetica Neue', Arial, sans-serif;
  --font-cta: 'Helvetica Neue Roman', 'Helvetica Neue', Arial, sans-serif;

  /* MÁRGENES LATERALES
     144 px fijos a izquierda y derecha en escritorio (≥940 px).
     En móvil se usa 24 px. Aplicar con padding-left/right: var(--page-margin)
     en TODAS las secciones de la web para mantener coherencia. */
  --page-margin: 24px;

  /* ESCALA DEL DISEÑO
     El archivo de Illustrator mide 860 px de ancho y es proporcional al ancho
     de la pantalla. Esta unidad equivale a 1 px de ese archivo, así cualquier
     medida del diseño se traduce directo: calc(53 * var(--u)) = 53 px del Ai.
     Solo se aplica desde 1400 px, que es el ancho a partir del cual el diseño
     proporcional resulta legible; por debajo se usan tamaños fijos. El tope
     evita que siga creciendo más allá de 1920 px. */
  --u: min(0.116279vw, 2.2326px);

  /* PREVIEW DE LA SIGUIENTE SECCIÓN
     Altura visible de la siguiente sección en la primera vista.
     clamp(mínimo, fluido, máximo):
       móvil    ≈  80px  (pantallas <480px)
       tablet   ≈ 110px  (pantallas ~768px)
       desktop  ≈ 140px  (pantallas ≥940px)
     El valor fluido ‘11vw’ interpola suavemente entre esos extremos
     sin crear breakpoints rígidos. */
  --preview-height: clamp(210px, 23.5vh, 280px);
}

body {
  font-family: var(--font-body);
  font-size: 9pt;
  color: var(--color-dark);
}

/* Jerarquía tipográfica
   Nota: se usan las clases tp-title / tp-body / tp-cta / tp-form (en vez de
   font-title / font-body / font-cta) para no chocar con las utilidades de
   Tailwind del mismo nombre (que solo definen la familia tipográfica, no el
   tamaño). Si se usara font-title junto a tp-title se sobreescribiría el
   tamaño de forma no deseada en menús, botones, etc. */
h1,
h2,
h3,
h4,
.tp-title {
  font-family: 'CocogooseSemilight', sans-serif;
  font-weight: 600;
  font-size: 20.5pt;
  color: var(--color-dark);
}

p,
.tp-body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 9pt;
}

/* Botones / CTA */
.btn,
.tp-cta {
  font-family: var(--font-cta);
  font-weight: 400;
  font-size: 13pt;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.btn {
  display: inline-block;
  padding: 0.75rem 2rem;
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: 999px;
  transition: background-color 0.25s ease, transform 0.2s ease;
}

.btn:hover {
  background-color: #d45c09;
  transform: translateY(-2px);
}

.btn-outline {
  background-color: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* Textos descriptivos de formularios */
label,
.form-hint,
.font-form {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 7.5pt;
}

/* -----------------------------
   03. NAVEGACIÓN
------------------------------ */
.nav-link {
  position: relative;
  font-family: 'CocogooseSemilight', sans-serif;
  font-weight: 600;
  transition: color 0.2s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: width 0.25s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 1em;
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-primary);
}

/* -----------------------------
   04. MEDIDAS EXACTAS DEL DISEÑO
   Los valores provienen del archivo de Illustrator (lienzo 860 px) y se
   expresan en var(--u), donde 1u = 1 px de ese archivo.

   Importante: estas clases NO deben combinarse con utilidades de Tailwind que
   definan lo mismo (text-*, px-*, gap-*, h-*, w-*). Tailwind se inyecta
   después de esta hoja y ganaría por orden en la cascada.
------------------------------ */

/* Valores base (teléfono y tablet, por debajo de 940 px) */
.d-header-inner {
  padding: 10px 24px;
}

.d-logo {
  height: 34px;
  width: auto;
}

.d-nav {
  gap: 18px;
  font-size: 12.5px;
}

/* PRIMERA VISTA: header + hero, dejando --preview-height visible
   de la siguiente sección al fondo del viewport */
.d-first-view {
  display: flex;
  flex-direction: column;
  /* Fallback: viewport estándar menos el preview */
  min-height: calc(100vh - var(--preview-height));
  /* Viewport dinámico (descuenta barras del navegador en móvil) */
  min-height: calc(100dvh - var(--preview-height));
}

/* El hero ocupa todo el espacio restante tras el header */
.d-hero {
  flex: 1;
  min-height: 0;
  /* Evita que flex-item desborde */
}

/* La SECCIÓN controla altura y centrado vertical y horizontal.
   El fondo blanco ocupa el 100% del ancho. */
#stats-slider {
  display: flex;
  align-items: center;
  /* centra el contenido verticalmente */
  justify-content: center;
  /* centra el contenedor horizontalmente */
  min-height: var(--preview-height);
  width: 100%;
}

/* Base Móvil (< 780px): contenido centrado y vertical con márgenes simétricos */
#stats-slider-content.d-stats,
.d-stats {
  width: calc(100% - 2 * clamp(25px, 7.7vw, 37px));
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-inline: auto !important;
  padding: 16px 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
}

.d-figure {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.d-number {
  font-size: clamp(48px, 12vw, 64px);
  line-height: 1;
}

.d-plus {
  font-size: 0.71em;
}

.d-label {
  font-size: 14px;
  margin-top: 6px;
}

.d-divider {
  display: none;
  height: 90px;
  margin: 0;
}

.d-dot-top,
.d-dots .stat-dot {
  width: 9px;
  height: 9px;
}

.d-dot-top {
  transition: top 0.42s ease;
}

.d-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  max-width: 380px;
  margin: 0;
}

.d-text {
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

.d-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  height: 36px;
  font-size: 12px;
  padding: 0 20px;
  border-radius: 999px;
}

.d-dots {
  gap: 9px;
}

/* Tablet (780px a 939px): 3 columnas fluidas centradas horizontalmente */
@media (min-width: 780px) {

  #stats-slider-content.d-stats,
  .d-stats {
    display: grid !important;
    grid-template-columns: clamp(150px, 20vw, 180px) auto 1fr;
    align-items: center;
    column-gap: clamp(20px, 3vw, 40px);
    width: calc(100% - 2 * clamp(37px, 9.27vw, 124px));
    max-width: 1200px;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-inline: auto !important;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
  }

  .d-copy {
    align-items: flex-start;
    text-align: left;
  }

  .d-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: clamp(70px, 7vw, 90px);
    margin: 0;
  }
}

/* Escritorio y Laptop (desde 940px en adelante): Composición Grid 100% fluida y simétrica */
@media (min-width: 940px) {

  :root {
    --page-margin: 180px;
  }

  .d-header-inner {
    padding: 9px var(--page-margin);
  }

  .d-logo {
    height: clamp(27px, 1.8vw, 31px);
  }

  .d-nav {
    font-size: clamp(10.5px, 0.75vw, 12px);
    gap: clamp(12px, 0.95vw, 15px);
  }

  /* .d-hero ya no necesita height fijo: hereda flex-1 del bloque base */

  /* Sección: mantiene la altura dinámica */
  #stats-slider {
    min-height: var(--preview-height);
  }

  /* Grid fluido de 4 columnas centrado: MARGEN IZQUIERDO === MARGEN DERECHO */
  #stats-slider-content.d-stats,
  .d-stats {
    display: grid !important;
    grid-template-columns: clamp(180px, 14.5vw, 280px) auto 1fr auto;
    align-items: center;
    column-gap: clamp(24px, 3.5vw, 65px);
    width: calc(100% - 2 * clamp(36px, 18.75vw, 360px));
    max-width: 1200px;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-inline: auto !important;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  .d-figure {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 0;
  }

  .d-number {
    font-size: clamp(64px, 6.15vw, 118px);
    line-height: 1;
  }

  .d-plus {
    font-size: 0.71em;
  }

  .d-label {
    font-size: clamp(13.5px, 1.1vw, 22px);
    margin-top: clamp(6px, 0.5vw, 12px);
    white-space: nowrap;
  }

  .d-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: clamp(75px, 5.8vw, 112px);
    margin: 0;
    margin-left: clamp(40px, 5vw, 90px);
  }

  .d-dot-top,
  .d-dots .stat-dot {
    width: clamp(7px, 0.5vw, 10px);
    height: clamp(7px, 0.5vw, 10px);
  }

  .d-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin: 0;
    min-width: 0;
    max-width: 100%;
    gap: clamp(10px, 1.1vw, 20px);
    padding-left: clamp(40px, 4vw, 70px);
  }

  .d-text {
    font-size: clamp(14px, 1.35vw, 22px);
    line-height: 1.20;
    letter-spacing: 0.03em;
    color: #272022;
    min-width: 0;
    max-width: 100%;
    margin: 0;
  }

  .d-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(150px, 11.5vw, 230px);
    height: clamp(34px, 2.1vw, 42px);
    font-size: clamp(11.5px, 0.9vw, 18px);
    padding: 0 clamp(16px, 1.2vw, 24px);
    border-radius: 999px;
    white-space: nowrap;
    margin: 0;
    align-self: flex-start;
  }

  .d-dots {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 0.5vw, 10px);
    justify-self: end;
    margin: 0 !important;
  }
}

/* Escritorio amplio (desde 1650 px): medidas 1:1 con el archivo de diseño */
@media (min-width: 1650px) {

  /* Cabecera
     Ajuste pedido por el cliente sobre el diseño original: barra más baja
     (38 -> 31.5) con logo (95 -> 110) y menú (4.8 -> 5.5) más grandes.
     Los gaps bajan de 10.7 a 9 para que el menú siga entrando en una línea
     dentro de los márgenes del diseño incluso a 940 px. */
  .d-header-inner {
    padding-left: var(--page-margin);
    padding-right: var(--page-margin);
    padding-top: calc(5.5 * var(--u));
    padding-bottom: calc(5.5 * var(--u));
  }

  .d-logo {
    width: calc(98 * var(--u));
    height: auto;
  }

  .d-nav {
    gap: calc(9 * var(--u));
    font-size: calc(5.5 * var(--u));
  }

  .d-nav .nav-link::after {
    bottom: calc(-2 * var(--u));
    height: calc(0.9 * var(--u));
  }

  /* Hero: sin height fijo — crece con flex-1 dentro de .d-first-view */
}

/* -------------------------
   NOTICIAS QUE CONECTAN
-------------------------- */
.d-noticias-section {
  padding: 0px 0px;
}

.d-noticias-inner {
  margin-left: 0;
  margin-right: 0;
  padding: 40px 0 40px 100px;
  box-sizing: border-box;
  border-top: none !important;
  outline: none !important;
}

.d-noticias-title {
  font-size: clamp(24px, 3vw, 44px);
  font-weight: 1000;
  line-height: 1.15;
  letter-spacing: -0.05em;
  margin-bottom: 28px;
  margin-left: 20px;
}

/* Carrusel de noticias */
.d-news-viewport {
  overflow: hidden;
  /* Sin padding derecho: las cards llegan hasta el borde */
}

.d-news-track {
  display: flex;
  gap: 16px;
}

.d-news-card {
  height: 500px;
  flex-shrink: 0;
  border-radius: 36px;
  overflow: hidden;
}

.d-leer-mas span {
  font-size: 28px;
  line-height: 1;
  margin-left: 3px;
  padding-bottom: 6px;
}

.d-news-card--main {
  width: 76%;
}

.d-news-card--side {
  width: calc(24% - 16px);
  border-radius: 36px 0 0 36px;
  cursor: pointer;
}

.d-news-card--full {
  width: 100%;
  cursor: pointer;
}

.d-card-main-inner {
  position: relative;
  height: 100%;
  padding: 24px 28px;
  box-sizing: border-box;
}

.d-card-main-inner .d-leer-mas {
  position: absolute;
  left: 65px;
  bottom: 55px;
  margin: 0;
}

.d-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 190px;
  height: 40px;
  padding: 0;

  background-color: var(--color-primary);
  color: #fff;

  font-family: var(--font-cta);
  font-size: 17px;
  /* antes 16px */
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-left: 35px;
  margin-top: 35px;

  border-radius: 999px;
  box-sizing: border-box;
}

.d-card-titulo {
  position: absolute;
  left: 65px;
  top: 155px;

  font-size: clamp(22px, 1.8vw, 32px);
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin: 0;
  max-width: 300px;
}

.d-leer-mas {
  font-family: 'Helvetica Neue Roman', 'Helvetica Neue', Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.d-leer-mas span {
  font-family: 'Helvetica Neue Roman', 'Helvetica Neue', Arial, sans-serif;
  font-size: 28px;
  line-height: 1;
  margin-left: 3px;
}

/* -------------------------
   SOBRE NOSOTROS — grid de paneles con efecto scroll
-------------------------- */
.sn-grid {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 340px;
}

.sn-cell {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.75s ease;
}

/* Estado inicial antes de entrar en viewport */
.sn-from-up {
  transform: translateY(70px);
  opacity: 0;
}

.sn-from-down {
  transform: translateY(-70px);
  opacity: 0;
}

/* Estado visible */
.sn-cell.sn-visible {
  transform: translateY(0);
  opacity: 1;
}

/* Celda imagen */
.sn-cell--img {
  background: #fff;
}

.sn-cell--img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 32px;
  box-sizing: border-box;
}

/* Celda texto */
.sn-cell--text {
  flex-direction: column;
  align-items: flex-start;
  padding: 48px 60px;
  gap: 16px;
}

.sn-bg-primary {
  background-color: var(--color-primary);
}

.sn-bg-dark {
  background-color: var(--color-dark);
}

.sn-accent {
  display: block;
  width: 32px;
  height: 2px;
  background-color: #fff;
  margin-bottom: 8px;
}

.sn-title {
  font-family: 'Cocogoose', 'Poppins', sans-serif;
  font-size: clamp(28px, 3.5vw, 56px);
  font-weight: 700;
  color: #fff !important;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0 0 8px 0;
}

.sn-highlight {
  color: var(--color-primary);
}

.sn-desc {
  font-family: var(--font-body);
  font-size: clamp(13px, 1vw, 16px);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  margin: 0;
}

/* -------------------------
   FOOTER
-------------------------- */
.d-footer {
  background-color: var(--color-dark);
  color: var(--color-white);
  padding-top: 56px;
}

.d-footer-topline {
  height: 2px;
  background-color: rgba(255, 255, 255, 0.5);
  margin-left: 95px;
  margin-right: 95px;
  transform: translateY(-4px);
}

.d-footer-body {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  padding: 48px var(--page-margin);
}

.d-footer-brand {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transform: translate(6px, -10px);
}

.d-footer-brand p,
.d-footer-brand a,
.d-footer-brand span {
  font-size: 19px;
  letter-spacing: 1px;
}

.d-footer-logo {
  height: 42px;
  width: 42px;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.d-footer-brand .d-footer-tagline {
  width: 330px;
  max-width: 260px;
  font-size: 19px !important;
  line-height: 1.3;
  letter-spacing: 1.6px;
  font-weight: 700;
  margin: 0;
}

.d-footer-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 0 0 auto;
  align-items: flex-start;
}

.d-footer-heading {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: -6px;
  display: block;
}

.d-footer-link {
  font-family: var(--font-body);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.2s;
}

.d-footer-link:hover {
  color: var(--color-primary);
}

.d-footer-right {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  transform: translateX(5px);

}

.d-footer-socials {
  display: flex;
  gap: 10px;
}

.d-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
}

.d-social-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.d-footer-legal {
  font-size: 15px;
  line-height: 1.8;
  color: rgb(255, 255, 255);
  text-align: right;
  max-width: 300px;
  letter-spacing: 0.12px;
}

.d-footer-bottomline {
  height: 2px;
  background-color: rgba(255, 255, 255, 0.5);
  margin-left: 95px;
  margin-right: 95px;
  transform: translateY(-35px);
}

.d-footer-bottom {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  padding: 16px 40px;
  transform: translateY(-30px);
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
}

.d-footer-bottom-links {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(16px, 3.5vw, 72px);
  font-family: var(--font-body);
  font-size: 17px;
  white-space: nowrap;
  flex-shrink: 0;
}


.d-footer-bottom-links a {
  font-family: var(--font-body);
  font-size: 17px;
  color: rgb(255, 255, 255);
  text-decoration: none;
  transition: color 0.2s;
}

.d-footer-bottom-links a:hover {
  color: var(--color-primary);
}

.d-footer-copy {
  margin-left: 0;
  padding-right: 50px;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 17px;
  color: rgb(255, 255, 255);
  text-decoration: none;
  transition: color 0.2s;
}

.d-footer-copy-group {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  transform: none;
}


.d-footer-powered {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.d-footer-arqons {
  height: 19px;
  width: auto;
}

.d-footer-cols-center {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  padding-left: clamp(40px, 14vw, 220px);
  gap: clamp(40px, 8vw, 120px);
  transform: translateY(-8px);
}

/* ─── Footer responsive ─── */

/* Pantallas medianas (940px–1200px): reducir gaps y márgenes de líneas */
@media (max-width: 1200px) {

  .d-footer-topline,
  .d-footer-bottomline {
    margin: 0 80px;
  }

  .d-footer-body {
    gap: clamp(24px, 3vw, 48px);
    padding: 40px var(--page-margin);
  }

  .d-footer-brand {
    flex: 0 0 180px;
  }

  .d-footer-tagline {
    font-size: 16px;
    max-width: 220px;
  }

  .d-footer-heading {
    font-size: 13px;
  }

  .d-footer-link,
  .d-footer-legal,
  .d-footer-bottom-links a,
  .d-footer-copy {
    font-size: 13px;
  }

  .d-footer-bottom-links {
    gap: clamp(16px, 3vw, 40px);
  }

  .d-footer-copy {
    padding-right: 24px;
  }
}


/* Bottom bar laptop (940px–1600px): reducir gap para que copyright no baje */
@media (min-width: 940px) and (max-width: 1600px) {
  .d-footer-bottom {
    flex-wrap: nowrap;
  }

  .d-footer-bottom-links {
    flex-wrap: nowrap;
    gap: clamp(14px, 2vw, 28px);
  }

  .d-footer-bottom-links a,
  .d-footer-copy {
    white-space: nowrap;
    font-size: clamp(12px, 1vw, 14px);
  }
}

/* Pantallas pequeñas (<940px): apilar en columna */
@media (max-width: 939px) {
  .d-footer {
    padding-top: 32px;
  }

  .d-footer-topline,
  .d-footer-bottomline {
    margin: 0 24px;
  }

  .d-footer-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding: 32px 24px;
  }

  .d-footer-brand {
    flex: none;
    width: 100%;
  }

  .d-footer-tagline {
    font-size: 15px;
    max-width: 100%;
  }

  .d-footer-cols-center {
    width: 100%;
    justify-content: flex-start;
    gap: 40px;
  }

  .d-footer-right {
    width: 100%;
    align-items: flex-start;
    margin-left: 0;
  }

  .d-footer-legal {
    text-align: left;
    max-width: 100%;
  }

  .d-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 24px;
  }

  .d-footer-bottom-links {
    gap: 12px;
    flex-wrap: wrap;
  }

  .d-footer-copy {
    margin: 0;
    padding: 0;
    white-space: nowrap;
    font-family: var(--font-body);
    font-size: 17px;
    transform: none;
  }
}

/* ═══════════════════════════════════════
   FOOTER — CENTRADO Y MAX-WIDTH (siempre)
═══════════════════════════════════════ */

.d-footer {
  padding-left: 0;
  padding-right: 0;
}

.d-footer-topline,
.d-footer-bottomline {
  width: min(1360px, calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}

.d-footer-body {
  width: min(1360px, calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.d-footer-bottom {
  width: min(1360px, calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}

/* Footer compact scale */
.d-footer-body {
  padding: 32px 26px;
}

.d-footer-brand img {
  width: 42px;
  height: auto;
}

.d-footer-brand .d-footer-tagline {
  font-size: clamp(14px, 1.2vw, 19px) !important;
  line-height: 1.35;
  letter-spacing: 1.4px;
  max-width: 260px;
  font-weight: 600;
}

.d-footer-heading {
  font-size: clamp(12px, 1vw, 15px) !important;
  margin-bottom: 2px;
}

.d-footer-link {
  font-size: clamp(12px, 1vw, 15px) !important;
}

.d-footer-col {
  gap: 6px;
}

.d-footer-cols-center {
  gap: clamp(40px, 10vw, 150px);
  transform: translateY(-18px);
}

.d-social-icon {
  width: 34px;
  height: 34px;
}

.d-footer-socials {
  gap: 8px;
}

.d-footer-legal {
  font-size: clamp(12px, 0.95vw, 15px) !important;
  line-height: 1.7;
  letter-spacing: 0.3px;
  max-width: 260px;
}

.d-footer-bottom-links {
  gap: clamp(16px, 2.5vw, 38px);
}

.d-footer-bottom-links a,
.d-footer-copy {
  font-size: clamp(11px, 0.9vw, 14px) !important;
}

.d-footer-arqons {
  height: 17px;
}

/* ==========================================================
   BOTONES UNIFICADOS
   Todos los botones del sitio comparten tipografía, tamaño y forma
   del botón de referencia (.btn.d-btn). El color de cada uno se respeta.
   ========================================================== */
.btn,
.d-btn,
.nm-btn,
.im-btn,
#cw-btn,
.cw-stats-btn,
.cw-formatos-btn,
.btn-apply,
.btn-orange,
.btn-dark,
#quiero-franquiciar button[type="submit"],
#quiero-franquiciar-form button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  font-family: 'Helvetica Neue Roman', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  width: auto !important;
  height: 36px !important;
  padding: 0 26px !important;
  border-radius: 999px !important;
}

@media (min-width: 940px) {

  .btn,
  .d-btn,
  .nm-btn,
  .im-btn,
  #cw-btn,
  .cw-stats-btn,
  .cw-formatos-btn,
  .btn-apply,
  .btn-orange,
  .btn-dark,
  #quiero-franquiciar button[type="submit"],
  #quiero-franquiciar-form button[type="submit"] {
    font-size: clamp(11.5px, 0.9vw, 18px) !important;
    height: clamp(34px, 2.1vw, 42px) !important;
    padding: 0 clamp(22px, 1.6vw, 32px) !important;
  }
}

/* Header fijo en todo el sitio */
body>header {
  position: sticky !important;
  top: 0;
  z-index: 200 !important;
}

/* Enlaces del footer sin contenido todavía: visibles pero desactivados */
.d-footer-bottom-links .d-footer-disabled {
  font-family: var(--font-body);
  font-size: 14px !important;
  color: rgb(255, 255, 255);
  cursor: default;
  pointer-events: none;
}

/* Noticias: texto y "Leer más" más pequeños, flecha en línea fina */
.d-card-titulo {
  font-size: clamp(17px, 1.35vw, 24px) !important;
  line-height: 1.3;
}

.d-leer-mas {
  font-size: 13px !important;
  letter-spacing: 0.08em;
}

.d-leer-mas-arrow {
  width: 18px;
  height: 18px;
  color: #EC690D;
  transition: transform 0.25s ease;
}

.d-leer-mas:hover .d-leer-mas-arrow {
  transform: translateX(4px);
}

/* "Aplicar" en el listado de vacantes: versión compacta del botón unificado */
.btn-apply,
.btn-apply:is(*) {
  font-size: 11px !important;
  height: 28px !important;
  padding: 0 16px !important;
}

@media (min-width: 940px) {
  .btn-apply {
    font-size: clamp(10.5px, 0.72vw, 13px) !important;
    height: clamp(26px, 1.7vw, 32px) !important;
    padding: 0 clamp(14px, 1.1vw, 20px) !important;
  }
}

/* Datos de la empresa y Libro de Reclamaciones en el footer */
.d-footer-company {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
  margin: 10px 0 0;
}

.d-footer-lr {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: -10px;
  font-family: var(--font-body);
  font-size: 13px;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  padding: 6px 10px;
  transition: border-color 0.2s, color 0.2s;
}

.d-footer-lr svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.d-footer-lr:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Libro de Reclamaciones oculto del footer por ahora (la página sigue disponible) */
.d-footer-lr {
  display: none !important;
}

#noticias {
  margin-top: 0 !important;
  border-top: 0 !important;
}

#noticias .d-noticias-inner {
  border-top: none !important;
  box-shadow: none !important;
}

/* =====================================================
   ELIMINAR LÍNEA HORIZONTAL ENTRE ESTADÍSTICAS Y NOTICIAS
   ===================================================== */

#stats-slider {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

#stats-slider-content {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

#noticias {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
}

#noticias .d-noticias-inner {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Evita cualquier línea generada por pseudoelementos */
#stats-slider::before,
#stats-slider::after,
#noticias::before,
#noticias::after,
#noticias .d-noticias-inner::before,
#noticias .d-noticias-inner::after {
  content: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html,
body {
  border: 0 !important;
}

main {
  border: 0 !important;
}

#stats-outer {
  border: 0 !important;
}

#stats-slider,
#noticias {
  position: relative;
  z-index: 1;
}

/* =========================================
   NOTICIAS - CAMBIO DE NOTICIA PRINCIPAL
   ========================================= */

#news-track {
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

#news-track.news-changing {
  opacity: 0;
  transform: translateY(8px);
}

/* Las noticias secundarias son clickeables */
#news-track .d-news-card {
  cursor: pointer;
}

/* La noticia principal también mantiene el cursor */
#news-track .d-news-card:first-child {
  cursor: default;
}