:root {
  --turquesa: #1D8D98;
  --turquesa-osc: #156A73;
  --turquesa-claro: #3FB4BF;
  --coral: #D81A0E;
  --coral-osc: #A8150B;
  --carbon: #131313;
  --crema: #FAF4EB;
  --crema-base: #F0E8D8;
  --crema-mid: #E7E1D2;
  --crema-dark: #D4C8AE;
  --salvia: #7A9A7E;
  --roble: #C7B295;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: #FAF4EB; scroll-behavior: smooth; }
body {
  font-family: 'Poppins', sans-serif;
  color: var(--carbon);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  isolation: isolate;
  background: #FAF4EB;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* El fondo general lo aporta bg-corporativo.css (body::before / body::after) */
#root, #app { position: relative; z-index: 1; }
section { position: relative; }

.hero-map-bg {
  position: relative;
  overflow: hidden;
  background: transparent;
}
.hero-map-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("assets/mapa-cobertura-bormujos.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.62;
  transform-origin: 50% 55%;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  animation:
    heroMapRevealPremium 1.1s cubic-bezier(0.22,0.61,0.36,1) both,
    heroMapKenBurnsPremium 24s ease-in-out 1.2s infinite alternate;
}
@keyframes heroMapRevealPremium {
  from { opacity: 0; transform: scale3d(1.04,1.04,1); filter: blur(2px) saturate(0.9); }
  to   { opacity: 0.62; transform: scale3d(1,1,1); filter: blur(0) saturate(1.02); }
}
@keyframes heroMapKenBurnsPremium {
  0%   { transform: scale3d(1,1,1) translate3d(0,0,0); }
  100% { transform: scale3d(1.02,1.02,1) translate3d(-0.4%,-0.25%,0); }
}
.hero-map-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(250,244,235,0.40) 0%,
      rgba(250,244,235,0.18) 28%,
      rgba(250,244,235,0.04) 55%,
      rgba(250,244,235,0) 100%);
}
.hero-map-bg > * { position: relative; z-index: 2; }

.card,
.service-card,
.info-card,
.bg-premium-card {
  background: rgba(255,252,246,0.86);
  border: 1px solid rgba(91,140,62,0.10);
  box-shadow: 0 22px 60px rgba(60,90,40,0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

button, .btn, .cta, .whatsapp-btn {
  box-shadow: 0 12px 32px rgba(29,141,152,0.18);
}

.hero-pill-bg {
  position: relative;
  overflow: hidden;
}
.hero-pill-bg::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 0;
  height: 0;
  display: none;
}
.hero-pill-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(250,244,235,0.96) 0%,
    rgba(250,244,235,0.74) 42%,
    rgba(250,244,235,0.30) 75%,
    rgba(250,244,235,0.18) 100%);
}
.hero-pill-bg > * { position: relative; z-index: 2; }

::selection { background: var(--turquesa); color: var(--crema); }
input:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--turquesa);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .hero-grid, .consejo-grid, .reserva-grid, .horarios-grid, .contacto-grid, .footer-grid {
    grid-template-columns: 1fr !important;
  }
  .main-nav, .status-pill { display: none !important; }
  .footer-grid { gap: 28px !important; }
}
@media (max-width: 700px) {
  .article-card { grid-template-columns: 1fr !important; gap: 16px !important; }
  .article-card figure, .article-card img { max-width: 100% !important; }
}
@media (max-width: 900px) {
  .footer-grid a { padding: 6px 0; }
  nav[aria-label="Migas de pan"] a { display: inline-block; padding: 8px 0; }
}
@media (max-width: 600px) {
  section { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ── Menú móvil (hamburguesa) ─────────────────────────── */
.nav-burger { display: none; }
.mobile-nav { display: none; }

@media (max-width: 900px) {
  .nav-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: rgba(21, 106, 115, 0.08);
    cursor: pointer;
  }
  .nav-burger__bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 18px;
  }
  .nav-burger__bars span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--turquesa, #156A73);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .nav-burger__bars.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger__bars.is-open span:nth-child(2) { opacity: 0; }
  .nav-burger__bars.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mobile-nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(250, 244, 235, 0.98);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(21, 106, 115, 0.12);
    box-shadow: 0 18px 36px rgba(19, 19, 19, 0.10);
    padding: 8px 20px 18px;
  }
  .mobile-nav__links {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .mobile-nav__links a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 0 12px;
    border-radius: 10px;
    font-family: Poppins, sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #131313;
    text-decoration: none;
  }
  .mobile-nav__links a:active,
  .mobile-nav__links a:hover {
    background: rgba(21, 106, 115, 0.08);
    color: #156A73;
  }
  .mobile-nav__status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px 0;
    border-top: 1px solid rgba(21, 106, 115, 0.12);
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 600;
  }
}


