/*
 * Landing 2026: ancho de contenido del diseño.
 *
 * El Figma trabaja a 1440 con 67px de margen a cada lado, o sea 1306 de
 * contenido. El .container de Bootstrap se queda en 1256 a ese ancho, y eso
 * desplaza todo 25px respecto al diseño. Aquí se iguala, solo para los bloques
 * de la landing nueva (y para los tres reciclados cuando conviven con ella).
 */
@media (min-width: 1200px) {
  .hero > .hero__fondo > .container,
  .intro-content > .container,
  .intro-characteristics > .container,
  .plans-section > .container,
  .how-it-works > .container,
  .info-section > .container,
  .cta-section > .container,
  body:has(.hero.section) .valoraciones > .container,
  body:has(.hero.section) .faqs > .container,
  body:has(.hero.section) .colaboradores > .container {
    /* !important porque el tema fija .container a 1280 con !important. */
    width: calc(100% - 134px) !important;
    max-width: 1306px !important;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Los flotantes (el aviso «¿Hablamos?» abajo a la derecha, 94 + 40 en escritorio y
   53 + 11 en móvil, y el icono de cookies abajo a la izquierda) no deben tapar lo que
   se enfoca o a lo que se salta: el navegador deja ese margen al desplazar
   (accesibilidad, punto 4). */
html { scroll-padding-bottom: 150px; }

/* Tablas de datos de las páginas legales (accesibilidad, punto 19): leyenda arriba
   y rótulos de fila como encabezados. */
table.has-fixed-layout caption { caption-side: top; font-weight: 700; color: inherit; padding: 0 0 8px; text-align: left; }
table.has-fixed-layout th[scope="row"] { font-weight: 700; text-align: left; }

/* Anclas de las secciones (accesibilidad, puntos 1 y 2): al saltar a un ancla se
   deja sitio a la cabecera fija (40 + 73 + 16; 21 + 56 + 16 en móvil). El contorno
   del foco programático no se pinta: la sección entera no es un control. */
.bloque-ancla { scroll-margin-top: 130px; }
.bloque-ancla:focus { outline: none; }
@media (max-width: 991px) { .bloque-ancla { scroll-margin-top: 93px; } }
@media (max-width: 768px) { html { scroll-padding-bottom: 80px; } }

/* Móvil: el artboard de 375 lleva 16px de margen a cada lado (Bootstrap pone 12). */
@media (max-width: 991px) {
  .hero > .hero__fondo > .container,
  .intro-content > .container,
  .intro-characteristics > .container,
  .plans-section > .container,
  .how-it-works > .container,
  .info-section > .container,
  .testimonials-section > .container,
  .cta-section > .container,
  body:has(.hero.section) .faqs > .container,
  body:has(.hero.section) .colaboradores > .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/*
 * Estados de los botones, de las variantes de los componentes del Figma
 * (boton-primario 330:167, boton-primario-blanco 330:134, boton-secundario 330:148):
 *   Hover    verde #498508 -> #52940B, blanco #FFF -> #D9D9D9 (va en cada bloque)
 *   Pressed  el mismo color del hover con la capa al 60%
 *   Focus    anillo de 1px separado 3px del botón (caja de 168,97 x 43 sobre 160,97 x 35),
 *            verde en los botones verdes y de contorno, blanco en los blancos
 */
.site-header__telefono:active,
.hero__acciones .btn:active,
.plans-section__boton:active,
.plans-section__cta .btn:active,
.cta-section__boton:active,
.site-footer__boton:active { opacity: .6; }

.site-header__telefono:focus-visible,
.hero__acciones .btn-primary:focus-visible,
.plans-section .plans-section__boton:focus-visible,
.plans-section__cta .btn:focus-visible {
  outline: 1px solid var(--VerdeOscuro);
  outline-offset: 3px;
  box-shadow: none;
}

.hero__acciones .hero__btn-secundario:focus-visible,
.cta-section .cta-section__boton:focus-visible,
.site-footer .site-footer__boton:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 3px;
  box-shadow: none;
}

/*
 * Carruseles de móvil (ver assets/js/carrusel-2026.js). La barra "‹ 1 de N ›"
 * es el componente NavigationBar del Figma: botones de 44, hueco 28, contador
 * en Manrope 600 18,5/24,05 con el número actual en verde.
 */
.carrusel-nav { display: none; }

@media (max-width: 768px) {
  [data-carrusel] {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* La tira sigue hasta el borde de la pantalla (el frame del Figma mide 360
       sobre los 343 de contenido). */
    margin-right: -16px;
    padding-right: 16px;
  }

  [data-carrusel]::-webkit-scrollbar { display: none; }

  [data-carrusel] > * { scroll-snap-align: start; }

  .carrusel-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
  }

  .carrusel-nav__btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--VerdeOscuro);
    cursor: pointer;
  }

  /* Extremos: aria-disabled en vez de disabled para no perder el foco (accesibilidad). */
  .carrusel-nav__btn:disabled,
  .carrusel-nav__btn[aria-disabled="true"] { color: #959595; cursor: default; }

  .carrusel-nav__btn svg { display: block; width: 44px; height: 44px; }

  .carrusel-nav__contador {
    display: flex;
    gap: 8px;
    font-size: 18.5px;
    font-weight: 600;
    line-height: 24.05px !important;
    letter-spacing: -0.5px;
    color: #212121;
  }

  /* Accesibilidad (punto 3): verde excepcional para el contador, acordado en el
     Figma el 20/10 (artboards "UI": #3F7307 sobre #F3F4EE, 5,2:1). */
  .carrusel-nav__actual { color: #3F7307; }
}