/* ==========================================================================
   elguijoaldia — hoja de estilos
   Dirección estética: "Tablón de la plaza"
   Inspiración: arquitectura vernácula andaluza — cal blanca, cerámica azul,
   hierro forjado. Tipografía: DM Serif Text (display) + Source Sans 3 (body).
   Audiencia: vecinos de El Guijo, muchos de mayor edad → texto grande y claro.
   ========================================================================== */

/* ------------------------------------------------------------------ */
/* 1. TOKENS DE DISEÑO                                                  */
/* ------------------------------------------------------------------ */

:root {
  /* Paleta "Tablón de la plaza" */
  --cal:              #F5F0E8;   /* fondo principal — cal envejecida, cálida   */
  --cal-pura:         #FEFCF7;   /* superficie de tarjeta — cal más blanca     */
  --cal-sombra:       #E8E1D4;   /* borde y separadores — cal en sombra        */

  --azulejo:          #1B5E7B;   /* color dominante — cerámica azul-verdosa    */
  --azulejo-profundo: #0E3A4F;   /* cabecera, títulos fuertes                  */
  --azulejo-claro:    #D6E9F2;   /* fondo de chips inactivos                   */

  --hierro:           #2E2620;   /* texto principal — hierro forjado oscuro    */
  --hierro-medio:     #5C4F44;   /* texto secundario                           */
  --hierro-suave:     #8A7D72;   /* fechas, metadatos                          */

  --terracota:        #C4592A;   /* acento CTA y hover — barro cocido          */
  --terracota-suave:  #F2DDD4;   /* fondo hover de chips                       */

  --verde-oliva:      #3B6E30;   /* badge web del Ayuntamiento                 */
  --fb:               #1877F2;   /* badge Facebook                             */

  --foco:             #E8A824;   /* anillo de foco accesible — ocre dorado     */

  /* Escala */
  --radio:            12px;
  --radio-pill:       999px;
  --ancho:            720px;

  /* Tipografía */
  --fuente-display:   'DM Serif Text', Georgia, serif;
  --fuente-cuerpo:    'Source Sans 3', 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Sombras */
  --sombra-suave:     0 1px 3px rgba(46,38,32,.06), 0 4px 16px rgba(46,38,32,.06);
  --sombra-hover:     0 2px 6px rgba(46,38,32,.08), 0 8px 28px rgba(46,38,32,.10);

  /* Transiciones */
  --dur: 220ms;
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ------------------------------------------------------------------ */
/* 2. RESET Y BASE                                                      */
/* ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  font-size: 18px;
  line-height: 1.65;
  color: var(--hierro);
  background-color: var(--cal);
  /* Textura de fondo: gradiente cálido muy sutil */
  background-image:
    radial-gradient(ellipse 120% 60% at 50% 0%, rgba(27,94,123,.06) 0%, transparent 70%);
  min-height: 100dvh;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 20px;
}

/* ------------------------------------------------------------------ */
/* 3. ACCESIBILIDAD                                                     */
/* ------------------------------------------------------------------ */

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--azulejo-profundo);
  color: var(--cal-pura);
  padding: 12px 18px;
  border-radius: 0 0 var(--radio) var(--radio);
  font-family: var(--fuente-cuerpo);
  font-weight: 700;
  font-size: 1rem;
  z-index: 100;
  text-decoration: none;
}
.saltar:focus { left: 8px; top: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------------ */
/* 4. CABECERA — Signature element: patrón cerámico                    */
/* ------------------------------------------------------------------ */

.cabecera {
  position: relative;
  overflow: hidden;
  background: var(--azulejo-profundo);
  /* Gradiente de profundidad */
  background-image: linear-gradient(
    145deg,
    var(--azulejo-profundo) 0%,
    #15506A 55%,
    var(--azulejo) 100%
  );
  padding: 40px 0 36px;
  color: var(--cal-pura);
}

/* Patrón de azulejo cerámico — SVG data URI */
.cabecera__patron {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='none'/%3E%3Cpath d='M20 0 L40 20 L20 40 L0 20 Z' fill='none' stroke='%23F5F0E8' stroke-width='0.6' opacity='0.12'/%3E%3Ccircle cx='20' cy='20' r='4' fill='none' stroke='%23F5F0E8' stroke-width='0.5' opacity='0.1'/%3E%3Cline x1='0' y1='0' x2='0' y2='40' stroke='%23F5F0E8' stroke-width='0.4' opacity='0.07'/%3E%3Cline x1='0' y1='0' x2='40' y2='0' stroke='%23F5F0E8' stroke-width='0.4' opacity='0.07'/%3E%3C/svg%3E");
  background-size: 40px 40px;
  pointer-events: none;
}

/* Destello de luz en esquina superior derecha */
.cabecera::after {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(245,240,232,.08) 0%, transparent 70%);
  pointer-events: none;
}

