/* ============================================================
   TAXI EL PERNAU — Hoja de estilos principal
   Tipografía: Playfair Display (titulares) + Inter (cuerpo)
   Colores: rojo #9e070d · verde #25b61c · dorado #d97706
   ============================================================ */


/* ----------------------------------------------------------
   1. VARIABLES Y RESET GLOBAL
   ---------------------------------------------------------- */
:root{
  --rojo:        #9e070d;
  --rojo-oscuro: #7c050a;
  --verde:       #25b61c;
  --verde-oscuro:#1a8a14;
  --dorado:      #d97706;
  --oro-suave:   #fbbf24;
  --tinta:       #0f172a;
  --tinta-suave: #334155;
  --borde:       #e2e8f0;
  --fondo:       #ffffff;
  --fondo-gris:  #f8fafc;
  --wa:          #25d366;
  --sombra:      0 10px 30px rgba(15,23,42,.08);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:80px; /* Compensa la altura del menú sticky */
}

body{
  font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--tinta);
  background:var(--fondo);
  -webkit-font-smoothing:antialiased;
}

/* Titulares con tipografía serif elegante */
h1,h2,h3,h4{ font-family:'Playfair Display',Georgia,serif; }

img{ display:block; max-width:100%; }
a{ text-decoration:none; color:inherit; }
strong{ font-weight:600; }
button{ font:inherit; }

:focus-visible{ outline:3px solid rgba(158,7,13,.45); outline-offset:2px; border-radius:4px; }
::selection{ background:var(--rojo); color:#fff; }

/* Contenedor central responsive */
.contenedor{ width:min(1180px, 92%); margin-inline:auto; }


/* ----------------------------------------------------------
   2. CABECERA PRINCIPAL (logo + teléfono + mascotas)
   ---------------------------------------------------------- */
.cabecera{
  position:relative;
  background:#fff;
  border-bottom:1px solid #ececec;
}

.cabecera-fila{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,6fr) minmax(0,2fr);
  align-items:center;
  gap:26px;
  padding:14px 0;
}

/* Logo sin deformación */
.logo img{ width:auto; height:100px; object-fit:contain; transition:all .35s ease; }
.logo a{ display:inline-block; }

/* Teléfono centrado con hover suave */
.telefono{ text-align:center; }
.telefono a{ display:inline-block; transition:transform .25s ease; }
.telefono a:hover{ transform:scale(1.035); }
.telefono img{ width:min(668px,100%); height:auto; margin-inline:auto; }

/* Mascotas con micro-animación */
.mascotas{ text-align:center; }
.mascotas a{ display:inline-block; transition:transform .3s ease; }
.mascotas a:hover{ transform:rotate(-4deg) scale(1.05); }
.mascotas img{ width:120px; height:auto; margin-inline:auto; }


/* ----------------------------------------------------------
   3. BARRA ROJA + LEMA BILINGÜE
   ---------------------------------------------------------- */
.barra-roja{ height:8px; background:var(--rojo); }

