/* ==========================================================================
   elpilar-2026.css — actualización visual de elpilargruposcout.com
   Se carga desde: Estilo «at_nine_flat - Default» > campo «Customize CSS» = elpilar-2026.css
   Ruta en el servidor: templates/at_nine_flat/css/customize/elpilar-2026.css
   Las fuentes van en: templates/at_nine_flat/css/fonts/ (carpeta que ya existe)
   Marcha atrás: vaciar «Customize CSS» (y devolver «Width» a 960px).

   ESTADO: selectores verificados en la web pública el 5-10-2026 (fase 0), portada,
   Contacta, Circulares, Calendario, un artículo y móvil a 390 px. Probado solo
   inyectándolo en el navegador; falta probarlo cargado desde la plantilla.
   ========================================================================== */

/* ---------- Fuente propia (propuesta 1). Rutas relativas a css/customize/ → css/fonts/ ---------- */
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-400-normal.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-400-italic.woff") format("woff");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-600-normal.woff") format("woff");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-700-normal.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --verde: #21A75A;
  --verde-oscuro: #167A41;
  --verde-noche: #0F3D24;
  --verde-claro: #E8F5EC;
  --amarillo: #F9D915;
  --crema: #F6F7F0;
  --texto: #2B2B2B;
  --texto-2: #5F6368;
  --borde: #E3E5DC;
  --radio: 8px;
  --radio-l: 12px;
  --sombra: 0 2px 8px rgba(0, 0, 0, .08);
  --sombra-hover: 0 6px 18px rgba(0, 0, 0, .12);
  --fuente-texto: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-titulos: "Swiss721BT-BlackCondensed", "Arial Narrow", sans-serif;
}

/* =========================== FASE 1 (activa) ============================ */

/* Propuesta 1 — texto de lectura.
   «html body» porque la plantilla escribe body{font-family:Trebuchet} en un <style> en línea
   que va DESPUÉS de este archivo (campo body_font del estilo). */
html body {
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto);
}
/* Solo el contenido: el menú, el pie y el calendario tienen sus propios tamaños */
#avatar-main-content p, #avatar-main-content li, #avatar-main-content dd,
.ch-info-content p {
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 1.6;
}
/* Muchos artículos traen el justificado escrito en línea */
p[style*="justify"], div[style*="justify"] { text-align: left !important; }

/* Propuesta 2 — escala de títulos (se mantiene la condensada).
   Los títulos de módulo (.avatar-module-heading) llevan el tamaño en un <span> interior
   y la plantilla los fija ella misma: aquí solo se tocan los títulos de contenido. */
h1, h2, h3 { font-family: var(--fuente-titulos); line-height: 1.15; }
#avatar-main-content h1, .page-header h1 { font-size: 36px; }
#avatar-main-content h2 { font-size: 28px; }
#avatar-main-content h3 { font-size: 22px; }
h4 { font-family: var(--fuente-texto); font-weight: 700; font-size: 18px; line-height: 1.3; }
@media (max-width: 767px) {
  #avatar-main-content h1, .page-header h1 { font-size: 28px; }
  #avatar-main-content h2 { font-size: 24px; }
  #avatar-main-content h3 { font-size: 20px; }
}

/* Propuesta 4 — enlaces del contenido en verde oscuro (el menú y el pie conservan los suyos) */
#avatar-main-content a:not(.btn),
.ch-info-content a { color: var(--verde-oscuro); }
#avatar-main-content a:not(.btn):hover,
.ch-info-content a:hover { color: var(--verde-noche); }

/* Propuesta 5 — botones.
   «Descarga» (Phoca) = a.btn.btn-success dentro de .pd-button-download.
   «Leer más» (Showcase «Últimos artículos») = a.at_readmore con dos <div>: .at_readmore_text
   (caja con borde, 11 px) y .at_readmore_icon («›» sobre fondo gris #393939). Se deja como
   enlace de texto verde con su flecha. */
