/* ==========================================================
   LA GRUTA — styles.css

   Índice
   1. Variables y reset
   2. Base y utilidades
   3. Cabecera y navegación
   4. Portada (hero) y eventos destacados
   5. Secciones y noticias
   6. Agenda
   7. Recursos
   8. Comunidad (somos.php)
   9. Pie de página
   10. Modales (imagen y evento)
   11. Varios
   ========================================================== */


/* ==========================================================
   1. VARIABLES Y RESET
   ========================================================== */
:root{
  --bg:#0b0b0c;
  --bg-raised:#141416;
  --bg-card:#18181b;
  --line:#2a2a2d;
  --line-soft:#232326;
  --ink:#f5f3ee;
  --ink-dim:#bfbab0;
  --ink-faint:#928d81;
  --gold:#e0a530;
  --gold-dim:#a67824;
  --wine:#5b2430;
  --rojo-grafiti:#C62820;
  --rojo-marca:#7a1406
}
*{box-sizing:border-box; margin:0; padding:0;}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth;}
}


/* ==========================================================
   2. BASE Y UTILIDADES
   ========================================================== */
section[id], #noticias, #agenda, #recursos, #comunidad{scroll-margin-top:88px;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Roboto', sans-serif;
  font-size:17.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'Courier Prime', monospace;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
.section-top{padding-top:56px;}
.msg-vacio{color:#ffffff;}

/* textura de grano */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:5; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ==========================================================
   3. CABECERA Y NAVEGACIÓN
   ========================================================== */
header{
  position:sticky; top:0; z-index:40;
  background:rgba(11,11,12,.88); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft);
}
nav{display:flex; align-items:center; justify-content:space-between; padding:18px 0; gap:16px;}
.logo{font-weight:700; font-size:18px; letter-spacing:.06em;}
.logo span{color:var(--gold);}

/* enlaces */
.navlinks{
  display:flex; gap:36px; font-size:16px; letter-spacing:.03em; color:#ffffff;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; white-space:nowrap; flex:1;
}
.navlinks::-webkit-scrollbar{display:none;}
.navlinks a{flex:0 0 auto;}
.navlinks a:hover{color:var(--gold);}
.navlinks a.cta:not(.cta-primary){margin-left:auto;}
.navlinks .cta{
  border:1px solid var(--gold-dim); color:var(--gold); padding:9px 16px; border-radius:2px;
}
.navlinks .cta-primary{
  background:var(--gold); color:#1a1508; font-weight:700; border-color:var(--gold);
}

/* redes sociales */
.nav-social{display:flex; gap:16px; align-items:center; flex:0 0 auto; margin-left:60px;}
.nav-social a{
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:50%; color:var(--ink-dim);
  transition:color .15s, border-color .15s;
}
.nav-social a:hover{color:var(--gold); border-color:var(--gold-dim);}
.nav-social svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6;}
.nav-social .fl{font-family:'Courier Prime',monospace; font-size:13px; font-weight:700; letter-spacing:.02em;}
.nav-social img{width:36px; height:36px; display:block;}

@media (max-width:860px){
  .nav-social a{width:34px; height:34px;}
  .nav-social svg{width:17px; height:17px;}
}

/* menú móvil: botón hamburguesa + panel desplegable lateral */
.nav-toggle{display:none;}
.nav-mobile-extra{display:none;}

.nav-panel{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex:1; min-width:0;
}

@media (max-width:700px){
  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    width:40px; height:40px; background:transparent; border:1px solid var(--line);
    border-radius:2px; cursor:pointer; padding:0; flex:0 0 auto; z-index:70;
  }
  .nav-toggle span{display:block; width:20px; height:2px; background:var(--ink);}

  nav{justify-content:space-between;}

  .nav-mobile-extra{display:flex; align-items:center; gap:8px; flex:0 0 auto;}
  .cta-mini{
    font-family:'Courier Prime', monospace; font-size:12px; letter-spacing:.02em;
    border:1px solid var(--gold-dim); color:var(--gold); padding:7px 10px; border-radius:2px;
    white-space:nowrap;
  }
  .cta-mini-primary{background:var(--gold); color:#1a1508; font-weight:700; border-color:var(--gold);}
  .nav-social-mini{display:flex; gap:6px; align-items:center;}
  .nav-social-mini img{width:26px; height:26px; display:block;}

  .nav-panel{
    position:fixed; top:0; left:0; height:100vh; width:80vw; max-width:300px;
    background:var(--bg-raised); border-right:1px solid var(--line-soft);
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    gap:0; padding:80px 24px 32px; transform:translateX(-100%);
    transition:transform .25s ease; z-index:60; overflow-y:auto;
  }
  .nav-panel.abierto{transform:translateX(0);}

  .navlinks{
    flex-direction:column; align-items:flex-start; gap:2px; width:100%;
    overflow-x:visible; white-space:normal;
  }
  .navlinks a{padding:13px 4px; width:100%; border-bottom:1px solid var(--line-soft);}
  .navlinks .cta, .navlinks .cta-primary{
    display:inline-block; margin-top:14px; text-align:center; border-bottom:none;
  }

  .nav-social{margin-top:26px; flex:0 0 auto;}

  .nav-overlay{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:50;
  }
  .nav-overlay.visible{display:block;}

  body.menu-abierto{overflow:hidden;}

  .oculta-movil{display:none !important;}
}


