/* Cobijo · clínica veterinaria en Valladolid (concepto WEBO). Cercano y de confianza:
   rubor claro, melocotón, lila y tinta ciruela; el coral solo vive en la chapa y en detalles.
   Regla de formas: bloques a 28 px, fotos a 22 px, botones y selector a 14 px. La chapa es el único círculo. */

@font-face { font-family: "Gabarito"; src: url("/assets/fonts/conceptos/gabarito-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Gabarito"; src: url("/assets/fonts/conceptos/gabarito-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Gabarito"; src: url("/assets/fonts/conceptos/gabarito-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --rubor: #FAF1EE;
  --melocoton: #F5D9CB;
  --lila: #E7E1EF;
  --blanco: #FFFDFC;
  --ciruela: #2B2342;
  --ciruela-2: #574D6B;
  --noche: #1C1730;
  --coral: #EC6A4E;
  --coral-claro: #F3876E;
  --hilo: rgb(43 35 66 / .14);
  --fuente: "Gabarito", ui-rounded, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --cajon: cubic-bezier(.32, .72, 0, 1);
  --margen: clamp(20px, 5vw, 72px);
  --r-bloque: 28px;
  --r-foto: 22px;
  --r-control: 14px;
}

html { background: var(--rubor); scroll-behavior: smooth; scrollbar-color: #D9C6CC var(--rubor); }
body {
  background: var(--rubor); color: var(--ciruela);
  font: 400 1.0625rem/1.6 var(--fuente);
  font-kerning: normal; font-variant-numeric: lining-nums;
}
::selection { background: var(--melocoton); color: var(--ciruela); }
:focus-visible { outline: 3px solid var(--ciruela); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-weight: 700; text-wrap: balance; }

.saltar {
  position: absolute; left: 16px; top: 16px; z-index: 50;
  padding: 10px 18px; border-radius: var(--r-control); background: var(--ciruela); color: var(--rubor); text-decoration: none;
  transform: translateY(-180%);
}
.saltar:focus-visible { transform: none; }

/* Huecos de foto: el marcador CSS hace de escena hasta que llegue la foto (basta con meter un <img> dentro) */
.slot { position: relative; overflow: hidden; margin: 0; isolation: isolate; }
.slot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot:has(> img) > .esc { display: none; }
.esc { position: absolute; pointer-events: none; }

/* Botones y enlaces */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 26px; border-radius: var(--r-control);
  background: var(--ciruela); color: var(--rubor);
  font: 500 1rem/1 var(--fuente); text-decoration: none; white-space: nowrap;
  box-shadow: 0 12px 24px -16px rgb(43 35 66 / .7);
  transition: background-color 200ms ease, transform 160ms var(--ease);
}
.boton:active { transform: scale(.97); }
.boton--peque { min-height: 44px; padding: 0 18px; font-size: .9375rem; }
.boton--claro { background: var(--blanco); color: var(--ciruela); box-shadow: 0 12px 24px -16px rgb(43 35 66 / .35); }
.enlace {
  color: var(--ciruela); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
  text-decoration-color: rgb(236 106 78 / .55);
  transition: text-decoration-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: #3C3259; }
  .boton--claro:hover { background: var(--melocoton); }
  .enlace:hover { text-decoration-color: var(--coral); }
  .cabecera__nav a:hover { background: rgb(231 225 239 / .9); }
  .chapa:hover { transform: rotate(-5deg); }
}

/* Cabecera */
.cabecera {
  position: absolute; inset: 0 0 auto; z-index: 10;
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  padding: 20px var(--margen);
}
.marca { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; color: var(--ciruela); text-decoration: none; }
.marca__chapa { width: 34px; height: 34px; flex: none; align-self: center; margin-right: 2px; }
.marca__disco { fill: var(--coral); }
.marca__ojal { fill: var(--rubor); }
.marca__aro { fill: none; stroke: var(--ciruela); stroke-opacity: .32; stroke-width: 1.2; }
.marca__nombre { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.marca__apellido { margin-top: 5px; font-size: .9375rem; color: var(--ciruela-2); line-height: 1; }
.cabecera__nav ul { display: flex; gap: 2px; }
.cabecera__nav a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 12px;
  font-size: .9375rem; font-weight: 500; text-decoration: none; color: var(--ciruela-2);
  transition: background-color 200ms ease;
}

/* Portada a sangre: la foto de la consulta bajo un velo de rubor que deja leer el titular */
.portada {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center;
  min-height: max(640px, min(100svh, 940px));
  padding: 128px var(--margen) clamp(72px, 9vw, 112px);
}
.portada h1 {
  font-size: clamp(2.625rem, 5.4vw, 5rem); line-height: 1; letter-spacing: -.038em;
  max-width: 11.5em;
}
.portada h1 span { display: inline-block; }
.portada__texto { width: min(100%, 1296px); margin-inline: auto; }
.portada__sub { max-width: 36ch; margin-top: clamp(20px, 2vw, 28px); font-size: clamp(1.0625rem, 1.25vw, 1.25rem); line-height: 1.55; color: var(--ciruela-2); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(28px, 3vw, 40px); }

.slot--portada { position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, #FBF3EF 0%, #F2D9CB 60%, #D9B9A6 100%); }
.slot--portada > img {
  left: 18%; width: 82%; object-position: 30% 42%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}
.slot--portada::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(250 241 238 / .97) 0%, rgb(250 241 238 / .88) 34%, rgb(250 241 238 / .3) 50%, rgb(250 241 238 / 0) 60%),
    linear-gradient(180deg, rgb(250 241 238 / .75) 0%, rgb(250 241 238 / 0) 18%),
    linear-gradient(0deg, rgb(250 241 238 / .5) 0%, rgb(250 241 238 / 0) 22%);
}
.slot--sala::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 60%, rgb(43 35 66 / .14));
}