.btn, button, input[type="submit"] {
  font-family: var(--fuente-texto);
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--radio);
}
.btn-primary, .btn-success {
  background: var(--verde-oscuro) !important;
  border-color: var(--verde-oscuro) !important;
  color: #fff !important;
  background-image: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.btn-primary:hover, .btn-success:hover,
.btn-primary:focus, .btn-success:focus { background: var(--verde-noche) !important; }
.pd-button-download .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px;
}
a.at_readmore {
  font-family: var(--fuente-texto);
  font-weight: 600;
  font-size: 15px;
  color: var(--verde-oscuro) !important;
  display: inline-flex; align-items: center;
  min-height: 44px;
}
a.at_readmore:hover { color: var(--verde-noche) !important; }
a.at_readmore .at_readmore_text,
a.at_readmore .at_readmore_icon {
  background: none !important; border: 0 !important; padding: 0 !important;
  width: auto !important; height: auto !important;
  color: inherit !important; font-size: 15px !important; line-height: inherit !important;
}
/* recent-work.css le pone margin-left:-4px (pensado para el icono flotante): de ahí el !important */
a.at_readmore .at_readmore_icon {
  margin-left: 6px !important; font-size: 18px !important; line-height: 1 !important;
  position: static !important; float: none !important; margin-top: 0 !important;
}

/* Propuesta 3 — el ancho se cambia en el campo «Width»; esto solo evita desbordes */
#avatar-main-content img { max-width: 100%; height: auto; }
/* Entre 1025 y 1240 px la plantilla ocupa todo el ancho y el contenido queda pegado al borde.
   Por JS la clase cambia a «block-default-width-tmp», de ahí el [class*=…]. Ese JS solo actúa al
   cargar: max-width evita la barra lateral si se estrecha la ventana sin recargar.
   */
@media (min-width: 1025px) and (max-width: 1240px) {
  html body .avatar-wrapper[class*="block-default-width"] {
    box-sizing: border-box !important; padding-left: 16px !important; padding-right: 16px !important;
    max-width: 100% !important;
  }
}

/* Propuesta 6 — separadores sin rayado y raya amarilla bajo los títulos.
   El rayado es un border-image (border-separate.png, 11 px) de .avatar-module-bottom-border
   («Últimos artículos» y «Nuestros pilares»). */
.avatar-module-bottom-border {
  border-image: none !important;
  -webkit-border-image: none !important;
  border-width: 0 !important;
  padding-bottom: 48px;
}
.avatar-module-bottom-border > .avatar-module-heading::after,
.page-header h1::after {
  content: ""; display: block; width: 48px; height: 4px;
  background: var(--amarillo); margin-top: 10px; border-radius: 2px;
}
/* Título de página: 30 px verde con borde inferior de 2 px → sin borde, con la raya */
.page-header h1 { border-bottom: 0 !important; padding-bottom: 0 !important; }

/* =============================== FASE 2 ================================== */
/* Migas de pan («Inicio › Circulares › Ronda…») como píldora blanca. APROBADO por Miguel
   (5-10-2026). Antes: mayúsculas, separador «/» y margin-top:-20px de la plantilla.
   El margen superior evita el sello «yes!», que cuelga 43 px bajo la franja. */
#avatar-pos-breadcrumbs ul.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; width: fit-content; max-width: 100%;
  background: #fff; border: 1px solid var(--borde); border-radius: 999px;
  padding: 6px 16px; margin: 24px 0; box-shadow: var(--sombra); font-size: 14px; line-height: 1.4;
  box-sizing: border-box;
}
#avatar-pos-breadcrumbs ul.breadcrumb li { display: inline-flex; align-items: center; }
#avatar-pos-breadcrumbs ul.breadcrumb a {
  text-transform: none; font-size: 14px; font-weight: 600; color: var(--verde-oscuro);
}
#avatar-pos-breadcrumbs ul.breadcrumb a:hover { color: var(--verde-noche); text-decoration: underline; }
#avatar-pos-breadcrumbs ul.breadcrumb .divider { font-size: 0; padding: 0 8px; color: transparent; }
#avatar-pos-breadcrumbs ul.breadcrumb .divider::before { content: "\203A"; font-size: 16px; color: var(--texto-2); }
#avatar-pos-breadcrumbs ul.breadcrumb li:last-child span { text-transform: none; font-size: 14px; color: var(--texto-2); }
@media (max-width: 767px) {
  #avatar-pos-breadcrumbs ul.breadcrumb { margin: 40px 16px 24px; max-width: calc(100% - 32px); }
}

/* Propuesta 8 — franja de páginas interiores (módulo 89, sufijo avatar-separate-module).
   Decisión de Miguel (5-10-2026): NO verde liso; foto de campamento de fondo y el sello
   «yes! we are» SE QUEDA, con la gente a un lado del sello (no debajo).
   ELEGIDA la opción B: assets/franja/franja-juego.jpg (juego en la pradera), center 75%, que se
   sube como css/customize/franja-2026.jpg. La A (franja-tienda.jpg, center 70%) se guarda para
   otras franjas: la misma franja sale en TODAS las páginas interiores (un solo módulo, el 89);
   para poner fotos distintas por sección habría que duplicar el módulo 89 por sección (panel).
   La plantilla pone el morado y background-position:-130px 0 con !important en <style> en línea
   posteriores: por eso #avatar-tool-block y !important. En escritorio la franja crece de 100 a
   220 px para que se vea la foto; en móvil se queda en 100. */
