/* ============================================================================
   REBRANDING — Portada www.laguardiatoledo.info  (solo esta página)
   Estética convencional pTupi: Courier New + naranja OFICIAL #E36C0A + papel.
   Versión DALIA: 2026.06.22.01
   ----------------------------------------------------------------------------
   USO: cargar DESPUÉS de css/style.css (o pegar al final de style.css).
   Sobrescribe los selectores reales del tema actual. Reversible (es aditivo).
   Nota: el logo se cambia sustituyendo el archivo de imagen (ver README).
   ============================================================================ */

/* ---- Paleta / base -------------------------------------------------------- */
:root{
  --naranja:#E36C0A;   /* oficial (antes #FB8C20) */
  --tierra:#5E5D4B;
  --gris:#8a8576;      /* gris medio (titulos de card, labels, toggles) */
  --tinta:#3f3e36;     /* texto destacado/negritas */
  --crema:#FBF8EC;
  --amarillo:#FCFCA0;
  --linea:#e0ddce;
}

body{
  font-family:"Courier New",Courier,monospace;
  font-style:normal;            /* quita la cursiva global, más legible */
  color:#2B2B2B;
}

a{ color:var(--naranja); }
a:hover{ color:#000; }

#content{ background:#F5F3EC; }  /* fondo papel suave */

/* ---- Cabecera ------------------------------------------------------------- */
#header{
  height:90px;
  background:var(--crema);       /* antes textura fondo_cab.png */
  border-bottom:3px solid var(--naranja);
}
#cab_izq img{ width:auto; height:66px; margin-top:8px; }  /* logo en caja */
#cab_centro{ color:var(--tierra); font-style:normal; }
#cab_centro span{ color:var(--naranja); }

/* Botonera / menú */
#botonera .btn{ color:var(--tierra); border-radius:6px; }
#botonera .btn:hover,
#botonera .btn_over{ color:#fff; background:var(--naranja); }
#botonera .btn_sel{
  color:#fff; background:var(--naranja);
  background-image:none; border-radius:6px;
}
#botonera .btn a,
#botonera .btn a:hover{ color:inherit; }

/* ---- Banner / slideshow --------------------------------------------------- */
#slideshow_portada_bg,
#slideshow_portada{ border-bottom-color:var(--naranja); }

.btn_banner{ background:var(--naranja); border-radius:6px; }
.btn_banner a:hover{ color:var(--amarillo); }

#slideshowNav a{ background:var(--naranja); }
#slideshowNav a:hover{ background:#000; color:#fff; }

#cyclePatrocinioNav li.activeSlide a{ background:var(--naranja); }
#cyclePatrocinioNav a{ border-color:var(--linea); }

.marker #text a{ color:var(--naranja); }

/* ---- Títulos de sección --------------------------------------------------- */
.section_title{
  background:var(--crema);                /* antes todo amarillo #FCFCA0 */
  border:1px solid var(--linea);
  border-left:6px solid var(--naranja);
  box-shadow:none;
  color:var(--naranja);
}
.section_title a,
.section_title span{ color:var(--naranja); }
.section_title p.subtitle{ color:var(--tierra); }

/* el amarillo se reserva para resaltar DATOS concretos */
.resalte, mark{ background:var(--amarillo); padding:1px 5px; }

/* ---- Comentarios ---------------------------------------------------------- */
.section .section_comment .section_comment_txt,
.section .section_comment .section_comment_txt a,
.section .section_comment .section_comment_txt_old{ color:var(--tierra); }
.section .section_comment .section_comment_txt_old span{ color:var(--naranja); }

/* ---- Colaboradores -------------------------------------------------------- */
.colaborador{
  box-shadow:0 3px 10px rgba(120,110,80,.20);
  border:1px solid var(--linea);
}

/* ---- Scrollables / navegación -------------------------------------------- */
a.browse{ background-color:var(--naranja); border-radius:6px; }
a.right:hover, a.right:active,
a.left:hover,  a.left:active{ background-color:var(--naranja); color:#fff; }
.navi a:hover{ border-color:var(--naranja); }
.navi a.active{ background-color:var(--naranja); border-color:var(--naranja); }

/* ---- Pie ------------------------------------------------------------------ */
/* Secciones (Actualidad / Videos / Clasico) como CARD que engloba el contenido */
.seccard, #canal_yotube{
  box-sizing:border-box; width:var(--cardw); max-width:var(--cardw); margin:14px auto; background:#fff;
  border:1px solid var(--linea); border-radius:14px; padding:8px 16px 18px;
  box-shadow:0 4px 16px rgba(120,110,80,.12); overflow:hidden;
}
.seccard .section_title, #canal_yotube .section_title{ margin-top:6px !important; }
/* Separadores inline de index.php (margin-bottom:40px) -> homogeneo con el resto (14px) */
div[style*="margin-bottom:40px"]{ margin-bottom:0 !important; }

