/* ==========================================================
   SALUDANIMAL CASABLANCA – STYLE.CSS (ESTABLE Y ORDENADO)
   ----------------------------------------------------------
   1) Reset / Base
   2) Layout
   3) Tipografía
   4) Links y listas
   5) Botones
   6) Header (fetch en #header)
      6.1 Wrapper + estados
      6.2 Site-header (contenedor real)
      6.3 Barra superior (header-top)
      6.4 Header principal (logo + nav)
      6.5 Nav desktop (PawFriends hover)
      6.6 Botón móvil
      6.7 Nav móvil
   7) Hero
========================================================== */


/* =========================
   1) RESET / BASE
========================= */
*{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: smooth; }

body{
  font-family: "Nunito", sans-serif;
  line-height: 1.5;
  color: #1f2937;
  background: #ffffff;
}




/* =========================
   2) LAYOUT
========================= */
.container{
  width: min(1100px, 92%);
  margin: 0 auto;
}

section{ padding: 70px 0; }

.horario, .testimonios{ background: #f8fafc; }
.cta{ background: #0ea5a4; color: #ffffff; text-align: center; }


/* =========================
   3) TIPOGRAFÍA
========================= */
h1, h2, h3{ line-height: 1.2; }
h1{ font-size: clamp(28px, 3vw, 44px); margin-bottom: 10px; }
h2{ font-size: clamp(22px, 2.2vw, 32px); margin-bottom: 16px; }
p{ margin: 8px 0; }


/* =========================
   4) LINKS Y LISTAS
========================= */
a{ color: inherit; text-decoration: none; }
a:hover{ opacity: 0.9; }
ul{ list-style: none; }


/* =========================
   5) BOTONES
========================= */
.btn-primary, .btn-secondary{
  display: inline-block;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 700;
  transition: transform .15s ease, opacity .15s ease;
  border: 0;
}
.btn-primary{ background: #0ea5a4; color: #ffffff; }
.btn-secondary{ background: #ffffff; color: #0ea5a4; }
.btn-primary:hover, .btn-secondary:hover{ transform: translateY(-1px); }


/* =========================
   UTILIDADES
========================= */
.text-center{ text-align: center; }


/* ==========================================================
   6) HEADER (FETCH) + ESTADOS
========================================================== */

/* ---------- 6.1 Wrapper (#header) con 2 modos: normal / sticky ---------- */
#header{
  position: absolute;   /* ✅ NORMAL: se va con la página */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;

  transform: translateY(0);
  opacity: 1;

  transition: transform .85s ease, opacity .45s ease;
}

/* ✅ STICKY: cuando pasas 500px, lo ponemos fijo */
#header.is-sticky{
  position: fixed;
  transform: translateY(-110%); /* entra desde arriba */
  opacity: 0;
}

/* En modo sticky la botonera es más estrecha */
#header.is-sticky .header-container{
  padding: 8px 0;   /* antes 22px */
  
}

/* Línea fina negra debajo cuando es sticky */
#header.is-sticky .site-header{
  border-bottom: 1px solid rgba(241, 241, 241, 0.8);
}



/* cuando está activo (se muestra) */
#header.is-sticky.is-sticky-show{
  transform: translateY(0);
  opacity: 1;
}

/* Si el menú móvil está abierto, no ocultes nada */
#header.menu-open{
  position: fixed !important;
  transform: translateY(0) !important;
  opacity: 1 !important;
}

/* En sticky: oculta la barra superior y deja solo logo + nav */
#header.is-sticky .header-top{
  display: none;
}

/* En sticky: fondo blanco y sombra (si quieres) */
#header.is-sticky .site-header{
  background: rgba(255, 255, 255, 0.96);
  
}
#header.is-sticky .logo img{
  height: 65px; /* antes 100px */
  transition: height .35s ease;
}


/* ===== STICKY: normal negro / hover+active blanco con “gota” azul ===== */

/* Normal (sticky): texto negro, sin fondo */
#header.is-sticky .main-nav a{
  background: transparent;
  color: #111827;
  text-shadow: none;
}

/* La “gota” en sticky debe ser azul (la capa pf-hover) */
#header.is-sticky .main-nav a .pf-hover{
  background: #0ea5a4;                /* azul */
 
}

/* Hover: texto blanco */
#header.is-sticky .main-nav a:hover{
  color: #ffffff;
}

/* Active: texto blanco */
#header.is-sticky .main-nav a.active{
  color: #ffffff;
}

/* Si quieres que en hover/active no haya ningún halo negro del texto */
#header.is-sticky .main-nav a:hover,
#header.is-sticky .main-nav a.active{
  text-shadow: none;
}





/* ---------- 6.2 Site-header (contenedor real) ---------- */
#header .site-header{
  position: relative;
  background: transparent;
  border: none;
  transition: background .22s ease, box-shadow .22s ease;
}

/* En scroll: header blanco */
#header.is-scrolled .site-header{
  background: rgba(255,255,255,0.96);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}


