/* =========================================================
   Santa Isabel · Tema de las Fiestas del Pilar

   Viste la web de cachirulo: el rojo sustituye al azul, una cenefa de cuadros
   rojos y negros remata la página por arriba y por abajo, la Virgen del Pilar preside los titulares y en la portada caen pétalos de
   la Ofrenda de Flores.

   Esta hoja está enlazada en todas las páginas públicas, pero dormida
   (media="not all"). La despierta js/tema.js cuando el interruptor del panel
   (Acciones > Tema de fiestas) está puesto, y a la vez marca el <html> con
   data-tema="pilar". TODAS las reglas cuelgan de esa marca: así ganan a las de
   styles.css sin depender del orden de carga y no pueden colarse en el panel,
   que usa styles.css pero nunca lleva la marca.

   Casi todo el trabajo lo hacen las variables de color: styles.css pinta con
   --royal, --grad y compañía, así que cambiarlas aquí cambia botones, enlaces,
   degradados y sombras de golpe. Lo que viene después son los pocos azules
   que estaban escritos a mano, y los adornos.

   No toca tamaños ni tipografías. Lo único que ocupa sitio es la imagen de
   la Virgen sobre los titulares; al quitar el tema, todo vuelve a su lugar.
   ========================================================= */

/* ---------- Paleta ---------- */
html[data-tema="pilar"]{
  /* Rojo cachirulo, en la misma escala que tenía el azul */
  --royal:        #c8102e;
  --royal-600:    #a80d26;
  --royal-700:    #7f0a1d;
  --royal-400:    #e23d57;
  --royal-300:    #f4a3b0;
  /* El "cielo" del degradado pasa a ser un naranja cálido. El amarillo de la
     bandera se queda para los adornos (--pilar-oro): como color de texto o de
     botón no tiene contraste suficiente sobre blanco. */
  --sky:          #f0642a;
  --blue-50:      #fff6f3;
  --blue-100:     #ffeae5;
  --blue-200:     #ffd6cf;

  --grad: linear-gradient(115deg, #b40e29 0%, #dc2444 55%, #f0642a 100%);
  --grad-soft: linear-gradient(115deg, #fff1ee 0%, #fff8f5 100%);

  --shadow-sm: 0 2px 8px rgba(80,20,28,.06);
  --shadow-md: 0 12px 30px rgba(110,24,36,.10);
  --shadow-lg: 0 28px 60px rgba(110,24,36,.16);
  --shadow-blue: 0 16px 40px rgba(200,16,46,.28);

  --pilar-oro: #f5b301;

  /* Cuadros de cachirulo. Dos tramas de franjas oscuras, una en cada sentido,
     sobre fondo rojo: donde no hay franja se ve el rojo, donde pasa una sola
     queda granate y donde se cruzan las dos, casi negro. Es como está tejido
     el pañuelo de verdad. */
  --pilar-cuadro: 8px;
  --pilar-trama-h: repeating-linear-gradient(90deg, rgba(20,6,9,.6) 0 var(--pilar-cuadro), transparent var(--pilar-cuadro) calc(var(--pilar-cuadro) * 2));
  --pilar-trama-v: repeating-linear-gradient(0deg, rgba(20,6,9,.6) 0 var(--pilar-cuadro), transparent var(--pilar-cuadro) calc(var(--pilar-cuadro) * 2));
  --pilar-cenefa: calc(var(--pilar-cuadro) * 2);
}

/* ---------- Azules que estaban escritos a mano ---------- */
html[data-tema="pilar"] .highlight::after{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'><path d='M0 4 Q6 0 12 4 T24 4' fill='none' stroke='%23c8102e' stroke-width='2.2' stroke-linecap='round'/></svg>");
}
html[data-tema="pilar"] .cta .highlight::after{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'><path d='M0 4 Q6 0 12 4 T24 4' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'/></svg>");
}
html[data-tema="pilar"] .logo-mark--lg::before{
  background:radial-gradient(ellipse at 34% 55%,rgba(240,100,42,.4),transparent 70%);
}
/* Solo el logo pequeño de la barra: su sombra era azul marino a la vista. Las
   demás sombras del logo ya salen de --royal-700 o son negras (las del pie). */
html[data-tema="pilar"] .logo-mark--sm .logo-lt--big{text-shadow:1px 1px 0 rgba(127,10,29,.35);}

/* El logo del pie, sobre fondo oscuro: con el naranja del degradado y sus
   sombras negras se quedaba marrón. Aquí va de blanco a rosa, con oro. */
html[data-tema="pilar"] .footer .logo-lt{
  background-image:linear-gradient(180deg,#fff 0%,#ffd3d9 55%,#ff96a6 100%);
}
html[data-tema="pilar"] .footer .logo-lt--big{
  background-image:linear-gradient(100deg,#ff96a6 0%,#fff 28%,#ffd166 50%,#fff 72%,#ff96a6 100%);
}

html[data-tema="pilar"] .btn-primary:hover{box-shadow:0 20px 46px rgba(200,16,46,.36);}
html[data-tema="pilar"] .btn-light::before{
  background:linear-gradient(115deg,transparent,rgba(200,16,46,.28),transparent);
}
html[data-tema="pilar"] .cta::after{background:#4a0613;}

/* Fondos de relleno de las tarjetas sin foto */
html[data-tema="pilar"] .ph-1{background:linear-gradient(140deg,#c8102e,#e23d57 60%,#f0642a);}
html[data-tema="pilar"] .ph-2{background:linear-gradient(140deg,#7f0a1d,#c8102e);}
html[data-tema="pilar"] .ph-3{background:linear-gradient(140deg,#f0642a,#c8102e);}
html[data-tema="pilar"] .ph-4{background:linear-gradient(140deg,#e23d57,#7f0a1d);}
html[data-tema="pilar"] .ph-5{background:linear-gradient(140deg,#a80d26,#f5a623);}
html[data-tema="pilar"] .ph-6{background:linear-gradient(140deg,#f4a3b0,#c8102e);}

/* Las manchas de luz del fondo: rojo, oro y rosa */
html[data-tema="pilar"] .aurora .a1{background:radial-gradient(circle,#e23d57,transparent 70%);}
html[data-tema="pilar"] .aurora .a2{background:radial-gradient(circle,#f5b301,transparent 70%);opacity:.42;}
html[data-tema="pilar"] .aurora .a3{background:radial-gradient(circle,#f4a3b0,transparent 70%);}

/* ---------- Cenefa de cachirulo ---------- */
/* Arriba del todo, antes de la barra de navegación. Es un elemento normal del
   flujo, no fijo: se va al bajar y no le quita sitio a la lectura. */
html[data-tema="pilar"] body::before{
  content:"";display:block;height:var(--pilar-cenefa);
  background:var(--pilar-trama-h), var(--pilar-trama-v), var(--royal);
}
/* Y otra rematando el pie, pintada como fondo para no ocupar ningún
   pseudo-elemento ni mover el contenido: el pie ya tiene 70px de aire arriba. */
html[data-tema="pilar"] .footer{
  background:
    var(--pilar-trama-h) top / 100% var(--pilar-cenefa) no-repeat,
    var(--pilar-trama-v) top / 100% var(--pilar-cenefa) no-repeat,
    linear-gradient(var(--royal), var(--royal)) top / 100% var(--pilar-cenefa) no-repeat,
    var(--ink);
}

/* ---------- Portada: saludo y pétalos ---------- */
/* El saludo va como contenido generado para no tener que tocar el HTML de la
   portada cada vez que se pone o se quita el tema. */
html[data-tema="pilar"] .hero-inner::before{
  content:"¡Felices Fiestas del Pilar!";
  display:flex;width:fit-content;margin:0 auto 24px;
  padding:9px 18px 9px 42px;
  border:1px solid var(--blue-200);border-radius:999px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='%23c8102e'><circle cx='12' cy='6.2' r='4.1'/><circle cx='17.5' cy='10.2' r='4.1'/><circle cx='15.4' cy='16.7' r='4.1'/><circle cx='8.6' cy='16.7' r='4.1'/><circle cx='6.5' cy='10.2' r='4.1'/></g><circle cx='12' cy='12' r='3' fill='%23f5b301'/></svg>") 14px 50% / 20px 20px no-repeat,
    #fff;
  box-shadow:var(--shadow-sm);
  font-family:var(--font-body);font-weight:700;font-size:.8rem;line-height:1.3;
  letter-spacing:.09em;text-transform:uppercase;color:var(--royal-700);
  animation:pilarSaludo .7s var(--ease) both;
}
@keyframes pilarSaludo{
  from{opacity:0;transform:translateY(-10px);}
  to{opacity:1;transform:none;}
}

/* La Virgen del Pilar, sobre su columna y con flores al pie. Va pintada como
   fondo de la caja del titular, en el hueco que le abre el padding de arriba:
   así tampoco hay que tocar el HTML. Es lo único del tema que mueve algo de
   sitio (el titular baja lo que mide la imagen), y solo con el tema puesto.
   En las demás páginas va más pequeña, sobre el título de la sección. */
html[data-tema="pilar"] .hero-inner{
  padding-top:186px;
  background:url("../Images/tema-pilar-virgen.svg") top center / auto 170px no-repeat;
}
html[data-tema="pilar"] .page-header .inner{
  padding-top:112px;
  background:url("../Images/tema-pilar-virgen.svg") top center / auto 100px no-repeat;
}
@media (max-width:640px){
  html[data-tema="pilar"] .hero-inner{padding-top:150px;background-size:auto 136px;}
  html[data-tema="pilar"] .page-header .inner{padding-top:96px;background-size:auto 86px;}
}

/* Pétalos de la Ofrenda. Son dos capas con un dibujo que se repite; cada una
   mide de alto lo que la portada MÁS una repetición, y baja exactamente esa
   repetición antes de volver a empezar, así que el bucle no tiene costura.
   Se mueve con transform (lo hace la tarjeta gráfica) y no con
   background-position, que obligaría a repintar la portada entera en cada
   fotograma. Van por detrás del texto y de la noticia destacada. */
html[data-tema="pilar"] .hero::before,
html[data-tema="pilar"] .hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;z-index:0;
  pointer-events:none;background-repeat:repeat;opacity:.5;
  will-change:transform;
}
html[data-tema="pilar"] .hero::before{
  top:-420px;
  background-size:340px 420px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='420' viewBox='0 0 340 420'><path transform='translate(52 70) rotate(30)' d='M0-11C6-6 8 1 0 11C-8 1-6-6 0-11Z' fill='%23d81e3f'/><path transform='translate(232 196) rotate(-42) scale(.75)' d='M0-11C6-6 8 1 0 11C-8 1-6-6 0-11Z' fill='%23f29bab'/><path transform='translate(124 342) rotate(112) scale(.85)' d='M0-11C6-6 8 1 0 11C-8 1-6-6 0-11Z' fill='%23c8102e'/></svg>");
  animation:pilarPetalosA 30s linear infinite;
}
html[data-tema="pilar"] .hero::after{
  top:-560px;
  background-size:520px 560px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='560' viewBox='0 0 520 560'><path transform='translate(92 124) rotate(-22) scale(.9)' d='M0-11C6-6 8 1 0 11C-8 1-6-6 0-11Z' fill='%23f5b301'/><path transform='translate(384 62) rotate(58) scale(.7)' d='M0-11C6-6 8 1 0 11C-8 1-6-6 0-11Z' fill='%23f29bab'/><path transform='translate(304 334) rotate(150)' d='M0-11C6-6 8 1 0 11C-8 1-6-6 0-11Z' fill='%23f7c63a'/><path transform='translate(470 472) rotate(16) scale(.8)' d='M0-11C6-6 8 1 0 11C-8 1-6-6 0-11Z' fill='%23d81e3f'/></svg>");
  animation:pilarPetalosB 44s linear infinite;
}
@keyframes pilarPetalosA{to{transform:translate3d(0,420px,0);}}
@keyframes pilarPetalosB{to{transform:translate3d(0,560px,0);}}

/* Quien ha pedido menos movimiento ve los pétalos quietos, como esparcidos. */
@media (prefers-reduced-motion:reduce){
  html[data-tema="pilar"] .hero::before,
  html[data-tema="pilar"] .hero::after,
  html[data-tema="pilar"] .hero-inner::before{animation:none;}
}

/* En el móvil el saludo se aprieta un poco para que no parta en dos líneas. */
@media (max-width:420px){
  html[data-tema="pilar"] .hero-inner::before{font-size:.72rem;letter-spacing:.06em;padding:8px 14px 8px 38px;background-position:12px 50%, 0 0;}
}