/* ==========================================================
   4. PORTADA (HERO) Y EVENTOS DESTACADOS
   ========================================================== */
.hero{
  padding:40px 0 6px; position:relative; border-bottom:1px solid var(--line-soft);
  background:
    linear-gradient(160deg, rgba(41,16,16,.55), rgba(11,8,8,.85) 60%, var(--bg) 96%),
    url('img/hero.jpg') center 30%/cover no-repeat;
  background-blend-mode:multiply, normal;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:url('img/hero.jpg') center 30%/cover no-repeat;
  filter:grayscale(1) contrast(1.15) brightness(.75);
  mix-blend-mode:luminosity;
  opacity:.9;
  z-index:0;
}
.hero > .wrap{position:relative; z-index:1;}
.hero-tag{
  font-family:'Courier Prime',monospace; font-size:10.5px; color:var(--ink-dim);
  letter-spacing:.06em; margin-top:16px;
}
.hero-agenda-link{margin-bottom:10px; text-align:right;}
.hero-agenda-link a{
  font-family:'Courier Prime',monospace; font-size:14px; color:var(--gold);
  letter-spacing:.03em;
}
.hero-agenda-link a:hover{text-decoration:underline;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Courier Prime', monospace; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:#ffffff; margin-bottom:22px;
}
.eyebrow::before{content:''; width:16px; height:2px; background:var(--gold); display:inline-block;}
h1{
  font-size:clamp(34px,5vw,58px); font-weight:700; letter-spacing:-.01em; max-width:780px; margin-bottom:22px;
}
.hero-title{
  font-family:'Permanent Marker', cursive;
  font-size:clamp(30px,4vw,46px); font-weight:400; letter-spacing:.01em; max-width:780px;
  margin-top:190px; margin-bottom:18px; color:var(--rojo-marca); text-shadow:0 2px 6px rgba(0,0,0,.6);
}
.hero p.lead{color:var(--ink); font-size:16px; max-width:540px; margin-bottom:0; text-shadow:0 1px 3px rgba(0,0,0,.5);}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}

