/* ==========================================================================
   PROYECTO: Estilos del sitio
   AUTOR: (tu nombre)
   FECHA: 2025-10-02
   DESCRIPCIÓN: Hojas de estilo con secciones tituladas (solo comentarios).
   ========================================================================== */

/* ==========================================================================
   ÍNDICE
   0. Reset básico (no invasivo)
   1. Bloque: #csw-promos (cards, hero, botones, media)
   2. Sección: Agenda (líneas verticales, day-cards, overlay)
   3. Sección: ¿Quiénes somos? (mosaico, features, botones)
   4. Sección: Contacto / Horarios (cards, media, botones)
   5. Sección: Portfolio (thumbnails 3:4, modal, accesibilidad)
   6. Componente: Top Bar (oscura y variante clara)
   ========================================================================== */


/* ========== 0. RESET BÁSICO (no invasivo) ================================ */
*,
*::before,
*::after{ box-sizing: border-box; }

html, body{ overflow-x:hidden; }
body{
  margin:0;
  background:#13100e;
  color:#fff;
}


/* ========== 1. BLOQUE: #csw-promos ======================================= */
/* Vars, layout base y cards */
#csw-promos{
  --csw-primary:#1f49d8;
  --csw-card:#121318;
  --csw-border:#2a2b33;
  --csw-white:#fff;
  --csw-alert:#ff3b3b;
  scroll-margin-top:0;
}
#csw-promos.page-section{ padding-top:0!important; margin-top:0!important; }

#csw-promos .csw-card{
  background:var(--csw-card);
  border:1px solid var(--csw-border);
  border-radius:0!important;
  overflow:hidden;
  box-shadow:none!important;
}

/* Hero + contenido */
#csw-promos .csw-hero{
  position:relative; min-height:260px;
  background:center/cover no-repeat var(--bg, none);
}
#csw-promos .csw-hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.9));
}
#csw-promos .csw-hero-content{
  position:relative; z-index:1; padding:1.75rem 1.25rem 1rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; text-transform:uppercase; text-align:center; color:var(--csw-white);
}
#csw-promos .csw-emoji{
  display:inline-flex; align-items:center; justify-content:center;
  width:clamp(44px,5.5vw,60px); height:clamp(44px,5.5vw,60px);
  font-size:clamp(28px,3.6vw,40px); line-height:1; border-radius:50%;
  margin-bottom:.5rem; background:rgba(0,0,0,.35); box-shadow:0 6px 20px rgba(0,0,0,.45);
}
#csw-promos .csw-hero-title{ font-weight:800; letter-spacing:.6px; margin:.25rem 0 0; }
#csw-promos .csw-hero-sub{ font-size:.85rem; letter-spacing:1px; opacity:.9; }

/* Alertas, video y media ratio */
#csw-promos .csw-alert{
  background:var(--csw-alert); color:#1a1a1a;
  padding:1rem; margin:1rem 1rem 0; border-radius:0!important;
  font-weight:700; text-transform:uppercase; letter-spacing:.4px;
}
#csw-promos .csw-video{
  max-width:92%; margin:.25rem auto 0; background:#0d0f14;
  border-radius:0; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.45);
}
#csw-promos .ratio>video,
#csw-promos .ratio>img,
#csw-promos .ratio>iframe{
  display:block; width:100%; height:100%; object-fit:cover; border-radius:0!important;
}

/* Botones */
#csw-promos .csw-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.75rem;
  padding:.85rem 1.4rem; border-radius:.8rem; background:var(--csw-primary);
  color:#fff; text-decoration:none; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  box-shadow:0 10px 30px rgba(0,0,0,.35); transition:transform .15s ease, filter .15s ease;
}
#csw-promos .csw-btn:hover{ filter:brightness(1.07); color:#fff; transform:translateY(-1px); }
#csw-promos .csw-btn:active{ transform:translateY(0); }
#csw-promos .csw-btn-icon{
  display:inline-grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:#fff;
}
#csw-promos .csw-btn-icon .bi{ font-size:.95rem; color:var(--csw-primary); line-height:1; }