/* v6: recorte nuevo a todo el ancho y hasta la hierba (pradera-2026.jpg, 2560×750): el sello cae
   sobre la pradera y la gente queda encima. La altura crece con la pantalla (17 % del ancho, entre
   220 y 360 px) para que en pantallas anchas no se vea solo una tira ampliada y pixelada. */
#avatar-tool-block .avatar-separate-module {
  background: #1d3b25 url("pradera-2026.jpg") center 60% / cover no-repeat !important;
}
@media (min-width: 768px) {
  #avatar-tool-block .avatar-separate-module { min-height: clamp(220px, 17vw, 360px) !important; }
}


/* Propuesta 17 — cabecera fija (logo 7424 + menú). Petición de Miguel (5-10-2026): más moderna
   y el logo mejor integrado. APROBADOS por Miguel: píldoras, desplegable v2 y móvil v2.
   Estructura: #avatar-header-inside-block > .avatar-wrapper > #avatar-pos-top-left (logo = fondo de
   un <a>), #avatar-pos-top-middle (.avatar-nav-responsive > .menu-pull + ul.avatar-main-menu; en
   móvil cada li.parent lleva un span.pull para abrir su submenú), #avatar-pos-top-right (iconos
   sociales 20×20 con imagen de 10×10). Abrir/cerrar en móvil = jQuery slideToggle, que deja
   style="display: block" en el <ul>: el estado «abierto» se detecta con :has(…[style*="block"]).
   La plantilla escribe .at-main-menu *{font-family:Trebuchet} en línea → html body.
   ACTIVADA el 5-10-2026 (con el visto bueno de Miguel a desplegable v2 y móvil v2). */
@keyframes epDrop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  /* Iconos sociales redondos (cabecera de escritorio y pie) */
html body .at-social-item {
  width: 32px !important; height: 32px !important; border-radius: 50%; margin: 0 3px !important;
  display: inline-flex !important; align-items: center; justify-content: center; float: none !important;
  background: var(--verde-oscuro) !important; transition: transform .2s, background .2s;
}
html body .at-social-item:hover { transform: translateY(-2px); background: var(--verde-noche) !important; }
html body .at-social-item a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
html body .at-social-item a > div {
  width: 14px !important; height: 14px !important;
  background-size: contain !important; background-repeat: no-repeat; background-position: center;
}
/* v6: el contenedor central de la cabecera trae fondo crema y sombra blanca de la plantilla: se veía
   como un rectángulo distinto dentro de la barra blanca (escritorio) y la cabecera crema sobre el menú
   blanco (móvil). Se quita en todos los tamaños. */
html body #avatar-header-inside-block > .avatar-wrapper { background: transparent !important; box-shadow: none !important; }
/* Redes sin uso (decisión de Miguel, 5-10-2026): se quedan Instagram, YouTube y Telegram.
   Facebook, Twitter/X y Flickr se OCULTAN, no se borran: sus enlaces siguen en los módulos
   167 (cabecera) y 168 (pie), AT Social Links, que no tienen interruptor por red.
   Para recuperar una, quitar su línea. */
html body .at-social-item:has(a[href*="facebook.com"]),
html body .at-social-item:has(a[href*="twitter.com"]),
html body .at-social-item:has(a[href*="x.com/"]),
html body .at-social-item:has(a[href*="flickr.com"]) { display: none !important; }