/* botones */
.btn{
  padding:13px 22px; border-radius:2px; font-size:13px; letter-spacing:.03em; cursor:pointer; border:1px solid transparent;
}
.btn-primary{background:var(--gold); color:#1a1508; font-weight:700;}
.btn-ghost{border-color:var(--line); color:var(--ink);}

@media (max-width:768px){
  .hero, .hero::before{background-position:15% 34%;}
  .hero-title{margin-top:150px;}
}

/* franja de eventos destacados */
.featured-row{margin-top:32px; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; align-items:stretch;}
.featured{
  position:relative; border:1px solid var(--line); border-left:3px solid var(--gold); min-height:104px;
  background:var(--bg-raised); padding:30px 20px 30px 96px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.fdate{
  position:absolute; left:20px; top:30px; width:56px;
  font-family:'Courier Prime',monospace; text-align:center;
}
.fdate .d{font-size:28px; font-weight:700; color:var(--rojo-grafiti); line-height:1;}
.fdate .m{font-size:18px; font-weight:400; letter-spacing:.1em; color:var(--rojo-grafiti); text-transform:uppercase;}
.featured .ftitle{font-weight:700; font-size:18px; margin-bottom:5px; line-height:1.3; color:#ffffff;}
.featured .fmeta{font-size:15px; color:#ffffff; font-family:'Courier Prime',monospace; line-height:1.4;}
.featured .farrow{align-self:flex-end; color:var(--gold); font-size:14px; font-family:'Courier Prime',monospace;}

@media (max-width:700px){
  .featured-row{grid-template-columns:1fr;}
}


/* ==========================================================
   5. SECCIONES Y NOTICIAS
   ========================================================== */
section{padding:20px 0 44px; border-bottom:1px solid var(--line-soft);}
#noticias{padding-top:28px;}
.sechead{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:4px; gap:20px; flex-wrap:wrap;}
.sechead h2{font-size:26px; font-weight:700; margin:0; line-height:1.15;}
.sechead .seelink{font-size:14px; color:var(--gold); font-family:'Courier Prime',monospace;}

/* tarjetas de noticias (portada) */
.news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:2px; overflow:hidden;
  display:flex; flex-direction:column;
}
.card .thumb{
  height:88px; background:linear-gradient(135deg, #201c14, #131315);
  border-bottom:1px solid var(--line); position:relative;
}
.card .thumb::after{
  content:''; position:absolute; inset:0;
  background-image:repeating-linear-gradient(90deg, rgba(201,162,74,.08) 0 1px, transparent 1px 22px);
}
.card .body{padding:20px 20px 22px; flex:1; display:flex; flex-direction:column;}
.tag{
  font-family:'Courier Prime',monospace; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:#ffffff; margin-bottom:10px;
}
.card h3{font-size:19px; font-weight:700; margin-bottom:10px; line-height:1.35;}
.card p{
  font-size:16px; color:#ffffff; flex:1; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
/* resumen de noticia en la portada: sin recorte por líneas, termina en un enlace a la noticia completa */
.card p.noticia-resumen{display:block; -webkit-line-clamp:unset; overflow:visible; white-space:pre-line;}
.card .noticia-mas{color:var(--gold); white-space:nowrap; font-weight:700;}
.card .noticia-mas:hover{text-decoration:underline;}
.card .meta{margin-top:16px; font-size:13.5px; color:var(--ink-dim); font-family:'Courier Prime',monospace;}
.leer-mas{
  margin-top:10px; font-family:'Courier Prime',monospace; font-size:14px; color:var(--gold);
  display:block; text-align:right;
}
.leer-mas:hover{text-decoration:underline;}

@media (max-width:860px){
  .news-grid{grid-template-columns:1fr;}
}

/* listado de noticias en formato banner editorial (noticias.php) */
.noticias-list{display:flex; flex-direction:column; gap:18px;}
.noticia-banner{
  display:flex; align-items:stretch; background:var(--bg-card);
  border:1px solid var(--line); border-radius:4px; overflow:hidden;
  scroll-margin-top:96px;
}
.noticia-banner:target{border-color:var(--gold-dim);}
.noticia-banner .nb-fecha-panel{
  flex:0 0 130px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--bg-raised); border-right:3px solid #ffffff;
  font-family:'Courier Prime',monospace; text-align:center; padding:20px 10px;
}
.noticia-banner .nb-dia{font-size:42px; font-weight:700; color:#ffffff; line-height:1;}
.noticia-banner .nb-mes{font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); margin-top:6px;}
.noticia-banner .nb-anio{font-size:11px; color:var(--ink-faint); margin-top:2px;}
.noticia-banner .nb-content{flex:1; padding:26px 32px; min-width:0;}
.noticia-banner h3{font-size:22px; font-weight:700; margin-bottom:8px; line-height:1.3;}
.noticia-banner p{font-size:15px; color:#ffffff; line-height:1.55; max-width:760px; white-space:pre-line; overflow-wrap:anywhere;}

@media (max-width:700px){
  .noticia-banner{flex-direction:column;}
  .noticia-banner .nb-fecha-panel{
    flex-direction:row; justify-content:flex-start; gap:10px; padding:14px 20px;
    border-right:none; border-bottom:3px solid #ffffff;
  }
  .noticia-banner .nb-dia{font-size:26px;}
  .noticia-banner .nb-mes, .noticia-banner .nb-anio{margin-top:0;}
  .noticia-banner .nb-content{padding:20px;}
  .noticia-banner h3{font-size:19px;}
}


/* ==========================================================
   6. AGENDA
   ========================================================== */
.agenda-list{display:flex; flex-direction:column; gap:14px;}

/* formato fila (antiguo) */
.agenda-row{
  display:grid; grid-template-columns:90px 1fr auto; align-items:center; gap:20px;
  padding:22px 4px; border-bottom:1px solid var(--line-soft);
}
.agenda-row .adate{font-family:'Courier Prime',monospace; color:#ffffff; font-size:18px;}
.agenda-row .atitle{font-weight:700; font-size:19px; margin-bottom:4px;}
.agenda-row .aloc{font-size:15.5px; color:#ffffff;}
.agenda-row .aarrow{color:#ffffff; font-size:18px;}
.pill{
  font-family:'Courier Prime',monospace; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--line); color:#ffffff; padding:6px 12px; border-radius:20px; white-space:nowrap;
}

@media (max-width:860px){
  .agenda-row{grid-template-columns:56px 1fr; row-gap:8px;}
  .agenda-row .aarrow{display:none;}
}

/* formato banner, mismo patrón que .noticia-banner */
.agenda-banner{
  display:flex; align-items:stretch; background:var(--bg-card);
  border:1px solid var(--line); border-radius:4px; overflow:hidden;
  transition:border-color .15s, background .15s;
}
.agenda-banner:hover{border-color:var(--gold-dim); background:var(--bg-raised);}
.agenda-banner .ab-fecha-panel{
  flex:0 0 110px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--bg-raised); border-right:3px solid #ffffff;
  font-family:'Courier Prime',monospace; text-align:center; padding:16px 10px;
}
.agenda-banner .ab-dia{font-size:34px; font-weight:700; color:#ffffff; line-height:1;}
.agenda-banner .ab-mes{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); margin-top:4px;}
.agenda-banner .ab-anio{font-size:10.5px; color:var(--ink-faint); margin-top:2px;}
.agenda-banner .ab-content{flex:1; padding:18px 24px; min-width:0; display:flex; flex-direction:column; justify-content:center;}
.agenda-banner .ab-titulo{font-weight:700; font-size:18px; margin-bottom:4px;}
.agenda-banner .ab-meta{font-size:14px; color:#ffffff; font-family:'Courier Prime',monospace;}
.agenda-banner .ab-cta{
  flex:0 0 auto; display:flex; align-items:center; padding:0 24px;
  font-family:'Courier Prime',monospace; font-size:13px; color:var(--gold); white-space:nowrap;
}
.agenda-separador{
  margin:32px 0 6px; padding-bottom:8px; border-bottom:1px solid var(--line);
  font-family:'Courier Prime',monospace; font-size:13px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-dim);
}
.agenda-banner.sin-enlace{cursor:default;}
.agenda-banner.sin-enlace:hover{border-color:var(--line); background:var(--bg-card);}
.agenda-banner .ab-info{
  flex:0 0 260px; display:flex; align-items:center; padding:16px 24px;
  font-size:13.5px; color:var(--ink-dim); line-height:1.4; border-left:1px solid var(--line);
}

@media (max-width:700px){
  .agenda-banner{flex-direction:column;}
  .agenda-banner .ab-fecha-panel{
    flex-direction:row; justify-content:flex-start; gap:8px; padding:10px 16px;
    border-right:none; border-bottom:3px solid #ffffff;
  }
  .agenda-banner .ab-dia{font-size:22px;}
  .agenda-banner .ab-mes, .agenda-banner .ab-anio{margin-top:0;}
  .agenda-banner .ab-content{padding:14px 16px;}
  .agenda-banner .ab-cta{padding:0 16px 16px;}
  .agenda-banner .ab-info{padding:12px 16px 16px; border-left:none; border-top:1px solid var(--line);}
}


/* ==========================================================
   7. RECURSOS
   ========================================================== */
.res-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.res-card{
  border:1px solid var(--line); padding:24px 20px; background:var(--bg-raised);
}
.res-num{font-family:'Courier Prime',monospace; color:var(--gold-dim); font-size:12px; margin-bottom:16px;}
.res-card h3{font-size:15px; margin-bottom:8px;}
.res-card p{font-size:14px; color:#ffffff;}

@media (max-width:860px){
  .res-grid{grid-template-columns:1fr 1fr;}
}


/* ==========================================================
   8. COMUNIDAD (somos.php)

   Bloque 1: texto a la izquierda + foto a la derecha   -> .community
   Bloque 2: foto a la izquierda + texto a la derecha   -> .community.community--img-left
   ========================================================== */

/* --- común a los dos bloques --- */
.community{display:grid; grid-template-columns:3fr 2fr; gap:40px; align-items:center;}
.community + .community{margin-top:56px;}
.community h2{font-size:26px; margin-bottom:18px;}
.community p{color:#ffffff; font-size:17px; margin-bottom:16px; max-width:480px;}
.community .links{display:flex; gap:14px; margin-top:22px; flex-wrap:wrap;}
.community img{width:100%; height:auto; display:block;}
.community-text{order:1;}
.community-media{order:2;}

/* --- bloque 1: foto horizontal a la derecha --- */
.community:not(.community--img-left){gap:16px;}
.community:not(.community--img-left) p{max-width:560px;}
@media (min-width:861px){
  /* columnas al 50 %: cambia 1fr 1fr por 4fr 5fr para una foto mayor, o 5fr 4fr para una menor */
  .community:not(.community--img-left){grid-template-columns:1fr 1fr;}
}

/* --- bloque 2: foto a la izquierda (columnas en espejo respecto a 3fr 2fr) --- */
.community.community--img-left{grid-template-columns:2fr 3fr;}
.community--img-left .community-text{order:2;}
.community--img-left .community-media{order:1;}
/* la foto se muestra a su tamaño real (sin estirarse), centrada en su columna */
.community--img-left .community-media img{width:auto; max-width:100%; margin:0 auto;}

/* --- móvil y tablet: una sola columna en los dos bloques --- */
@media (max-width:860px){
  .community, .community.community--img-left{grid-template-columns:1fr;}
}

/* --- compromisos del espacio --- */
.norms-box{
  width:500px; max-width:100%; box-sizing:border-box; margin:0 auto;
  border:1px solid var(--line); background:var(--bg-card); padding:26px;
}
.norms-box .mono{color:#ffffff; font-size:18px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px; display:block;}
.norms-box ul{list-style:none; display:flex; flex-direction:column; gap:12px;}
.norms-box li{font-size:16px; color:#ffffff; padding-left:16px; position:relative;}
.norms-box li::before{content:'—'; position:absolute; left:0; color:var(--gold-dim);}


/* ==========================================================
   9. PIE DE PÁGINA
   ========================================================== */
footer{padding:56px 0 40px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px;}
.foot-grid h4{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:16px; font-family:'Courier Prime',monospace;}
.foot-grid a, .foot-grid p{display:block; font-size:14px; color:#ffffff; margin-bottom:10px;}
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center; padding-top:24px; border-top:1px solid var(--line-soft);
  font-size:12px; color:var(--ink-dim); font-family:'Courier Prime',monospace; flex-wrap:wrap; gap:12px;
}

@media (max-width:860px){
  .foot-grid{grid-template-columns:1fr 1fr;}
}


/* ==========================================================
   10. MODALES
   ========================================================== */

/* lightbox de imagen (noticias) */
.modal-imagen{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.88);
  z-index:9999; align-items:center; justify-content:center; cursor:zoom-out; padding:30px; box-sizing:border-box;
}
.modal-imagen.mostrar{display:flex;}
.modal-imagen img{max-width:100%; max-height:100%; border-radius:6px; box-shadow:0 8px 30px rgba(0,0,0,.5);}

/* detalle de evento */
.modal-evento{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.75);
  z-index:9999; align-items:center; justify-content:center; padding:24px; box-sizing:border-box;
}
.modal-evento.mostrar{display:flex;}
.modal-evento-content{
  position:relative; background:var(--bg-card); border:1px solid var(--line);
  max-width:440px; width:100%; padding:32px 28px 28px; border-radius:4px;
  box-shadow:0 12px 40px rgba(0,0,0,.5); cursor:auto;
}
.modal-evento-cerrar{
  position:absolute; top:12px; right:14px; background:none; border:none; color:var(--ink-dim);
  font-size:26px; line-height:1; cursor:pointer; padding:4px 8px;
}
.modal-evento-cerrar:hover{color:var(--gold);}
#me-nombre{font-size:22px; font-weight:700; margin-bottom:12px; padding-right:24px;}
.me-fecha, .me-hora, .me-ubicacion{
  font-family:'Courier Prime',monospace; font-size:13.5px; color:var(--ink-dim); margin-bottom:4px;
}
.me-descripcion{font-size:14.5px; color:var(--ink); line-height:1.5; margin:16px 0;}
.me-precios{display:flex; gap:16px; flex-wrap:wrap; font-size:14px; color:var(--gold); margin-bottom:10px;}
.me-precios span{margin-right:16px;}
.me-aforo{
  display:inline-block; font-family:'Courier Prime',monospace; font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--wine); border:1px solid var(--wine); padding:4px 10px;
  border-radius:20px; margin-bottom:16px;
}
.me-comprar{display:inline-block; margin-top:6px; text-align:center; width:100%;}
.me-info-entradas{
  font-size:14px; color:var(--ink); line-height:1.5; padding:14px 16px;
  border:1px solid var(--line); border-radius:4px; background:var(--bg-raised); margin-top:6px;
}


/* ==========================================================
   11. VARIOS
   ========================================================== */
.contenedor-img{
  width:100px;  /* ajusta al ancho que quieras */
  height:auto;
  margin-left:auto;
}
.contenedor-img img{
  width:100%;
  height:auto;
}