.cabecera__interior {
  position: relative;
  z-index: 1;
}

.cabecera__titulo {
  margin: 0;
  font-family: var(--fuente-display);
  font-size: clamp(1.8rem, 5vw, 2.7rem);
  font-weight: 400;          /* DM Serif Text es expresivo sin negrita */
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--cal-pura);
}
.cabecera__titulo em {
  font-style: italic;
  color: rgba(245,240,232,.75);
}

.cabecera__sub {
  margin: 8px 0 0;
  font-size: clamp(0.95rem, 2.5vw, 1.05rem);
  color: rgba(245,240,232,.70);
  font-weight: 400;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ */
/* 5. BARRA DE CONTROLES                                               */
/* ------------------------------------------------------------------ */

.controles {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cal-pura);
  border-bottom: 1px solid var(--cal-sombra);
  box-shadow: 0 2px 12px rgba(46,38,32,.07);
}

.controles__caja {
  padding-top: 14px;
  padding-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Buscador */
.buscador {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cal);
  border: 1.5px solid var(--cal-sombra);
  border-radius: var(--radio-pill);
  padding: 0 18px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.buscador:focus-within {
  border-color: var(--azulejo);
  box-shadow: 0 0 0 3px rgba(27,94,123,.12);
}

.buscador__icono {
  flex-shrink: 0;
  color: var(--hierro-suave);
  transition: color var(--dur) var(--ease);
}
.buscador:focus-within .buscador__icono { color: var(--azulejo); }

.buscador__input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--fuente-cuerpo);
  font-size: 1.05rem;
  padding: 12px 0;
  color: var(--hierro);
  min-width: 0;
}
.buscador__input::placeholder { color: var(--hierro-suave); }
.buscador__input:focus { outline: none; }

/* Chips de filtro */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  flex: 1 1 auto;
  min-height: 42px;
  padding: 8px 16px;
  font-family: var(--fuente-cuerpo);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--azulejo);
  background: var(--azulejo-claro);
  border: 1.5px solid transparent;
  border-radius: var(--radio-pill);
  cursor: pointer;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
  white-space: nowrap;
  text-align: center;
}

.chip:hover {
  background: var(--terracota-suave);
  color: var(--terracota);
  border-color: var(--terracota);
  transform: translateY(-1px);
}

.chip--activo {
  color: var(--cal-pura);
  background: var(--azulejo);
  border-color: var(--azulejo);
}
.chip--activo:hover {
  background: var(--azulejo-profundo);
  border-color: var(--azulejo-profundo);
  color: var(--cal-pura);
}

/* ------------------------------------------------------------------ */
/* 6. MURO DE PUBLICACIONES                                            */
/* ------------------------------------------------------------------ */

.muro {
  padding-top: 28px;
  padding-bottom: 12px;
}

/* --- Tarjeta --- */
.tarjeta {
  background: var(--cal-pura);
  border-radius: var(--radio);
  padding: 22px 24px 24px;
  margin-bottom: 20px;
  box-shadow: var(--sombra-suave);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);

  /* Stagger reveal */
  opacity: 0;
  transform: translateY(14px);
  animation: tarjetaEntrada 400ms var(--ease) forwards;
}