@media (min-width: 1025px) {
  html body #avatar-header-inside-block {
    position: fixed; left: 0; right: 0; top: 0; height: 80px !important;
    background: rgba(255, 255, 255, .97); box-shadow: 0 1px 0 var(--borde), 0 6px 18px rgba(0, 0, 0, .06);
  }
  html body #avatar-header-inside-block .avatar-wrapper { height: 80px !important; }
  /* v6: la plantilla da al contenedor central fondo crema y una sombra blanca: se veía como un
     rectángulo distinto dentro de la barra blanca. Y sus columnas medían 106 px de alto. */
  html body #avatar-pos-top-left, html body #avatar-pos-top-left .avatar-module,
  html body #avatar-pos-top-left .avatar-module-content, html body #avatar-pos-top-middle,
  html body #avatar-pos-top-middle .avatar-module, html body #avatar-pos-top-middle .avatar-module-content { height: 80px !important; }
  #avatar-pos-top-left .avatar-logo a {
    height: 80px !important; background-size: auto 84% !important; background-position: left center !important;
  }
  html body .avatar-main-menu { height: 80px !important; }
  html body .avatar-main-menu > li { margin-right: 6px; padding: 34px 0 31px !important; }
  html body .avatar-main-menu > li > a {
    display: inline-block; padding: 10px 14px !important; margin-top: -10px; border-radius: 999px;
    font-size: 16px; letter-spacing: .5px; color: #1B1B1B; transition: background .2s, color .2s;
  }
  html body .avatar-main-menu > li > a:hover,
  html body .avatar-main-menu > li:hover > a { background: var(--verde-claro); color: var(--verde-oscuro); }
  html body .avatar-main-menu > li.active > a { background: var(--verde-oscuro); color: #fff; }
  html body .avatar-main-menu-slider { display: none !important; }
  html body #avatar-pos-top-right { height: 80px; display: flex; align-items: center; justify-content: flex-end; }
  html body #avatar-pos-top-right .avatar-module { margin: 0 !important; padding: 0 !important; border-left: 0 !important; }
  #avatar-tool-block .avatar-separate-module { margin-top: 80px !important; }
  /* Portada: el carrusel empezaba en 0 y la cabecera (ya opaca) le tapaba 80 px de foto */
  #avatar-tool-block .avatar-caption { margin-top: 80px !important; }

  /* Desplegable v2: tarjeta con piquito, raya verde-amarilla arriba, punto que se vuelve amarillo */
  html body .avatar-main-menu > li > ul {
    /* v6: top 74px (la plantilla lo ponía a 103 px y quedaba un hueco de ~28 px entre la pestaña y
       la tarjeta: al bajar el ratón se perdía el :hover y el desplegable se cerraba) */
    top: 74px !important; min-width: 250px; padding: 10px !important; margin-top: 0 !important; border: 0 !important;
    border-radius: 16px; background: #fff; overflow: visible; animation: epDrop .18s ease-out;
    box-shadow: 0 18px 40px rgba(15, 61, 36, .18), 0 2px 6px rgba(0, 0, 0, .06);
  }
  html body .avatar-main-menu > li > ul::before {
    content: ""; position: absolute; top: -6px; left: 28px; width: 14px; height: 14px; background: #fff;
    transform: rotate(45deg); border-radius: 3px; box-shadow: -2px -2px 4px rgba(0, 0, 0, .04);
  }
  html body .avatar-main-menu > li > ul::after {
    content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 4px; border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--verde-oscuro) 0 60%, var(--amarillo) 60% 100%);
  }
  html body .avatar-main-menu li ul li { border: 0 !important; padding: 0 !important; background: transparent !important; width: auto !important; }
  html body .avatar-main-menu li ul li a {
    position: relative; display: flex !important; align-items: center; gap: 10px;
    padding: 11px 14px !important; border-radius: 10px; font-weight: 600;
    font-family: var(--fuente-texto) !important; font-size: 15px !important; line-height: 1.3 !important;
    color: var(--texto) !important; transition: background .15s, color .15s, padding .15s;
  }
  html body .avatar-main-menu li ul li a::before {
    content: ""; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: #C9D6CC;
    transition: background .15s, transform .15s;
  }
  html body .avatar-main-menu li ul li:hover > a,
  html body .avatar-main-menu li ul li a:hover {
    background: var(--verde-claro) !important; color: var(--verde-oscuro) !important; padding-left: 18px !important;
  }
  html body .avatar-main-menu li ul li:hover > a::before { background: var(--amarillo); transform: scale(1.5); }
  html body .avatar-main-menu li ul li.active > a { color: var(--verde-oscuro) !important; }
  html body .avatar-main-menu li ul li.active > a::before { background: var(--verde-oscuro); }
  html body .avatar-main-menu li ul li.parent > a::after { content: "\203A"; margin-left: auto; color: var(--texto-2); }
  html body .avatar-main-menu li ul ul {
    min-width: 230px; margin-left: 0 !important; padding: 8px !important; border: 0 !important;
    border-radius: 14px; background: #fff; animation: epDrop .18s ease-out;
    box-shadow: 0 18px 40px rgba(15, 61, 36, .18);
  }
}