/* La chapa: el disco de la placa del collar, con las urgencias grabadas */
.chapa {
  position: absolute; right: clamp(24px, 7vw, 120px); bottom: clamp(28px, 7vh, 72px); z-index: 2;
  display: grid; place-items: center;
  width: clamp(116px, 10vw, 148px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--coral-claro), var(--coral) 58%, #DE5B40);
  color: var(--noche); text-decoration: none; text-align: center;
  box-shadow: inset 0 0 0 7px rgb(255 253 252 / .16), 0 22px 40px -18px rgb(110 40 24 / .55);
  transform-origin: 50% 9%;
  transition: transform 500ms var(--cajon);
}
.chapa::before { content: ""; position: absolute; inset: 15%; border-radius: 50%; border: 1px solid rgb(28 23 48 / .22); }
.chapa__ojal { position: absolute; top: 6%; left: 50%; width: 13%; aspect-ratio: 1; margin-left: -6.5%; border-radius: 50%; background: var(--rubor); box-shadow: inset 0 1px 2px rgb(43 35 66 / .4); }
.chapa__texto { display: grid; gap: 2px; margin-top: 8%; font-size: .8125rem; font-weight: 500; line-height: 1.1; }
.chapa__texto b { font-size: clamp(1.75rem, 2.4vw, 2.25rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.chapa:focus-visible { outline-offset: 5px; border-radius: 50%; }

/* Entrada (20/10/2026): el titular sube por renglones, la foto se asienta y la chapa se cuelga de su ojal con un
   balanceo corto y amortiguado, como al soltarla del collar. Solo bajo html.mov (concepto.js); fill «backwards» para
   que, al terminar, el giro de la chapa al pasar el ratón vuelva a funcionar. */
.mov .portada h1 span, .mov .portada__sub, .mov .acciones { animation: sube 900ms var(--ease) backwards; }
.mov .portada h1 span:nth-child(2) { animation-delay: 90ms; }
.mov .portada__sub { animation-delay: 200ms; }
.mov .acciones { animation-delay: 300ms; }
.mov .slot--portada { animation: aparece 1200ms var(--ease) backwards; }
.mov .slot--portada > img { animation: asienta 1800ms var(--ease) backwards; }
.mov .chapa { animation: cuelga 1700ms 560ms backwards; }
@keyframes sube { from { opacity: 0; transform: translateY(18px); } }
@keyframes aparece { from { opacity: 0; } }
@keyframes asienta { from { transform: scale(1.05); } }
@keyframes cuelga {
  0% { opacity: 0; transform: translateY(-16px) rotate(-16deg); animation-timing-function: cubic-bezier(.33, 0, .2, 1); }
  30% { opacity: 1; }
  48% { transform: rotate(5deg); animation-timing-function: cubic-bezier(.45, 0, .4, 1); }
  74% { transform: rotate(-1.6deg); animation-timing-function: cubic-bezier(.45, 0, .4, 1); }
  100% { transform: none; }
}

/* La visita: dos salas */
.salas {
  max-width: 1440px; margin-inline: auto;
  padding: clamp(56px, 8vw, 120px) var(--margen) clamp(72px, 9vw, 128px);
}
.salas__cabeza { max-width: 640px; }
.salas h2, .etapas h2, .clinica h2, .cita h2 { font-size: clamp(2.125rem, 3.8vw, 3.25rem); line-height: 1.06; letter-spacing: -.03em; }
.salas__cabeza p, .etapas__cabeza p { margin-top: 16px; max-width: 46ch; font-size: 1.125rem; color: var(--ciruela-2); }
.salas__pareja {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); align-items: start;
  margin-top: clamp(40px, 5vw, 64px);
}
.sala { padding: 14px 14px clamp(24px, 2.6vw, 36px); border-radius: var(--r-bloque); }
.sala--gatos { background: var(--lila); }
.sala--perros { background: var(--melocoton); margin-top: clamp(0px, 6vw, 88px); }
.slot--sala { aspect-ratio: 4 / 3; border-radius: var(--r-foto); }
.sala__texto { padding: clamp(20px, 2.4vw, 28px) clamp(10px, 1.6vw, 22px) 0; }
.sala h3 { font-size: clamp(1.375rem, 1.9vw, 1.75rem); line-height: 1.15; letter-spacing: -.02em; }
.sala p { margin-top: 10px; max-width: 42ch; color: var(--ciruela-2); }

.sala--gatos .slot--sala { background: linear-gradient(180deg, #CFC5DE 0%, #C3B8D5 70%, #A99CBF 70.4%, #B5A9C9 100%); }
.esc--estantes {
  inset: 12% 10% 34% 46%;
  background:
    linear-gradient(#E8D3BC, #D9BFA4) 0 18% / 70% 7px no-repeat,
    linear-gradient(#E8D3BC, #D9BFA4) 100% 50% / 62% 7px no-repeat,
    linear-gradient(#E8D3BC, #D9BFA4) 10% 84% / 76% 7px no-repeat;
  filter: drop-shadow(0 6px 5px rgb(43 35 66 / .2));
}
.esc--banco {
  left: 8%; bottom: 18%; width: 46%; height: 16%;
  background:
    linear-gradient(#6E6286, #6E6286) 50% 0 / 36% 62% no-repeat,
    linear-gradient(#E3CDB4, #D2B596) 0 70% / 100% 26% no-repeat;
  border-radius: 6px;
  filter: drop-shadow(0 10px 8px rgb(43 35 66 / .22));
}
.sala--gatos .slot--sala::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 60% at 78% 10%, rgb(255 236 214 / .5), transparent 70%); }

.sala--perros .slot--sala { background: linear-gradient(180deg, #F8E3D6 0%, #F3D3C2 66%, #E3B9A3 66.4%, #EDC6B1 100%); }
.esc--ventanal {
  left: 8%; top: 8%; width: 56%; height: 50%; border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(33.33% - 3px), #E9C7B4 calc(33.33% - 3px) 33.33%),
    linear-gradient(170deg, #FFFDF9, #FFF0E4);
  box-shadow: 0 0 70px 26px rgb(255 247 239 / .7);
}
.esc--cuenco {
  right: 18%; bottom: 14%; width: 18%; height: 7%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, #8FA9C9, #5F7FA6);
  box-shadow: 0 8px 10px -4px rgb(43 35 66 / .3);
}

.promesas {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px);
  margin-top: clamp(48px, 6vw, 88px); padding-top: 28px; border-top: 1px solid var(--hilo);
}
.promesas li { display: flex; gap: 14px; align-items: flex-start; color: var(--ciruela-2); }
.promesas b { display: block; margin-bottom: 4px; color: var(--ciruela); font-weight: 500; font-size: 1.125rem; }
.promesas svg { flex: none; width: 28px; height: 28px; margin-top: 1px; fill: none; stroke: var(--coral); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Cada etapa: la cartilla con su selector */
.etapas {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: start;
  max-width: 1440px; margin-inline: auto;
  padding: 0 var(--margen) clamp(88px, 10vw, 152px);
}
.etapas__cabeza { position: sticky; top: 40px; padding-top: 12px; }
.cartilla {
  display: grid; gap: clamp(20px, 2.4vw, 32px);
  padding: clamp(14px, 1.6vw, 20px) clamp(14px, 1.6vw, 20px) clamp(28px, 3vw, 40px);
  border-radius: var(--r-bloque); background: var(--blanco);
  box-shadow: 0 1px 0 rgb(43 35 66 / .04), 0 34px 60px -40px rgb(43 35 66 / .38);
}
.cartilla__selector {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0; padding: 5px; border: 0; border-radius: var(--r-control); background: var(--rubor);
}
.cartilla__selector label {
  position: relative; z-index: 1; display: grid; place-items: center;
  min-height: 48px; padding: 6px 10px; border-radius: 10px;
  font-size: .9375rem; font-weight: 500; text-align: center; line-height: 1.2; color: var(--ciruela-2);
  cursor: pointer; transition: color 240ms ease;
}
.cartilla__selector input:checked + label { color: var(--rubor); }
.cartilla__selector input:focus-visible + label { outline: 3px solid var(--coral); outline-offset: 2px; }
.cartilla__marca {
  position: absolute; left: 5px; top: 5px; bottom: 5px; width: calc((100% - 10px) / 3);
  border-radius: 10px; background: var(--ciruela);
  box-shadow: 0 8px 16px -10px rgb(43 35 66 / .8);
  transition: transform 520ms var(--cajon);
}
.cartilla:has(#e-adulto:checked) .cartilla__marca { transform: translateX(100%); }
.cartilla:has(#e-mayor:checked) .cartilla__marca { transform: translateX(200%); }

.cartilla { grid-template-areas: "sel" "hoja"; }
.cartilla__selector { grid-area: sel; }
.hoja {
  grid-area: hoja; padding-inline: clamp(8px, 1.6vw, 24px);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 260ms ease, transform 420ms var(--ease), visibility 0s linear 260ms;
}
.cartilla:has(#e-cachorro:checked) .hoja--cachorro,
.cartilla:has(#e-adulto:checked) .hoja--adulto,
.cartilla:has(#e-mayor:checked) .hoja--mayor { opacity: 1; visibility: visible; transform: none; transition-delay: 60ms, 60ms, 0s; }
.hoja__titulo { display: flex; align-items: center; gap: 10px; font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; }
.hoja__titulo::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--coral); box-shadow: inset 0 0 0 4px var(--blanco), 0 0 0 1.5px var(--coral); }
.hoja__lista { margin-top: 14px; }
.hoja__lista li { display: grid; grid-template-columns: 11rem 1fr; gap: 6px 24px; padding: 16px 0; border-top: 1px solid var(--hilo); }
.hoja__que { font-weight: 500; }
.hoja__cuando { color: var(--ciruela-2); }

/* Urgencias: escena nocturna a sangre */
.urgencias {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: end;
  min-height: min(92svh, 860px);
  padding: clamp(120px, 14vw, 200px) var(--margen) clamp(56px, 8vw, 104px);
  color: var(--rubor);
  background: var(--noche);
}
.slot--noche { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #17122A 0%, #231B3A 58%, #2E2445 58.2%, #1A1529 100%); }
.esc--cielo { inset: 0 0 42% 0; background: radial-gradient(ellipse 50% 70% at 82% 0%, rgb(120 98 160 / .35), transparent 70%); }
/* El escaparate: cuatro hojas de cristal que se encienden una a una (Urgencias, de tarde a noche) */
.esc--escaparate {
  right: 8%; top: 22%; width: 40%; height: 36%; border-radius: 4px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 4px), #2A2140 calc(25% - 4px) 25%),
    linear-gradient(180deg, #3D3256, #2F2645);
  box-shadow: 0 0 0 12px #2A2140;
}
.esc__luz {
  position: absolute; top: 0; bottom: 0; width: calc(25% - 4px);
  background: radial-gradient(ellipse 60% 70% at 46% 60%, #FFE2C4 0%, #F7B98F 46%, #D98A68 100%) 0 0 / calc(400% + 16px) 100%;
}
.esc__luz:nth-child(2) { left: 0; border-radius: 4px 0 0 4px; background-position: 0 0; }
.esc__luz:nth-child(3) { left: 25%; background-position: 33.333% 0; }
.esc__luz:nth-child(4) { left: 50%; background-position: 66.667% 0; }
.esc__luz:nth-child(5) { left: 75%; border-radius: 0 4px 4px 0; background-position: 100% 0; }
.esc__halo { position: absolute; z-index: -1; inset: -150px; background: radial-gradient(closest-side, rgb(247 175 130 / .34), rgb(247 175 130 / 0)); }
.esc--tarde {
  inset: 0 0 41.8% 0; opacity: 0;
  background: linear-gradient(180deg, #6E5A93 0%, #B98AA6 48%, #EDB08E 100%);
}
.esc--reflejo {
  right: 6%; top: 60%; width: 44%; height: 34%;
  background: linear-gradient(180deg, rgb(247 185 143 / .45), transparent 80%);
  filter: blur(18px);
  transform: scaleY(1.2); transform-origin: top;
}
.esc--farola { left: 54%; top: 6%; width: 160px; height: 160px; margin-left: -80px; border-radius: 50%; background: radial-gradient(circle, rgb(255 226 190 / .6), rgb(255 226 190 / 0) 62%); }
.slot--noche::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgb(28 23 48 / .94) 0%, rgb(28 23 48 / .7) 38%, rgb(28 23 48 / 0) 66%),
              linear-gradient(0deg, rgb(28 23 48 / .7), transparent 40%);
}
.urgencias__texto { max-width: 620px; }
.urgencias h2 { font-size: clamp(2.375rem, 4.6vw, 4rem); line-height: 1.02; letter-spacing: -.035em; }
.urgencias__texto > p { margin-top: 18px; max-width: 44ch; font-size: 1.125rem; color: rgb(250 241 238 / .84); }
.telefono {
  display: inline-grid; gap: 4px; margin-top: clamp(28px, 3vw, 40px);
  padding: 16px 24px 18px; border-radius: var(--r-control);
  background: rgb(250 241 238 / .08); box-shadow: inset 0 0 0 1px rgb(250 241 238 / .2);
  color: var(--rubor); text-decoration: none;
  transition: background-color 220ms ease, transform 160ms var(--ease);
}
.telefono:active { transform: scale(.98); }
.telefono__etiqueta { display: flex; align-items: center; gap: 8px; font-size: .9375rem; color: rgb(250 241 238 / .8); }
.telefono__etiqueta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.telefono__numero { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 700; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.urgencias :focus-visible { outline-color: var(--rubor); }
@media (hover: hover) and (pointer: fine) { .telefono:hover { background: rgb(250 241 238 / .14); } }

/* La clínica: servicios en dos columnas de filetes */
.clinica {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 96px);
  max-width: 1440px; margin-inline: auto;
  padding: clamp(88px, 10vw, 152px) var(--margen) clamp(72px, 9vw, 128px);
}
.servicios { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 56px); }
.servicios li { padding: 22px 0 24px; border-top: 1px solid var(--hilo); }
.servicios h3 { font-size: 1.3125rem; line-height: 1.2; letter-spacing: -.015em; }
.servicios p { margin-top: 6px; max-width: 34ch; color: var(--ciruela-2); }

/* Pedir cita */
.cita {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(40px, 6vw, 112px); align-items: end;
  padding: clamp(64px, 8vw, 112px) max(var(--margen), calc((100% - 1440px) / 2 + var(--margen)));
  background: var(--lila);
}
.cita__texto > p { margin-top: 16px; max-width: 44ch; font-size: 1.125rem; color: var(--ciruela-2); }
.cita .boton { margin-top: 32px; }
.cita__datos div { display: grid; grid-template-columns: 10rem 1fr; gap: 4px 20px; padding: 15px 0; border-top: 1px solid rgb(43 35 66 / .16); }
.cita__datos dt { font-weight: 500; }
.cita__datos dd { margin: 0; color: var(--ciruela-2); font-variant-numeric: tabular-nums; }

.pie {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px;
  max-width: 1440px; margin-inline: auto;
  padding: 36px var(--margen) 104px;
  font-size: .9375rem; color: var(--ciruela-2);
}
.pie__marca { font-weight: 700; color: var(--ciruela); }

/* Tableta */
@media (max-width: 1024px) {
  .etapas { grid-template-columns: 1fr; }
  .etapas__cabeza { position: static; }
  .clinica { grid-template-columns: 1fr; }
}

/* Móvil */
@media (max-width: 760px) {
  .cabecera { padding-block: 14px; }
  .cabecera__nav, .marca__apellido { display: none; }
  .portada { align-items: end; min-height: max(700px, 100svh); padding: 96px var(--margen) 72px; }
  .slot--portada > img { left: 0; width: 100%; object-position: 55% 30%; -webkit-mask-image: none; mask-image: none; }
  .slot--portada::after {
    background:
      linear-gradient(0deg, rgb(250 241 238 / .98) 0%, rgb(250 241 238 / .94) 46%, rgb(250 241 238 / .4) 62%, rgb(250 241 238 / 0) 74%),
      linear-gradient(180deg, rgb(250 241 238 / .8) 0%, rgb(250 241 238 / 0) 16%);
  }
  .chapa { width: 96px; right: 16px; bottom: auto; top: 96px; }
  .chapa__texto { font-size: .75rem; }
  .chapa__texto b { font-size: 1.625rem; }
  .portada h1 { font-size: clamp(2.375rem, 10.6vw, 2.875rem); }
  .salas__pareja, .promesas, .servicios, .cita { grid-template-columns: 1fr; }
  .sala--perros { margin-top: 0; }
  .promesas { gap: 22px; }
  .hoja__lista li { grid-template-columns: 1fr; }
  .cartilla__selector label { font-size: .875rem; padding-inline: 6px; }
  .urgencias { min-height: 640px; }
  .esc--escaparate { right: -10%; width: 76%; top: 12%; height: 30%; }
  .esc--reflejo { right: -12%; width: 80%; top: 44%; }
  .slot--noche::after { background: linear-gradient(0deg, rgb(28 23 48 / .96) 0%, rgb(28 23 48 / .78) 46%, rgb(28 23 48 / .1) 76%); }
  .cita__datos div { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media (prefers-reduced-motion: reduce) { .hoja, .tabla, .chapa, .cartilla__marca { transition-duration: 0s; } }

/* Firma de WEBO: el gris del pie ya es suave, así que se apaga menos para mantener el contraste AA */
.firma-webo { opacity: .88; }