/* Grandes Sueños Producciones · hoja de estilo
   Los colores salen del manual de marca (diseno/grandes-suenos/README.md) y
   sus contrastes estan MEDIDOS. Ojo con uno en particular:
   el coral de marca (#E9884F) con letra blanca da 2,59 y el minimo legible es
   4,5 — por eso todo lo que lleva texto encima usa --coral-hondo (4,99). */

:root{
  --coral:        #E9884F;   /* la marca. Fondos y manchas. NUNCA texto pequeño encima */
  --coral-hondo:  #B65217;   /* botones, enlaces, texto en coral sobre claro */
  --uva:          #4A3B52;   /* texto principal y fondos oscuros */
  --uva-claro:    #6B5875;   /* texto secundario */
  --uva-hondo:    #3A2E40;   /* SOLO para texto ENCIMA del coral: el uva normal
                                se queda en 3,97 y el minimo legible es 4,5.
                                Este da 4,92. Medido, no elegido. */
  --crema:        #FFF6EE;   /* fondo de pagina */
  --blanco:       #FFFFFF;
  --borde:        #EADCCE;
  --sombra:       0 1px 2px rgba(74,59,82,.05), 0 8px 24px rgba(74,59,82,.07);
  --ancho:        1120px;
  --radio:        16px;
}

@font-face{ font-family:"Pacifico"; src:url("fuentes/pacifico.woff2") format("woff2");
            font-weight:400; font-style:normal; font-display:swap }
@font-face{ font-family:"Jost"; src:url("fuentes/jost.woff2") format("woff2");
            font-weight:100 900; font-style:normal; font-display:swap }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--crema); color:var(--uva);
  font:400 17px/1.65 "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
img,svg{ max-width:100%; height:auto }
a{ color:var(--coral-hondo) }
h1,h2,h3{ line-height:1.18; margin:0 0 .5em; font-weight:600; letter-spacing:-.01em }
p{ margin:0 0 1em }
.envoltorio{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:24px }

/* ── el foco se ve SIEMPRE: quien navega con teclado tiene que saber donde esta ── */
:focus-visible{ outline:3px solid var(--coral-hondo); outline-offset:3px; border-radius:6px }

/* ── barra ───────────────────────────────────────────────────────────── */
.barra{ position:sticky; top:0; z-index:20; background:rgba(255,246,238,.92);
        backdrop-filter:blur(10px); border-bottom:1px solid var(--borde) }
.barra .envoltorio{ display:flex; align-items:center; gap:20px; min-height:74px }
.barra img{ height:44px; width:auto }
.barra nav{ margin-left:auto; display:flex; gap:26px; align-items:center }
.barra nav a{ color:var(--uva); text-decoration:none; font-weight:500; font-size:16px }
.barra nav a:hover{ color:var(--coral-hondo) }
@media (max-width:760px){ .barra nav a:not(.boton){ display:none } .barra img{ height:38px } }

/* ── botones ─────────────────────────────────────────────────────────── */
.boton{ display:inline-flex; align-items:center; gap:9px; padding:13px 24px; border-radius:999px;
        background:var(--coral-hondo); color:#fff !important; text-decoration:none;
        font-weight:600; font-size:16px; border:0; cursor:pointer;
        transition:transform .12s ease, background .12s ease }