@media (max-width: 1024px) {
  /* Móvil v2: una fila de 64 px; botón redondeado que se convierte en ✕; menú a pantalla completa
  con flecha circular en cada sección con submenú y las redes sociales abajo. */
  html body #avatar-header-inside-block {
    position: sticky; top: 0; z-index: 999; height: auto !important;
    background: rgba(255, 255, 255, .97); box-shadow: 0 1px 0 var(--borde), 0 6px 18px rgba(0, 0, 0, .06);
  }
  html body #avatar-header-inside-block > .avatar-wrapper {
    display: flex !important; align-items: center; justify-content: space-between;
    height: 64px !important; padding: 0 8px 0 12px !important; box-sizing: border-box; position: relative;
  }
  html body #avatar-header-inside-block .clearbreak { display: none; }
  html body #avatar-pos-top-left { width: auto !important; height: 64px !important; flex: 0 0 auto; }
  html body #avatar-pos-top-left .avatar-module,
  html body #avatar-pos-top-left .avatar-module-content,
  html body #avatar-pos-top-left .custom { height: 64px; }
  html body #avatar-pos-top-left a {
    position: static !important; display: block; width: 150px !important; height: 56px !important;
    margin-top: 4px; background-position: left center !important;
  }
  html body #avatar-pos-top-middle { width: auto !important; flex: 0 0 auto; order: 2; }
  html body #avatar-pos-top-middle .avatar-nav-responsive { position: static !important; height: auto; }
  html body #avatar-pos-top-right { display: none !important; }

  html body .avatar-nav-responsive .menu-pull {
    position: relative; margin: 0 !important; width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
    background: var(--verde-claro) !important; background-image: linear-gradient(var(--verde-oscuro), var(--verde-oscuro)) !important;
    background-size: 20px 2.5px !important; background-position: center !important; background-repeat: no-repeat !important;
    transition: background-size .2s, background-color .2s;
  }
  html body .avatar-nav-responsive .menu-pull::before,
  html body .avatar-nav-responsive .menu-pull::after {
    content: ""; position: absolute; left: 12px; width: 20px; height: 2.5px; border-radius: 2px;
    background: var(--verde-oscuro); transition: transform .25s, top .25s;
  }
  html body .avatar-nav-responsive .menu-pull::before { top: 15px; }
  html body .avatar-nav-responsive .menu-pull::after { top: 26.5px; }
  html body .avatar-nav-responsive:has(> .avatar-main-menu[style*="block"]) .menu-pull {
    background-color: var(--verde-oscuro) !important; background-size: 0 0 !important;
  }
  html body .avatar-nav-responsive:has(> .avatar-main-menu[style*="block"]) .menu-pull::before { top: 20.75px; transform: rotate(45deg); background: #fff; }
  html body .avatar-nav-responsive:has(> .avatar-main-menu[style*="block"]) .menu-pull::after { top: 20.75px; transform: rotate(-45deg); background: #fff; }

  html body .avatar-nav-responsive > .avatar-main-menu {
    position: fixed !important; top: 64px !important; bottom: 0; left: 0; right: 0;
    width: auto !important; height: auto !important; max-height: none !important; margin: 0 !important;
    float: none !important; overflow: auto !important; background: #fff !important;
    box-shadow: none !important; padding: 8px 20px 110px !important;
  }
  html body .avatar-nav-responsive > .avatar-main-menu > li {
    position: relative; display: block; float: none !important; width: auto !important;
    margin: 0 !important; padding: 0 !important; border-bottom: 1px solid var(--borde);
  }
  /* v6: body.avatar-responsive en el selector para ganar a la regla de 44 px de la fase 1 */
  html body.avatar-responsive .avatar-nav-responsive > .avatar-main-menu > li > a {
    display: flex !important; align-items: center; min-height: 56px; margin: 0 !important;
    padding: 0 48px 0 0 !important; font-size: 20px !important; letter-spacing: .5px; color: #1B1B1B;
  }
  html body .avatar-nav-responsive > .avatar-main-menu > li.active > a { color: var(--verde-oscuro); }
  html body .avatar-nav-responsive > .avatar-main-menu > li.active > a::before {
    content: ""; width: 6px; height: 22px; border-radius: 3px; background: var(--amarillo); margin-right: 10px;
  }
  html body .avatar-nav-responsive > .avatar-main-menu > li > .pull {
    /* v6: centrada en su fila de 56 px (antes top 6 px en filas de 44: invadía la siguiente) */
    left: auto !important; right: 0 !important; top: 6px !important; bottom: auto !important; margin: 0 !important;
    width: 44px !important; height: 44px !important; border-radius: 50%;
    background: var(--crema) !important; background-image: none !important;
    display: flex !important; align-items: center; justify-content: center; transition: transform .25s, background .2s;
  }
  html body .avatar-nav-responsive > .avatar-main-menu > li > .pull::before {
    content: ""; width: 9px; height: 9px; transform: translateY(-2px) rotate(45deg);
    border-right: 2.5px solid var(--verde-oscuro); border-bottom: 2.5px solid var(--verde-oscuro);
  }
  html body .avatar-nav-responsive > .avatar-main-menu > li:has(> ul[style*="block"]) > .pull {
    transform: rotate(180deg); background: var(--verde-claro) !important;
  }
  html body .avatar-nav-responsive > .avatar-main-menu li ul {
    position: static !important; width: auto !important; margin: 0 0 0 4px !important;
    padding: 0 0 12px 0 !important; border: 0 !important; border-left: 2px solid var(--verde-claro) !important;
    background: transparent !important; box-shadow: none !important;
  }
  html body .avatar-nav-responsive > .avatar-main-menu li ul li {
    list-style: none !important; float: none !important; width: auto !important;
    border: 0 !important; padding: 0 !important; background: transparent !important;
  }
  html body .avatar-nav-responsive > .avatar-main-menu li ul li::before,
  html body .avatar-nav-responsive > .avatar-main-menu li ul li::marker { content: none !important; display: none !important; }
  html body .avatar-nav-responsive > .avatar-main-menu li ul li a {
    display: block !important; padding: 10px 12px !important; border-radius: 8px; text-transform: none !important;
    font-family: var(--fuente-texto) !important; font-size: 17px !important; line-height: 1.3 !important; color: var(--texto) !important;
  }
  html body .avatar-nav-responsive > .avatar-main-menu li ul li a:active { background: var(--verde-claro); }
  html body .avatar-nav-responsive > .avatar-main-menu li ul li .pull { display: none !important; }

  /* Con el menú abierto: la página no se desplaza y las redes sociales aparecen abajo */
  html body:has(.avatar-nav-responsive > .avatar-main-menu[style*="block"]) { overflow: hidden; }
  html body:has(.avatar-nav-responsive > .avatar-main-menu[style*="block"]) #avatar-pos-top-right {
    display: flex !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001;
    width: auto !important; height: auto !important; justify-content: center; align-items: center;
    padding: 16px 0 calc(16px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--borde);
  }
  html body #avatar-pos-top-right .at-social-links { display: block; width: auto !important; height: auto !important; }
  html body #avatar-pos-top-right .at-social-list { display: flex; gap: 10px; margin: 0; padding: 0; }
  html body #avatar-pos-top-right .at-social-item { width: 44px !important; height: 44px !important; margin: 0 !important; }
  html body #avatar-pos-top-right .at-social-item a > div { width: 18px !important; height: 18px !important; }
}