/* =========================================================
   HERO MAPA PREMIUM — ZONA COBERTURA (cruz cae + radio rojo)
   IMPLEMENTACIÓN ÚNICA — NO AÑADIR OVERRIDES DEBAJO
   ========================================================= */
:root {
  --fv-map-target-x: 50%;
  --fv-map-target-y: 48%;
  --fv-cross-size: clamp(72px, 6.4vw, 116px);
  --fv-radius-size: min(64vw, 920px);
}

.fv-map-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  border-radius: 24px;
}
.fv-map-hero--cover {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; border-radius: 0;
}
.fv-map-hero--cover .fv-map-hero__media {
  position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto;
}
.fv-map-hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #eef7f6;
}
.fv-map-hero__map {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 600ms ease-out;
}
.fv-map-hero.is-visible .fv-map-hero__map {
  opacity: 1;
}
.fv-map-hero__media::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  /* sin overlay sobre el mapa: garantizamos legibilidad de Castilleja, Gines, Mairena, etc. */
  background: transparent;
}

/* TOPÓNIMOS · etiquetas añadidas sobre el mapa, idénticas a las baked (Bormujos/Castilleja/Camas).
   Color, fuente, peso y tamaño se sampleó del PNG fuente: Roboto Medium #142530. */
.fv-map-hero__label {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  user-select: none;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  color: #142530;
  letter-spacing: 0;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  /* tamaño calculado para igualar la altura de capital de "Bormujos" baked: ~28px en fuente 1672px */
  font-size: clamp(11px, 2.0vw, 26px);
  line-height: 1.15;
  opacity: 0;
  transition: opacity 700ms ease-out 200ms;
}
.fv-map-hero.is-visible .fv-map-hero__label { opacity: 1; }
.fv-map-hero__label--tomares    { left: 71.8%; top: 50.5%; }
.fv-map-hero__label--gines      { left: 42.3%; top: 15.4%; }
.fv-map-hero__label--espartinas { left: 24.5%; top: 30.0%; }
.fv-map-hero__label--castilleja { left: 60.1%; top: 23.6%; }
.fv-map-hero__label--camas      { left: 77.6%; top: 24.8%; }
.fv-map-hero__label--bormujos   { left: 50.0%; top: 57.0%; }
.fv-map-hero__label--mairena    { left: 58.0%; top: 82.2%; }

.fv-map-hero__label--multi {
  white-space: pre-line;
  text-align: center;
  line-height: 1.12;
}
@media (max-width: 768px) {
  .fv-map-hero__label { font-size: clamp(10px, 2.6vw, 18px); }
  /* mismas posiciones porque el contenedor mantiene 16:9 */
}
@media (prefers-reduced-motion: reduce) {
  .fv-map-hero__label { opacity: 1 !important; transition: none !important; }
}

/* CRUZ — logo oficial 3D (cruz turquesa + marcador rojo).
   Caja cuadrada; object-fit contain conserva proporciones del PNG (771×704)
   y permite que los keyframes con translate3d -50% sigan centrando sobre Bormujos. */