/* ---------- 6.3 Barra superior (header-top) ---------- */
#header .header-top{
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Contenedor */
#header .header-top-container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  max-width: none;
  width: 100%;
  padding-left: 150px;
  padding-right: 150px;
  font-size: 13px;
  color: rgba(255,255,255,0.92);
}

/* Bloques */
#header .top-left,
#header .top-right{
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

#header .top-right{
  margin-left: auto;
  justify-content: flex-end;
  text-align: right;
}

/* Items */
#header .top-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  opacity: 0.95;
}

#header a.top-item{ cursor: pointer; }
#header a.top-item:hover{ opacity: 0.82; }

/* Iconos */
#header .top-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0ea5a4;
  flex: 0 0 auto;
  line-height: 1;
}

#header .top-icon.material-symbols-outlined{
  font-size: 16px;
  font-variation-settings:
    "FILL" 0,
    "wght" 300,
    "GRAD" 0,
    "opsz" 20;
}


/* ---------- 6.4 Header principal (logo + nav) ---------- */
#header .header-main{
  position: relative;
  z-index: 2;
}

#header .header-container{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  padding: 22px 0;
  margin-left: 100px;
  position: relative;
  z-index: 2;
}

/* Logo */
#header .logo{
  display: flex;
  align-items: center;
}

#header .logo img{
  height: 100px;
  width: auto;
  display: block;
  transition: height .25s ease;
  
}

#header.is-scrolled .logo img{
  height: 52px;
  filter: none;
}


/* ---------- 6.5 Nav desktop (RECTÁNGULO “GOTA” limpio) ---------- */
#header .main-nav{
  background: transparent;
  border: none;
  box-shadow: none;
  position: relative;
  z-index: 3;
}

#header .nav-inner{
  display: flex;
  align-items: center;
}

#header .main-nav ul{
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Evita que tu regla global a:hover{opacity:.9} afecte aquí */
#header .main-nav a:hover{ opacity: 1 !important; }

/* Link base */
#header .main-nav a{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 16px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;

  color: rgba(255,255,255,0.96);
  
  background: transparent;

  transition: color .30s ease, text-shadow .30s ease;
  isolation: isolate;
  overflow: visible; /* el “gota” puede sobresalir */
}

/* Texto arriba siempre */
#header .main-nav a > span{
  position: relative;
  z-index: 2;
  display: inline-block;
}

/* ✅ EFECTO ÚNICO: rectángulo con animación tipo gota */
#header .main-nav a .pf-hover{
  position: absolute;
  left: 50%;
  top: 50%;

  height: 36px;
  width: calc(100% + 20px);

  background: #ffffff;
  border-radius: 5px; /* rectángulo suave */

  /* “nace” desde el centro como gota */
  transform: translate(-50%, -50%) scale(0.15);
  opacity: 0;
  visibility: hidden;

  z-index: 1;
  pointer-events: none;

  

  /* gota: suave y lenta */
  transition:
    transform 820ms cubic-bezier(.16, 1, .3, 1),
    opacity 320ms ease,
    visibility 0s linear 320ms;
}

/* Suaviza aún más el “gota” con blur SOLO al inicio (sin sombras raras) */
#header .main-nav a .pf-hover{
  filter: blur(1.5px);
}
#header .main-nav a:hover .pf-hover,
#header .main-nav a.active .pf-hover{
  filter: blur(0px);
}

/* Hover/Active: aparece */
#header .main-nav a:hover .pf-hover,
#header .main-nav a.active .pf-hover{
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  visibility: visible;
  transition:
    transform 820ms cubic-bezier(.16, 1, .3, 1),
    opacity 320ms ease,
    visibility 0s;
}

/* 🔥 Apaga por completo las 3 piezas si el JS las mete dentro */
#header .main-nav a .pf-hover-left,
#header .main-nav a .pf-hover-right,
#header .main-nav a .pf-hover-middle{
  display: none !important;
}

/* Texto al hover/active */
#header .main-nav a:hover,
#header .main-nav a.active{
  color: #0ea5a4;
  text-shadow: none;
}



#header.is-scrolled .main-nav a:hover,
#header.is-scrolled .main-nav a.active{
  color: #0ea5a4;
}

/* === OVERRIDE: recuperar trapecio invertido (sin romper letras) === */

/* El <a> solo recorta un poco, no lo convierte en píldora */
#header .main-nav a{
  border-radius: 6px;     /* antes 14px -> demasiado redondo */
}

/* Hover: menos redondo y con sensación de trapecio */
#header .main-nav a .pf-hover{
  height: 32px;                        /* un pelín más alto */
  width: calc(92% );            /* un pelín más ancho */
  
}

/* Piezas laterales: menos redondas (para que se lea trapecio, no cápsula) */
#header .main-nav a .pf-hover-left{
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
#header .main-nav a .pf-hover-right{
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* Centro: menos redondo */
#header .main-nav a .pf-hover-middle{
  border-radius: 6px;     /* antes 16px -> cápsula */
}