.tarjeta:hover {
  box-shadow: var(--sombra-hover);
  transform: translateY(-2px);
}

/* Separador izquierdo sutil según fuente */
.tarjeta--web   { border-left: 3px solid var(--verde-oliva); }
.tarjeta--fb    { border-left: 3px solid var(--fb); }

@keyframes tarjetaEntrada {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Meta: badge + fecha */
.tarjeta__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--fuente-cuerpo);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  padding: 3px 10px;
  border-radius: var(--radio-pill);
  white-space: nowrap;
}
.badge--web { background: var(--verde-oliva); }
.badge--fb  { background: var(--fb); }

.tarjeta__fecha {
  font-size: 0.90rem;
  color: var(--hierro-suave);
  font-weight: 400;
}

/* Título */
.tarjeta__titulo {
  margin: 0 0 12px;
  font-family: var(--fuente-cuerpo);
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  line-height: 1.3;
  font-weight: 700;
  color: var(--azulejo-profundo);
}

/* Imagen */
/* Galería / carrusel horizontal */
.tarjeta__galeria {
  margin: 4px 0 16px;
}

.tarjeta__galeria-pista {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: 8px;
}

.tarjeta__galeria-pista::-webkit-scrollbar {
  display: none;
}

.tarjeta__galeria-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.tarjeta__imagen {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  border-radius: 8px;
  background: var(--cal);
  object-fit: cover;
}

.tarjeta__galeria-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.tarjeta__galeria-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--cal-sombra);
  cursor: pointer;
  transition: background 0.2s;
}

.tarjeta__galeria-dot--activo {
  background: var(--azulejo);
}