.fv-map-hero__cross {
  position: absolute;
  left: var(--fv-map-target-x);
  top: var(--fv-map-target-y);
  width: var(--fv-cross-size);
  height: var(--fv-cross-size);
  object-fit: contain;
  object-position: center center;
  image-rendering: auto;
  z-index: 6;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transform: translate3d(-50%, -260%, 0) scale(0.96) rotate(-2deg);
  filter: drop-shadow(0 8px 14px rgba(21,106,115,0.16));
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
.fv-map-hero__cross::before {
  content: "";
  position: absolute;
  inset: -30%;
  border-radius: 999px;
  background: radial-gradient(rgba(29,141,152,0.12), transparent 70%);
  filter: blur(18px);
  z-index: -1;
}
.fv-map-hero.is-visible .fv-map-hero__cross {
  animation:
    fvCrossFallPremium 1.05s cubic-bezier(.18,.86,.28,1.05) 0.4s forwards,
    fvCrossImpactPremium 0.32s ease-out 1.4s forwards;
}
@keyframes fvCrossFallPremium {
  0%   { opacity: 0; transform: translate3d(-50%,-260%,0) scale(0.96) rotate(-2deg); }
  12%  { opacity: 1; }
  68%  { transform: translate3d(-50%,-47%,0) scale(1.02) rotate(0.5deg); }
  84%  { transform: translate3d(-50%,-54%,0) scale(0.995) rotate(-0.2deg); }
  100% { opacity: 1; transform: translate3d(-50%,-50%,0) scale(1) rotate(0deg); }
}
@keyframes fvCrossImpactPremium {
  0%   { transform: translate3d(-50%,-50%,0) scale(1); }
  45%  { transform: translate3d(-50%,-50%,0) scale(1.035); }
  100% { transform: translate3d(-50%,-50%,0) scale(1); }
}

/* RADIO COBERTURA */
.fv-map-hero__radius {
  position: absolute;
  left: var(--fv-map-target-x);
  top: var(--fv-map-target-y);
  width: var(--fv-radius-size);
  aspect-ratio: 1 / 1;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.04);
  border-radius: 48% 52% 46% 54% / 51% 46% 54% 49%;
  border: 2px solid rgba(216,26,14,0.34);
  background: radial-gradient(circle at 50% 50%,
    rgba(216,26,14,0.17) 0%,
    rgba(216,26,14,0.13) 38%,
    rgba(216,26,14,0.08) 66%,
    rgba(216,26,14,0.025) 100%);
  box-shadow: 0 16px 48px rgba(216,26,14,0.08);
  will-change: transform, opacity;
}
.fv-map-hero.is-visible .fv-map-hero__radius {
  animation:
    fvRadiusAppearPremium 1s cubic-bezier(.19,1,.22,1) 1.2s forwards,
    fvRadiusOrganicPremium 7s ease-in-out 2.3s infinite alternate;
}
@keyframes fvRadiusAppearPremium {
  0%   { opacity: 0; transform: translate3d(-50%,-50%,0) scale(0.04); }
  42%  { opacity: 0.72; }
  72%  { transform: translate3d(-50%,-50%,0) scale(1.015); }
  100% { opacity: 1; transform: translate3d(-50%,-50%,0) scale(1); }
}
@keyframes fvRadiusOrganicPremium {
  0%   { border-radius: 48% 52% 46% 54% / 51% 46% 54% 49%; }
  100% { border-radius: 50% 50% 52% 48% / 48% 52% 48% 52%; }
}

/* MÓVIL — misma coreografía que escritorio; solo se adaptan tamaños y posición */
@media (max-width: 768px) {
  .hero-map-bg::before {
    animation: heroMapRevealMobile 0.9s cubic-bezier(0.22,0.61,0.36,1) both !important;
  }
  @keyframes heroMapRevealMobile {
    from { opacity: 0; transform: scale3d(1.03,1.03,1); filter: blur(1.5px); }
    to   { opacity: 0.62; transform: scale3d(1,1,1); filter: blur(0); }
  }
  .fv-map-hero__cross {
    filter: drop-shadow(0 6px 10px rgba(21,106,115,0.14));
    /* La cruz aterriza por encima de la etiqueta "Bormujos" para no taparla;
       el radio de cobertura sigue centrado en el pueblo. Offset fijo en px
       para no depender de la altura del mapa en pantallas estrechas. */
    top: calc(var(--fv-map-target-y) - 28px);
  }
  :root {
    --fv-map-target-x: 50%;
    --fv-map-target-y: 58%;
    /* Porcentaje del ancho del mapa (no de la pantalla): misma proporción
       que en escritorio, cubriendo el anillo Gines–Castilleja–Camas–Tomares–Mairena */
    --fv-radius-size: 78%;
    --fv-cross-size: clamp(52px, 12vw, 84px);
  }
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .hero-map-bg::before,
  .fv-map-hero__cross,
  .fv-map-hero__radius { animation: none !important; }
  .fv-map-hero__map { opacity: 1 !important; transition: none !important; }
  .fv-map-hero__cross { opacity: 1; transform: translate3d(-50%,-50%,0); }
  .fv-map-hero__radius { opacity: 1; transform: translate3d(-50%,-50%,0) scale(1); }
}