/* Responsivo promos */
@media (max-width:991.98px){ #csw-promos .csw-hero{ min-height:240px; } }
@media (max-width:575.98px){ #csw-promos .csw-hero{ min-height:220px; } }


/* ========== 2. SECCIÓN: AGENDA =========================================== */
/* Títulos y helpers */
.agenda-section .display-6{ letter-spacing:.02em; }

/* Filas sin gutters */
.row-tight{ --bs-gutter-x:0; --bs-gutter-y:0; }

/* Líneas verticales (overlay responsive) */
.vlines{ position:relative; }
.vlines::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:5;
  background-repeat:no-repeat; background-size:100% 100%;
}
/* 4 columnas (xl) */
@media (min-width:1200px){
  .vlines::after{
    background-image:
      linear-gradient(to right,
        transparent calc(25% - .5px), rgba(255,255,255,.95) 0, transparent calc(25% + .5px),
        transparent calc(50% - .5px), rgba(255,255,255,.95) 0, transparent calc(50% + .5px),
        transparent calc(75% - .5px), rgba(255,255,255,.95) 0, transparent calc(75% + .5px)
      );
  }
}
/* 2 columnas (md–lg) */
@media (min-width:768px) and (max-width:1199.98px){
  .vlines::after{
    background-image:
      linear-gradient(to right,
        transparent calc(50% - .5px), rgba(255,255,255,.95) 0, transparent calc(50% + .5px)
      );
  }
}
/* 1 columna (xs–sm) */
@media (max-width:767.98px){ .vlines::after{ background-image:none; } }

/* Tarjetas de día */
.day-card{ border:0; background:#0b0c10; margin:0; }
.day-header{
  background:#ff1f2d; color:#fff; text-transform:uppercase;
  font-weight:800; letter-spacing:.03em; padding:.6rem 1rem; font-size:1.05rem;
}
.day-subheader{
  text-align:center; text-transform:uppercase; font-size:.75rem;
  letter-spacing:.12em; color:#cfcfcf; padding:.35rem 1rem .5rem; border-bottom:0;
}
.day-media{ position:relative; overflow:hidden; background:#000; border:0; }
.day-media video{ display:block; width:100%; height:auto; }

/* Overlay “HOY + DÍA” */
.overlay-title{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; pointer-events:none;
  text-transform:uppercase; font-weight:900; text-align:center; gap:.35rem;
}
.overlay-title span:first-child{
  font-size:3.2rem; line-height:.9; letter-spacing:.05em;
  color:#fff; text-shadow:0 0 18px rgba(0,0,0,.55);
}
.overlay-title span:last-child{
  font-size:2.6rem; line-height:.9; letter-spacing:.04em;
  color:#fff; text-shadow:0 0 18px rgba(0,0,0,.55);
}
.overlay-title.alt span:last-child{ color:#ffddae; }

/* Aportaciones cuadradas */
.aportacion-img{
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border: 0;
  background: #000;
}

/* Responsive overlay */
@media (max-width:575.98px){
  .overlay-title span:first-child{ font-size:2.4rem; }
  .overlay-title span:last-child{  font-size:1.9rem; }
}

/* Centrado integral en Agenda */
.agenda-section .display-6,
.agenda-section .text-center,
.agenda-section .day-header,
.agenda-section .day-subheader,
.agenda-section .overlay-title,
.agenda-section .overlay-title span { text-align: center; }
.agenda-section .overlay-title{
  display:flex; align-items:center; justify-content:center; flex-direction:column;
}
.agenda-section .day-card{ text-align:center; }


/* ========== 3. SECCIÓN: ¿QUIÉNES SOMOS? ================================== */
/* Variables locales y base tipográfica */
:root{
  --cs-card: #0f141b;
  --cs-border: #131a22;
}
#quienes-somos{ background:#fff; color:#222; }
#quienes-somos .letter-space-2{ letter-spacing:.12em; }
#quienes-somos .text-secondary{ color:#6c757d !important; }
#quienes-somos .display-5{ line-height:1.1; }
#quienes-somos .lead{ color:#343a40; }

/* Botones */
#quienes-somos .btn{
  font-weight:600; border:0; border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
#quienes-somos .btn-success{ background:#25d366; }
#quienes-somos .btn-primary{ background:#0d6efd; }
#quienes-somos .btn-warning{ background:#ffb703; color:#1b1b1b; }
#quienes-somos .btn:hover, #quienes-somos .btn:focus{ filter:brightness(1.05); }

/* Mosaico rectangular (16:9) */
#quienes-somos .mosaic-rect{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
#quienes-somos .mosaic-rect .tile{
  position:relative; overflow:hidden; border-radius:16px;
  background:#000; box-shadow:0 10px 30px rgba(0,0,0,.15);
  aspect-ratio: 16 / 9;
}
#quienes-somos .mosaic-rect .tile img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transform:scale(1.02);
  transition:transform .45s ease, filter .45s ease;
  filter:contrast(1.02) saturate(1.05);
}
#quienes-somos .mosaic-rect .tile:hover img{ transform:scale(1.06); }

/* Beneficios (emojis) */
#quienes-somos .feature-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:110px;
  background:var(--cs-card); border:1px solid var(--cs-border); border-radius:16px;
  color:#e8eef5;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02), 0 10px 24px rgba(0,0,0,.25);
  transition:transform .2s ease, box-shadow .2s ease;
}
#quienes-somos .feature-tile .fs-1{ line-height:1; text-shadow:0 0 14px rgba(0,224,224,.35); }
#quienes-somos .feature-tile .small{ color:#cdd6df; }
#quienes-somos .feature-tile:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 14px 30px rgba(0,0,0,.35);
}