/* Fachada de vídeo (click-to-play) */
.tarjeta__video {
  display: block;
  position: relative;
  width: 100%;
  border: none;
  padding: 0;
  margin: 4px 0 16px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: var(--cal) center / cover no-repeat;
}
.tarjeta__video--vertical {
  max-width: 340px;
  margin-inline: auto;
}
.tarjeta__video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%);
  transition: transform 0.15s, opacity 0.15s;
  pointer-events: none;
}
.tarjeta__video:hover .tarjeta__video-play,
.tarjeta__video:focus-visible .tarjeta__video-play {
  transform: translate(-50%, -50%) scale(1.12);
  opacity: 0.92;
}
.tarjeta__video-wrapper {
  position: relative;
  width: 100%;
  margin: 4px 0 16px;
  border-radius: 8px;
  overflow: hidden;
}
.tarjeta__video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Cuerpo */
.tarjeta__cuerpo {
  font-size: clamp(1rem, 2.5vw, 1.08rem);
  line-height: 1.7;
  color: var(--hierro);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.tarjeta__cuerpo p       { margin: 0 0 0.8em; }
.tarjeta__cuerpo p:last-child { margin-bottom: 0; }
.tarjeta__cuerpo img     { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0; }
.tarjeta__cuerpo a       { color: var(--azulejo); text-decoration: underline; text-underline-offset: 3px; }
.tarjeta__cuerpo h2,
.tarjeta__cuerpo h3,
.tarjeta__cuerpo h4      { font-size: 1.1rem; margin: 0.9em 0 0.3em; color: var(--azulejo-profundo); }

/* Recorte de cuerpos largos */
.tarjeta__cuerpo--corto {
  max-height: 360px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
  mask-image:          linear-gradient(180deg, #000 68%, transparent 100%);
}

/* Botón "seguir leyendo" */
.leer-mas {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 12px 16px;
  font-family: var(--fuente-cuerpo);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--azulejo);
  background: var(--azulejo-claro);
  border: 1.5px solid transparent;
  border-radius: var(--radio);
  cursor: pointer;
  text-align: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.leer-mas:hover {
  background: var(--terracota-suave);
  color: var(--terracota);
  border-color: var(--terracota);
}

/* Enlace a fuente original */
.tarjeta__enlace {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 16px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--azulejo);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1.5px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tarjeta__enlace:hover {
  color: var(--terracota);
  border-bottom-color: var(--terracota);
}

/* ------------------------------------------------------------------ */
/* 7. SKELETON DE CARGA                                                */
/* ------------------------------------------------------------------ */

.skeleton {
  background: var(--cal-pura);
  border-radius: var(--radio);
  padding: 22px 24px 24px;
  margin-bottom: 20px;
  box-shadow: var(--sombra-suave);
}

.skeleton__linea {
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(
    90deg,
    var(--cal-sombra) 25%,
    var(--cal) 50%,
    var(--cal-sombra) 75%
  );
  background-size: 200% 100%;
  animation: skeletonPulso 1.6s ease-in-out infinite;
  margin-bottom: 10px;
}
.skeleton__linea--ancha  { width: 40%;  height: 10px; }
.skeleton__linea--titulo { width: 75%;  height: 20px; margin-bottom: 14px; }
.skeleton__linea--l      { width: 100%; }
.skeleton__linea--m      { width: 85%; }
.skeleton__linea--s      { width: 60%; }

@keyframes skeletonPulso {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ------------------------------------------------------------------ */
/* 8. ESTADOS                                                           */
/* ------------------------------------------------------------------ */

.estado {
  max-width: var(--ancho);
  margin: 4px auto 24px;
  padding: 0 20px;
  text-align: center;
  font-size: 1rem;
  color: var(--hierro-suave);
  font-style: italic;
}
.estado--error {
  color: #B3261E;
  font-weight: 700;
  font-style: normal;
}

#centinela { height: 1px; }

/* ------------------------------------------------------------------ */
/* 9. BOTÓN "VOLVER ARRIBA"                                            */
/* ------------------------------------------------------------------ */

.arriba {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 52px;
  height: 52px;
  color: var(--cal-pura);
  background: var(--azulejo);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(14,58,79,.35);
  cursor: pointer;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.arriba:hover {
  background: var(--terracota);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(196,89,42,.4);
}

/* ------------------------------------------------------------------ */
/* 10. FOOTER                                                          */
/* ------------------------------------------------------------------ */

.pie {
  margin-top: 20px;
  padding: 28px 0 44px;
  background: var(--cal-sombra);
  border-top: 1px solid rgba(46,38,32,.10);
}

.pie__texto {
  margin: 0;
  font-size: 0.92rem;
  color: var(--hierro-medio);
  line-height: 1.65;
}
.pie__texto strong { color: var(--hierro); }
.pie__texto a {
  color: var(--azulejo);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease);
}
.pie__texto a:hover { color: var(--terracota); }

/* ------------------------------------------------------------------ */
/* 11. RESPONSIVE                                                      */
/* ------------------------------------------------------------------ */

/* Móvil compacto: la barra sticky no debe comerse la pantalla */
@media (max-width: 479px) {
  .cabecera { padding: 20px 0 18px; }

  .controles__caja {
    padding-top: 8px;
    padding-bottom: 8px;
    gap: 6px;
  }

  .buscador { padding: 0 12px; }

  .buscador__input {
    font-size: 0.95rem;
    padding: 7px 0;
  }

  .filtros { gap: 6px; }

  .chip {
    min-height: 34px;
    padding: 5px 12px;
    font-size: 0.85rem;
  }
}

@media (min-width: 480px) {
  .filtros     { flex-wrap: nowrap; }
  .chip        { flex: 0 1 auto; }
}

@media (min-width: 600px) {
  body { font-size: 19px; }
  .cabecera { padding: 52px 0 44px; }
  .tarjeta { padding: 26px 30px 28px; }
}

@media (min-width: 900px) {
  .controles__caja {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  .buscador  { flex: 1; }
  .filtros   { margin-top: 0; }
}

/* ------------------------------------------------------------------ */
/* 12. PREFERS-REDUCED-MOTION                                         */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  .tarjeta,
  .skeleton__linea {
    animation: none !important;
    transition: none !important;
  }
  .tarjeta {
    opacity: 1;
    transform: none;
  }
  html { scroll-behavior: auto; }
}