/* Pie como CARD sin relleno (solo borde) */
#footer{
  box-sizing:border-box; width:var(--cardw); max-width:var(--cardw);
  margin:14px auto;
  background:#f5f4f1 !important;
  color:var(--tierra);
  border:1px solid var(--linea) !important;
  border-radius:14px;
  padding:18px 20px;
}
#footer a{ color:var(--naranja) !important; }
#footer img{ filter:none; }
/* Pie: escudos izq mas grandes; logos der en color (pTupi + Ayuntamiento) */
#footer .pie-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
#footer .pie-izq{ flex:0 0 auto; text-align:left; white-space:nowrap; }
#footer .pie-der{ flex:0 0 auto; text-align:right; white-space:nowrap; }
#footer .pie-centro{ flex:1 1 auto; text-align:center; padding:0 16px; }
#footer .pie-izq img, #footer .pie-der img{ width:auto; max-width:none; vertical-align:middle; }
#footer .pie-clm{ height:84px; margin-right:18px; border-radius:8px; }
#footer .pie-rdq{ height:96px; }
#footer .pie-ayto{ height:80px; margin-right:18px; }
#footer .pie-ptupi{ height:60px; }
#footer .pie-centro p{ margin:3px 0; font-size:12px; }
#footer .pie-centro .pie-marca{ font-weight:bold; font-size:15px; margin-bottom:6px; }
#footer .pie-tupi-txt{ color:var(--naranja); }
#footer a.pie-ptupi-link{ color:inherit !important; text-decoration:none; font-weight:bold; }
#footer a.pie-ptupi-link:hover{ text-decoration:underline; }
@media(max-width:768px){
  #footer .pie-row{ flex-direction:column; }
  #footer .pie-izq, #footer .pie-centro, #footer .pie-der{ text-align:center !important; white-space:normal; }
  #footer .pie-centro{ padding:12px 0; }
  #footer .pie-izq img, #footer .pie-der img{ margin:10px 10px; }
}

/* ---- Popups (magnific) ---------------------------------------------------- */
.mfp-bottom-bar .mfp-title{ color:var(--tierra); }

/* ---- Contenidos: tarjetas-indicador (KPIs del portal) ---------------------
   Breakpoints estandar del proyecto: 480 (movil) / 768 (tablet) / 980 (nav). */
.statgrid{ display:grid; grid-template-columns:repeat(8,1fr); gap:10px; margin-top:10px; }
@media(max-width:768px){ .statgrid{ grid-template-columns:repeat(4,1fr); } }
@media(max-width:480px){ .statgrid{ grid-template-columns:repeat(2,1fr); } }
/* Colaboradores: 4 indicadores centrados (minmax => no desbordan al estrecharse) */
#card_colaboradores .statgrid{ grid-template-columns:repeat(4,minmax(0,140px)); justify-content:center; }
@media(max-width:480px){ #card_colaboradores .statgrid{ grid-template-columns:repeat(2,minmax(0,140px)); } }
.statcard{ background:#f3f2ee; border:1px solid var(--linea);
  border-radius:12px; padding:14px 6px 11px; text-align:center;
  box-shadow:0 2px 8px rgba(120,110,80,.10); }
.statcard .st-ico{ display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--linea); border-radius:50%; }
.statcard .st-ico svg{ width:22px; height:22px; fill:var(--gris); }
.statcard .st-num{ display:block; font-size:20px; line-height:1.05; color:#6e6b5e; font-weight:bold;
  margin:6px 0 3px; white-space:nowrap; }
.statcard .st-lab{ display:block; font-size:9px; color:var(--gris); text-transform:uppercase; letter-spacing:.3px; }
/* Etiquetas (texto bajo el numero) mas grandes en Colaboradores, Socios y Cifras */
#card_colaboradores .statcard .st-lab, #card_socios .statcard .st-lab, #card_contenidos .statcard .st-lab{ font-size:13px; }
/* narracion de la historia bajo los indicadores (centrada, en triangulo) */
.aitcard .st-historia{ margin:22px auto 6px; max-width:1080px; color:var(--tierra); font-size:17px;
  line-height:1.5; text-align:center; }
.aitcard .card-cta{ text-align:center; margin-top:18px; }
/* Socios: lista de nombres en el cuerpo (mismo tamaño que la narración de historia) */
/* Socios: KPI por defecto (numero + Socios 2026 + fecha), lista bajo "Detalles" */
#card_socios .socios-kpi{ display:flex; justify-content:center; grid-template-columns:none; padding:6px 0 2px; }
#card_socios .socios-kpi .statcard{ width:200px; }
#card_socios .st-fecha{ display:block; font-size:11px; color:var(--gris); margin-top:5px; }
#card_socios .socios-body{ text-align:center; line-height:1.5; padding:14px 12px 6px;
  color:var(--tierra); font-size:17px; }
#card_socios .sc-sep{ color:#000; font-size:1.3em; line-height:1; vertical-align:-0.06em; margin:0 4px; }
.aitcard .st-historia b{ color:var(--tinta); font-weight:bold; }
.aitcard .st-gracias{ display:block; margin-top:16px; font-style:italic; color:var(--tierra); }

/* Colaboradores / Socios / Patrocinadores (cards independientes) */
.aitcard .apoyo-body{ text-align:center; }