/* Responsive QS */
@media (max-width: 575.98px){
  #quienes-somos .mosaic-rect{ gap:10px; }
  #quienes-somos .feature-tile{ border-radius:12px; }
  #quienes-somos .mosaic-rect .tile{ border-radius:12px; }
  #quienes-somos .btn{ padding:.85rem 1rem; }
}


/* ========== 4. SECCIÓN: CONTACTO / HORARIOS ============================== */
/* Background de banda y tipografías */
#horarios{ background:#19191c; }
#horarios .text-light-50{ color:rgba(255,255,255,.6); }
#horarios .display-5{ letter-spacing:.02em; }

/* Card base y variante */
#horarios .hs-card{
  background:#f2f4f5;
  border:0; border-radius:10px; overflow:hidden; height:100%;
  display:flex; flex-direction:column; box-shadow:0 14px 40px rgba(0,0,0,.35);
}
#horarios .hs-card.hs-accent{ background:#e84a3c; color:#fff; }

/* Encabezados */
#horarios .hs-head{
  position:relative; padding:22px 24px 8px; text-align:center;
}
#horarios .hs-card:not(.hs-accent) .hs-head{ color:#e84a3c; }
#horarios .hs-dia{
  margin:0 0 8px 0;
  font-size: clamp(1.4rem, 1.2rem + 1.2vw, 2rem);
  font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
#horarios .hs-brand-title{ font-weight:800; font-size:1.1rem; color:#222; }
#horarios .hs-card.hs-accent .hs-brand-title{ color:#fff; }
#horarios .hs-brand-sub{
  font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; opacity:.75;
}

/* Media: pico superior y triángulo inferior */
#horarios .hs-media{
  position:relative; aspect-ratio: 16 / 10;
  background: center/cover no-repeat var(--img, #000);
  margin: 12px 12px 0; border-radius:4px; overflow:hidden; isolation:isolate;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
#horarios .hs-media::before{
  content:""; position:absolute; inset:0 auto auto 0;
  width:100%; height:45%; background:#e84a3c; mix-blend-mode:multiply;
  clip-path: polygon(0 0, 100% 0, 50% 45%); opacity:.95; z-index:1;
}
#horarios .hs-media::after{
  content:""; position:absolute; inset:auto 0 0 0; height:48%;
  background:#000; opacity:.75; clip-path: polygon(0 100%, 50% 40%, 100% 100%); z-index:1;
}
#horarios .hs-media-badge{
  position:absolute; inset:auto 0 8% 0; z-index:2; text-align:center; color:#fff;
  font-weight:900; font-size: clamp(1rem, .9rem + .6vw, 1.3rem); line-height:1.05; text-transform:capitalize;
}