/* =========================================================
   HERO MAP · REFINAMIENTO PREMIUM
   Capa de pulido por encima de la implementación base.
   ========================================================= */

/* Variante "baked": el PNG ya trae cruz + círculo cobertura.
   Ocultamos los overlays DOM para evitar duplicaciones. */
.fv-map-hero--baked .fv-map-hero__cross,
.fv-map-hero--baked .fv-map-hero__radius {
  display: none !important;
}

/* SVG composite cross dimensions — el SVG se escala al tamaño de --fv-cross-size */
svg.fv-map-hero__cross {
  width: var(--fv-cross-size);
  height: var(--fv-cross-size);
  overflow: visible;
}

/* 1. Mapa con saturación/contraste más cinematográficos */
.fv-map-hero__map {
  filter: saturate(0.88) contrast(0.94) brightness(1.01);
  animation: fvMapCinematicZoom 28s ease-in-out infinite alternate;
  transform-origin: center center;
  backface-visibility: hidden;
}
@keyframes fvMapCinematicZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.035); }
}

/* 2. Ambient light sutil rotando por encima del mapa */
.fv-map-hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(255,255,255,0.08), transparent 60%);
  animation: fvMapAmbient 14s linear infinite;
}
@keyframes fvMapAmbient {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Refinamiento premium del refinamiento: cross con bounce + delay 0.4s */
.fv-map-hero.is-visible .fv-map-hero__cross {
  animation:
    fvCrossFallPremium 1.05s cubic-bezier(.18,.86,.28,1.05) 0.4s forwards,
    fvCrossImpactPremium 0.32s ease-out 1.4s forwards,
    fvMarkerGlow 4s ease-in-out 1.95s infinite;
}
@keyframes fvMarkerGlow {
  0%   { filter: drop-shadow(0 10px 18px rgba(21,106,115,0.18)) drop-shadow(0 0 0 rgba(29,141,152,0)); }
  50%  { filter: drop-shadow(0 10px 18px rgba(21,106,115,0.18)) drop-shadow(0 0 18px rgba(29,141,152,0.28)); }
  100% { filter: drop-shadow(0 10px 18px rgba(21,106,115,0.18)) drop-shadow(0 0 0 rgba(29,141,152,0)); }
}

@media (prefers-reduced-motion: reduce) {
  .fv-map-hero__map,
  .fv-map-hero::before { animation: none !important; }
}

/* =========================================================
   GUARDIA LINK · botón premium para Colegio de Farmacéuticos
   ========================================================= */
.guardia-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1D8D98, #16717A);
  color: #FAF4EB !important;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(29,141,152,0.18);
  transition: transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease;
}
.guardia-link::after {
  content: "↗";
  font-size: 0.92rem;
  opacity: 0.85;
  transition: transform 0.28s ease;
}
.guardia-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(29,141,152,0.24);
  filter: brightness(1.04);
}
.guardia-link:hover::after {
  transform: translate(3px,-3px);
}
.guardia-link--ghost {
  background: transparent;
  color: #156A73 !important;
  border: 1px solid rgba(21,106,115,0.4);
  box-shadow: none;
}
.guardia-link--ghost:hover {
  background: rgba(21,106,115,0.06);
  box-shadow: none;
}