/* Truco clave: ligero “cierre” inferior (sensación trapecio invertido) */
#header .main-nav a:hover .pf-hover,
#header .main-nav a.active .pf-hover{
  transform: translate(-50%, -50%) scaleX(1) scaleY(1) skewX(-16deg);
}

/* Y al aparecer desde el centro también le damos ese skew suave */
#header .main-nav a .pf-hover{
  transform: translate(-50%, -50%) scaleX(0.08) scaleY(0.86) skewX(-16deg);
}



/* ---------- 6.6 Botón móvil ---------- */
#header .menu-toggle{
  display: none;
  font-size: 22px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.10);
  color: #fff;
  cursor: pointer;
  position: relative;
  z-index: 10;
}

#header.is-scrolled .menu-toggle{
  color: #111827;
  border: 1px solid #e5e7eb;
  background: #ffffff;
}


/* ---------- 6.7 Responsive móvil ---------- */
@media (max-width: 900px){

  #header .header-top-container{
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }

  #header .top-left,
  #header .top-right{
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-left: 0;
  }

  #header .header-container{
    margin-left: 0;
    justify-content: space-between;
    gap: 14px;
  }

  #header .menu-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #header .main-nav{
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 16px;
    background: rgba(255,255,255,0.96);
    border-bottom: 1px solid #e5e7eb;
    z-index: 99999;
  }

  #header .main-nav.active{
    display: block;
  }

  #header .nav-inner{ width: 100%; }

  #header .main-nav ul{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  #header .main-nav ul a{
    display: block;
    background: #f8fafc;
    color: #111827;
    padding: 10px 12px;
    border-radius: 10px;
    text-shadow: none;
  }

  /* ✅ En móvil: desactivo el hover SVG para que no haga cosas raras */
  #header .main-nav ul a .pf-hover{
    display: none !important;
  }

  #header .main-nav ul a.active{
    background: #0ea5a4;
    color: #ffffff;
  }
}
/* ==========================================================
   7) HERO – Responsive
========================================================== */
.hero{
  min-height: 100vh;
  padding: 0;
  margin: 0;
  position: relative;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  background-image: url("../img/hero/inicio2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
}

.hero .container{
  position: relative;
  z-index: 2;
  text-align: left;
  color: #ffffff;

  /* ✅ responsive: padding y margen con clamp */
  max-width: 700px;
  padding-top: clamp(70px, 10vh, 110px);
  margin-left: clamp(16px, 8vw, 300px);
  margin-right: 16px;
}

/* Imagen hero */
.hero-image{
  max-width: min(340px, 85vw);
  width: 100%;
  margin: 28px 0 0 0;
  display: block;
}

/* Título */
.hero h1{
  margin-bottom: 18px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;

  /* ✅ responsive */
  font-size: clamp(34px, 4.5vw, 60px);
  line-height: 1.05;
}

/* Subtítulo */
.hero h3{
  margin-bottom: 26px;
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  line-height: 1.6;

  /* ✅ responsive */
  font-size: clamp(16px, 1.6vw, 20px);
  max-width: 600px;
}

/* ✅ Ajuste extra móvil */
@media (max-width: 600px){
  .hero .container{
    margin-left: 16px;
    margin-right: 16px;
    max-width: 100%;
  }

  .hero::before{
    background: rgba(0,0,0,0.35); /* un pelín más para legibilidad */
  }
}


/* ==========================================================
   8) NUEVA ETAPA
========================================================== */

.nueva-etapa{
  padding: 100px 0;
  background: #ffffff;
}

.nueva-etapa .container{
  max-width: 900px;
}

.nueva-etapa h2{
  font-family: 'Nunito', sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  margin-bottom: 30px;
  color: #0ea5a4;
}

.nueva-etapa p{
  font-size: 18px;
  line-height: 1.8;
  color: #374151;
  margin-bottom: 22px;
}

.nueva-etapa strong{
  color: #111827;
}

.nueva-etapa blockquote{
  margin: 40px 0;
  padding-left: 24px;
  border-left: 4px solid #0ea5a4;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  color: #111827;
}

.mensaje-final{
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid #e5e7eb;
}

.mensaje-final p{
  font-size: 18px;
}

.mensaje-final .firma{
  margin-top: 20px;
  font-weight: 600;
  color: #0ea5a4;
}


/* ===========================
   MAPA FULL – sin huecos
   =========================== */
.map-full{
  margin: 0 0 150px 0;   /* ← margen SOLO debajo */
  padding: 0 !important;
  line-height: 0;          /* evita espacios raros por baseline */
  

}

/* El iframe por defecto es inline: lo pasamos a block */
.map-full iframe{
  display: block;
  width: 100%;
  height: 540px;           /* ajusta a gusto */
  border: 0;
  margin: 0;
  padding: 0;
}