/* Body + listas */
#horarios .hs-body{ padding:18px 22px 22px; color:#111; }
#horarios .hs-card.hs-accent .hs-body{ color:#fff; }
#horarios .hs-info{
  list-style:none; padding:0; margin:0 0 14px 0; font-weight:700; font-size:.95rem;
}
#horarios .hs-info li{ margin:.25rem 0; }

/* Botones */
#horarios .hs-btn{ font-weight:800; border:0; }
#horarios .hs-btn-alt{ font-weight:800; border:0; color:#111; }
#horarios .hs-btn-alt:hover{ color:#111; filter:brightness(0.95); }

/* Responsive Contacto */
@media (max-width: 575.98px){
  #horarios .row{ padding-left:.75rem; padding-right:.75rem; }
}


/* ========== 5. SECCIÓN: PORTFOLIO ======================================== */
/* Item base y hover */
#portfolio .portfolio-item{
  position:relative;display:flex;flex-direction:column;height:100%;
  border-radius:14px;overflow:hidden;background:#111;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 2px 12px rgba(0,0,0,.25);transition:transform .18s, box-shadow .18s, filter .18s;
}
#portfolio .portfolio-item:hover{
  transform:translateY(-6px);box-shadow:0 14px 36px rgba(0,0,0,.35);filter:saturate(1.02);
}

/* Miniatura vertical 3:4 (sin recorte) */
#portfolio .portfolio-item img{
  width:100%; aspect-ratio: 3 / 4; height:auto; object-fit: contain; object-position: center;
  display:block; background:#000;
}

/* Overlay/link y badge */
#portfolio .portfolio-link{position:relative;display:block;}
#portfolio .portfolio-link::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,.35) 100%);
  opacity:0;transition:opacity .2s ease;pointer-events:none;
}
#portfolio .portfolio-link:hover::before{opacity:1;}
#portfolio .portfolio-link::after{content:none !important;}
#portfolio .pf-badge{
  position:absolute;top:.75rem;left:.75rem;z-index:2;
  backdrop-filter:blur(6px);background:rgba(17,17,17,.7);color:#fff;font-weight:700;font-size:.75rem;
  padding:.35rem .6rem;border-radius:.5rem;
}

/* Caption y textos sección */
#portfolio .portfolio-caption{
  padding:16px 18px;background:#fff;margin:0;border-top:1px solid rgba(0,0,0,.06);
}
#portfolio .portfolio-caption-heading{
  font-weight:800;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
#portfolio .portfolio-caption-subheading{
  line-height:1.5;color:#444 !important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
#portfolio, #portfolio p, #portfolio h1, #portfolio h2, #portfolio h3, #portfolio h4,
#portfolio .modal-body, #portfolio .item-intro, #portfolio .list-inline, #portfolio .list-inline li{color:#000;}
#portfolio .text-muted{color:#000 !important;}
#portfolio a{color:#000;text-decoration:none;}
#portfolio a:hover, #portfolio a:focus{text-decoration:underline;}
#portfolio-title{color:#fff !important;} /* solo el h2 blanco */

/* Accesibilidad y modal */
#portfolio .portfolio-link:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:10px;}
#portfolio .portfolio-modal .modal-content{
  background:#000;color:#fff;border:none;border-radius:16px;
}
#portfolio .portfolio-modal .modal-body,
#portfolio .portfolio-modal .modal-body p,
#portfolio .portfolio-modal .modal-body li,
#portfolio .portfolio-modal .modal-body .text-muted{color:#d0d0d0 !important;}
#portfolio .portfolio-modal .modal-body h1,
#portfolio .portfolio-modal .modal-body h2,
#portfolio .portfolio-modal .modal-body h3{color:#fff;}
#portfolio .portfolio-modal .modal-body a{color:#fff;text-decoration:underline;}
#portfolio .portfolio-modal .modal-body a:hover{text-decoration:none;}
#portfolio .portfolio-modal .btn-close{filter:invert(1);opacity:1;}
.modal-backdrop.show{background:#000;opacity:.84;}

/* Imagen modal */
#portfolio .portfolio-modal .modal-body img{
  display:block;width:100%;height:auto;max-height:80vh;
  object-fit:contain;background:#000;border-radius:12px;
}