/* Colaboradores en nuestra web: resumen + listado */
#card_colaboradores .colab-resumen{ max-width:1080px; margin:0 auto; padding:18px 10px 10px;
  color:var(--tierra); line-height:1.5; text-align:center; }
#card_colaboradores .colab-resumen p{ margin:0 0 10px; font-size:17px; }
#card_colaboradores .colab-resumen b{ color:var(--tinta); font-weight:bold; }
#card_colaboradores .colab-resumen a:not(.cc-btn){ color:var(--tinta); text-decoration:underline; }
#card_colaboradores .colab-resumen a:not(.cc-btn):hover{ color:#000; }

/* Junta / Fundadores — un card por miembro (foto + cargo/nick + nombre) */
.aitcard .jm-grid{ display:flex; flex-wrap:wrap; gap:18px; padding:6px 4px 10px; justify-content:center; }
.aitcard .jm-card{ flex:0 0 auto; width:130px; text-align:center; }
.aitcard .jm-foto{ width:120px; height:120px; margin:0 auto 10px; border-radius:10px;
  background:#efece2 center/cover no-repeat; border:1px solid var(--linea);
  display:flex; align-items:center; justify-content:center; }
.aitcard .jm-foto svg{ width:54px; height:54px; fill:#c8c4b6; }
.aitcard .jm-cargo, .aitcard .jm-nick{ font-weight:bold; color:var(--naranja); font-size:14px;
  text-transform:uppercase; letter-spacing:.04em; }
.aitcard .jm-nick a{ color:var(--naranja); text-decoration:none; }
.aitcard .jm-nick a:hover{ text-decoration:underline; }
.aitcard .jm-nombre{ color:var(--tierra); font-size:15px; line-height:1.3; margin-top:2px; }
.aitcard .jm-card > a{ display:block; }
.aitcard .jm-lema{ font-style:italic; color:var(--gris); font-size:12px; margin-top:6px; line-height:1.3; }
.aitcard .jm-frase{ color:var(--naranja); font-weight:bold; font-size:12px; margin-top:3px; line-height:1.35; }
.aitcard .jm-poema{ color:var(--naranja); font-weight:bold; font-size:12px; margin-top:6px; line-height:1.35; }
.aitcard .jm-card.has-frase{ width:200px; }
#card_junta .jm-card.has-frase{ width:130px; }

/* Patrocinadores — cards iguales (tamaño fijo), logo rellena el cuadro */
#card_patrocinadores .patro-grid{ display:flex; flex-wrap:wrap; justify-content:center;
  gap:14px; padding:6px 4px 4px; }
#card_patrocinadores .patro-tile{ width:150px; text-align:center; }
#card_patrocinadores .patro-logo{ height:84px; display:flex; align-items:center; justify-content:center;
  border:1px solid #e7e3d6; border-radius:10px; padding:8px; background:#fff; }
#card_patrocinadores .patro-logo img{ max-width:100%; max-height:68px; object-fit:contain; }
#card_patrocinadores .patro-tile > a{ display:block; }
#card_patrocinadores .patro-logo.pend{ color:#bdb9ad; font-style:italic; font-size:12px; background:#faf8f1; }
#card_patrocinadores .patro-nm{ margin-top:7px; font-size:15px; color:var(--tierra); }
#card_patrocinadores .patro-nm a{ color:var(--tierra); text-decoration:none; }
#card_patrocinadores .patro-nm a:hover{ color:var(--naranja); text-decoration:underline; }
@media(max-width:980px){ .aitcard .jm-grid{ justify-content:center; } }

/* ============================================================================
   ACTUALIDAD — card con barra (titulo + densidades 8/4 + prev/next)
   Fuente: album 296 (misma que la portada real). Fotos con marco polaroid.
   ============================================================================ */
/* cabecera de seccion: SIN caja beige, icono+titulo en gris, controles pequenos */
.aitcard .ait-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:none; border:0; padding:0; margin:2px 2px 12px; }
.aitcard .ait-tit{ display:flex; align-items:center; gap:7px;
  font-weight:bold; color:var(--gris); font-size:15px; }
.aitcard .ait-tit .card-logo{ height:26px; width:auto; border-radius:4px; margin-left:8px; }
.aitcard .ait-ico{ width:20px; height:20px; background:#9b988a; border-radius:5px;
  display:flex; align-items:center; justify-content:center; }