/* Propuesta 9 — tarjetas de «Últimos artículos» (módulo 166, diseño recent-work).
   La foto es un <div class="avatar-item-img"> con background-image (150 px de alto), no un <img>.
.at-nine-flat-recent-works .at-intro-item {
  background: #fff; border-radius: var(--radio-l); overflow: hidden; box-shadow: var(--sombra);
  height: auto !important; padding-bottom: 12px;
  transition: box-shadow .2s;
}
.at-nine-flat-recent-works .at-intro-item:hover { box-shadow: var(--sombra-hover); }
.at-nine-flat-recent-works .avatar-item-img { height: auto !important; aspect-ratio: 16 / 9; background-size: cover; }
.at-nine-flat-recent-works .at-item-title,
.at-nine-flat-recent-works .ch-info,
.at-nine-flat-recent-works a.at_readmore { padding-left: 16px; padding-right: 16px; }
*/

/* Propuesta 10 — accesos de portada (módulo 157, diseño devices). APROBADO por Miguel (5-10-2026).
   Icono = .avatar-item-img de 85 px, radio 25 %, borde amarillo de 3 px, fondo verde → círculo. */
.at-nine-flat-devices .avatar-item-img {
  border: 0 !important; border-radius: 50% !important; background-color: var(--verde) !important;
  box-shadow: 0 6px 16px rgba(15, 61, 36, .25);
}