/* Motion prefs (portfolio) */
@media (prefers-reduced-motion: reduce){
  #portfolio *{transition:none !important;}
}


/* ========== 6. COMPONENTE: TOP BAR ======================================= */
/* Variables del componente */
:root{
  --tb-bg-dark: #0f0f10;
  --tb-text:    #ffffff;
  --tb-muted:   rgba(255,255,255,.75);
  --tb-border:  rgba(255,255,255,.08);
  --tb-hover:   rgba(255,255,255,.12);
  --tb-focus:   #ffffff;
  --tb-gap-x:   1rem;
  --tb-gap-y:   .5rem;
}

/* Base y layout */
.top-bar{
  background: var(--tb-bg-dark);
  color: var(--tb-text);
  padding: .8rem 0;
  border-bottom: 1px solid var(--tb-border);
  position: relative;
  z-index: 1030;
}
.top-bar .container{
  gap: var(--tb-gap-x) var(--tb-gap-y);
  min-height: 56px;
}

/* Contacto */
.top-bar .contact{
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .5rem .75rem;
  font-size: 1.0625rem; line-height: 1.4;
}
.top-bar .contact i{ font-size: 1.1em; opacity: .9; }
.top-bar .contact a{
  color: var(--tb-text); text-decoration: none; white-space: nowrap;
}
.top-bar .contact a:hover,
.top-bar .contact a:focus-visible{
  text-decoration: underline; text-underline-offset: 2px;
}

/* Separadores y redes */
.top-bar .vr{ opacity: .35; border-color: var(--tb-border); }
.top-bar .mx-2{ color: var(--tb-muted); }
.top-bar .social{ display: flex; align-items: center; gap: .4rem; }
.top-bar .social-link{
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: .5rem; outline: none; color: var(--tb-text);
  transition: background-color .15s ease, transform .15s ease;
}
.top-bar .social-link:hover{ background: var(--tb-hover); transform: translateY(-1px); }
.top-bar .social-link:focus-visible{ outline: 3px solid var(--tb-focus); outline-offset: 2px; }
.top-bar .social-link i{ font-size: 1.05rem; }
.top-bar .social-link:hover i{ opacity: 1; }

/* Responsivo Top Bar */
@media (min-width: 768px){
  .top-bar{ padding: .95rem 0; }
  .top-bar .contact{ font-size: 1.125rem; }
  .top-bar .social-link{ width: 2.5rem; height: 2.5rem; }
  .top-bar .social-link i{ font-size: 1.1rem; }
}
@media (max-width: 575.98px){
  .top-bar .container{ flex-wrap: wrap; }
  .top-bar .contact{ width: 100%; }
  .top-bar .social{ width: 100%; justify-content: flex-start; }
  .top-bar .vr{ display: none !important; }
}

/* Preferencias de usuario y alto contraste */
@media (prefers-reduced-motion: reduce){
  .top-bar *{ transition: none !important; }
}
@media (forced-colors: active){
  .top-bar, .top-bar a, .top-bar .social-link{ forced-color-adjust: none; }
  .top-bar{ background: CanvasText; color: Canvas; }
  .top-bar .social-link{ outline: 1px solid Canvas; }
}

/* Variante clara */
.top-bar.bg-light{
  background: #ffffff; color: #111;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.top-bar.bg-light .contact a,
.top-bar.bg-light .social-link{ color: #111; }
.top-bar.bg-light .social-link:hover{ background: rgba(0,0,0,.06); }
.top-bar.bg-light .mx-2{ color: rgba(0,0,0,.55); }

/* Asegura 16:9, recorte uniforme y responsivo */
.aportacion-img{
  display: block;
  width: 100% !important;     /* ignora width del atributo */
  height: auto !important;    /* el alto lo calcula por la relación */
  aspect-ratio: 16 / 9;       /* como tu imagen (1365×768 ≈ 16:9) */
  object-fit: cover;          /* llena el cuadro recortando sin deformar */
}

/* (opcional) si quieres menos espacio entre columnas/filas */
.row-tight { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }