/* ─────────────────────────────────────────────────────────────
   Peluquería Canina Mundo Mascotas — arquetipo 15 "Carnet Redondo"
   Paleta MEDIDA sobre el logo real del negocio (no elegida a ojo):
     relleno rosa  #F2A0C5   ·  contorno  #7C2C80
     pad uva       #7A3087   ·  magenta   #8E2E86
   La firma visual es el RADIO: todo es píldora o ficha muy redondeada,
   igual que su logotipo de letras infladas.
   ───────────────────────────────────────────────────────────── */

:root{
  --rosa:#F2A0C5;
  --rosa-claro:#FCE9F2;
  --rosa-humo:#FDF3F8;
  --magenta:#8E2E86;
  --uva:#7A3087;
  --contorno:#7C2C80;
  --crema:#FFFBFD;
  --tinta:#3B1140;
  --tinta-suave:#6E4573;
  --linea:#F0D2E4;
  --sombra:0 10px 30px rgba(124,44,128,.10);
  --sombra-alta:0 18px 46px rgba(124,44,128,.16);
  --r-ficha:30px;
  --r-pil:999px;
  /* La huella va EN LÍNEA, no como archivo: cuando era `url(../img/huella.svg)`
     el ícono del botón flotante salió vacío en una captura y con huella en otra
     —una carrera entre la máscara y el pintado—. Un data URI no se puede perder. */
  --huella:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 85'%3E%3Cpath fill='%237C2C80' fill-rule='evenodd' d='M0,54 a30,30 0 1,0 60,0 a30,30 0 1,0 -60,0 M4,54 a26,26 0 1,0 52,0 a26,26 0 1,0 -52,0 M18.5,54 a11.5,11.5 0 1,0 23,0 a11.5,11.5 0 1,0 -23,0 M16,11 a10,10 0 1,0 20,0 a10,10 0 1,0 -20,0 M38,15 a10,10 0 1,0 20,0 a10,10 0 1,0 -20,0 M57.5,32 a9.5,9.5 0 1,0 19,0 a9.5,9.5 0 1,0 -19,0'/%3E%3C/svg%3E");
  --patron:url(../img/patron-huellas.svg);
  --tipo:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--tipo);
  color:var(--tinta);
  background:var(--crema);
  line-height:1.62;
  font-size:17px;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}   /* height:auto MANDA sobre el atributo height */
a{color:var(--magenta)}
h1,h2,h3{line-height:1.12;margin:0 0 .5em;letter-spacing:-.022em;font-weight:900}
h1{font-size:clamp(2rem,6.2vw,3.5rem)}
h2{font-size:clamp(1.55rem,4.4vw,2.5rem)}
h3{font-size:1.12rem;letter-spacing:-.01em}
p{margin:0 0 1.05em}
.env{width:min(1120px,92vw);margin-inline:auto}

/* etiqueta pequeña en versales — el contrapunto a los títulos gordos */
.ojo{
  font-size:.735rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:var(--magenta);margin:0 0 .85em;
}

/* ── barra superior ───────────────────────────────────────── */
.top{
  position:sticky;top:0;z-index:40;
  background:rgba(255,251,253,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
}
.top .env{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0}
.marca{display:flex;align-items:center;gap:.6rem;text-decoration:none;min-width:0}
.marca img{width:auto;height:34px}
.marca span{
  font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--uva);line-height:1.25;
}
.menu{display:flex;gap:.3rem;list-style:none;margin:0;padding:0}
.menu a{
  display:block;padding:.5rem .95rem;border-radius:var(--r-pil);
  text-decoration:none;font-weight:700;font-size:.93rem;color:var(--tinta-suave);
  transition:background .18s ease,color .18s ease;
}
.menu a:hover{background:var(--rosa-claro);color:var(--magenta)}
.menu a[aria-current="page"]{background:var(--magenta);color:#fff}
@media (max-width:820px){ .menu{display:none} }

/* ── barra inferior tipo app (la navegación de esta demo) ──── */
.appnav{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:none;
  background:rgba(255,251,253,.96);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--linea);
  padding:.35rem .4rem calc(.35rem + env(safe-area-inset-bottom));
  box-shadow:0 -8px 26px rgba(124,44,128,.09);
}
.appnav ul{display:flex;list-style:none;margin:0;padding:0}
.appnav li{flex:1 1 0;min-width:0}
.appnav a{
  display:flex;flex-direction:column;align-items:center;gap:.2rem;
  padding:.42rem .15rem;border-radius:18px;text-decoration:none;
  color:var(--tinta-suave);font-size:.66rem;font-weight:800;
  letter-spacing:.03em;text-align:center;
}
.appnav .ic{
  width:23px;height:23px;display:block;
  background:currentColor;
  -webkit-mask:var(--huella) center/contain no-repeat;
          mask:var(--huella) center/contain no-repeat;
  opacity:.34;transition:opacity .18s ease,transform .18s ease;
}
.appnav a[aria-current="page"]{color:var(--magenta);background:var(--rosa-claro)}
.appnav a[aria-current="page"] .ic{opacity:1;transform:scale(1.06)}
@media (max-width:820px){
  .appnav{display:block}
  body{padding-bottom:74px}
}

/* ── botones ──────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.92rem 1.6rem;border-radius:var(--r-pil);
  font-weight:800;font-size:.97rem;text-decoration:none;
  border:2px solid transparent;cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease;
}
.btn-wa{
  background:var(--magenta);color:#fff;
  box-shadow:0 8px 20px rgba(142,46,134,.28);
}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(142,46,134,.36)}
.btn-linea{background:transparent;color:var(--magenta);border-color:var(--rosa)}
.btn-linea:hover{background:var(--rosa-claro);transform:translateY(-2px)}
.acciones{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}

/* ── portada ──────────────────────────────────────────────── */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 6%,#FBDCEC 0%,rgba(251,220,236,0) 62%),
    linear-gradient(178deg,var(--rosa-humo) 0%,var(--crema) 88%);
  padding:clamp(2.4rem,7vw,4.6rem) 0 clamp(2.6rem,7vw,4.4rem);
  border-bottom:1px solid var(--linea);
}
/* sus propias huellas, muy tenues, como el papel de su afiche */
/* Una sola huella repetida en grilla se leía como un campo de aros y competía
   con el logotipo. El mosaico las reparte chicas y en ángulos distintos, que es
   como su propio afiche estampa las huellas del fondo. */
.hero::before{
  content:"";position:absolute;inset:0;
  background:var(--patron) 0 0/230px 230px repeat;
  opacity:.09;pointer-events:none;
}
.hero .env{position:relative}
.hero-logo{width:min(430px,80%);margin:0 0 2rem}

/* ═══ EL HERO CON FOTO — 1-sep-2026 ═══
   Benja, mirando la primera versión: «le falta ánimo y ganas, faltan animaciones,
   fotos, más contundencia para que se vea más profesional». La versión anterior no
   tenía ninguna foto porque no se encontró material de ella; ahora hay fotografía
   de banco (Pexels, uso comercial) y la página lo DECLARA — ver `.nota-fotos`.

   ⚖️ El recurso es distinto a propósito del de Peaky Blinders, la otra demo de esta
   semana: allá el héroe es el logotipo con un cintillo que se desplaza; acá es una
   foto grande y redondeada al lado del texto, clara y con la huella flotando. Si dos
   demos puestas lado a lado dejan ver el molde, está mal hecho. */
.hero-duo{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,5vw,3.4rem);
  align-items:center}
.hero-foto{position:relative;margin:0}
.hero-foto img{
  width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  border-radius:var(--r-ficha);box-shadow:var(--sombra-alta);
}
/* la foto respira: un vaivén lentísimo, no un rebote */
.hero-foto img{animation:flotar 7s ease-in-out infinite}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* dos huellas suyas alrededor de la foto, del tamaño del sello del pie */
.hero-foto::after,.hero-foto::before{
  content:"";position:absolute;width:52px;height:57px;background:var(--rosa);
  -webkit-mask:var(--huella) center/contain no-repeat;
          mask:var(--huella) center/contain no-repeat;
  opacity:.85;pointer-events:none;
}
.hero-foto::before{left:-22px;top:12%;transform:rotate(-18deg);animation:flotar 9s ease-in-out infinite}
.hero-foto::after{right:-16px;bottom:8%;transform:rotate(14deg);animation:flotar 11s ease-in-out infinite}

/* ═══ LA GALERÍA ═══ mosaico escalonado, no una grilla pareja */
.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.galeria figure{margin:0;overflow:hidden;border-radius:22px;background:var(--rosa-claro);
  box-shadow:var(--sombra)}
.galeria img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.19,1,.22,1)}
.galeria figure:hover img{transform:scale(1.06)}
.galeria .alta{grid-row:span 2}
.galeria .alta img{aspect-ratio:3/4}
.galeria .baja img{aspect-ratio:3/2}

/* la nota de honestidad sobre las fotos: no se esconde, se usa */
.nota-fotos{
  margin-top:1.6rem;display:flex;gap:.9rem;align-items:flex-start;
  background:var(--rosa-humo);border:1px dashed var(--linea);
  border-radius:22px;padding:1rem 1.2rem;font-size:.9rem;color:var(--tinta-suave);
}
.nota-fotos b{color:var(--tinta)}
.nota-fotos::before{
  content:"";flex:0 0 auto;width:26px;height:28px;margin-top:.15rem;background:var(--rosa);
  -webkit-mask:var(--huella) center/contain no-repeat;
          mask:var(--huella) center/contain no-repeat;
}