.lema{
  padding:18px 0 20px;
  text-align:center;
  color:#475569;
}
.lema p{
  max-width:100%;
  margin-inline:auto;
  line-height:1.7;
  font-size:clamp(10px, 1.15vw, 13px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:300;
}
.lema .es{ display:block; }
.lema .en{ display:block; font-style:italic; color:#64748b; margin-top:2px; }


/* ----------------------------------------------------------
   4. SLIDESHOW
   ---------------------------------------------------------- */
.slideshow{
  position:relative;
  height:clamp(300px, 40vw, 609px);
  overflow:hidden;
  background:#0f172a;
}
.slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.1s ease;
}
.slide.activa{ opacity:1; z-index:2; }
.slide img{ width:100%; height:100%; object-fit:cover; }

/* Degradado inferior para mejorar legibilidad */
.slide-pie{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:3;
  height:90px;
  background:linear-gradient(transparent, rgba(0,0,0,.45));
  pointer-events:none;
}

/* Leyenda del slide */
.slide-leyenda{
  position:absolute;
  left:4%; bottom:26px;
  z-index:4;
  color:#fff;
  font-weight:500;
  font-size:clamp(15px, 1.6vw, 21px);
  text-shadow:0 2px 10px rgba(0,0,0,.6);
  letter-spacing:.3px;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .6s ease .25s, transform .6s ease .25s;
  pointer-events:none;
}
.slide-leyenda.ver{ opacity:1; transform:none; }

/* Flechas de navegación */
.slide-flecha{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:46px; height:46px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  background:rgba(255,255,255,.92);
  color:var(--tinta);
  display:grid;
  place-items:center;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  opacity:0;
  transition:opacity .3s ease, background .2s ease, color .2s ease;
}
.slide-flecha:hover{ background:var(--rojo); color:#fff; }
.slide-flecha svg{ width:20px; height:20px; }
.slide-flecha.izq{ left:18px; }
.slide-flecha.der{ right:18px; }
.slideshow:hover .slide-flecha{ opacity:1; }

/* Indicadores de puntos */
.slide-puntos{
  position:absolute;
  left:50%; bottom:16px;
  transform:translateX(-50%);
  z-index:5;
  display:flex;
  gap:9px;
}
.slide-puntos button{
  width:13px; height:13px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.85);
  background:transparent;
  cursor:pointer;
  padding:0;
  transition:background .25s ease, transform .25s ease, border-color .25s ease;
}
.slide-puntos button:hover{ transform:scale(1.2); }
.slide-puntos button.activa{ background:var(--rojo); border-color:#fff; transform:scale(1.12); }

@media (hover:none){ .slide-flecha{ opacity:.85; } }


/* ----------------------------------------------------------
   5. SECCIÓN EDUARDO
   ---------------------------------------------------------- */
.eduardo{ padding:46px 0 30px; }
.eduardo-fila{
  display:grid;
  grid-template-columns:250px 1fr;
  gap:34px;
  align-items:center;
}
.eduardo-foto{ text-align:center; }

/* Foto circular perfecta */
.eduardo-foto img{
  width:222px; height:222px;
  margin-inline:auto;
  border-radius:50%;
  object-fit:cover;
  object-position:center;
  transition:transform .4s ease;
}
.eduardo-foto img:hover{ transform:scale(1.04) rotate(-1.5deg); }

.eduardo h1{
  color:var(--verde);
  font-size:clamp(28px, 3.4vw, 40px);
  font-weight:600;
  line-height:1.2;
  margin-bottom:14px;
}
.eduardo p{ color:var(--tinta-suave); font-size:16.5px; font-weight:300; }
.eduardo p + p{ margin-top:.85em; }


/* ----------------------------------------------------------
   6. MENÚ PRINCIPAL (STICKY + HAMBURGUESA)
   NOTA: una sola línea inferior (border-bottom).
   El panel móvil NO tiene borde propio; lo hereda solo
   cuando está abierto mediante la clase .abierto.
   ---------------------------------------------------------- */
.menu-principal{
  background:#fff;
  border-bottom:1px solid #e3e3e3; /* Única línea inferior */
  padding:14px 0;
  position:sticky;
  top:0;
  z-index:100;
  transition:all .3s ease;
}

.menu-fila{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

/* Logo interno del menú (oculto por defecto) */
.menu-logo{
  opacity:0;
  width:0;
  overflow:hidden;
  transition:all .3s ease;
}
.menu-logo img{ height:50px; width:auto; object-fit:contain; }

/* Al llegar arriba: mostrar logo y separarlo de los enlaces */
.menu-principal.sticky .menu-fila{ justify-content:space-between; }
.menu-principal.sticky .menu-logo{ opacity:1; width:auto; }

/* Enlaces del menú */
.menu-enlaces{ list-style:none; display:flex; gap:38px; margin:0; padding:0; }
.menu-enlaces a{
  font-weight:500;
  font-size:14px;
  color:var(--tinta-suave);
  text-transform:uppercase;
  letter-spacing:1.5px;
  transition:color .2s;
  padding:5px 0;
  border-bottom:2px solid transparent;
}
.menu-enlaces a:hover{ color:var(--rojo); border-bottom-color:var(--rojo); }

/* Botón hamburguesa (oculto en desktop) */
.menu-hamburguesa{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:10px;
}
.menu-hamburguesa span{
  width:26px; height:3px;
  background:var(--tinta);
  border-radius:2px;
  transition:all .3s ease;
}
.menu-hamburguesa.activo span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.menu-hamburguesa.activo span:nth-child(2){ opacity:0; }
.menu-hamburguesa.activo span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* Panel desplegable móvil: SIN borde cuando está cerrado */
.menu-panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease, border-top-width .4s ease;
  background:#fff;
  border-top:0 solid #eee; /* Se expande solo al abrirse */
}
.menu-principal.abierto .menu-panel{
  max-height:600px;
  border-top-width:1px; /* Aparece la línea solo al abrir */
}
.menu-panel-enlaces{ list-style:none; padding:0; margin:0; text-align:center; }
.menu-panel-enlaces li{ margin:14px 0; }
.menu-panel-enlaces a{
  font-weight:500;
  font-size:15px;
  color:var(--tinta-suave);
  text-transform:uppercase;
  letter-spacing:1.5px;
  transition:color .2s;
}
.menu-panel-enlaces a:hover{ color:var(--rojo); }
.menu-panel-contacto{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:15px 0 25px;
}
.panel-tel{ font-size:20px; font-weight:700; color:var(--rojo); }
.panel-wa{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--wa);
  color:#fff;
  padding:10px 22px;
  border-radius:30px;
  font-weight:600;
  transition:transform .2s ease, box-shadow .2s ease;
}
.panel-wa:hover{ transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.15); }
.panel-wa img{ width:24px; height:24px; object-fit:contain; }