.boton:hover{ background:#9C4614; transform:translateY(-1px) }
.boton.fantasma{ background:transparent; color:var(--uva) !important; border:2px solid var(--uva) }
.boton.fantasma:hover{ background:var(--uva); color:var(--crema) !important }
.boton.claro{ background:var(--crema); color:var(--uva) !important }
.boton.claro:hover{ background:#fff }

/* ── portada ─────────────────────────────────────────────────────────── */
.portada{ position:relative; overflow:hidden; background:var(--uva); color:var(--crema);
          padding:84px 0 92px; text-align:center }
.portada::before{ /* la mandala, muy tenue, como textura de fondo */
  content:""; position:absolute; inset:0; opacity:.07;
  background:url("img/trama.svg") repeat; background-size:190px 190px }
.portada .envoltorio{ position:relative }
.portada img.marca{ width:min(430px,78%); margin:0 auto 26px; display:block }
.portada h1{ font-size:clamp(30px,5vw,50px); margin:0 0 16px; font-weight:600 }
.portada .entrada{ max-width:620px; margin:0 auto 30px; font-size:clamp(17px,2vw,19px);
                   color:#E8DFD6 }
.acciones{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap }

/* ── secciones ───────────────────────────────────────────────────────── */
section{ padding:76px 0 }
.rotulo{ display:block; font-family:"Pacifico",cursive; font-size:clamp(26px,3.4vw,34px);
         color:var(--coral-hondo); font-weight:400; margin-bottom:6px; letter-spacing:0 }
h2{ font-size:clamp(25px,3.4vw,34px); margin-bottom:14px }
.intro{ max-width:640px; color:var(--uva-claro) }

/* Son CUATRO tarjetas: en 2x2 se leen como un grupo. Con auto-fit caian 3+1 y
   la cuarta se quedaba huerfana en su fila, que se ve como un error de montaje. */
.rejilla{ display:grid; gap:22px; margin-top:38px; grid-template-columns:1fr }
@media (min-width:720px){ .rejilla{ grid-template-columns:repeat(2,1fr) } }
.tarjeta{ background:var(--blanco); border:1px solid var(--borde); border-radius:var(--radio);
          padding:30px 26px; box-shadow:var(--sombra) }
.tarjeta svg{ width:44px; height:44px; margin-bottom:16px; display:block }
.tarjeta h3{ font-size:20px; margin-bottom:8px }
.tarjeta p{ color:var(--uva-claro); font-size:16px; margin:0 0 .6em }
.tarjeta p:last-child{ margin:0 }
.tarjeta .apunte{ font-size:14.5px; color:var(--uva-claro); opacity:.85 }

/* ── eventos ─────────────────────────────────────────────────────────── */
.eventos{ background:var(--blanco); border-block:1px solid var(--borde) }
.vacio{ margin-top:34px; border:2px dashed var(--borde); border-radius:var(--radio);
        padding:44px 30px; text-align:center; background:var(--crema) }
.vacio h3{ font-size:20px; margin-bottom:8px }
.vacio p{ color:var(--uva-claro); max-width:470px; margin:0 auto 22px }

/* ── llamada final ───────────────────────────────────────────────────── */
.llamada{ background:var(--coral); color:var(--uva-hondo); text-align:center }
.llamada h2{ color:var(--uva-hondo) }
.llamada p{ max-width:560px; margin:0 auto 26px; color:var(--uva-hondo) }

/* ── pie ─────────────────────────────────────────────────────────────── */
footer{ background:var(--uva); color:#CFC4D4; padding:52px 0 34px; font-size:15px }
footer img{ height:76px; width:auto; margin-bottom:20px }
footer a{ color:var(--crema) }
.pie-rejilla{ display:grid; gap:30px; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)) }
footer h4{ color:var(--crema); font-size:15px; margin:0 0 10px; font-weight:600;
           letter-spacing:.06em; text-transform:uppercase }
.legalilla{ margin-top:34px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14);
            font-size:13.5px; color:#A79BAD }

/* ── el hueco visible: lo que falta se VE, no se inventa ─────────────── */
.pendiente{ display:inline-block; background:#FDF0C7; color:#6B4E00; border:1px solid #E6C64F;
            border-radius:5px; padding:1px 8px; font-size:.86em; font-weight:600;
            font-family:ui-monospace,monospace }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important } }

/* ── ficha de evento con venta ───────────────────────────────────────── */
/* Una sola ficha en una rejilla de dos columnas queda descolgada a la
   izquierda; hasta que haya dos eventos, se centra y se le pone tope. */
.eventos-rejilla:has(> .evento:only-child){ grid-template-columns:minmax(0,540px);
                                            justify-content:center }
.tarjeta.evento{ border-color:#E0CBB6; border-left:5px solid var(--coral) }
.tarjeta.evento h3{ font-size:22px }
.tarjeta.evento .precio{ font-size:21px; font-weight:600; color:var(--coral-hondo);
                         margin:14px 0 4px }
.tarjeta.evento .compra{ margin:16px 0 10px }
.tarjeta.evento .compra .boton{ width:100%; justify-content:center; font-size:17px;
                                padding:15px 24px }
.tarjeta.evento .finura{ font-size:13.5px; margin:0 }