@media (max-width:900px){
  .hero-duo{grid-template-columns:1fr}
  .hero-foto{order:-1;max-width:420px;margin-inline:auto}
  .galeria{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .hero-foto img,.hero-foto::before,.hero-foto::after{animation:none}
  .galeria figure:hover img{transform:none}
}
.hero p.bajada{
  font-size:clamp(1.02rem,2.4vw,1.2rem);color:var(--tinta-suave);
  max-width:36ch;
}

/* píldoras de datos duros */
.datos{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.9rem;padding:0;list-style:none}
.datos li{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#fff;border:1px solid var(--linea);
  border-radius:var(--r-pil);padding:.55rem 1.05rem;
  font-size:.87rem;font-weight:700;color:var(--tinta);
  box-shadow:0 3px 10px rgba(124,44,128,.05);
}
.datos b{color:var(--magenta);font-weight:900}

/* ── bloques ──────────────────────────────────────────────── */
.bloque{padding:clamp(2.6rem,7vw,4.6rem) 0}
.bloque.rosa{background:var(--rosa-humo);border-block:1px solid var(--linea)}
.cab{max-width:56ch;margin-bottom:2.3rem}
.cab p{color:var(--tinta-suave);margin-bottom:0}

/* ── fichas (la unidad de esta demo) ──────────────────────── */
.fichas{display:grid;gap:1.05rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.ficha{
  background:#fff;border:1px solid var(--linea);border-radius:var(--r-ficha);
  padding:1.7rem 1.6rem;box-shadow:var(--sombra);
  transition:transform .2s ease,box-shadow .2s ease;
  display:flex;flex-direction:column;
}
.ficha:hover{transform:translateY(-4px);box-shadow:var(--sombra-alta)}
.ficha h3{margin-bottom:.45rem;color:var(--tinta)}
.ficha p{color:var(--tinta-suave);font-size:.95rem;margin-bottom:1.1rem}
.ficha .btn{align-self:flex-start;margin-top:auto;padding:.7rem 1.25rem;font-size:.88rem}
/* La huella de su logo como viñeta.
   ⚠️ Va como clase SUELTA, no como `.ficha .sello`: cuando estaba anidada, los
   7 sellos de Visítanos y Servicios —que viven en <ul class="lista-datos">—
   se quedaban sin fondo ni máscara y salían como <span> vacíos, ocupando su
   ancho y dejando una sangría hueca. Se veía en la captura, no en el verificador. */
.sello{
  display:block;
  width:38px;height:41px;margin-bottom:1rem;
  background:var(--rosa);
  -webkit-mask:var(--huella) center/contain no-repeat;
          mask:var(--huella) center/contain no-repeat;
}
.lista-datos .sello{background:var(--magenta);opacity:.55}
.ficha.nota{background:var(--rosa-claro);border-color:#F2C9DF;box-shadow:none}
.ficha.nota:hover{transform:none;box-shadow:none}

/* ── pasos numerados ──────────────────────────────────────── */
.pasos{list-style:none;margin:0;padding:0;display:grid;gap:1.05rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.pasos li{
  background:#fff;border:1px solid var(--linea);border-radius:var(--r-ficha);
  padding:1.6rem 1.5rem;box-shadow:var(--sombra);
}
.pasos .num{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:var(--r-pil);
  background:var(--magenta);color:#fff;font-weight:900;font-size:1.05rem;
  margin-bottom:.95rem;
}
.pasos b{display:block;margin-bottom:.3rem;font-size:1.05rem}
.pasos span{color:var(--tinta-suave);font-size:.94rem}

/* ── nombres de perritos (contenido real de sus publicaciones) ── */
.nombres{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;margin:0;padding:0}
.nombres li{
  background:#fff;border:1px solid var(--linea);border-radius:var(--r-pil);
  padding:.5rem 1.15rem;font-weight:800;color:var(--magenta);font-size:.95rem;
  box-shadow:0 3px 10px rgba(124,44,128,.05);
}

/* ── cita (su mensaje real de bienvenida) ─────────────────── */
.cita{
  background:#fff;border:1px solid var(--linea);border-left:5px solid var(--rosa);
  border-radius:22px;padding:1.7rem 1.7rem 1.4rem;box-shadow:var(--sombra);
  max-width:62ch;
}
.cita p{font-size:1.03rem;color:var(--tinta);font-style:italic;margin-bottom:.9rem}
.cita cite{font-style:normal;font-size:.8rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tinta-suave)}

/* ── datos de contacto / visita ───────────────────────────── */
.duo{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start}
.lista-datos{list-style:none;margin:0;padding:0}
.lista-datos li{
  display:flex;gap:1rem;padding:1.05rem 0;border-bottom:1px solid var(--linea);
}
.lista-datos li:last-child{border-bottom:0}
.lista-datos b{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--magenta);margin-bottom:.15rem}
.lista-datos span{color:var(--tinta-suave)}
.lista-datos a{font-weight:700;text-decoration:none}
.lista-datos a:hover{text-decoration:underline}

/* ── preguntas ────────────────────────────────────────────── */
.preg{margin:0;padding:0}
.preg > div{
  background:#fff;border:1px solid var(--linea);border-radius:22px;
  padding:1.3rem 1.5rem;margin-bottom:.75rem;box-shadow:0 4px 14px rgba(124,44,128,.05);
}
.preg dt{font-weight:800;margin-bottom:.35rem;color:var(--tinta)}
.preg dd{margin:0;color:var(--tinta-suave);font-size:.96rem}

/* ── tarjeta de ubicación ─────────────────────────────────────
   No lleva iframe de Google Maps a propósito: la CSP de `_headers` sólo
   permite marcos del propio origen, y un mapa incrustado además mete un
   tercero (y su rastreo) dentro del sitio del cliente. La tarjeta abre el
   mapa en una pestaña nueva, que es lo que la gente hace igual.          */
.mapa{
  position:relative;overflow:hidden;
  border:1px solid var(--linea);border-radius:var(--r-ficha);
  box-shadow:var(--sombra);
  background:linear-gradient(160deg,var(--rosa-claro) 0%,#fff 78%);
}
.mapa::before{                       /* sus huellas, como estampado del papel */
  content:"";position:absolute;inset:0;
  background:var(--patron) 0 0/200px 200px repeat;
  opacity:.13;pointer-events:none;
}
.mapa-ficha{position:relative;padding:2.2rem 1.9rem}
.mapa-ficha .sello{width:44px;height:48px;margin-bottom:1.1rem;background:var(--magenta);
  -webkit-mask:var(--huella) center/contain no-repeat;
          mask:var(--huella) center/contain no-repeat;}
.mapa-ficha p{color:var(--tinta-suave);margin-bottom:1.5rem}
.mapa-ficha .btn{background:#fff}

/* ── flotante de WhatsApp ─────────────────────────────────── */
.wa-float{
  position:fixed;right:16px;bottom:16px;z-index:60;
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--magenta);color:#fff;text-decoration:none;
  padding:.85rem 1.3rem;border-radius:var(--r-pil);font-weight:800;font-size:.93rem;
  box-shadow:0 12px 30px rgba(142,46,134,.4);
  transition:transform .18s ease;
}
.wa-float:hover{transform:translateY(-3px) scale(1.03)}
.wa-float .ic{
  width:19px;height:21px;background:#fff;flex:0 0 auto;
  -webkit-mask:var(--huella) center/contain no-repeat;
          mask:var(--huella) center/contain no-repeat;
}
@media (max-width:820px){
  .wa-float{bottom:86px;right:12px;padding:.78rem 1.1rem;font-size:.87rem}
}

/* ── pie ──────────────────────────────────────────────────── */
.pie{background:var(--tinta);color:#EBD8EE;padding:3rem 0 2.4rem;margin-top:0}
.pie a{color:#F6C7E2}
.pie .env{display:grid;gap:1.8rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.pie img{height:40px;width:auto;margin-bottom:.9rem}
.pie h4{margin:0 0 .7rem;font-size:.73rem;letter-spacing:.15em;text-transform:uppercase;color:var(--rosa)}
.pie p,.pie li{font-size:.9rem;color:#D9BCDE;margin:0 0 .35rem}
.pie ul{list-style:none;margin:0;padding:0}
.pie ul a{text-decoration:none}
.pie ul a:hover{text-decoration:underline}
.aviso-demo{
  grid-column:1/-1;              /* si no, cae en la 1ª columna y deja el pie medio vacío */
  border-top:1px solid rgba(246,199,226,.22);margin-top:1rem;padding-top:1.4rem;
  font-size:.79rem;color:#C3A2C9;line-height:1.6;max-width:92ch;
}

/* ── revelado al deslizar ─────────────────────────────────────
   ⚠️ El ocultado lo pone SOLO la clase .js que agrega el script.
   Sin JavaScript no existe la regla y la página se ve entera.       */
.js .rev{opacity:0;transform:translateY(15px);transition:opacity .6s ease,transform .6s ease}
.js .rev.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rev{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ── accesibilidad ────────────────────────────────────────── */
a:focus-visible,button:focus-visible{outline:3px solid var(--magenta);outline-offset:3px;border-radius:6px}
.saltar{
  position:absolute;left:-9999px;top:0;background:var(--magenta);color:#fff;
  padding:.7rem 1.1rem;border-radius:0 0 12px 0;z-index:100;font-weight:700;
}
.saltar:focus{left:0}