@import url('https://fonts.googleapis.com/css2?family=Scoutie+Sans:ital,wght@0,200..800;1,200..800&display=swap');

body { font-family: "Scoutie Sans", sans-serif; }

/* VARIABLES */
:root {
    --main-color: #FF7A33;
    --main-color-light: #d00b24;
    --main-color-dark: #333;
}
 
/*HEADER CSS*/
img {transition: opacity ease 300ms;}
img:not([src]) {opacity: 0;}

.header-shell {
    background-color: #DED8D1;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.header-shell.header-floating {
    background-color: transparent;
}

.header-shell.header-floating.sticked {
    background-color: #DED8D1;
}

/* Sombra suave bajo el header, solo cuando se ha hecho scroll (.sticked,
   que anade el JS global independientemente de si la pagina es flotante
   o no). Arriba del todo, sin scroll, nunca hay sombra. */
.header-shell.sticked {
    box-shadow: 0 0 #0000, 0 0 #0000, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Color del texto del menu: declarado directamente en cada enlace/boton
   (.header-nav-item) en vez de depender de herencia desde .header-shell.
   Asi todos los elementos (con o sin submenu) transicionan exactamente
   igual, sin depender de como cada navegador propaga un color heredado
   que a su vez esta en transicion. */
.header-nav-item {
    color: #000000;
    transition: color 0.3s ease-in-out;
}
.header-shell.header-floating .header-nav-item {
    color: #ffffff;
}
.header-shell.header-floating.sticked .header-nav-item {
    color: #000000;
}

/* Icono hamburguesa: mismo patron blanco/negro que el resto del menu,
   PERO solo mientras se ve como las 3 lineas (menu cerrado). En cuanto se
   convierte en X (menu abierto) debe quedarse siempre negro, sin importar
   scroll ni si es inicio/contacto — de ahi el !important, que gana a las
   reglas de arriba porque nav:has(.navbar.open) es mas especifico en la
   practica pero conviene no depender de eso. */
.hamburger-line {
    background-color: #000000;
    transition: background-color 0.3s ease-in-out;
}
.header-shell.header-floating .hamburger-line {
    background-color: #ffffff;
}
.header-shell.header-floating.sticked .hamburger-line {
    background-color: #000000;
}
nav:has(.navbar.open) .hamburger-line {
    background-color: #000000 !important;
}

/* Logo subido (imagen real): la clase filter-white (ya definida mas abajo)
   lo fuerza a blanco por defecto. Al hacer scroll (o en paginas que no son
   inicio/contacto) se quita el filtro y se ve en su color original.
   La transicion va aqui (no en .filter-white, que es una utilidad global
   usada fuera del header) para que coincida exactamente con la duracion
   de .header-nav-item y no cambie de golpe mientras el texto va en fade. */
.header-shell .filter-white {
    transition: filter 0.3s ease-in-out;
}
.header-shell.header-floating.sticked .filter-white,
.header-shell:not(.header-floating) .filter-white {
    filter: none;
}

/* Por debajo de lg el menu se abre como panel a pantalla completa (hamburguesa),
   no como header flotante sobre el hero: siempre debe verse como el estado
   "asentado" (fondo DED8D1, texto/logo negros), sin importar si la pagina es
   inicio/contacto ni si se ha hecho scroll. Se usa !important porque hay que
   ganarle a las reglas de arriba (.header-floating, .sticked), pensadas para
   el header en linea de escritorio, no para este panel a pantalla completa.
   El icono hamburguesa NO entra aqui: vive en la barra superior (siempre
   visible), no dentro del panel desplegado, asi que sigue el patron normal
   de arriba (blanco en inicio/contacto, negro al hacer scroll). */
@media (max-width: 1023px) {
    .navbar-content {
        background-color: #DED8D1 !important;
    }
    .navbar-content .header-nav-item {
        color: #000000 !important;
    }
    .navbar-content .filter-white {
        filter: none !important;
    }
}

/* Padding del contenido del header. Ajustado segun Figma (nodo 159:89): la
   fila del menu (logo+apartados) mide igual en todos los breakpoints de
   escritorio, solo cambia el padding vertical alrededor. lg/xl mas generosos
   que antes para que coincida con el diseno — con mas espacio arriba que
   abajo, tal cual el diseño en la parte superior de la pagina. */
.header-content {
    padding-top: 1rem;
    padding-bottom: 1rem;
    transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
}
@media (min-width: 1024px) {
    .header-content { padding-top: 2rem; padding-bottom: 1.5rem; }
}
@media (min-width: 1280px) {
    .header-content { padding-top: 2.5rem; padding-bottom: 1.75rem; }
}

/* Al hacer scroll (.sticked) igualamos arriba y abajo usando el valor mas
   pequeño de los dos (el de abajo), asi el header ocupa menos alto mientras
   se navega, en vez de mantener el padding generoso pensado para el estado
   inicial arriba de la pagina. */
@media (min-width: 1024px) {
    .header-shell.sticked .header-content { padding-top: 1.5rem; padding-bottom: 1.5rem; }
}
@media (min-width: 1280px) {
    .header-shell.sticked .header-content { padding-top: 1.75rem; padding-bottom: 1.75rem; }
}

.dropdown { 
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.35s ease-in-out, opacity 0.25s ease;
    width: max-content;
}
.dropdown-inner {
    overflow: hidden;
    min-height: 0;
}
.dropdown-toggle.open ~ .dropdown { 
    grid-template-rows: 1fr;
    opacity: 1;
}

.dropdown-toggle .icon-tabler-chevron-down { transform-origin: center; transition: transform 0.3s ease; }
.dropdown-toggle.open .icon-tabler-chevron-down { transform: rotate(180deg); }

/* Borde del apartado activo: border-b-2 + pb-1 SIEMPRE reservados (ver
   header), alternando solo el color (border-current / border-transparent)
   segun c-class — nunca se toca el grosor ni el padding, asi la caja del
   boton no cambia de tamano nunca (eso evita el salto visual al pasar de
   inactivo a activo o al abrir/cerrar el desplegable).
   Cuando el desplegable esta abierto NO hace falta ocultar este borde a
   mano: el panel (.dropdown) esta posicionado en lg:absolute justo en el
   mismo punto (lg:top-full = borde inferior de .relative, el mismo sitio
   donde cae el border-b-2 del boton) y es mas ancho (lg:w-36) que el propio
   boton, asi que al pintarse por delante (los elementos posicionados se
   pintan siempre despues que los elementos en flujo normal) su propio
   border-t-2 negro tapa por completo el borde activo que hay debajo — sin
   necesidad de ningun toggle de color por JS. */

/* Hamburger base */
.hamburger { width: 44px; height: 44px; display: flex; flex-direction: column; justify-content: center; }

nav:has(.navbar.open) .hamburger {
    position: fixed;
    top: 0.75rem;
    right: calc(1.5rem + var(--scrollbar-width, 0px));
    z-index: 50;
}

/* Animación: el selector apunta desde nav.open hacia el hamburger exterior */
nav .hamburger .hamburger-line:nth-child(1),
nav .hamburger .hamburger-line:nth-child(2),
nav .hamburger .hamburger-line:nth-child(3) { transition: all 0.3s ease; }

nav:has(.navbar.open) .hamburger .hamburger-line:nth-child(1) { transform: translateY(10px) rotate(45deg); }
nav:has(.navbar.open) .hamburger .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
nav:has(.navbar.open) .hamburger .hamburger-line:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* Evitar que la página se desplace al abrir el menú */
@media (max-width: 1023px) {
    body.navbar-open { height: 100vh; overflow: hidden; padding-right: var(--scrollbar-width, 0px); }
    .navbar { pointer-events: none; }
    .navbar.open { pointer-events: auto; }
    .navbar .navbar-content { transform: translateY(-100%); }
    .navbar.open .navbar-content { transform: translateY(0); }
    .navbar .navbar-overlay { opacity: 0; }
    .navbar.open .navbar-overlay { opacity: 1; }
}

/* SWIPER BASE CSS */
.c-swiper { position: relative; }

/* Dots */
.swiper-pagination { display: flex; justify-content: center; align-items: center; width: 100%; position: relative; gap: 6px; }
.swiper-pagination.swiper-pagination-bullets,
.swiper-pagination.swiper-pagination-fraction { margin-top: 16px; }
.c-swiper-dot { width: 12px; height: 12px; border-radius: 100%; background-color: #e4e4e4; border: 1px solid white; cursor: pointer; transition: background-color 0.3s ease, transform 0.3s ease; display: inline-block; }
.c-swiper-dot-active { background-color: var(--main-color); transform: scale(1.3); }
.swiper-pagination-bullets { width: auto !important; flex: none !important; }

/* Paginación fraction */
.c-swiper-fraction-current { color: var(--main-color); font-weight: 600; }

/* Progressbar */
.swiper-pagination-progressbar { background: #e4e4e4; height: 4px; border-radius: 2px; position: relative; width: 100%; }
.swiper-pagination.swiper-pagination-progressbar { display: block; position: relative; gap: 0; }
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill,
.swiper-pagination-progressbar .c-swiper-progressbar-fill { background: var(--main-color); border-radius: 2px; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; transform-origin: left center; }

/* Flechas prev/next */
.c-swiper-prev,
.c-swiper-next { display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.c-swiper-prev:hover,
.c-swiper-next:hover { opacity: 0.85; }
.c-swiper-btn-disabled { opacity: 0.35; pointer-events: none; }

/* Scrollbar */
.swiper-scrollbar { background: #e4e4e4; border-radius: 4px; height: 4px; position: relative !important; left: 0 !important; right: 0 !important; width: 100% !important; }
.swiper-scrollbar-horizontal { top: auto !important; bottom: auto !important; left: 0 !important; right: 0 !important; position: relative !important; align-self: center; }
.swiper-scrollbar-drag { background: var(--main-color); border-radius: 4px; height: 100%; cursor: grab; }
.swiper-scrollbar-drag:active { cursor: grabbing; }

/* PAGINACIÓN */
.c-pagination-controls { gap: 0; }
.c-pag-nums { display: flex; align-items: center; gap: 2px; }
.c-pag-nav-prev { margin-right: 12px; }
.c-pag-nav-next { margin-left: 12px; }
.c-pag-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; cursor: pointer; font-size: 14px; color: #374151; transition: all 0.15s ease; }
.c-pag-btn:hover:not(.c-pag-disabled):not(.c-pag-active) { background: #f3f4f6; border-color: #9ca3af; }
.c-pag-btn.c-pag-active { background: var(--main-color, #3b82f6); border-color: var(--main-color, #3b82f6); color: #fff; font-weight: 700; }
.c-pag-btn.c-pag-disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.c-pag-dots { padding: 0 6px; color: #9ca3af; font-size: 14px; line-height: 36px; }
.c-pag-texto { padding: 0 14px; font-size: 13px; font-weight: 600; } 

/* BASE CLASES PROPIAS */
:focus,
input:focus,
button:hover,
button:focus { outline: none; }
.buscador_oculto{margin-top:-60px;opacity:0;}

.shadow-custom { box-shadow: 0 0 20px 2px rgb(0 0 0 / 10%); }
.text-shadow { text-shadow: 1px 1px 5px #00000085; }

.transition3s { transition: all 0.3s ease-in-out; }
.filter-white { filter: grayscale(100) brightness(0) invert(1); }
.fill-currentColor { fill: currentColor; }

.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-relaxed { line-height: 1.625; }

.p-1\/20::after { content: ""; display: block; padding-top: 200%; }
.p-1\/15::after { content: ""; display: block; padding-top: 150%; }
.p-1\/12::after { content: ""; display: block; padding-top: 120%; }
.p-1\/10::after { content: ""; display: block; padding-top: 100%; }
.p-1\/9::after { content: ""; display: block; padding-top: 90%; }
.p-1\/8::after { content: ""; display: block; padding-top: 80%; }
.p-1\/7::after { content: ""; display: block; padding-top: 70%; }
.p-1\/6::after { content: ""; display: block; padding-top: 60%; }
.p-1\/5::after { content: ""; display: block; padding-top: 50%; }
.p-1\/4::after { content: ""; display: block; padding-top: 40%; }
.p-1\/3::after { content: ""; display: block; padding-top: 30%; }
.p-1\/2::after { content: ""; display: block; padding-top: 20%; }
.p-1\/1::after { content: ""; display: block; padding-top: 10%; }

.p-noticias::after { content: ""; display: block; padding-top: 60%; }
.p-principal::after { content: ""; display: block; padding-top: 69.2%; }

@media (min-width: 1023px) {
    .p-noticias::after { content: ""; display: block; padding-top: 40%; }
    .p-principal::after { content: ""; display: block; padding-top: 69.5%; }
}

@media (min-width: 	1280px) {
    .p-principal::after { content: ""; display: block; padding-top: 69.7%; }
}

.-z-1 { z-index: -1; }

.social-media li { padding: 0px; }
.social-media li a { margin: 0px; display: flex; width: 100%; height: 100%; }

@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }

  button:disabled,
  [role="button"]:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }
}

body { opacity: 1; font-family: 'Scoutie Sans', sans-serif; }

/* Botones "Contacto" del header y footer: texto siempre blanco (default y hover) */
.cta-contacto,
.cta-contacto:link,
.cta-contacto:visited,
.cta-contacto:hover { color: #ffffff; }

/* WYSIWYG: espaciado entre parrafos, centralizado aqui para todos los
   modulos (antes duplicado o ausente por modulo).
   El editor solo crea un <p> nuevo con cada Enter; una linea en blanco real
   ("punto y aparte") se representa como un <p></p> VACIO de mas entre dos
   parrafos con contenido. Por eso el hueco no puede ir en TODOS los <p>
   (eso separaria tambien un simple salto de linea sin blanco de por medio):
   solo se le da margen al parrafo que va seguido de ese vacio, y nunca si
   ese vacio es el ultimo elemento (evita hueco sobrante al final del texto).
   El parrafo vacio en si no ocupa espacio (display:none). */
.wysiwyg p {
    margin: 0;
}
.wysiwyg p:empty {
    display: none;
}
.wysiwyg p:has(+ p:empty:not(:last-child)),
.wysiwyg p:has(+ ul),
.wysiwyg p:has(+ ol) {
    margin-bottom: 1rem;
}
.wysiwyg ul,
.wysiwyg ol {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}
.wysiwyg ul:last-child,
.wysiwyg ol:last-child {
    margin-bottom: 0;
}
.wysiwyg ul {
    list-style: disc;
}
.wysiwyg ol {
    list-style: decimal;
}