.aitcard .ait-ico svg{ width:11px; height:11px; fill:#fff; }
.aitcard .ait-tools{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.aitcard .ait-dens{ display:flex; gap:5px; }
.aitcard .ait-dens button, .aitcard .ait-more, .aitcard .ait-prev{
  display:flex; align-items:center; justify-content:center; gap:3px; height:26px; padding:0 7px;
  border:1px solid #cfc9b6; border-radius:6px; background:#fff; color:var(--gris);
  font-family:inherit; font-weight:bold; font-size:11px; cursor:pointer; transition:.15s; }
.aitcard .ait-dens button svg{ width:12px; height:12px; fill:var(--gris); }
.aitcard .ait-dens button:hover, .aitcard .ait-more:hover, .aitcard .ait-prev:hover{ background:#f0ece0; }
.aitcard .ait-dens button.on{ background:var(--gris); border-color:var(--gris); color:#fff; }
.aitcard .ait-dens button.on svg{ fill:#fff; }
.aitcard .ait-more, .aitcard .ait-prev{ font-size:16px; line-height:1; width:30px; padding:0; }

/* UNA SOLA FILA con scroll horizontal si no caben (sin masonry: evita redistribuciones feas).
   Altura uniforme + ancho segun la foto => tira de fotos limpia, sin recortes. */
.aitcard .ait-grid{ display:flex; flex-wrap:nowrap; gap:12px; justify-content:center;
  overflow:hidden; padding:2px 2px 10px; }
.aitcard .ait-hide{ display:none !important; }
/* cada foto = MARCO POLAROID: el blanco envuelve la foto Y el texto */
.aitcard figure.ait{ flex:0 0 auto; margin:0; background:#fff; padding:9px 9px 8px;
  box-shadow:0 3px 12px rgba(120,110,80,.32); border-radius:2px; }
.aitcard .ait-ph{ display:block; width:auto; max-width:none; background:#eee; }
/* VIDEOS: badge de play sobre la miniatura (rating = likes) */
.videoscard a.ait-link{ position:relative; display:block; }
.videoscard a.ait-link::after{ content:'\25B6'; position:absolute; left:6px; bottom:6px;
  width:21px; height:21px; border-radius:50%;
  background:rgba(227,108,10,.9); color:#fff; font-size:8px; padding-left:2px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 1px 5px rgba(0,0,0,.45);
  transition:.15s; pointer-events:none; }
.videoscard a.ait-link:hover::after{ background:rgba(227,108,10,1); transform:scale(1.12); }
.videoscard .ait-rate{ color:#c0392b; }   /* likes en rojo-youtube suave */

/* ---- Efecto HOVER discreto en elementos con enlace (SOLO con raton; en tactil no) ---- */
.aitcard figure.ait{ transition:transform .18s ease, box-shadow .18s ease; }
.aitcard figure.ait a.ait-link{ cursor:pointer; }
#card_patrocinadores .patro-logo{ transition:transform .18s ease, box-shadow .18s ease; }
.aitcard .jm-card > a .jm-foto{ transition:transform .18s ease, box-shadow .18s ease; }
#footer .pie-izq a, #footer .pie-der a{ display:inline-block; transition:transform .18s ease; }
@media (hover:hover) and (pointer:fine){
  .aitcard figure.ait:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(120,110,80,.40); z-index:2; }
  #card_patrocinadores a:hover .patro-logo{ transform:translateY(-2px); box-shadow:0 5px 12px rgba(120,110,80,.20); }
  .aitcard .jm-card > a:hover .jm-foto{ transform:translateY(-2px); box-shadow:0 5px 12px rgba(120,110,80,.22); }
  #footer .pie-izq a:hover, #footer .pie-der a:hover{ transform:translateY(-2px); }
}
/* la leyenda toma el ancho de la foto sin ensanchar el marco */
.aitcard figure.ait figcaption{ width:0; min-width:100%; box-sizing:border-box;
  text-align:center; padding:7px 2px 1px; line-height:1.35; }
.aitcard figure.ait .ait-t{ color:var(--tierra); display:block; font-weight:bold;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aitcard figure.ait .ait-c{ display:none; margin:4px 0 0; }
/* autor / valoracion / visitas (dentro del marco) */
.aitcard .ait-author{ display:block; color:var(--gris); font-style:italic; }
.aitcard .ait-rate{ display:block; color:var(--naranja); letter-spacing:1px; }
.aitcard .ait-rate i{ color:#aaa; font-style:normal; letter-spacing:0; }
.aitcard .ait-novote{ color:#c4c0b2; font-style:italic; letter-spacing:0; }
/* media numerica de valoraciones (no estrellas): "4,5 (12)" */
.aitcard .ait-avg{ color:var(--naranja); font-weight:bold; }
.aitcard .ait-nv{ color:#aaa; }
/* Popup de foto (antes estilos inline) */
.popup_title{ font-size:20px; text-align:center; }
.popup_cap{ font-weight:normal; }
.aitcard .ait-hits{ display:block; color:#aaa; letter-spacing:0; }
.aitcard .ait-author, .aitcard .ait-rate, .aitcard .ait-hits{ font-size:10px; }
/* votos y vistas un punto mas grandes que el autor */
.aitcard .ait-rate, .aitcard .ait-hits{ font-size:12px; }
/* estrellas para VOTAR (naranja pTupi), debajo de los votos */
.aitcard .ait-vote{ display:block; line-height:1; margin-top:2px; white-space:nowrap; }
.aitcard .ait-vote i{ font-style:normal; cursor:pointer; color:var(--naranja); font-size:15px;
  padding:0 1px; transition:transform .08s; -webkit-user-select:none; user-select:none; }
.aitcard .ait-vote i:hover{ transform:scale(1.2); }
.aitcard .ait-vote.voting{ opacity:.45; pointer-events:none; }
.aitcard .ait-vote.voted i{ cursor:default; }
.aitcard .d8 .ait-vote i{ font-size:14px; }
.aitcard .d4 .ait-vote i{ font-size:18px; }
/* densidad = ancho de columna (menos ancho => mas fotos por fila) */
/* 8 fotos: altura fija menor (caben mas; si no, scroll) */
.aitcard .d8 .ait-ph{ height:135px; }
.aitcard .d8 .ait-t{ font-size:11px; }
.aitcard .d8 .ait-author, .aitcard .d8 .ait-rate, .aitcard .d8 .ait-hits{ font-size:9px; }
.aitcard .d8 .ait-rate, .aitcard .d8 .ait-hits{ font-size:11px; }
/* 4 fotos: altura fija mayor (mas detalle) */
.aitcard .d4 .ait-ph{ height:230px; }
.aitcard .d4 .ait-t{ font-size:14px; margin-bottom:2px; }
.aitcard .d4 .ait-author, .aitcard .d4 .ait-rate, .aitcard .d4 .ait-hits{ font-size:12px; }
.aitcard .d4 .ait-rate, .aitcard .d4 .ait-hits{ font-size:14px; }
@media(max-width:768px){
  .aitcard .d8 .ait-ph{ height:108px; }
  .aitcard .d4 .ait-ph{ height:165px; }
}

/* ============================================================================
   RESPONSIVE — contenido fluido sin desbordes (la maqueta era de ancho fijo)
   ============================================================================ */
html, body{ max-width:100%; }   /* sin overflow-x:hidden: rompe el sticky del menu */
#page{ width:100% !important; max-width:100%; }
/* el contenedor interno deja de ser 900px fijo */
#contenidoCentrado{ width:auto !important; max-width:900px; margin:0 auto; padding:0 8px; }
/* contenedores de scroller/comentarios/galeria no fuerzan ancho */
.scrollablePortada, .scrollablePresentacion, .section, .section_comments,
.section_comment, .section_comment_txt, .btn_banner_patrocinio{
  width:auto !important; max-width:100%;
}
.section_img, .img_photowall_div{ max-width:46%; }
img{ max-width:100%; height:auto; }
@media(max-width:768px){
  .section_img{ max-width:47%; margin:6px 1% !important; }
}

/* ============================================================================
   CABECERA REDISEÑADA — CARD: skyline + menu (izq logo+web / centro / der redes)
   ============================================================================ */
/* menu fijo: el sticky va en #header (su padre #page abarca toda la pagina) */
#header{ position:sticky !important; top:0; z-index:600; height:auto !important;
         background:#fff !important; border-bottom:0 !important; padding-top:14px; }
#content{ padding-top:0 !important; background:#fff !important; overflow-x:clip; }
body{ background:#fff !important; }

/* Fuera el banner (slideshow "¿Quieres participar?") */
#slideshow_portada_bg{ display:none !important; }

/* ancho comun de TODAS las cards = ancho del menu principal */
:root{ --cardw: min(1180px, calc(100% - 24px)); }

#cardcab{ position:relative; box-sizing:border-box; width:var(--cardw); max-width:var(--cardw);
    margin:0 auto 12px; background:#fff; border:1px solid var(--linea);
    border-radius:14px; box-shadow:0 4px 16px rgba(120,110,80,.16); overflow:visible; }
/* ===== Escena cabecera: dia->ocaso->noche (sol/luna), parada por defecto ===== */
#cardcab .cc-sky{ position:relative; background:#FBF8EC; padding:0; height:232px;
    border-radius:13px 13px 0 0; overflow:hidden; }
@media(max-width:768px){ #cardcab .cc-sky{ height:165px; } }
/* Titulo sobre el skyline: marca con colores del pie + lema debajo */
#cardcab .cc-title{ position:absolute; top:34px; left:0; right:0; z-index:7;
    text-align:center; pointer-events:none; padding:0 12px; }
#cardcab .cc-title-marca{ margin:0; font-weight:bold; font-size:36px; line-height:1.05;
    color:var(--tierra); letter-spacing:.4px; text-shadow:0 1px 3px rgba(255,255,255,.7); }
#cardcab .cc-title-marca .cc-t-org{ color:var(--naranja); }
#cardcab .cc-title-sub{ margin:1px 0 0; font-size:16px; font-style:italic;
    color:var(--tierra); text-shadow:0 1px 3px rgba(255,255,255,.7); }
@media(max-width:768px){
    #cardcab .cc-title{ top:30px; }
    #cardcab .cc-title-marca{ font-size:21px; }
    #cardcab .cc-title-sub{ font-size:11px; margin-top:0; }
}
#cardcab .cc-skybg{ position:absolute; inset:0; background-color:#FBF8EC; }
#cardcab .cc-skyveil{ position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(to top, rgba(255,255,255,0) 55%, rgba(255,255,255,.18)); }
#cardcab .cc-stars{ position:absolute; inset:0; opacity:0; pointer-events:none;
    background-image:radial-gradient(1.4px 1.4px at 20% 30%,#fff,transparent),
      radial-gradient(1.4px 1.4px at 40% 22%,#fff,transparent),
      radial-gradient(1.6px 1.6px at 62% 32%,#fff,transparent),
      radial-gradient(1.4px 1.4px at 80% 20%,#fff,transparent),
      radial-gradient(1.4px 1.4px at 73% 44%,#fff,transparent),
      radial-gradient(1.4px 1.4px at 30% 48%,#fff,transparent),
      radial-gradient(1.4px 1.4px at 90% 38%,#fff,transparent),
      radial-gradient(1.4px 1.4px at 12% 52%,#fff,transparent); }
#cardcab .cc-sun{ position:absolute; width:20px; height:20px; border-radius:50%; z-index:6; opacity:0; cursor:grab; }
#cardcab .cc-sky.manual .cc-sun{ cursor:grabbing; }
#cardcab .cc-moon{ position:absolute; width:16px; height:16px; border-radius:50%; background:#eef1f6; z-index:5; opacity:0; pointer-events:none;
    -webkit-mask:radial-gradient(circle at 70% 32%, transparent 0 55%, #000 56%);
    mask:radial-gradient(circle at 70% 32%, transparent 0 55%, #000 56%);
    filter:drop-shadow(0 0 5px rgba(220,225,240,.55)); }
#cardcab .cc-haze{ position:absolute; left:0; right:0; bottom:0; height:55%; opacity:0; pointer-events:none;
    background:linear-gradient(to top,rgba(255,120,40,.55),transparent); }
#cardcab .cc-sl{ position:absolute; left:0; right:0; bottom:0; width:100%; display:block; pointer-events:none; }
#cardcab .cc-sl-real{ position:absolute; opacity:1; }
#cardcab .cc-sl-dark{ opacity:0; }
#cardcab .cc-ground{ position:absolute; left:0; right:0; bottom:0; height:7px; background:#1a1814; opacity:0; pointer-events:none; }
/* reloj y herramientas (recargar / zoom) = iconos del menu (en cc-der, tras YouTube) */
#cardcab .cc-der .cc-clock, #cardcab .cc-der .cc-tool{ width:38px; height:38px; box-sizing:border-box; display:flex; align-items:center; justify-content:center;
    border:2px solid var(--tierra); border-radius:8px; background:#fff; cursor:pointer; padding:0; transition:.15s; }
#cardcab .cc-der .cc-clock svg, #cardcab .cc-der .cc-tool svg{ width:20px; height:20px; fill:var(--tierra); transition:.15s; }
#cardcab .cc-der .cc-clock:hover, #cardcab .cc-der .cc-tool:hover{ background:var(--naranja); border-color:var(--naranja); }
#cardcab .cc-der .cc-clock:hover svg, #cardcab .cc-der .cc-tool:hover svg{ fill:#fff; }
#cardcab .cc-der .cc-tool.cc-tool-txt{ font:bold 12px "Courier New",Courier,monospace; color:var(--tierra); line-height:1; }
#cardcab .cc-der .cc-tool.cc-tool-txt:hover{ color:#fff; }
/* Movil: ocultar solo pantalla completa (Fullscreen API sin soporte en iOS). El zoom se mantiene. */
@media(max-width:768px){
  #cardcab #cc-fs{ display:none !important; }
}
/* la animacion SOLO corre con .run (parada por defecto = portada) */
/* Ciclo: arranca al MEDIODIA (12h, crema) -> tarde -> noche -> amanecer azulado -> crema, y SE CONGELA en las 12h (1 vuelta, fill both) */
#cardcab .cc-sky.run .cc-skybg{ animation:ccCielo 24s linear 1 both; }
#cardcab .cc-sky.run .cc-stars{ animation:ccEstrellas 24s linear 1 both; }
#cardcab .cc-sky.run .cc-sun{ animation:ccSol 24s linear 1 both; }
#cardcab .cc-sky.run .cc-moon{ animation:ccLuna 24s linear 1 both; }
#cardcab .cc-sky.run .cc-haze{ animation:ccBruma 24s linear 1 both; }
#cardcab .cc-sky.run .cc-sl-real{ animation:ccReal 24s linear 1 both; }
#cardcab .cc-sky.run .cc-sl-dark{ animation:ccDark 24s linear 1 both; }
#cardcab .cc-sky.run .cc-ground{ animation:ccSuelo 24s linear 1 both; }
/* Sol y luna: MISMA parabola top(L)=8+408*((L/100)-0.5)^2 y MISMA velocidad (dL/dt=1.43 %ancho por %ciclo), MISMO sentido (izq->der). La luna recorre un tramo mas corto (L30->70) por estar menos tiempo. */
@keyframes ccCielo{ 0%{background-color:#FBF8EC} 5%{background-color:#f4cf94} 13%{background-color:#ffbf80}
  22%{background-color:#ffa766} 30%{background-color:#ff7a45} 36%{background-color:#e75a3e}
  43%{background-color:#7a4f7e} 48%{background-color:#2b3160} 52%{background-color:#141a38} 60%{background-color:#141a38}
  66%{background-color:#2b3160} 74%{background-color:#6a76a8} 82%{background-color:#b9c2d8} 90%{background-color:#ebe6e0} 100%{background-color:#FBF8EC} }
@keyframes ccSol{ 0%{left:50%;top:8%;background:#fff6d8;box-shadow:0 0 22px 8px rgba(255,246,200,.85);opacity:1}
  7%{left:60%;top:12%;background:#ffe7a4;box-shadow:0 0 18px 7px rgba(255,224,140,.8);opacity:1}
  14%{left:70%;top:24%;background:#ffd27e;box-shadow:0 0 18px 7px rgba(255,200,110,.8);opacity:1}
  21%{left:80%;top:45%;background:#ffb05a;box-shadow:0 0 16px 6px rgba(255,150,70,.78);opacity:1}
  28%{left:90%;top:73%;background:#ff7a3d;box-shadow:0 0 16px 6px rgba(255,110,50,.75);opacity:1}
  33%{left:97%;top:96%;background:#e74f23;box-shadow:0 0 12px 4px rgba(214,55,27,.6);opacity:1}
  35%{left:100%;top:110%;opacity:0} 65%{left:0%;top:110%;opacity:0}
  68%{left:4.3%;top:93%;opacity:0}
  72%{left:10%;top:73%;background:#ff8a3d;box-shadow:0 0 14px 5px rgba(255,120,48,.65);opacity:1}
  79%{left:20%;top:45%;background:#ffb05a;box-shadow:0 0 16px 6px rgba(255,160,80,.75);opacity:1}
  86%{left:30%;top:24%;background:#ffd27e;box-shadow:0 0 18px 7px rgba(255,200,120,.8);opacity:1}
  93%{left:40%;top:12%;background:#ffe7a4;box-shadow:0 0 18px 7px rgba(255,224,140,.8);opacity:1}
  100%{left:50%;top:8%;background:#fff6d8;box-shadow:0 0 22px 8px rgba(255,246,200,.85);opacity:1} }
@keyframes ccLuna{ 0%{opacity:0;left:30%;top:24%} 36%{opacity:0;left:30%;top:24%}
  40%{opacity:1;left:35.7%;top:16%} 43%{opacity:1;left:40%;top:12%} 50%{opacity:1;left:50%;top:8%}
  57%{opacity:1;left:60%;top:12%} 60%{opacity:1;left:64.3%;top:16%} 64%{opacity:0;left:70%;top:24%}
  100%{opacity:0;left:70%;top:24%} }
@keyframes ccBruma{ 0%,28%{opacity:0} 33%{opacity:.6} 40%{opacity:.2} 64%{opacity:0} 71%{opacity:.35} 78%{opacity:0} 100%{opacity:0} }
@keyframes ccEstrellas{ 0%,38%{opacity:0} 44%{opacity:1} 60%{opacity:1} 65%{opacity:0} 100%{opacity:0} }
@keyframes ccReal{ 0%{opacity:1} 33%{opacity:1} 39%{opacity:0} 64%{opacity:0} 71%{opacity:1} 100%{opacity:1} }
@keyframes ccDark{ 0%{opacity:0} 33%{opacity:0} 39%{opacity:1} 64%{opacity:1} 71%{opacity:0} 100%{opacity:0} }
@keyframes ccSuelo{ 0%,35%{opacity:0} 46%{opacity:.5} 58%{opacity:.8} 68%{opacity:0} 100%{opacity:0} }
#cardcab .cc-menu{ position:relative; display:flex; align-items:center; gap:12px; padding:12px 20px;
    border-top:1px solid var(--linea); }
/* Altura uniforme (38px = -20%) para TODOS los controles del menu principal (a, button y label), iconos centrados */
#cardcab .cc-menu .cc-btn,
#cardcab .cc-logo,
#cardcab .cc-der a,
#cardcab .cc-der .cc-clock,
#cardcab .cc-der .cc-tool,
#cardcab .cc-burger{ box-sizing:border-box; height:38px; display:inline-flex; align-items:center; justify-content:center; }

/* logo */
#cardcab .cc-logo{ flex:0 0 auto; height:38px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
    padding:0 12px; border:2px solid var(--tierra); border-radius:8px; background:#fff; transition:.15s; }
#cardcab .cc-logo img{ height:30px; width:auto; display:block; transition:.15s; }
#cardcab .cc-logo:hover{ background:var(--naranja); border-color:var(--naranja); }
#cardcab .cc-logo:hover img{ filter:brightness(0) invert(1); }

/* nav izquierda (crece y empuja las redes a la derecha) */
#cardcab .cc-nav{ flex:1; display:flex; align-items:center; gap:10px; }

/* botones */
/* BOTÓN ÚNICO reutilizable en toda la portada (.cc-btn) */
.cc-btn{ height:38px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
    font-family:inherit; font-weight:bold; color:var(--tierra); background:#fff; font-size:14px; text-decoration:none;
    padding:0 14px; border-radius:8px; border:2px solid var(--tierra); white-space:nowrap; cursor:pointer; transition:.15s; }
.cc-btn svg{ width:18px; height:18px; fill:var(--tierra); transition:.15s; flex:0 0 auto; }
#cardcab .cc-btn .cc-caret{ width:13px; height:13px; }
.cc-btn:hover{ background:var(--naranja); border-color:var(--naranja); color:#fff; }
.cc-btn:hover svg{ fill:#fff; }
/* Accesibilidad: foco de teclado visible (H7 Nielsen) */
.cc-btn:focus-visible,
.aitcard .ait-dens button:focus-visible,
.aitcard .ait-more:focus-visible,
.aitcard .ait-prev:focus-visible,
.aitcard .jm-nick a:focus-visible{ outline:2px solid var(--naranja); outline-offset:2px; border-radius:6px; }

/* desplegable Portada */
#cardcab .cc-drop{ position:relative; }
#cardcab .cc-dropmenu{ position:absolute; top:100%; left:0; margin-top:2px; min-width:210px; background:#fff;
    border:2px solid var(--tierra); border-radius:8px; box-shadow:0 8px 22px rgba(120,110,80,.25);
    padding:6px; display:none; z-index:700; }
/* puente invisible para que el hover no se corte al bajar al menu */
#cardcab .cc-drop::after{ content:''; position:absolute; left:0; right:0; top:100%; height:8px; }
#cardcab .cc-drop:hover .cc-dropmenu, #cardcab .cc-drop:focus-within .cc-dropmenu{ display:block; }
#cardcab .cc-dropmenu a{ display:block; padding:9px 12px; border-radius:6px; color:var(--tierra);
    font-weight:bold; text-decoration:none; font-size:15px; }
#cardcab .cc-dropmenu a:hover{ background:var(--naranja); color:#fff; }

/* redes derecha */
#cardcab .cc-der{ flex:0 0 auto; display:flex; align-items:center; gap:10px; }
#cardcab .cc-der a{ position:relative; width:38px; height:38px; box-sizing:border-box; display:flex; align-items:center; justify-content:center;
    border:2px solid var(--tierra); border-radius:8px; transition:.15s; }
#cardcab .cc-der svg{ width:20px; height:20px; fill:var(--tierra); transition:.15s; }
#cardcab .cc-der a:hover{ background:var(--naranja); border-color:var(--naranja); }
#cardcab .cc-der a:hover svg{ fill:#fff; }
/* etiqueta g / a en los Facebook: abajo y en gris */
#cardcab .cc-tag{ position:absolute; bottom:-7px; right:-7px; min-width:16px; height:16px; padding:0 3px;
    background:#9a958a; color:#fff; border-radius:8px; font-size:10px; font-weight:bold;
    line-height:16px; text-align:center; box-shadow:0 0 0 2px #fff; }

/* boton INSTALAR app (PWA): oculto hasta que sea instalable; naranja para destacar */
#cardcab #cc-install{ display:none; background:var(--naranja); border-color:var(--naranja); }
#cardcab #cc-install svg{ fill:#fff; }
#cardcab #cc-install:hover{ background:#c95e08; border-color:#c95e08; }

/* hamburguesa: oculta por defecto; SOLO aparece (JS .cc-compact) cuando los menus no caben en la barra */
#cardcab #cc-toggle{ display:none; }
#cardcab .cc-burger{ display:none; order:-1; }

/* ---- MODO COMPACTO (lo activa JS al detectar que no cabe) ----
   Galeria de fotos + iconos se pliegan en la hamburguesa; el logo queda visible. */
#cardcab.cc-compact .cc-menu{ flex-wrap:wrap; }
#cardcab.cc-compact .cc-burger{ display:flex; order:-1; align-items:center; justify-content:center;
    width:38px; height:38px; box-sizing:border-box; border:2px solid var(--tierra); border-radius:8px; background:#fff; cursor:pointer;
    transition:.15s; flex:0 0 auto; }
#cardcab.cc-compact .cc-burger svg{ width:20px; height:20px; fill:var(--tierra); transition:.15s; }
#cardcab.cc-compact .cc-burger:hover, #cardcab.cc-compact:has(#cc-toggle:checked) .cc-burger{ background:var(--naranja); border-color:var(--naranja); }
#cardcab.cc-compact .cc-burger:hover svg, #cardcab.cc-compact:has(#cc-toggle:checked) .cc-burger svg{ fill:#fff; }
#cardcab.cc-compact .cc-logo{ order:0; margin-right:auto; }
/* Galeria + redes/herramientas: plegados, salen al abrir la hamburguesa */
#cardcab.cc-compact .cc-nav, #cardcab.cc-compact .cc-der{ display:none; flex-basis:100%; }
#cardcab.cc-compact:has(#cc-toggle:checked) .cc-nav{ order:2; display:flex; flex-direction:column; align-items:stretch; gap:8px; }
#cardcab.cc-compact:has(#cc-toggle:checked) .cc-nav .cc-btn{ width:100%; }
#cardcab.cc-compact:has(#cc-toggle:checked) .cc-der{ order:3; display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
/* version arriba derecha (no ocupa alto del menu) */
#cardcab .cc-ver{ position:absolute; top:6px; right:12px; z-index:3;
    font-size:12px; font-weight:bold; color:#9a958a; letter-spacing:.3px; }


/* cc-sky colapsable al hacer scroll */
#cardcab .cc-sky{ overflow:hidden; }
#cardcab .cc-ver{ overflow:hidden; }

html, body{ overflow-anchor:none; }