/* Propuesta 18 — fichas de las personas (Contacta y los cuatro Kraaletes). Petición de Miguel
   (5-10-2026): que nos pongan cara, lean la descripción y puedan escribirnos.
   Módulos AT Nine Flat Showcase con diseño team-1 (.at-nine-flat-team-1): cada ficha es un artículo
   (imagen de introducción = foto, título = nombre, texto = cargo + descripción). La foto ya lleva
   dentro <a class="twitter-cir-white" href="mailto:…"> con el correo de cada persona (26 de 26):
   aquí ese enlace se convierte en una capa sobre la foto con «✉ Escríbeme» al pasar el ratón; en
   pantallas táctiles (sin ratón) se ve siempre un sobre amarillo en la esquina.
   La plantilla pone la proporción con .at-image-intro-item::before (padding-top 60 %) y el marco
   amarillo con ::before/::after de .avatar-item-img. */
.at-nine-flat-team-1 .items-row { display: flex !important; flex-wrap: wrap; gap: 28px; margin: 0 0 28px !important; }
.at-nine-flat-team-1 .items-row::before, .at-nine-flat-team-1 .items-row::after { display: none !important; }
.at-nine-flat-team-1 .at-intro-item-wrap { float: none !important; margin: 0 !important; width: calc((100% - 84px) / 4) !important; }
.at-nine-flat-team-1 .at-intro-item {
  height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 16px; box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
  transition: transform .25s, box-shadow .25s;
}
.at-nine-flat-team-1 .at-intro-item:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(15, 61, 36, .16); }
.at-nine-flat-team-1 .at-image-intro-item { position: relative; height: auto !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
.at-nine-flat-team-1 .at-image-intro-item::before { padding-top: 118% !important; margin-bottom: 0 !important; }
.at-nine-flat-team-1 .avatar-item-img {
  position: absolute !important; inset: 0 !important; height: auto !important; border: 0 !important;
  background-size: cover !important; background-position: center 30% !important; transition: transform .5s;
}
.at-nine-flat-team-1 .avatar-item-img::before, .at-nine-flat-team-1 .avatar-item-img::after { display: none !important; }
.at-nine-flat-team-1 .at-intro-item:hover .avatar-item-img { transform: scale(1.04); }
.at-nine-flat-team-1 .at-shadow-inset { display: none !important; }
.at-nine-flat-team-1 .avatar-item-img a {
  position: absolute !important; inset: 0 !important; top: 0 !important; left: 0 !important;
  width: auto !important; height: auto !important; margin: 0 !important; z-index: 2;
  display: flex !important; align-items: flex-end; justify-content: center; padding-bottom: 20px;
  background: linear-gradient(180deg, rgba(15, 61, 36, 0) 40%, rgba(15, 61, 36, .85) 100%) !important;
  opacity: 0 !important; transition: opacity .25s; font-size: 0 !important; color: transparent; text-decoration: none !important;
}
.at-nine-flat-team-1 .avatar-item-img a::after {
  content: "\2709  Escríbeme"; font-family: var(--fuente-texto); font-size: 15px; font-weight: 700;
  color: var(--verde-noche); background: var(--amarillo); border-radius: 999px; padding: 9px 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2); transform: translateY(8px); transition: transform .25s;
}
.at-nine-flat-team-1 .at-intro-item:hover .avatar-item-img a,
.at-nine-flat-team-1 .avatar-item-img a:focus { opacity: 1 !important; }
.at-nine-flat-team-1 .at-intro-item:hover .avatar-item-img a::after { transform: none; }
@media (hover: none) {
  .at-nine-flat-team-1 .avatar-item-img a { opacity: 1 !important; background: none !important; justify-content: flex-end; padding: 0 12px 12px 0; }
  .at-nine-flat-team-1 .avatar-item-img a::after { content: "\2709"; font-size: 18px; padding: 8px 12px; transform: none; }
}
.at-nine-flat-team-1 .at-item-title { margin: 0 !important; padding: 16px 18px 2px !important; font-size: 21px !important; line-height: 1.15; color: #1B1B1B !important; }
.at-nine-flat-team-1 .ch-info { padding: 0 18px 20px !important; position: static !important; opacity: 1 !important; }
.at-nine-flat-team-1 .ch-info-content, .at-nine-flat-team-1 .ch-info-content * { font-size: 15px !important; line-height: 1.55 !important; }
.at-nine-flat-team-1 .ch-info-content p { margin: 0 0 8px !important; color: var(--texto-2); }
/* Primer párrafo = cargo (p. ej. «Coordinadora Castores - RRSS - CALTA») */
.at-nine-flat-team-1 .ch-info-content p:first-child { margin: 4px 0 10px !important; color: var(--verde-oscuro) !important; font-weight: 700; }
.at-nine-flat-team-1 .ch-info-content p:first-child,
.at-nine-flat-team-1 .ch-info-content p:first-child * { font-size: 14px !important; line-height: 1.4 !important; }
.at-nine-flat-team-1 #my-app { display: none; }
@media (max-width: 1024px) { .at-nine-flat-team-1 .at-intro-item-wrap { width: calc((100% - 28px) / 2) !important; } }
@media (max-width: 480px) {
  .at-nine-flat-team-1 .items-row { gap: 14px; margin-bottom: 14px !important; }
  .at-nine-flat-team-1 .at-intro-item-wrap { width: calc((100% - 14px) / 2) !important; }
  .at-nine-flat-team-1 .at-item-title { font-size: 17px !important; padding: 12px 12px 2px !important; }
  .at-nine-flat-team-1 .ch-info { padding: 0 12px 14px !important; }
  .at-nine-flat-team-1 .ch-info-content, .at-nine-flat-team-1 .ch-info-content * { font-size: 14px !important; }
}

/* =============================== FASE 3 ================================== */
/* Propuesta 13 — calendario JEvents (diseño flat). El rojo es #FF3B30 de
   components/com_jevents/views/flat/assets/css/events_css.css. No existe la clase .jev_flat:
   el contenedor es #jevents_body.
.jev_toprow div.previousmonth, .jev_toprow div.nextmonth {
  background-color: var(--verde-oscuro) !important; border-color: var(--verde-oscuro) !important;
}
.jev_toprow div.currentmonth { border-color: var(--verde-oscuro) !important; }
#jevents_body .nav-items > div { border-color: var(--verde-oscuro) !important; }
#jevents_body .nav-items div.active a, .jev_header2 .active a,
#jevents_body .cal_today a.cal_daylink,
#flatcal_minical .flatcal_todaycell a {
  background-color: var(--verde-oscuro) !important; border-color: var(--verde-oscuro) !important;
}
#jevents_body .cal_today a.cal_daylink:hover { color: var(--verde-oscuro) !important; background-color: #fff !important; }
#jevents_body .nav-items > div a:hover, #jevents_body .nav-items div.active a:hover {
  border-left-color: var(--verde-oscuro) !important;
}
*/

/* Propuesta 14 — listas de descargas (Phoca: .pd-filebox, título .pd-title, botón ya en fase 1)
.pd-category .pd-filebox {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 12px 16px; margin-bottom: 8px;
}
.pd-category .pd-title { font-weight: 600; }
*/

/* Propuesta 15 — pie de página.
   #avatar-footer-inside-block (#2E2E2E: menú, dirección, «Síguenos») y
   #avatar-footer-block (#222222: módulo 92 con dos grupos de logos, .miembro-scout —MSC, SCyL,
   SVa, con float:left en línea— y .miembro-cole —Red Marianista y colegio—). Se juntan en una
   sola banda blanca.
#avatar-footer-inside-block { background: var(--verde-noche) !important; }
#avatar-footer-block { background: #0A2A18 !important; }
.avatar-copyright .custom {
  display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: center; align-items: center;
  background: #fff; border-radius: var(--radio-l); padding: 12px 16px; margin: 16px 0;
}
.avatar-copyright .miembro-scout, .avatar-copyright .miembro-cole,
.avatar-copyright .miembro-scout p {
  display: flex; flex-wrap: wrap; gap: 16px 24px; justify-content: center; align-items: center;
  float: none !important; width: auto !important; margin: 0 !important;
}
.avatar-copyright .custom img { float: none !important; height: 48px; width: auto; }
*/

/* Propuesta 16 — zonas táctiles en móvil (el menú responsive se activa por debajo de 1024 px).
   El chat (#chatra) se coloca él solo; en móvil queda arriba a la derecha junto al logo.
   El widget de Twitter (#tbox1, módulo 184) se quita despublicándolo, no con CSS. */
@media (max-width: 1024px) {
  body.avatar-responsive .avatar-nav-responsive > .avatar-main-menu > li > a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  /* El «≡» de los submenús (.pull, absoluto, 30×30) se estira al alto del elemento para
     seguir alineado con el texto. No se ensancha: taparía el principio del enlace. */
  body.avatar-responsive .avatar-nav-responsive > .avatar-main-menu > li > .pull {
    top: 0; bottom: 0; height: auto; background-position: 0 50%;
  }
  .avatar-nav-responsive .menu-pull { min-width: 44px; min-height: 44px; }
}