/* Fantasía y Eventos — clon del diseño de Canva, en HTML accesible y responsive */
:root{
  --amarillo:#FFD700;
  --rojo:#B61A1A;
  --negro:#0C0D0D;
  --oro:#A6780F;
  --tinta:#1A1410;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--amarillo);color:var(--tinta);
  font-family:Poppins,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:clamp(15px,1.05vw + 12px,18px);line-height:1.55;
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#000;color:#fff;padding:10px 14px;z-index:99;border-radius:4px}
:focus-visible{outline:3px solid var(--rojo);outline-offset:3px}

/* ---------- tipografía display (clon Canva) ---------- */
.display{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-weight:800}

/* Título rojo con guiones, como en Canva */
h1.tema{
  font-family:"Playfair Display",Georgia,serif;font-weight:900;
  color:var(--rojo);text-align:center;margin:0;
  font-size:clamp(2.3rem,8.2vw,5rem);line-height:1.05;letter-spacing:.01em;
}
h1.tema::before{content:"– "}
h1.tema::after{content:" –"}
.subtitulo{
  font-family:"Playfair Display",Georgia,serif;font-weight:700;color:var(--oro);
  text-align:center;text-transform:uppercase;letter-spacing:.06em;
  font-size:clamp(1rem,2.6vw,1.7rem);margin:.35em 0 0;
}

/* cabecera con los dos iconos del tema */
.cabecera{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(6px,2vw,20px);padding:clamp(14px,3vw,26px) 0 6px;
}
.cabecera .ic{width:clamp(40px,7vw,92px);height:auto;object-fit:contain}
.cabecera h1.tema{grid-column:2}
.cabecera .subtitulo{grid-column:1/-1}

/* ---------- rejilla de tarjetas (Fuego / Programa / Bufones…) ---------- */
.tarjetas{
  list-style:none;margin:clamp(18px,4vw,42px) 0 0;padding:0;
  display:grid;gap:clamp(20px,3.5vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.tarjeta{text-align:center;display:flex;flex-direction:column;align-items:center}
.tarjeta h2{
  font-family:"Playfair Display",Georgia,serif;font-weight:800;color:var(--negro);
  font-size:clamp(1.4rem,3.4vw,2.1rem);margin:0 0 .5em;line-height:1.15;
}
.tarjeta img.media{
  width:100%;max-width:330px;aspect-ratio:3/4;object-fit:cover;
  border-radius:10px;border:3px solid rgba(0,0,0,.16);background:#f6e58a;
}
.pie{
  font-family:"Playfair Display",Georgia,serif;font-weight:700;color:var(--oro);
  text-transform:uppercase;letter-spacing:.14em;font-size:.95rem;margin:.7em 0 0;
}
/* tarjeta que enlaza a Instagram */
.ig{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  width:100%;max-width:330px;aspect-ratio:3/4;text-decoration:none;
  background:#fff;border:1px solid #dbdbdb;border-radius:10px;color:#00376b;
  font-weight:600;font-size:.95rem;padding:16px;text-align:center;
}
.ig:hover{background:#fafafa}
.ig svg{width:44px;height:44px}
.ig span{display:block}

/* tarjeta de vídeo con la portada real del post */
.ig.con-portada{padding:0;overflow:hidden;justify-content:flex-start;gap:0}
.ig.con-portada .igcover{
  width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;
  border-bottom:1px solid #dbdbdb;
}
.ig.con-portada .igpie{
  display:flex;align-items:center;justify-content:center;gap:8px;
  flex:1;width:100%;padding:10px 12px;font-size:.9rem;line-height:1.25;
}
.ig.con-portada svg{width:22px;height:22px;flex:0 0 auto}

/* ---------- texto principal ---------- */
.copy{max-width:940px;margin:clamp(26px,5vw,54px) auto 0;text-align:center}
.copy p{margin:0 0 1.05em}
.copy p:last-child{margin-bottom:0}

/* ---------- bloque de contacto (clon del de Canva) ---------- */
.contacto{text-align:center;padding:clamp(30px,6vw,60px) 0 clamp(20px,4vw,40px)}
.contacto .lema{
  font-family:"Playfair Display",Georgia,serif;font-weight:800;color:var(--rojo);
  text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(1.05rem,3.2vw,1.75rem);margin:0 0 .5em;
}
.tel{
  display:inline-block;font-family:"Playfair Display",Georgia,serif;font-weight:900;
  color:#000;text-decoration:underline;text-underline-offset:.1em;text-decoration-thickness:.06em;
  font-size:clamp(2.4rem,9vw,4.6rem);line-height:1.1;letter-spacing:.01em;
}
.mail{
  display:inline-block;margin-top:.7em;font-family:"Playfair Display",Georgia,serif;font-weight:700;
  color:#000;text-decoration:underline;text-underline-offset:.14em;
  font-size:clamp(.95rem,3.1vw,1.6rem);word-break:break-all;
}
.wa{
  display:inline-flex;align-items:center;gap:10px;margin-top:1.1em;
  background:#111;color:#fff;text-decoration:none;font-weight:700;
  padding:14px 24px;border-radius:999px;font-size:1rem;
}
.wa:hover{background:#000}

/* ---------- navegación de temáticas ---------- */
.temas{list-style:none;margin:clamp(20px,4vw,40px) 0 0;padding:0;display:grid;gap:10px}
.temas a{
  display:grid;grid-template-columns:56px 1fr 56px;align-items:center;gap:14px;
  text-decoration:none;padding:12px 14px;border-radius:12px;
}
.temas a:hover{background:rgba(0,0,0,.06)}
.temas .nombre{
  font-family:"Playfair Display",Georgia,serif;font-weight:800;color:#000;
  text-align:center;text-decoration:underline;text-underline-offset:.16em;
  font-size:clamp(1.5rem,5.2vw,2.6rem);line-height:1.1;
}
.temas img{width:100%;height:auto;max-height:64px;object-fit:contain}
.temas .der{justify-self:end}

/* ---------- secciones de la portada ---------- */
.seccion{padding:clamp(34px,6vw,70px) 0 0}
.seccion h2{
  font-family:"Playfair Display",Georgia,serif;font-weight:900;color:var(--negro);
  text-align:center;font-size:clamp(1.9rem,6.4vw,3.4rem);margin:0 0 .5em;line-height:1.1;
}
.logo{width:min(300px,62vw);margin:0 auto;border-radius:50%}
.hero{text-align:center;padding:clamp(22px,5vw,46px) 0 0}
h1.hero-marca,.hero .marca{
  font-family:"Playfair Display",Georgia,serif;font-weight:900;color:var(--rojo);
  font-size:clamp(2.2rem,9vw,4.4rem);margin:.35em 0 0;line-height:1.05;
}
.hero .marca::before{content:"– "}
.hero .marca::after{content:" –"}
.galeria{
  list-style:none;padding:0;margin:clamp(20px,4vw,40px) 0 0;
  display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.galeria img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px}
.ancha img{aspect-ratio:16/9}
.aviso{
  font-family:"Playfair Display",Georgia,serif;font-weight:800;color:var(--rojo);
  text-align:center;text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(1rem,3vw,1.5rem);margin:clamp(22px,4vw,40px) 0 0;
}

/* ---------- pie ---------- */
.pie-sitio{border-top:2px solid rgba(0,0,0,.25);margin-top:clamp(34px,6vw,64px);padding:26px 0 96px;font-size:.92rem}
.pie-sitio nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;padding:0;margin:0 0 16px;justify-content:center}
.pie-sitio a{font-weight:600}
.nap{text-align:center;color:#3a2f18;line-height:1.7}

/* ---------- barra fija de llamada (solo móvil) ---------- */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  grid-template-columns:1fr 1fr;gap:2px;background:#000;
}
.barra a{
  display:block;text-align:center;padding:15px 8px;color:#fff;text-decoration:none;
  font-weight:700;font-size:1rem;background:#111;
}
.barra a.ll{background:var(--rojo)}
@media (max-width:760px){
  .barra{display:grid}
  .temas a{grid-template-columns:40px 1fr 40px;gap:10px}
  .cabecera{padding-top:14px}
}
@media (min-width:761px){ .pie-sitio{padding-bottom:26px} }
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* --- móvil: las tarjetas de Instagram no deben ocupar una pantalla entera --- */
@media (max-width:760px){
  .ig{aspect-ratio:auto;min-height:132px;padding:20px 14px;max-width:100%}
  .ig svg{width:34px;height:34px}
  .tarjeta img.media{aspect-ratio:4/5;max-height:300px;width:auto}
  .tarjetas{gap:22px}
  .copy{margin-top:26px}
}

/* recortes sin marco (imitadores), como en el diseño original */
.tarjeta img.media.recorte{
  border:0;background:none;border-radius:0;object-fit:contain;
  aspect-ratio:auto;max-height:320px;width:auto;max-width:100%;
}
@media (max-width:760px){ .tarjeta img.media.recorte{max-height:260px} }

/* ---- estructura de la portada, bloque a bloque como en Canva ---- */
.bloque{padding:clamp(30px,6vw,64px) 0}
.bloque > .wrap > h2{
  font-family:"Playfair Display",Georgia,serif;font-weight:900;color:var(--negro);
  text-align:center;font-size:clamp(1.9rem,6.4vw,3.4rem);margin:0 0 .55em;line-height:1.1;
}
.foto-full img{width:100%;max-height:60vh;object-fit:cover;object-position:center top}/* «top»: si la pantalla es ancha y baja, el recorte se lleva la parte de abajo
   y nunca el logotipo del Ayuntamiento de Aljaraque, arriba a la izquierda */
.foto-centro{margin:0;padding:clamp(18px,4vw,34px) 0;display:flex;justify-content:center}
.foto-centro img{width:min(500px,84vw);height:auto}
.par-fotos{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,2.5vw,26px);align-items:center;
  padding:clamp(18px,4vw,34px) clamp(12px,3vw,40px);
}
.par-fotos figure{margin:0}
/* Sin recorte: cada foto conserva su encuadre original. Antes se forzaban todas a
   3/4 vertical y la apaisada (las bailarinas con abanicos de fuego) perdía el 31 %
   del ancho: se quedaban las tres personas sin cara. */
.par-fotos img{width:100%;height:auto;display:block}
.hcont{margin:.35em 0;text-align:center}
.tel-med{font-size:clamp(1.9rem,7vw,3.2rem)}
.faqs{text-align:left}
.faq-item{border-top:1px solid rgba(0,0,0,.22);padding:14px 0}
.faq-item:last-child{border-bottom:1px solid rgba(0,0,0,.22)}
.faq-item h3{font-family:"Playfair Display",Georgia,serif;font-weight:800;margin:0 0 .3em;color:var(--negro)}
.faq-item p{margin:0}

/* ---- tarjeta de dossier: logo + tema + contacto (igual que la columna central de Canva) ---- */
.dossier{
  width:100%;max-width:330px;text-align:center;background:var(--amarillo);
  border-top:2px solid #000;padding:14px 8px 0;
}
.dossier .dlogo{width:min(190px,58vw);margin:0 auto;border-radius:50%}
.dossier .dtema{
  font-family:Poppins,sans-serif;font-weight:600;color:var(--rojo);
  font-size:clamp(1.05rem,3.4vw,1.35rem);margin:.5em 0 .25em;
}
.dossier .dcont{margin:.1em 0;font-size:.82rem;line-height:1.45;word-break:break-word}
.dossier .dcont a{color:#000;text-decoration:none}
.dossier .dcont a:hover{text-decoration:underline}
.dossier .ddoc{
  display:block;margin-top:12px;background:#111;color:#fff;text-decoration:none;
  padding:12px 10px;font-size:.82rem;font-weight:600;border-radius:4px;
}
.dossier .ddoc:hover{background:#000}
.tarjeta img.media.poster{aspect-ratio:auto;height:auto;object-fit:contain;border-radius:4px;max-width:100%}
@media (max-width:760px){ .par-fotos{grid-template-columns:1fr} }


/* enlace de vuelta a la portada dentro de «Otras temáticas» */
.temas .li-portada .nombre{font-style:italic}
.temas .li-portada img.der{border-radius:50%}


/* rejilla de fotogramas (drag show), sobre el fondo amarillo como en Canva */
.frames{list-style:none;padding:0;margin:clamp(18px,4vw,36px) 0 0;display:grid;
  gap:clamp(8px,2vw,18px);grid-template-columns:repeat(auto-fit,minmax(140px,1fr));align-items:center}
.frames img{width:100%;height:auto;object-fit:contain}

.temas .li-faq .nombre{font-size:clamp(1.15rem,3.6vw,1.7rem)}


/* ---------- ampliar carteles y programas al pulsarlos (sin JavaScript) ---------- */
a.ampliar{display:block;cursor:zoom-in;text-decoration:none;position:relative}
.lupa-pista{
  display:block;margin-top:.5em;font-family:"Playfair Display",Georgia,serif;font-weight:700;
  color:var(--oro);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;text-align:center;
}
a.ampliar:hover .lupa-pista{color:var(--rojo)}
.lupa{
  display:none;position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.93);
  padding:clamp(12px,3vw,28px);flex-direction:column;align-items:center;justify-content:center;gap:16px;
}
.lupa:target{display:flex}
.lupa img{
  width:min(1400px,96vw);max-height:86vh;height:auto;
  object-fit:contain;border-radius:4px;background:#fff;
}
.lupa .cerrar{
  color:#fff;text-decoration:none;font-weight:700;font-size:1rem;
  border:2px solid #fff;border-radius:999px;padding:10px 26px;
}
.lupa .cerrar:hover{background:#fff;color:#000}

/* en el movil el cartel se amplia mas que la pantalla y se desplaza, para poder leer los horarios */
@media (max-width:760px){
  .lupa{overflow:auto;align-items:flex-start;justify-content:flex-start;padding:14px 14px 84px;background:rgba(0,0,0,.97)}
  .lupa img{max-width:none;max-height:none;height:68vh;width:auto}
  .lupa .cerrar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:rgba(0,0,0,.85)}
}

/* clips del drag show: mudos, en bucle, sin controles — como en Canva */
.clip{width:100%;height:auto;object-fit:contain;display:block;background:transparent}
.tarjeta video.media.clip{max-width:330px;border:0;border-radius:0;aspect-ratio:auto}
.frames video.clip{width:100%}

/* las formas de los clips, como en el diseno de Canva */
.clip.circulo{aspect-ratio:1/1;object-fit:cover;border-radius:50%}
.clip.rombo{aspect-ratio:1/1;object-fit:cover;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.clip.redondeado{border-radius:14px}

/* la forma manda sobre el estilo generico de la tarjeta */
.tarjeta video.media.clip.circulo,video.clip.circulo{aspect-ratio:1/1;object-fit:cover;border-radius:50%}
.tarjeta video.media.clip.rombo,video.clip.rombo{aspect-ratio:1/1;object-fit:cover;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);border-radius:0}
.tarjeta video.media.clip.redondeado,video.clip.redondeado{border-radius:14px}

/* siluetas de corazon y estrella, como en Canva */
.clip.estrella,video.clip.estrella{aspect-ratio:1/1;object-fit:cover;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.clip.corazon,video.clip.corazon{aspect-ratio:1/1;object-fit:cover;clip-path:url(#silueta-corazon)}

/* --- vídeo de fuego de la portada (marco circular, igual que en Canva) --- */
.video-fuego{margin:0 auto clamp(18px,4vw,32px);width:min(322px,72vw);text-align:center}
.video-fuego video.media.clip.circulo{
  display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:50%;border:6px solid #b22512;box-shadow:0 6px 22px rgba(0,0,0,.28);background:#1a0d06}
.video-fuego figcaption{
  margin-top:10px;font-weight:700;color:#7a1a0d;font-size:clamp(.9rem,2.4vw,1.05rem)}

/* --- el cartel de programación, del tamaño de la tarjeta de dossier ---
   Los programas son apaisados (636x430) y los dossieres verticales, así que
   con columnas iguales el programa se veía la mitad de alto. Se le da a su
   columna 1,7 veces el ancho de las laterales: el cartel pasa de ~360x240 a
   ~520x350, la misma altura que el dossier, sin recortar ni un horario. */
@media (min-width:761px){
  .tarjetas.con-programa{grid-template-columns:1fr 1.95fr 1fr}
}
.tarjeta.es-programa a.ampliar{width:100%}
.tarjeta.es-programa img.media.poster{width:100%;max-width:100%}

/* ---------- carrusel del drag show: los vídeos, de uno en uno ---------- */
.pista-carrusel{text-align:center;color:var(--oro);font-weight:600;margin:.2em 0 1em;font-size:.95rem}
.carrusel{
  list-style:none;margin:0;padding:0 0 8px;display:grid;grid-auto-flow:column;
  grid-auto-columns:min(420px,86vw);gap:clamp(14px,4vw,30px);
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scroll-padding:0 7vw;-webkit-overflow-scrolling:touch;
}
.carrusel .diapo{scroll-snap-align:center;text-align:center;scroll-margin:0}
.carrusel .diapo h3{
  font-family:"Playfair Display",Georgia,serif;font-weight:800;color:var(--negro);
  font-size:clamp(1.3rem,4.4vw,1.9rem);margin:0 0 .5em;line-height:1.15;
}
.carrusel .lienzo{position:relative;display:block}
.carrusel video.clip{width:100%;height:auto;display:block;background:transparent}
.carrusel .pie{margin-top:.6em}
button.sonido{
  position:absolute;right:6%;bottom:6%;display:inline-flex;align-items:center;gap:8px;
  border:0;border-radius:999px;background:rgba(0,0,0,.72);color:#fff;cursor:pointer;
  padding:10px 16px;font:inherit;font-size:.85rem;font-weight:700;
}
button.sonido:hover{background:#000}
button.sonido .ico{font-size:1.05rem;line-height:1}
button.sonido[aria-pressed="true"]{background:var(--rojo)}
.puntos{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.puntos a{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,.12);color:#000;text-decoration:none;font-weight:700;font-size:.85rem;
}
.puntos a:hover{background:var(--rojo);color:#fff}
/* sin JavaScript el carrusel sigue funcionando: se desliza y los puntos saltan de uno a otro */
@media (prefers-reduced-motion:no-preference){ .carrusel{scroll-behavior:smooth} }

/* el botón de sonido, debajo del círculo de fuego: no tapa la imagen */
button.sonido-fuego{
  position:static;transform:none;margin:12px auto 0;white-space:nowrap;
  padding:9px 18px;font-size:.85rem;background:var(--rojo);
}
button.sonido-fuego:hover{background:#8f1414}
button.sonido-fuego[aria-pressed="true"]{background:#111}

/* lista de municipios: SEO local, texto que Google sí lee */
.municipios{list-style:none;padding:0;margin:1.1em auto;max-width:720px;
  display:grid;gap:8px;text-align:left}
.municipios li{padding:9px 14px;background:rgba(0,0,0,.05);border-radius:8px;line-height:1.4}
.municipios strong{color:var(--rojo)}

/* Anchor text descriptivo bajo el nombre en las listas de estrellas (SEO: enlaces internos) */
.temas .nombre .tit{display:block}
.temas .nombre .sub{
  display:inline-block;width:100%;text-decoration:none;
  font-family:Poppins,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-weight:600;color:#573725;letter-spacing:.04em;
  font-size:clamp(.72rem,2.3vw,.95rem);line-height:1.25;margin-top:.3em;
}
.temas .li-portada .nombre .sub,.temas .li-faq .nombre .sub{display:none}

/* "sin compromiso" en segundo plano: la llamada a la acción es "Pide presupuesto" */
.contacto .lema .lema-sec{font-size:.72em;letter-spacing:.06em;opacity:.85}
@media (max-width:520px){.contacto .lema .lema-sec{display:block;margin-top:.15em}}

/* Vídeo de la danza del caballo (página ecuestre) */
.video-ecu{margin:clamp(18px,3vw,30px) 0 0;text-align:center}
.video-ecu video{width:100%;max-width:900px;height:auto;border-radius:14px;
  border:3px solid #000;background:#000;display:block;margin:0 auto}
.video-ecu figcaption{font-family:Poppins,sans-serif;font-weight:600;color:#573725;
  font-size:clamp(.82rem,2.2vw,.98rem);margin-top:.7em}

/* Crédito de colaboración bajo una galería */
p.credito{font-family:Poppins,sans-serif;font-size:clamp(.76rem,2vw,.88rem);
  color:#573725;text-align:center;margin:1em auto 0;max-width:60ch;opacity:.85}

/* Galería de fotos apaisadas (deportes medievales a caballo) */
.frames.galeria-foto{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(10px,1.6vw,16px)}
.frames.galeria-foto img,.frames.galeria-foto .ph{aspect-ratio:3/2;object-fit:cover;background-size:cover;
  border-radius:10px;border:3px solid #000;background-color:#000;display:block;width:100%}
@media (max-width:520px){
  .frames.galeria-foto{grid-template-columns:repeat(2,1fr)}
}

/* Tira de cinco fotos (aves de cetrería) */
.frames.galeria-foto.tira{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

/* Emoji propio a la derecha (ecuestre y cetrería, sin icono de Canva) */
.temas .der.emo{justify-self:end;line-height:1;text-align:center;
  font-size:clamp(38px,9.5vw,64px);width:100%;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}

/* Foto en marco circular, con el mismo tratamiento que el círculo de fuego */
.foto-circulo{margin:clamp(20px,4vw,34px) auto 0;width:min(322px,72vw);text-align:center}
.foto-circulo img,.foto-circulo .ph{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  background-size:cover;border-radius:50%;border:6px solid #b22512;
  box-shadow:0 6px 22px rgba(0,0,0,.28);background-color:#1a0d06}
.foto-circulo figcaption{margin-top:10px;font-weight:700;color:#7a1a0d;
  font-family:Poppins,sans-serif;font-size:clamp(.9rem,2.4vw,1.05rem)}

/* Llamada a la acción final de cada sección: tarjeta blanca de la marca,
   con el teléfono pulsable. Deja de ser un párrafo más del texto corrido. */
.copy p.cta-final{
  margin:clamp(22px,4vw,34px) auto 0;max-width:46ch;
  background:#fff;border:3px solid #000;border-radius:16px;
  padding:clamp(16px,3.2vw,24px) clamp(16px,4vw,28px);
  box-shadow:0 6px 20px rgba(0,0,0,.18);
  font-family:Poppins,sans-serif;font-weight:600;color:#241a10;
  font-size:clamp(.95rem,2.6vw,1.08rem);line-height:1.5;text-align:center;
}
.copy p.cta-final .tel-cta{
  display:inline-block;font-family:"Playfair Display",Georgia,serif;font-weight:900;
  color:#000;text-decoration:underline;text-underline-offset:.12em;text-decoration-thickness:.07em;
  font-size:clamp(1.35rem,4.6vw,1.9rem);line-height:1.15;margin-top:.15em;white-space:nowrap;
}
.copy p.cta-final .tel-cta:hover{color:#b22512}

/* Galería de una temática: tres círculos en una sola línea, con el mismo marco
   rojo que el círculo de fuego de la portada y el gerifalte de cetrería. */
.frames.galeria-tema{
  grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,2.4vw,26px);align-items:start;justify-items:center;
  max-width:900px;margin-left:auto;margin-right:auto;
  padding:0 clamp(8px,2vw,16px);
}
.frames.galeria-tema li{background:none;border:0;padding:0;width:100%}
.frames.galeria-tema img,.frames.galeria-tema .ph{
  width:100%;aspect-ratio:1/1;object-fit:cover;background-size:cover;display:block;
  border-radius:50%;border:6px solid #b22512;
  box-shadow:0 6px 20px rgba(0,0,0,.26);background-color:#1a0d06;
  background-position:center;background-repeat:no-repeat;
}
@media (max-width:420px){
  .frames.galeria-tema{gap:8px}
  .frames.galeria-tema img,.frames.galeria-tema .ph{border-width:4px}
}

/* La vista previa de un solo archivo sustituye cada <img> por un <span class="ph">
   con la imagen de fondo. Las reglas de arriba lo contemplan para que los marcos
   —círculos rojos y galerías— se vean igual en la previsualización y en la web. */