/* ----------------------------------------------------------
   7. BLOQUES GENERALES (titulares y separadores)
   ---------------------------------------------------------- */
.bloque{ padding:56px 0; }
.bloque-titulo{ text-align:center; margin-bottom:10px; }
.bloque-titulo h2{
  font-size:clamp(26px, 3vw, 36px);
  font-weight:600;
  color:var(--tinta);
  letter-spacing:.2px;
}
.bloque-sub{
  text-align:center;
  color:var(--tinta-suave);
  font-size:16px;
  font-weight:300;
  max-width:780px;
  margin:0 auto 34px;
}
.divisor{
  width:64px; height:4px;
  background:var(--rojo);
  margin:14px auto 20px;
  border-radius:2px;
}


/* ----------------------------------------------------------
   8. SECCIÓN CONTACTO
   ---------------------------------------------------------- */
.contacto-fila{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px;
  align-items:start;
}

.tel-banner{ margin-bottom:26px; }
.tel-banner a{ display:inline-block; transition:transform .25s ease; }
.tel-banner a:hover{ transform:scale(1.03); }
.tel-banner img{ width:min(319px,100%); height:auto; }

.contacto-lista{ list-style:none; max-width:440px; }
.contacto-item{
  display:flex;
  align-items:center;
  gap:16px;
  padding:13px 12px;
  border-bottom:1px solid #ededed;
  border-radius:8px;
  transition:background .25s ease, transform .25s ease;
}
.contacto-item:first-child{ border-top:1px solid #ededed; }
.contacto-item:hover{ background:var(--fondo-gris); transform:translateX(6px); }
.contacto-item img{
  width:46px; height:46px;
  object-fit:contain;
  flex:none;
  transition:transform .3s ease;
}
.contacto-item:hover img{ transform:scale(1.12); }
.contacto-etiqueta{
  font-size:17px;
  font-weight:600;
  color:var(--tinta);
  transition:color .25s ease;
}
a.contacto-item:hover .contacto-etiqueta{ color:var(--rojo); }
.contacto-item.wa:hover .contacto-etiqueta{ color:var(--verde-oscuro); }

.mapa{ text-align:center; }
.mapa a{
  display:block;
  border:1px solid var(--borde);
  border-radius:10px;
  overflow:hidden;
  box-shadow:var(--sombra);
  transition:transform .35s ease, box-shadow .35s ease;
  background:#eee;
}
.mapa a:hover{ transform:translateY(-6px); box-shadow:0 20px 44px rgba(0,0,0,.16); }
.mapa img{ width:100%; height:auto; }
.mapa-nota{ margin-top:12px; font-size:13.5px; color:#64748b; }


/* ----------------------------------------------------------
   9. FORMULARIO DE RESERVAS
   ---------------------------------------------------------- */
.reservas{ background:linear-gradient(135deg, #ffffff 0%, #fdf6ec 100%); }
.reservas-caja{
  max-width:820px;
  margin-inline:auto;
  background:#fff;
  border-radius:20px;
  box-shadow:0 20px 50px rgba(15,23,42,.10);
  padding:40px;
}
.reservas-form{ display:flex; flex-direction:column; gap:20px; }

.form-fila{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }

.form-campo label{
  display:block;
  font-size:13.5px;
  font-weight:500;
  color:var(--tinta);
  margin-bottom:8px;
  letter-spacing:.3px;
}
.form-campo input,
.form-campo textarea{
  width:100%;
  padding:12px 16px;
  border:1px solid var(--borde);
  border-radius:10px;
  background:var(--fondo-gris);
  font:inherit;
  color:var(--tinta);
  transition:all .3s ease;
}
.form-campo input:focus,
.form-campo textarea:focus{
  outline:none;
  border-color:var(--rojo);
  box-shadow:0 0 0 3px rgba(158,7,13,.12);
  background:#fff;
}

/* Checkbox básico */
.form-check{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14.5px;
  color:var(--tinta-suave);
}
.form-check input{ width:18px; height:18px; accent-color:var(--rojo); }

/* Botón principal del formulario */
.form-boton{
  width:100%;
  padding:15px;
  background:var(--rojo);
  color:#fff;
  border:none;
  border-radius:10px;
  font-weight:600;
  font-size:15px;
  letter-spacing:.5px;
  cursor:pointer;
  transition:all .3s ease;
}
.form-boton:hover{
  background:var(--rojo-oscuro);
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(158,7,13,.25);
}

.form-ok{
  text-align:center;
  color:var(--verde-oscuro);
  font-weight:600;
  font-size:14.5px;
}

/* Contacto directo bajo el formulario */
.reservas-directo{
  margin-top:28px;
  padding-top:24px;
  border-top:1px solid var(--borde);
  text-align:center;
  font-size:14.5px;
  color:var(--tinta-suave);
}
.reservas-directo-links{
  margin-top:8px;
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}
.reservas-directo-links a{ color:var(--tinta); font-weight:600; }
.reservas-directo-links a:hover{ color:var(--rojo); }
.reservas-directo-links span{ color:#cbd5e1; }

/* Opciones extra del formulario (mascota, bicis, remolque) */
.form-extras{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  padding:6px 0 2px;
}
.form-extras .form-check{
  flex:1 1 180px;
  margin:0;
  padding:10px 14px;
  border:1px solid var(--borde);
  border-radius:10px;
  background:var(--fondo-gris);
  transition:all .25s ease;
  cursor:pointer;
}
.form-extras .form-check:hover{
  border-color:var(--rojo);
  background:#fff;
}
.form-extras .form-check:has(input:checked){
  border-color:var(--rojo);
  background:#fff;
  box-shadow:0 0 0 3px rgba(158,7,13,.10);
}


/* ----------------------------------------------------------
   10. BANDA PET FRIENDLY
   ---------------------------------------------------------- */
.pet-banda{
  padding:70px 0;
  background:linear-gradient(135deg, #f8fafc 0%, #fef3c7 100%);
}
.pet-caja{
  max-width:900px;
  margin-inline:auto;
  background:#fff;
  border-radius:24px;
  box-shadow:0 20px 45px rgba(15,23,42,.10);
  display:grid;
  grid-template-columns:1fr 1.5fr;
  overflow:hidden;
}

/* Columna visual con imagen de mascotas */
.pet-visual{
  background:linear-gradient(135deg, #f8fafc, #fff);
  display:grid;
  place-items:center;
  padding:30px;
}
.pet-visual img{
  width:100%;
  max-width:180px;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 6px 12px rgba(15,23,42,.08));
}

/* Columna de texto */
.pet-texto{ padding:40px; }
.pet-texto .etiqueta{
  color:var(--dorado);
  font-size:12.5px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  font-weight:600;
}
.pet-texto h2{
  font-size:30px;
  color:var(--tinta);
  margin:8px 0 12px;
  font-weight:600;
}
.pet-texto p{ color:var(--tinta-suave); font-weight:300; }
.pet-checks{
  display:flex;
  gap:22px;
  margin-top:18px;
  flex-wrap:wrap;
}
.pet-checks span{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:14px;
  color:var(--tinta-suave);
}
.pet-checks svg{ width:18px; height:18px; color:var(--dorado); }


/* ----------------------------------------------------------
   11. SECCIÓN SERVICIOS
   ---------------------------------------------------------- */
.servicios{ background:var(--fondo-gris); border-block:1px solid #ececec; }
.servicios-rejilla{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
}
.servicio{
  background:#fff;
  border:1px solid #e8e8e8;
  border-radius:12px;
  padding:30px 22px 26px;
  text-align:center;
  position:relative;
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
}

/* Barra superior que se despliega al hacer hover */
.servicio::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:var(--rojo);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s ease;
}
.servicio:hover{ transform:translateY(-6px); box-shadow:var(--sombra); }
.servicio:hover::before{ transform:scaleX(1); }

.servicio h4{ font-size:20px; font-weight:600; margin-bottom:12px; }
.servicio h4 a{
  color:var(--tinta);
  background-image:linear-gradient(var(--rojo), var(--rojo));
  background-repeat:no-repeat;
  background-size:0% 2px;
  background-position:50% 100%;
  padding-bottom:4px;
  transition:background-size .35s ease, color .25s ease;
}
.servicio:hover h4 a{ color:var(--rojo); background-size:100% 2px; }

.servicio p{ font-size:15px; color:var(--tinta-suave); font-weight:300; }
.servicio p strong{ color:var(--tinta); font-weight:600; }
.servicio a.interno{ color:var(--rojo); font-weight:600; }
.servicio a.interno:hover{ text-decoration:underline; }


/* ----------------------------------------------------------
   12. FOOTER (3 columnas en desktop, 1 en móvil)
   ---------------------------------------------------------- */
.pie-principal{
  background:#9E070D;
  color:#fff;
  padding-top:40px;
  font-size:15px;
}

/* Grid de 3 columnas en desktop */
.pie-rejilla{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:30px;
  padding-bottom:30px;
  border-bottom:1px solid rgba(255,255,255,.25);
}

/* Titulares del footer */
.pie-principal h3{
  color:#fff;
  font-size:19px;
  margin-bottom:15px;
  font-weight:600;
  border-bottom:2px solid rgba(255,255,255,.3);
  padding-bottom:8px;
  display:inline-block;
}

/* Listas del footer */
.pie-principal ul{ list-style:none; padding:0; margin:0 0 20px 0; }
.pie-principal li{ margin-bottom:8px; }

/* Enlaces: blancos y se vuelven gruesos al hover */
.pie-principal a{
  color:#fff;
  font-weight:300;
  transition:font-weight .2s ease;
}
.pie-principal a:hover{
  font-weight:700;
  text-decoration:none;
}

/* Teléfono grande en la columna central */
.pie-col-contacto{ text-align:center; }
.pie-tel a{
  font-size:28px;
  font-weight:700;
  color:#fff;
  display:block;
  margin-bottom:15px;
  transition:transform .2s ease;
}
.pie-tel a:hover{ transform:scale(1.03); text-decoration:none; }

/* Iconos sociales: fondo semitransparente para que el icono blanco sea visible sobre el rojo */
.pie-social{
  display:flex;
  gap:15px;
  justify-content:center;
  margin-top:18px;
}
.pie-social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  background:rgba(255,255,255,.15); /* Semitransparente: el icono blanco ya no desaparece */
  border-radius:50%;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.pie-social a:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 12px rgba(0,0,0,.25);
  background:rgba(255,255,255,.30);
}
.pie-social img{
  width:30px;
  height:30px;
  object-fit:contain;
  display:block;
}

/* Barra inferior de copyright */
.pie-barra-inferior{
  background:#7c050a;
  padding:15px 0;
  text-align:center;
  font-size:14px;
  color:#fff;
}
.pie-barra-inferior a{
  color:#fff;
  font-weight:300;
  transition:font-weight .2s ease;
}
.pie-barra-inferior a:hover{
  font-weight:700;
  text-decoration:none;
}

/* Barra roja final bajo el footer */
.pie-barra{ height:8px; background:#7c050a; }




/* ----------------------------------------------------------
   14. ANIMACIÓN REVEAL AL HACER SCROLL
   ---------------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.ver{ opacity:1; transform:none; }


/* ----------------------------------------------------------
   15. RESPONSIVE
   ---------------------------------------------------------- */

/* Tablet grande */
@media (max-width: 1100px){
  .cabecera-fila{ gap:16px; }
  .logo img{ height:82px; }
}

/* Tablet / móvil grande */
@media (max-width: 920px){
  html{ scroll-padding-top:150px; }

  .cabecera-fila{ grid-template-columns:1fr auto; padding:12px 0; }
  .logo{ grid-column:1; grid-row:1; }
  .logo img{ height:64px; }
  .mascotas{ grid-column:2; grid-row:1; }
  .mascotas img{ width:78px; }
  .telefono{ grid-column:1 / -1; grid-row:2; }

  .lema p{ white-space:normal; font-size:13px; }

  /* Menú móvil: logo SIEMPRE visible junto a la hamburguesa */
  .menu-enlaces{ display:none; }
  .menu-hamburguesa{ display:flex; }
  .menu-fila{ justify-content:space-between; }
  .menu-logo{ opacity:1; width:auto; }
  .menu-logo img{ height:46px; }

  .eduardo-fila{ grid-template-columns:1fr; gap:18px; }
  .contacto-fila{ grid-template-columns:1fr; gap:36px; }
  .servicios-rejilla{ grid-template-columns:repeat(2, 1fr); }

  /* Pet Friendly a una columna */
  .pet-caja{ grid-template-columns:1fr; }
  .pet-visual{ padding:28px; }

  /* NOTA: El footer mantiene 3 columnas en tablet */
}

/* Móvil pequeño: colapsa el footer a 1 columna */
@media (max-width: 620px){
  .servicios-rejilla{ grid-template-columns:1fr; }
  .slideshow{ height:clamp(240px, 62vw, 420px); }
  .slide-flecha{ width:40px; height:40px; }
  .contacto-etiqueta{ font-size:16.5px; }
  .cookies-fila{ justify-content:center; text-align:center; }
  .form-fila{ grid-template-columns:1fr; }
  .reservas-caja{ padding:26px; }
  .pet-texto{ padding:26px; }

  /* Aquí sí colapsa el footer a 1 columna */
  .pie-rejilla{
    grid-template-columns:1fr;
    text-align:center;
  }
  .pie-principal h3{ border-bottom:none; }
  .pie-social{ justify-content:center; }
}


/* ----------------------------------------------------------
   16. MOVIMIENTO REDUCIDO (accesibilidad)
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}