/* ==========================================================================
   ConissHub · estilos.css
   Hoja de estilos compartida por las tres paginas (index, calendario, preguntas).
   NO necesitas editar este archivo para publicar eventos.
   ========================================================================== */

:root{
  --tinta:#16212e; --tinta-suave:#4f5d68; --tinta-tenue:#5f6d78;
  --linea:#dbe1e6; --linea-fuerte:#c3ccd3; --fondo:#eef1f3; --panel:#ffffff;
  --acento:#1b5a8c; --acento-hover:#123f63; --ok:#1e7d46; --alerta:#a33421;
  --tipo-curso:#6d28d9; --tipo-congreso:#c2410c; --tipo-webinar:#0f766e;
  --serif:"Source Serif 4", Georgia, serif;
  --sans:"Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Alto de la barra superior. Los bloques "pegajosos" (filtros) se apoyan en
     este valor, asi que si cambia el alto del encabezado no hay que ajustar
     nada mas a mano. */
  --alto-header:65px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--fondo); color:var(--tinta); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-tap-highlight-color:rgba(27,90,140,.12)}
/* Cuando hay una ventana de detalle abierta, la pagina de atras no se mueve. */
body.modal-abierto{overflow:hidden}
a{color:var(--acento); text-decoration:none}
a:hover{color:var(--acento-hover); text-decoration:underline}
img{display:block; max-width:100%}
.contenedor{max-width:1180px; margin:0 auto; padding:0 24px}

/* ---- Encabezado / navegacion ---- */
header.top{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--linea)}
.barra{display:flex; align-items:center; justify-content:space-between; padding:16px 0}
.marca{font-family:var(--serif); font-weight:700; font-size:21px; color:var(--tinta); display:flex; align-items:center; gap:8px}
.marca:hover{text-decoration:none}
.marca-logo{height:36px; width:auto; display:block}
.marca span{font-family:var(--sans); font-weight:600; font-size:11px; color:var(--tinta-tenue); letter-spacing:.1em; text-transform:uppercase}
nav.principal{display:flex; gap:26px}
nav.principal a{color:var(--tinta-suave); font-size:14px; font-weight:600}
nav.principal a:hover{color:var(--acento)}
nav.principal a.actual{color:var(--acento); border-bottom:2px solid var(--acento); padding-bottom:2px}
@media(max-width:720px){ nav.principal{gap:16px} nav.principal a{font-size:13px} }

/* ---- Hero ---- */
.hero{padding:56px 0 40px; border-bottom:1px solid var(--linea); background:var(--panel)}
.hero .kick{font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--acento)}
.hero h1{font-family:var(--serif); font-size:44px; font-weight:700; line-height:1.15; margin:12px 0 16px; max-width:820px}
.hero p.lead{font-size:17px; color:var(--tinta-suave); max-width:640px; margin:0 0 26px}
.hero-stats{display:flex; gap:28px; flex-wrap:wrap; align-items:center}
.stat{display:flex; flex-direction:column; gap:2px}
.stat b{font-family:var(--serif); font-size:32px; font-weight:700; color:var(--acento); line-height:1}
.stat span{font-size:12.5px; color:var(--tinta-tenue); font-weight:600; text-transform:uppercase; letter-spacing:.06em}
.nota-pos{margin-top:20px; font-size:13px; color:var(--tinta-tenue); font-weight:600; letter-spacing:.02em}
@media(max-width:720px){ .hero h1{font-size:32px} }

/* ---- Filtros (solo agenda) ---- */
.filtros{background:var(--panel); border-bottom:1px solid var(--linea); position:sticky; top:var(--alto-header); z-index:40; padding:16px 0}
.filtros .fila{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.buscador{flex:1; min-width:220px; position:relative}
.buscador input{width:100%; font:inherit; font-size:14.5px; padding:10px 14px; border:1px solid var(--linea-fuerte); border-radius:3px; background:#fff; color:var(--tinta)}
.buscador input:focus{outline:none; border-color:var(--acento); box-shadow:inset 0 0 0 1px var(--acento)}
.pildoras{display:flex; gap:8px; flex-wrap:wrap}
.pildora{font:inherit; font-size:13px; font-weight:600; padding:8px 14px; border-radius:20px; border:1px solid var(--linea-fuerte); background:#fff; color:var(--tinta-suave); cursor:pointer}
.pildora.activa{background:var(--tinta); color:#fff; border-color:var(--tinta)}
select#especialidad{font:inherit; font-size:13.5px; padding:9px 12px; border:1px solid var(--linea-fuerte); border-radius:3px; background:#fff; color:var(--tinta)}

/* ---- Zonas ---- */
section.zona{padding:44px 0}
h2.titulo-zona{font-family:var(--serif); font-size:30px; font-weight:700; margin:0 0 6px}
p.sub-zona{color:var(--tinta-suave); font-size:14.5px; margin:0 0 26px}

/* ---- Tarjetas de evento (agenda) ---- */
.grid-eventos{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:20px}
.tarjeta{background:var(--panel); border:1px solid var(--linea); border-radius:4px; overflow:hidden; display:flex; flex-direction:column; cursor:pointer}
.flyer{aspect-ratio:4/5; overflow:hidden; background:var(--fondo); border-bottom:1px solid var(--linea)}
.flyer img{width:100%; height:100%; object-fit:cover}
.cuerpo{padding:16px 20px 18px; display:flex; flex-direction:column; gap:8px; flex:1}
.fila-top{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.kicker{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.09em}
.fecha-dia{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-suave); white-space:nowrap}
.tarjeta h3{font-family:var(--serif); font-size:18px; margin:2px 0 4px; line-height:1.28; font-weight:700}
.meta-lista{display:flex; flex-direction:column; gap:5px; margin:0}
.meta-fila{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--tinta-suave)}
.meta-fila .ic{flex-shrink:0; color:var(--tinta-tenue)}
.pie{margin-top:auto; padding-top:12px; border-top:1px solid var(--linea)}
.ver-mas{font-size:13px; font-weight:700}
.vacio{text-align:center; padding:60px 20px; color:var(--tinta-tenue); font-size:14.5px}

/* ---- Modal de detalle (agenda y calendario) ---- */
.modal-fondo{display:none; position:fixed; inset:0; background:rgba(22,33,46,.6); z-index:100; padding:24px 16px; overflow-y:auto}
.modal-fondo.abierto{display:flex}
.modal{background:var(--panel); border-radius:6px; max-width:1280px; width:100%; margin:auto; display:grid; grid-template-columns:440px 1fr; overflow:hidden; align-items:start}
@media(max-width:760px){ .modal{grid-template-columns:1fr} }
.modal-flyer{background:var(--fondo); overflow:hidden}
.modal-flyer img{width:100%; height:auto; display:block}
.modal-cuerpo{padding:32px 40px; position:relative; display:flex; flex-direction:column; overflow-y:auto}
.modal-cerrar{position:absolute; top:20px; right:22px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid var(--linea-fuerte); border-radius:4px; background:none; font-size:20px; line-height:1; color:var(--tinta-suave); cursor:pointer}
.modal-kicker{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.1em}
.modal-cuerpo h3{font-family:var(--serif); font-size:28px; margin:10px 40px 22px 0; font-weight:700; line-height:1.28}
.modal-meta-lista{display:flex; flex-direction:column}
.modal-meta-fila{display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--tinta); padding:13px 0; border-bottom:1px solid var(--linea)}
.modal-meta-fila .ic{margin-top:2px; color:var(--tinta-tenue); flex-shrink:0}
.modal-desc{font-size:14.5px; color:var(--tinta-suave); line-height:1.65; margin:22px 0 0}
.modal-valores-tit{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--tinta-tenue); margin:22px 0 6px}
.modal-valores{font-size:14.5px; font-weight:600; color:var(--tinta); margin:0; padding-bottom:14px; border-bottom:1px solid var(--linea)}
.modal-cuerpo a.btn-p{display:inline-flex; align-items:center; gap:8px; background:var(--acento); color:#fff; font-weight:700; font-size:14.5px; padding:13px 22px; border-radius:3px; margin-top:22px; width:fit-content}
.modal-cuerpo a.btn-p:hover{background:var(--acento-hover); color:#fff; text-decoration:none}
.modal-nota{font-size:13px; color:var(--tinta-tenue); line-height:1.55; margin:12px 0 0}
.modal-nota a{font-weight:700}

/* ---- Leyenda de tipos (calendario) ---- */
.cal-leyenda{display:flex; gap:18px; flex-wrap:wrap; font-size:14px; color:var(--tinta-suave); margin-bottom:22px}
.cal-leyenda span{display:inline-flex; align-items:center; gap:6px}
.cal-leyenda i{width:9px; height:9px; border-radius:50%; display:inline-block}
.cal-filtros{margin-bottom:20px}

/* ==========================================================================
   CALENDARIO MENSUAL INTERACTIVO
   ========================================================================== */
.cal-cabecera{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px}
.cal-mes-label{font-family:var(--serif); font-size:24px; font-weight:700; text-transform:capitalize; min-width:230px; text-align:center}
.cal-nav{display:flex; gap:8px}
.cal-nav-btn{width:44px; height:36px; display:flex; align-items:center; justify-content:center; border:none; background:#eef5fa; border-radius:999px; cursor:pointer; color:var(--acento); font-size:16px; line-height:1}
.cal-nav-btn:hover{background:#dcebf5}
.cal-hoy-btn{font:inherit; font-size:12.5px; font-weight:700; padding:0 16px; height:36px; border:none; background:#eef5fa; border-radius:999px; cursor:pointer; color:var(--acento)}
.cal-hoy-btn:hover{background:#dcebf5}

.cal-grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; background:transparent; border:none; padding:0}
.cal-diasem{text-align:center; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-tenue); padding:4px 0 8px}
.cal-dia{min-height:104px; border:1px solid #e2e8f0; border-radius:10px; padding:8px; display:flex; flex-direction:column; gap:6px; background:#fff}
.cal-dia.fuera{background:transparent; border-color:transparent}
/* fin de semana con tinte suave (col 6 y 7) */
.cal-dia:nth-child(7n+6):not(.fuera), .cal-dia:nth-child(7n+7):not(.fuera){background:#f2f5f8}
.cal-dia-num{height:22px; display:flex; align-items:center; font-size:13px; font-weight:700; color:var(--tinta-suave)}
.cal-dia.hoy{border-color:var(--acento); box-shadow:0 0 0 1px var(--acento)}
.cal-dia.hoy .cal-dia-num{width:22px; justify-content:center; border-radius:50%; background:var(--acento); color:#fff; font-size:12px}
.cal-dia.con-eventos{cursor:pointer}
.cal-dia.con-eventos:hover{border-color:var(--acento); box-shadow:0 0 0 1px var(--acento)}
.cal-dia.sel{border-color:var(--acento); box-shadow:0 0 0 2px var(--acento); background:#eef5fa !important}
.cal-eventos-mini{display:flex; flex-direction:column; gap:4px; overflow:hidden; min-width:0}
.cal-mini{display:block; font-size:10.5px; font-weight:700; line-height:1.3; padding:3px 8px; border-radius:999px; overflow:hidden; min-width:0; width:100%; white-space:nowrap; text-overflow:ellipsis; background:var(--fondo); color:var(--tinta-suave)}
.cal-mini i{display:none}
.cal-mini span{white-space:nowrap}
.cal-mini.tipo-curso{background:#f3e8ff; color:var(--tipo-curso)}
.cal-mini.tipo-congreso{background:#ffedd5; color:var(--tipo-congreso)}
.cal-mini.tipo-webinar{background:#ccfbf1; color:var(--tipo-webinar)}
.cal-mas{font-size:10.5px; font-weight:700; color:var(--tinta-tenue)}

/* Detalle del dia seleccionado */
.cal-detalle{margin-top:26px}
.cal-detalle-tit{font-family:var(--serif); font-size:20px; font-weight:700; margin:0 0 4px; text-transform:capitalize}
.cal-detalle-sub{font-size:13.5px; color:var(--tinta-tenue); margin:0 0 16px}
.cal-fila{display:grid; grid-template-columns:120px 1fr; gap:18px; align-items:center; padding:14px 16px; border:1px solid var(--linea); border-radius:5px; background:var(--panel); margin-bottom:10px; cursor:pointer}
.cal-fila:hover{border-color:var(--acento)}
.cal-fila-flyer{width:120px; height:150px; border-radius:4px; overflow:hidden; background:var(--fondo); border:1px solid var(--linea); flex-shrink:0}
.cal-fila-flyer img{width:100%; height:100%; object-fit:contain}
.cal-fila-cuerpo{min-width:0}
.cal-fila-top{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:3px}
.cal-fecha{font-size:12px; font-weight:700; color:var(--tinta-suave); text-transform:uppercase; letter-spacing:.04em}
.cal-tit{font-size:14.5px; font-weight:600}
.cal-tit small{display:block; font-weight:500; color:var(--tinta-tenue); font-size:12.5px; margin-top:2px}
.cal-tipo{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap}
.cal-sin{color:var(--tinta-tenue); font-size:14px; padding:8px 0}

/* Eventos sin fecha confirmada */
.cal-porconfirmar{margin-top:34px; padding-top:26px; border-top:1px solid var(--linea)}
.cal-porconfirmar h3{font-family:var(--serif); font-size:18px; font-weight:700; margin:0 0 4px}
.cal-porconfirmar p.ayuda{font-size:13.5px; color:var(--tinta-tenue); margin:0 0 16px}

@media(max-width:720px){
  .cal-grid{gap:4px}
  .cal-dia{min-height:64px; padding:5px; border-radius:8px}
  .cal-mini{width:9px; height:9px; padding:0; border-radius:50%}
  .cal-mini span{display:none}
  .cal-mini.tipo-curso{background:var(--tipo-curso)}
  .cal-mini.tipo-congreso{background:var(--tipo-congreso)}
  .cal-mini.tipo-webinar{background:var(--tipo-webinar)}
  .cal-eventos-mini{flex-direction:row; flex-wrap:wrap; gap:4px}
  .cal-mes-label{font-size:19px; min-width:auto}
  .cal-fila{grid-template-columns:88px 1fr; gap:14px}
  .cal-fila-flyer{width:88px; height:110px}
}

/* ---- Aviso "Falta un evento" (final de la Agenda) ---- */
.aviso-falta{margin-top:40px; background:var(--panel); border:1px solid var(--linea); border-radius:4px; padding:28px 32px; max-width:560px}
.aviso-falta h3{font-family:var(--serif); font-size:20px; font-weight:700; margin:0 0 8px}
.aviso-falta p{font-size:14.5px; color:var(--tinta-suave); line-height:1.6; margin:0 0 18px}
.aviso-falta-tit{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--tinta-tenue); margin:0 0 6px !important}
.aviso-falta-correo{font-size:17px; font-weight:700; margin:0 !important; word-break:break-all}
.aviso-falta-correo a{color:var(--acento)}

/* ---- FAQ y contacto (pagina preguntas) ---- */
.faq-item{background:var(--panel); border:1px solid var(--linea); border-radius:4px; padding:20px 24px; margin-bottom:14px}
.faq-item h4{font-family:var(--serif); font-size:16.5px; margin:0 0 8px; font-weight:700}
.faq-item p{margin:0 0 8px; font-size:14.5px; color:var(--tinta-suave)}
.faq-item p:last-child{margin-bottom:0}
.bloque-contacto{margin-top:40px; padding-top:34px; border-top:1px solid var(--linea)}
.contacto-caja{background:var(--panel); border:1px solid var(--linea); border-radius:4px; padding:32px; max-width:560px}
.contacto-caja p{font-size:14.5px; color:var(--tinta-suave); line-height:1.6; margin:0 0 20px}
.contacto-correo-tit{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--tinta-tenue); margin:0 0 6px}
.contacto-correo{font-family:var(--sans); font-size:17px; font-weight:700; color:var(--acento); margin:0; user-select:all; -webkit-user-select:all; word-break:break-all}

/* ---- Pie ---- */
footer{border-top:1px solid var(--linea); padding:28px 0; font-size:13px; color:var(--tinta-tenue); background:var(--panel)}
/* Pie: en pantalla ancha el texto va a la izquierda y el Instagram a la
   derecha; en celular quedan uno debajo del otro (son dos parrafos). */
.pie-fila{display:flex; align-items:center; justify-content:space-between; gap:10px 24px; flex-wrap:wrap}
.pie-texto{margin:0}
.pie-redes{margin:0}
.pie-ig{display:inline-flex; align-items:center; gap:7px; color:var(--tinta-suave); font-weight:600; white-space:nowrap}
.pie-ig:hover{color:var(--acento); text-decoration:none}
.pie-ig svg{width:17px; height:17px; flex:none}

/* ==========================================================================
   PIEZAS QUE SOLO APARECEN EN CELULAR
   En pantalla grande estan ocultas o se comportan como antes. No hace falta
   tocar nada de aqui para publicar eventos.
   ========================================================================== */

/* En escritorio, el envoltorio del panel de filtros es "invisible": sus hijos
   (pildoras y selector) se ordenan en la misma fila de siempre. */
.filtros-avanzados, .sheet-cuerpo{display:contents}
.sheet-cab, .sheet-pie, .btn-filtrar, .sheet-fondo, .tabbar{display:none}

/* ==========================================================================
   CELULAR  (hasta 720 px de ancho)
   ========================================================================== */
@media(max-width:720px){

  :root{--alto-header:49px}
  .contenedor{padding:0 16px}
  /* Espacio al final para que la barra inferior de navegacion no tape nada. */
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}

  /* ---- Barra superior: solo el logo, compacta ---- */
  .barra{padding:9px 0}
  /* Un poco de aire a la izquierda: pegado al borde el logo se ve cortado. */
  .marca{padding-left:6px}
  .marca-logo{height:30px}
  .marca span{display:none}          /* el bajada de marca se ve en la portada */
  nav.principal{display:none}        /* la navegacion pasa a la barra inferior */

  /* ---- Barra inferior de navegacion (3 secciones) ---- */
  .tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:rgba(255,255,255,.97); backdrop-filter:blur(8px);
    border-top:1px solid var(--linea);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .tabbar a{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; padding:8px 4px 9px; min-height:56px;
    font-size:10.5px; font-weight:700; letter-spacing:.02em;
    color:var(--tinta-tenue); text-decoration:none;
  }
  .tabbar a:hover{text-decoration:none}
  .tabbar a svg{width:21px; height:21px; stroke-width:1.7}
  .tabbar a.actual{color:var(--acento)}

  /* ---- Portada ---- */
  .hero{padding:30px 0 26px}
  .hero h1{font-size:26px; line-height:1.2; margin:10px 0 12px}
  .hero p.lead{font-size:15.5px; margin:0 0 18px}
  .hero .kick{font-size:10.5px; letter-spacing:.16em}
  .stat b{font-size:27px}
  .nota-pos{margin-top:14px; font-size:12.5px}

  /* ---- Fila de filtros: buscador + boton "Filtrar" ---- */
  .filtros{padding:10px 0}
  .filtros .fila{flex-wrap:nowrap; gap:8px}
  .buscador{min-width:0}
  /* 16px evita que el iPhone haga zoom al tocar el campo de busqueda. */
  .buscador input{font-size:16px; padding:11px 13px; border-radius:8px}
  .btn-filtrar{
    display:inline-flex; align-items:center; gap:7px; flex-shrink:0;
    font:inherit; font-size:14px; font-weight:700; color:var(--tinta);
    background:#fff; border:1px solid var(--linea-fuerte); border-radius:8px;
    padding:0 14px; height:44px; cursor:pointer;
  }
  .btn-filtrar svg{width:16px; height:16px; stroke-width:1.9}
  .btn-filtrar .cuenta{
    display:none; min-width:19px; height:19px; padding:0 5px; border-radius:999px;
    background:var(--acento); color:#fff; font-size:11px; line-height:19px; text-align:center;
  }
  .btn-filtrar.con-filtros{border-color:var(--acento); color:var(--acento)}
  .btn-filtrar.con-filtros .cuenta{display:inline-block}

  /* ---- Panel de filtros que sube desde abajo ---- */
  /* Mientras el panel esta abierto, toda la franja de filtros (que contiene al
     panel y al fondo gris) se pone por encima del encabezado y de la barra
     inferior. Sin esto, la barra de abajo se montaba sobre los botones del
     panel y el fondo gris bloqueaba los toques. */
  body.sheet-abierto .filtros{z-index:95}
  .sheet-fondo{
    display:block; position:fixed; inset:0; z-index:80;
    background:rgba(22,33,46,.45);
    opacity:0; pointer-events:none; transition:opacity .18s ease;
  }
  .sheet-fondo.abierto{opacity:1; pointer-events:auto}
  .filtros-avanzados{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:90;
    background:var(--panel); border-radius:16px 16px 0 0;
    box-shadow:0 -8px 32px rgba(22,33,46,.22);
    max-height:82vh; flex-direction:column;
    transform:translateY(101%); transition:transform .22s ease;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .filtros-avanzados.abierto{transform:none}
  .sheet-cab{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 18px 12px; border-bottom:1px solid var(--linea);
  }
  .sheet-cab h3{font-family:var(--serif); font-size:18px; font-weight:700; margin:0}
  .sheet-cerrar{
    width:36px; height:36px; display:flex; align-items:center; justify-content:center;
    border:none; background:var(--fondo); border-radius:50%;
    font-size:20px; line-height:1; color:var(--tinta-suave); cursor:pointer;
  }
  .sheet-cuerpo{display:block; padding:18px; overflow-y:auto; -webkit-overflow-scrolling:touch}
  .sheet-etiqueta{
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
    color:var(--tinta-tenue); margin:0 0 9px;
  }
  .sheet-cuerpo .pildoras{gap:8px; margin-bottom:22px}
  .sheet-cuerpo .pildora{font-size:14px; padding:0 16px; height:42px; display:flex; align-items:center; border-radius:999px}
  .sheet-cuerpo select#especialidad{width:100%; font-size:16px; height:46px; padding:0 12px; border-radius:8px}
  .sheet-pie{
    display:flex; gap:10px; padding:14px 18px 18px; border-top:1px solid var(--linea);
  }
  .sheet-pie button{font:inherit; font-weight:700; font-size:15px; height:48px; border-radius:8px; cursor:pointer}
  .sheet-limpiar{flex:0 0 40%; background:#fff; border:1px solid var(--linea-fuerte); color:var(--tinta-suave)}
  .sheet-aplicar{flex:1; background:var(--acento); border:none; color:#fff}

  /* ---- Agenda: tarjetas horizontales, se ven varias por pantalla ---- */
  section.zona{padding:24px 0}
  h2.titulo-zona{font-size:23px}
  p.sub-zona{font-size:13.5px; margin:0 0 16px}
  .grid-eventos{grid-template-columns:1fr; gap:10px}
  .tarjeta{flex-direction:row; align-items:stretch; border-radius:10px}
  .tarjeta .flyer{
    flex:0 0 96px; width:96px; aspect-ratio:auto; align-self:stretch;
    border-bottom:none; border-right:1px solid var(--linea);
  }
  .tarjeta .flyer img{object-fit:cover}
  .cuerpo{padding:11px 13px 12px; gap:5px; min-width:0}
  .fila-top{gap:8px}
  .kicker{font-size:10px}
  .fecha-dia{font-size:10.5px}
  .tarjeta h3{
    font-size:15.5px; line-height:1.3; margin:1px 0 2px;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  .meta-fila{font-size:12.5px; gap:6px}
  /* El texto largo (organizador, lugar) se corta con puntos suspensivos
     en vez de romper la tarjeta en varias lineas. */
  .meta-fila .txt{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  /* La tarjeta entera ya es tocable: el enlace "Ver mas" sobra en celular. */
  .pie{display:none}
  .vacio{padding:40px 16px; font-size:14px}

  /* ---- Ventana de detalle a pantalla completa ---- */
  .modal-fondo{padding:0}
  .modal{border-radius:0; min-height:100%; align-items:stretch}
  .modal-flyer{
    display:flex; align-items:center; justify-content:center;
    background:#101820; padding:0;
  }
  .modal-flyer img{width:auto; max-width:100%; max-height:46vh; object-fit:contain}
  .modal-cuerpo{padding:18px 18px 40px}
  /* El boton de cerrar queda siempre visible arriba, sin tener que subir. */
  .modal-cerrar{
    position:fixed; top:10px; right:12px; z-index:5;
    width:40px; height:40px; border:none; border-radius:50%;
    background:rgba(255,255,255,.94); box-shadow:0 2px 10px rgba(22,33,46,.3);
    font-size:22px; color:var(--tinta);
  }
  .modal-cuerpo h3{font-size:21px; margin:8px 0 16px; line-height:1.3}
  .modal-kicker{font-size:11px}
  .modal-meta-fila{font-size:14px; padding:11px 0}
  .modal-desc{font-size:14px; margin-top:18px}
  .modal-valores{font-size:14px}
  .modal-cuerpo a.btn-p{width:100%; justify-content:center; height:50px; padding:0 18px; font-size:15px; border-radius:8px; margin-top:18px}
  .modal-nota{font-size:12.5px}

  /* ---- Calendario ---- */
  .cal-leyenda{gap:14px; font-size:13px; margin-bottom:16px}
  .cal-filtros{margin-bottom:16px}
  /* Las pildoras de tipo se deslizan de lado en vez de amontonarse. */
  .cal-filtros .pildoras{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-bottom:2px;
  }
  .cal-filtros .pildoras::-webkit-scrollbar{display:none}
  .cal-filtros .pildora{flex-shrink:0; height:40px; display:flex; align-items:center; padding:0 15px; font-size:13.5px}
  .cal-nav-btn{width:42px; height:42px; font-size:19px}
  .cal-hoy-btn{height:42px; font-size:13px}
  .cal-fila{padding:10px 12px}

  /* ---- Preguntas y contacto ---- */
  .faq-item{padding:16px 17px; border-radius:8px}
  .faq-item h4{font-size:15.5px}
  .faq-item p{font-size:14px}
  .contacto-caja{padding:20px 18px; border-radius:8px}
  .contacto-caja p{font-size:14px}
  .contacto-correo{font-size:16px}

  footer{padding:22px 0; font-size:12px}
  /* En celular el pie se apila y el Instagram queda debajo del texto. */
  .pie-fila{flex-direction:column; align-items:flex-start; gap:12px}
}

/* ---- Pantallas muy angostas (iPhone SE y similares) ---- */
@media(max-width:360px){
  .tarjeta .flyer{flex:0 0 82px; width:82px}
  .tarjeta h3{font-size:15px}
  .btn-filtrar span.texto{display:none}
  .btn-filtrar{padding:0 12px}
}

/* Quien prefiere menos movimiento no ve las transiciones del panel. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .filtros-avanzados, .sheet-fondo{transition:none}
}