/* Hospital Veterinario Drs. Chacón. Versión «El recorrido».
   Sistema: libro de marca 3, La gente. Fraunces y Figtree, azul y blanco, lino de apoyo, una línea. */

/* 1. Fichas */
:root {
  --azul: #11356e;
  --azul-2: #0c2a5a;
  --blanco: #fff;
  --lino: #f5f0e7;
  --arena: #e6dccb;
  --cielo: #d3e2f0;
  --arcilla: #a8492f;
  --arcilla-2: #8f3c25;
  --tinta: #1b2536;
  --tinta2: #566074;
  --borde-campo: #7d8698;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Figtree", Arial, Helvetica, sans-serif;

  /* Escala tipográfica */
  --t-eti: .75rem;
  --t-nota: .8125rem;
  --t-chico: .9375rem;
  --t-texto: 1.0625rem;
  --t-entrada: clamp(1.125rem, 1.03rem + .42vw, 1.3125rem);
  --t-sub: clamp(1.3125rem, 1.2rem + .5vw, 1.5625rem);
  --t-titulo: clamp(2rem, 1.3rem + 2.7vw, 3.25rem);
  --t-titular: clamp(2.5rem, 1rem + 5.2vw, 5.25rem);
  --t-cita: clamp(1.625rem, 1.05rem + 2.5vw, 3rem);

  /* Medidas */
  --r1: 4px;
  --r2: 10px;
  --r3: 16px;
  --lin: 1.5px;
  --giro: 28px;
  --max: 1240px;
  --margen: clamp(1.25rem, .25rem + 4.2vw, 3.5rem);
  --sec: clamp(4.5rem, 2.5rem + 8vw, 9.5rem);
  --util-h: 38px;
  --cab-h: 84px;
  --llamar-h: 0px;
  --banda-h: 6.75rem;
  --cab-total: calc(var(--util-h) + var(--cab-h));
  --nodo: 2.75rem;
  --hilo: serpentina;

  /* Colores por contexto: cada fondo los redefine */
  --fondo: #fff;
  --c-titulo: var(--azul);
  --c-eti: var(--azul);
  --c-texto: var(--tinta);
  --c-suave: var(--tinta2);
  --c-linea: var(--azul);
  --c-pelo: rgba(17, 53, 110, .2);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12H19.5M14 6.5L19.5 12L14 17.5'/%3E%3C/svg%3E");
  --mas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 5V19M5 12H19'/%3E%3C/svg%3E");
}

/* 2. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cab-h) + var(--llamar-h) + 1.25rem); }
body { margin: 0; font: 400 var(--t-texto)/1.55 var(--sans); color: var(--tinta); background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-kerning: normal; overflow-wrap: break-word; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
address { font-style: normal; }
b, strong { font-weight: 650; }
button { font: inherit; }
::selection { background: var(--azul); color: #fff; }
.sobre-azul ::selection, .page-hero ::selection, .pie ::selection, .referral ::selection { background: #fff; color: var(--azul); }
:focus-visible { outline: 2px solid var(--c-linea); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--serif); font-variation-settings: "SOFT" 50, "WONK" 0; font-optical-sizing: auto; font-weight: 400; color: var(--c-titulo); text-wrap: balance; }
h1 { font-size: var(--t-titular); line-height: 1.03; font-weight: 320; letter-spacing: -.022em; }
.apertura h1 { font-size: clamp(2.5rem, min(1rem + 5.2vw, 9.6svh), 5.25rem); }
h2 { font-size: var(--t-titulo); line-height: 1.07; font-weight: 360; letter-spacing: -.017em; }
h3 { font-size: var(--t-sub); line-height: 1.2; font-weight: 460; letter-spacing: -.006em; }
h1 em, h2 em { font-style: italic; font-weight: inherit; }
p { text-wrap: pretty; }

.salto { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .8rem 1.1rem; background: #fff; color: var(--azul); font-weight: 600; border-radius: var(--r1); box-shadow: 0 0 0 2px var(--azul); transition: top .2s; }
.salto:focus { top: 1rem; }

.cont, .container { width: min(100% - 2 * var(--margen), var(--max)); margin-inline: auto; }

.eti, .eyebrow { font: 650 var(--t-eti)/1.35 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c-eti); }
.entrada, .lead { font-size: var(--t-entrada); line-height: 1.5; color: var(--c-texto); max-width: 34em; }
.nota { font-size: var(--t-chico); line-height: 1.5; color: var(--c-suave); }
.ico { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Contextos de fondo */
.fondo-lino { background: var(--lino); --fondo: var(--lino); }
.sobre-azul, .page-hero, .pie, .referral, .review-ending { background: var(--azul); color: #fff; --fondo: var(--azul); --c-titulo: #fff; --c-eti: var(--cielo); --c-texto: #fff; --c-suave: var(--cielo); --c-linea: #fff; --c-pelo: rgba(255, 255, 255, .26); }
.sobre-azul h1 em, .sobre-azul h2 em { color: var(--cielo); }
.en-blanco { background: #fff; color: var(--tinta); --fondo: #fff; --c-titulo: var(--azul); --c-eti: var(--azul); --c-texto: var(--tinta); --c-suave: var(--tinta2); --c-linea: var(--azul); --c-pelo: rgba(17, 53, 110, .2); }

/* 3. Botones y enlaces */
.boton, .button { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.25rem; padding: .8rem 1.5rem; border: var(--lin) solid var(--azul); border-radius: var(--r1); background: var(--azul); color: #fff; font: 600 1rem/1.2 var(--sans); text-align: center; text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .15s; }
.boton:hover, .button:hover { background: var(--azul-2); border-color: var(--azul-2); }
.boton:active, .button:active { transform: translateY(1px); }
.boton--linea, .button.outline { background: transparent; color: var(--azul); }
.boton--linea:hover, .button.outline:hover { background: var(--azul); color: #fff; border-color: var(--azul); }
.sobre-azul .boton--claro, .referral .button, .review-ending .button { background: #fff; border-color: #fff; color: var(--azul); }
.sobre-azul .boton--claro:hover, .referral .button:hover, .review-ending .button:hover { background: var(--cielo); border-color: var(--cielo); }
.sobre-azul .boton--linea { border-color: rgba(255, 255, 255, .72); color: #fff; }
.sobre-azul .boton--linea:hover { background: #fff; border-color: #fff; color: var(--azul); }
.en-blanco .boton--linea { border-color: var(--azul); color: var(--azul); }
.en-blanco .boton--linea:hover { background: var(--azul); color: #fff; }
.boton--urg, .button[href="tel:+50687026433"]:not(.outline) { background: var(--arcilla); border-color: var(--arcilla); color: #fff; }
.boton--urg:hover, .button[href="tel:+50687026433"]:not(.outline):hover { background: var(--arcilla-2); border-color: var(--arcilla-2); }
.button.outline[href="tel:+50687026433"], .button.outline[href$="/urgencias/"] { border-color: var(--arcilla); color: var(--arcilla); }
.button.outline[href="tel:+50687026433"]:hover, .button.outline[href$="/urgencias/"]:hover { background: var(--arcilla); border-color: var(--arcilla); color: #fff; }
.button > span[aria-hidden], .text-link > span[aria-hidden], .phone > span[aria-hidden] { display: none; }

.enlace, .text-link { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: 0; border: 0; background: none; color: var(--c-titulo); font: 600 1rem/1.3 var(--sans); text-decoration: underline; text-decoration-thickness: var(--lin); text-underline-offset: .38em; cursor: pointer; }
.enlace::after, .text-link::after { content: ""; width: 1.2em; height: 1.2em; flex: none; background: currentColor; -webkit-mask: var(--flecha) center / contain no-repeat; mask: var(--flecha) center / contain no-repeat; transition: transform .3s var(--ease); }
.enlace:hover::after, .text-link:hover::after { transform: translateX(5px); }
.enlace--abajo::after { transform: rotate(90deg); }
.enlace--abajo:hover::after { transform: rotate(90deg) translateX(4px); }
.enlace--plano::after, .text-link[href^="tel:"]::after { display: none; }
.text-link[href^="tel:"] { display: inline; min-height: 0; white-space: nowrap; }
.acciones, .actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.acciones .enlace { margin-left: .5rem; }

/* 4. Logo, según la construcción del libro. u es la unidad del dibujo. */
.lg { --u: .24px; display: inline-flex; align-items: flex-end; gap: calc(var(--u) * 38); line-height: 1; flex: none; }
.lg img { max-width: none; }
.lg-s { width: calc(var(--u) * 347.1); height: calc(var(--u) * 205.5); }
.lg-n { width: calc(var(--u) * 573.4); height: calc(var(--u) * 92.7); }
.lg-t { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 15.5); padding-bottom: calc(var(--u) * 2); }
.lg-d { display: block; margin-left: calc(var(--u) * 2); font: 600 calc(var(--u) * 33)/.7 var(--sans); letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; color: var(--azul); }
.en-azul { display: none; }
.marca { display: inline-flex; flex: none; padding: .35rem 0; text-decoration: none; }

/* 5. Teléfonos fijos en el teléfono */
.llamar { display: none; }

/* 6. Encabezado */
.cab { position: sticky; top: calc(-1 * var(--util-h)); z-index: 50; background: #fff; color: var(--tinta); box-shadow: 0 1px 0 var(--arena); transition: background-color .3s, box-shadow .3s, color .3s; }
.cab-util { height: var(--util-h); background: var(--lino); font-size: var(--t-nota); color: var(--tinta2); transition: background-color .3s; }
.cab-util .cont { height: 100%; display: flex; align-items: center; gap: 2rem; white-space: nowrap; }
.util-lema { margin-right: auto; padding-left: 2rem; border-left: 1px solid var(--arena); font: italic 400 .9375rem/1 var(--serif); font-variation-settings: "SOFT" 50, "WONK" 0; color: var(--azul); }
.cab-util a { display: inline-flex; align-items: center; gap: .4rem; height: 100%; color: var(--azul); font-weight: 600; text-decoration: none; }
.cab-util a:hover { text-decoration: underline; }
.cab-util .ico { width: 1rem; height: 1rem; transition: transform .3s var(--ease); }
.cab-util a:hover .ico { transform: translateX(3px); }
.util-tel { font-weight: 400 !important; }
.util-tel b { font-weight: 700; font-feature-settings: "tnum"; }

.cab-fila { height: var(--cab-h); display: flex; align-items: center; gap: 1rem; }
.nav { margin-left: auto; }
.nav-lista { display: flex; }
.nav-lista a { position: relative; display: inline-flex; align-items: center; height: 2.75rem; padding: 0 .55rem; font-weight: 500; font-size: 1rem; white-space: nowrap; text-decoration: none; color: inherit; }
.nav-lista a::after { content: ""; position: absolute; left: .55rem; right: .55rem; bottom: .45rem; height: var(--lin); border-radius: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav-lista a:hover::after, .nav-lista a[aria-current]::after,
body[data-ruta="/el-hospital"] .nav [data-nav="/el-hospital"]::after,
body[data-ruta="/especialidades/cirugia"] .nav [data-nav="/especialidades/cirugia"]::after,
body[data-ruta^="/especialidades"]:not([data-ruta="/especialidades/cirugia"]) .nav [data-nav="/especialidades"]::after,
body[data-ruta="/su-visita"] .nav [data-nav="/su-visita"]::after,
body[data-ruta="/resenas-de-nuestros-pacientes"] .nav [data-nav="/resenas-de-nuestros-pacientes"]::after,
body[data-ruta="/contacto"] .nav [data-nav="/contacto"]::after { transform: scaleX(1); }
.nav-extra { display: none; }
.urg { display: inline-flex; align-items: center; gap: .5rem; height: 2.75rem; padding: 0 .85rem; border-radius: var(--r1); background: var(--lino); color: var(--arcilla); font-size: var(--t-chico); font-weight: 600; white-space: nowrap; text-decoration: none; transition: background-color .2s; }
.urg:hover { background: var(--arena); }
.urg b { font-weight: 700; font-feature-settings: "tnum"; }
.urg .ico { width: 1.125rem; height: 1.125rem; }
.cab-cta { min-height: 2.75rem; padding: .55rem 1.15rem; white-space: nowrap; }
.menu-btn { display: none; align-items: center; gap: .65rem; height: 2.75rem; margin-left: auto; padding: 0 .25rem 0 .75rem; border: 0; background: none; color: inherit; font: 600 1rem/1 var(--sans); cursor: pointer; }
.menu-ic { position: relative; width: 1.5rem; height: 1rem; }
.menu-ic i { position: absolute; left: 0; right: 0; height: var(--lin); border-radius: 1px; background: currentColor; transition: transform .3s var(--ease), top .3s var(--ease); }
.menu-ic i:first-child { top: .2rem; }
.menu-ic i:last-child { top: .72rem; }
.menu-btn[aria-expanded="true"] .menu-ic i:first-child { top: .46rem; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-ic i:last-child { top: .46rem; transform: rotate(-45deg); }

/* Portada: el encabezado flota sobre el azul hasta que se avanza */
.js body[data-ruta="/"] .cab:not(.cab--solida) { background: transparent; color: #fff; box-shadow: 0 1px 0 transparent; --c-linea: #fff; }
.js body[data-ruta="/"] .cab:not(.cab--solida) .cab-util { background: transparent; color: var(--cielo); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .16); }
.js body[data-ruta="/"] .cab:not(.cab--solida) .cab-util a,
.js body[data-ruta="/"] .cab:not(.cab--solida) .util-lema { color: #fff; border-color: rgba(255, 255, 255, .22); }
.js body[data-ruta="/"] .cab:not(.cab--solida) .en-claro { display: none; }
.js body[data-ruta="/"] .cab:not(.cab--solida) .en-azul { display: block; }
.js body[data-ruta="/"] .cab:not(.cab--solida) .lg-d { color: #fff; }
.js body[data-ruta="/"] .cab:not(.cab--solida) .cab-cta { background: #fff; border-color: #fff; color: var(--azul); }
.js body[data-ruta="/"] .cab:not(.cab--solida) .cab-cta:hover { background: var(--cielo); border-color: var(--cielo); }
.js body[data-ruta="/"] .apertura { margin-top: calc(-1 * var(--cab-total)); padding-top: var(--cab-total); }

/* 7. Apertura */
.apertura { position: relative; }
.apertura-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(2rem, 7vw, 7rem); min-height: calc(100svh - var(--cab-total) - var(--banda-h)); padding-block: 2rem 2.5rem; }
.js body[data-ruta="/"] .apertura-in { min-height: calc(100svh - var(--cab-total) - var(--banda-h)); }
.apertura-texto { max-width: 46rem; }
.apertura-texto .eti { margin-bottom: 1.5rem; }
.apertura-texto h1 { margin-bottom: 1.75rem; }
.apertura-texto .entrada { max-width: 29em; margin-bottom: 2.25rem; }
.apertura-escena { width: clamp(16rem, min(30vw, (100svh - 23.75rem) * .8), 27rem); padding-bottom: .25rem; }
.escena { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r3); background: var(--azul-2); }
.escena video, .escena img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 54% 50%; border-radius: inherit; }
.apertura-escena figcaption { margin-top: 2.35rem; font: italic 340 1.0625rem/1.3 var(--serif); font-variation-settings: "SOFT" 50, "WONK" 0; color: var(--cielo); }
.video-btn { position: absolute; right: .9rem; bottom: .9rem; z-index: 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: var(--lin) solid rgba(255, 255, 255, .85); border-radius: 50%; background: rgba(17, 53, 110, .55); color: #fff; cursor: pointer; transition: background-color .2s; }
.video-btn:hover { background: var(--azul); }
.video-btn:focus-visible { outline-color: #fff; }
.video-btn svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.video-btn .v-pausa { display: none; }
.video-btn.suena .v-pausa { display: block; }
.video-btn.suena .v-play { display: none; }

/* La línea sostiene: pasa por debajo y sube por la esquina */
.sosten { position: relative; }
.sosten::after { content: ""; position: absolute; left: 14%; right: -1.375rem; bottom: -1.375rem; height: 44%; border: solid var(--c-linea); border-width: 0 var(--lin) var(--lin) 0; border-bottom-right-radius: var(--giro); pointer-events: none; }

/* Franja de datos bajo la apertura */
.banda-in { display: flex; align-items: center; justify-content: flex-end; gap: 1.5rem clamp(2rem, 4vw, 4rem); min-height: var(--banda-h); padding-block: 1.25rem; }
.datos { display: flex; gap: clamp(1.5rem, 3.4vw, 3.5rem); }
.datos li { display: flex; align-items: center; gap: .9rem; }
.cifra { font: 330 2.625rem/1 var(--serif); font-variation-settings: "SOFT" 50, "WONK" 0; letter-spacing: -.025em; color: var(--azul); white-space: nowrap; }
.cifra span { margin-left: .06em; font-size: .52em; letter-spacing: 0; vertical-align: .62em; }
.cifra--palabra { font-size: 1.75rem; font-style: italic; letter-spacing: -.01em; }
.dato-t { font-size: .875rem; line-height: 1.35; color: var(--tinta2); }
.dato-urg .cifra { color: var(--arcilla); }
.dato-urg a { color: var(--arcilla); font-size: 1rem; font-weight: 700; font-feature-settings: "tnum"; text-decoration: none; }
.dato-urg a:hover { text-decoration: underline; }
.banda .enlace { white-space: nowrap; }

/* 8. Tramos del recorrido y el hilo */
.tramo { position: relative; padding-block: var(--sec); color: var(--c-texto); }
.tramo > .cont { position: relative; z-index: 2; }
.hilo { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; }
.hilo path { fill: none; stroke: var(--c-linea); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hilo circle { fill: var(--c-linea); }
.nodo { display: inline-grid; place-items: center; flex: none; width: var(--nodo); height: var(--nodo); border: var(--lin) solid var(--c-linea); border-radius: 50%; background: var(--fondo); color: var(--c-titulo); font: 600 1rem/1 var(--sans); font-feature-settings: "tnum"; }

/* Sin script, el hilo es un riel recto */
html:not(.hilo-ok) .etapa::before { content: ""; position: absolute; top: 0; bottom: 0; border-left: var(--lin) solid var(--c-linea); }
html:not(.hilo-ok) .etapa--der::before { right: max(var(--margen), (100% - var(--max)) / 2); }
html:not(.hilo-ok) .etapa--izq::before { left: max(var(--margen), (100% - var(--max)) / 2); }
html:not(.hilo-ok) .inicio .indice::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--nodo) / 2); border-top: var(--lin) solid var(--c-linea); }

.inicio-cab { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; }
.inicio-cab .eti { grid-column: 1 / -1; margin-bottom: 1.5rem; }
.inicio-cab h2 { grid-column: 1 / 11; }
.inicio-texto { grid-column: 7 / 13; margin-top: clamp(1.75rem, 3.5vw, 3rem); }
.inicio-texto .entrada { margin-bottom: 1rem; }
.indice-zona { margin-top: clamp(3.5rem, 7vw, 6.5rem); }
.indice-rotulo { margin-bottom: 1.75rem; color: var(--tinta2); }
.indice { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; padding-right: clamp(2rem, 5vw, 5rem); }
.indice a { position: relative; display: block; padding-bottom: .5rem; text-decoration: none; }
.indice .nodo { position: relative; z-index: 1; margin-bottom: 1.1rem; transition: background-color .25s, color .25s; }
.indice a:hover .nodo, .indice a:focus-visible .nodo { background: var(--azul); color: #fff; }
.indice-t { display: block; font: 440 1.375rem/1.2 var(--serif); font-variation-settings: "SOFT" 50, "WONK" 0; color: var(--azul); }
.indice a:hover .indice-t { text-decoration: underline; text-decoration-thickness: var(--lin); text-underline-offset: .2em; }
.indice-d { display: block; margin-top: .3rem; font-size: var(--t-chico); line-height: 1.4; color: var(--tinta2); }
.inicio { padding-bottom: clamp(3.5rem, 7vw, 6.5rem); }

.etapa-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; align-items: start; }
.etapa--der .etapa-texto { grid-column: 7 / 13; padding-right: clamp(3.5rem, 6vw, 5.5rem); }
.etapa--der .etapa-foto, .etapa--der .etapa-cita { grid-column: 1 / 6; grid-row: 1; }
.etapa--izq .etapa-texto { grid-column: 1 / 7; padding-left: clamp(3.5rem, 6vw, 5.5rem); }
.etapa--izq .etapa-foto { grid-column: 8 / 13; grid-row: 1; }
.etapa-nodo { position: absolute; top: calc((1.35 * var(--t-eti) - var(--nodo)) / 2); z-index: 3; }
.etapa--der .etapa-nodo { right: calc(var(--nodo) / -2); }
.etapa--izq .etapa-nodo { left: calc(var(--nodo) / -2); }
.etapa-texto > .eti { margin-bottom: 1.5rem; }
.etapa-texto h2 { margin-bottom: 1.5rem; }
.etapa-texto > .entrada { margin-bottom: 1.1rem; }
.etapa-texto > p:not(.eti):not(.entrada) { max-width: 36em; margin-bottom: 1rem; }
.etapa-texto > .enlace, .etapa-texto > .boton { margin-top: 1rem; }
.rotulo { margin: 2.25rem 0 .8rem; font-size: 1.25rem; font-weight: 480; }
.etapa-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r3); background: var(--arena); }

.lista li { position: relative; padding-left: 1.4rem; margin-bottom: .55rem; max-width: 36em; }
.lista li::before { content: ""; position: absolute; left: .15rem; top: .62em; width: .38rem; height: .38rem; border-radius: 50%; background: var(--c-linea); }
.lista a, .enlace-tel { font-weight: 650; color: var(--c-titulo); white-space: nowrap; text-decoration-thickness: var(--lin); }

.areas { border-top: 1px solid var(--c-pelo); }
.areas a { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) 1.25rem; gap: .25rem 1.25rem; align-items: baseline; padding: .95rem 0; border-bottom: 1px solid var(--c-pelo); text-decoration: none; }
.areas b { font: 460 1.1875rem/1.25 var(--serif); font-variation-settings: "SOFT" 50, "WONK" 0; color: var(--c-titulo); }
.areas span { font-size: var(--t-chico); line-height: 1.45; color: var(--c-suave); }
.areas a::after { content: ""; align-self: center; width: 1.25rem; height: 1.25rem; background: var(--c-titulo); -webkit-mask: var(--flecha) center / contain no-repeat; mask: var(--flecha) center / contain no-repeat; transition: transform .3s var(--ease); }
.areas a:hover::after { transform: translateX(4px); }
.areas a:hover b { text-decoration: underline; text-decoration-thickness: var(--lin); text-underline-offset: .2em; }

/* Etapa 3: el plan, a pura palabra */
.etapa--plan h2 { font-size: clamp(3rem, 1.4rem + 6.6vw, 6.5rem); line-height: 1; font-weight: 300; letter-spacing: -.03em; margin-bottom: 2rem; }
.etapa--plan .etapa-cita { align-self: center; margin-top: 0; max-width: none; padding-right: 1rem; }

/* Etapa 4: cirugía */
.etapa--cirugia .etapa-texto { grid-column: 1 / 8; }
.etapa-mapa { grid-column: 8 / 13; grid-row: 1; }
.etapa-mapa .eti { margin-bottom: 1.1rem; }
.mapa { border-top: var(--lin) solid var(--azul); }
.mapa a { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto 1.25rem; align-items: baseline; gap: .75rem; padding: 1rem 0; border-bottom: 1px solid var(--c-pelo); text-decoration: none; }
.mapa-n { font: 600 var(--t-nota)/1 var(--sans); letter-spacing: .1em; font-feature-settings: "tnum"; color: var(--tinta2); }
.mapa b { font: 420 1.5rem/1.2 var(--serif); font-variation-settings: "SOFT" 50, "WONK" 0; color: var(--azul); }
.mapa-c { font-size: var(--t-nota); color: var(--tinta2); white-space: nowrap; }
.mapa a::after { content: ""; align-self: center; width: 1.25rem; height: 1.25rem; background: var(--azul); -webkit-mask: var(--flecha) center / contain no-repeat; mask: var(--flecha) center / contain no-repeat; transition: transform .3s var(--ease); }
.mapa a:hover::after { transform: translateX(4px); }
.mapa a:hover b { text-decoration: underline; text-decoration-thickness: var(--lin); text-underline-offset: .2em; }
.etapa-mapa .nota { margin-top: 1rem; }
.etapa-pasos { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: clamp(3rem, 6vw, 5rem); padding-left: clamp(3.5rem, 6vw, 5.5rem); }
.etapa-pasos > div { padding-top: 1rem; border-top: var(--lin) solid var(--azul); }
.etapa-pasos .eti { margin-bottom: .6rem; }
.etapa-pasos .testigo { grid-column: 1 / -1; }

/* 9. La palabra de la gente */
.testigo { max-width: 34rem; margin-top: 2.75rem; }
.testigo blockquote p { font: 300 clamp(1.375rem, 1.2rem + .8vw, 1.75rem)/1.22 var(--serif); font-variation-settings: "SOFT" 50, "WONK" 0; letter-spacing: -.012em; color: var(--c-titulo); text-wrap: balance; }
.com { opacity: .5; }
.sobre-azul .com { color: var(--cielo); opacity: .75; }
.testigo figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .75rem; margin-top: 1.1rem; font-size: var(--t-nota); line-height: 1.3; color: var(--c-suave); }
.testigo figcaption i { flex: 0 0 3.25rem; align-self: center; height: 0; border-top: var(--lin) solid var(--c-linea); border-radius: 1px; }
.testigo figcaption b { font-size: var(--t-chico); font-weight: 650; color: var(--c-titulo); }
.testigo--grande blockquote p { font-size: var(--t-cita); line-height: 1.12; letter-spacing: -.017em; text-indent: -.44em; }
.testigo--grande figcaption { margin-top: 2rem; }
.testigo--pieza { display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; max-width: none; margin-top: 0; padding: clamp(1.75rem, 4vw, 3.5rem); border-radius: var(--r3); }
.testigo--pieza blockquote p { font-size: clamp(1.625rem, 1.1rem + 2vw, 2.625rem); line-height: 1.14; letter-spacing: -.016em; }

/* 10. Directorio de especialidades */
.cab-seccion { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.cab-seccion .eti { margin-bottom: 1.5rem; }
.directorio { border-top: 1px solid var(--c-pelo); }
.directorio a { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.15fr) 2rem; align-items: baseline; gap: 1.5rem; padding: 1.55rem 0; border-bottom: 1px solid var(--c-pelo); color: #fff; text-decoration: none; transition: background-color .3s; }
.dir-n { font: 600 var(--t-nota)/1 var(--sans); letter-spacing: .14em; font-feature-settings: "tnum"; color: var(--cielo); }
.directorio h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); font-weight: 360; letter-spacing: -.012em; }
.directorio p { font-size: 1rem; color: var(--cielo); }
.directorio .ico { align-self: center; justify-self: end; width: 1.5rem; height: 1.5rem; transition: transform .3s var(--ease); }
.directorio a:hover { background: rgba(255, 255, 255, .06); }
.directorio a:hover .ico { transform: translateX(6px); }
.directorio a:hover h3 { text-decoration: underline; text-decoration-thickness: var(--lin); text-underline-offset: .18em; }
.cierre-seccion, .section-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; margin-top: 2.25rem; color: var(--c-suave); }

/* 11. Emergencias: arcilla sobre lino */
.urgencia-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 7vw, 7rem); align-items: start; }
.eti--arcilla { display: flex; align-items: center; gap: .6rem; color: var(--arcilla); }
.eti--arcilla .ico { width: 1.5rem; height: 1.5rem; }
.urgencia-texto .eti { margin-bottom: 1.5rem; }
.urgencia-texto h2 { margin-bottom: 1.5rem; }
.urgencia-texto .entrada { margin-bottom: 1rem; }
.urgencia-linea { padding-top: .2rem; }
.tel-grande { display: inline-block; margin: 1rem 0 1.9rem; font: 320 clamp(3.25rem, 1.8rem + 6.2vw, 6.5rem)/1 var(--serif); font-variation-settings: "SOFT" 50, "WONK" 0; font-feature-settings: "lnum"; letter-spacing: -.03em; color: var(--arcilla); text-decoration: none; }
.tel-grande:hover { color: var(--arcilla-2); }
.sub { position: relative; white-space: nowrap; }
.sub svg { position: absolute; left: -1%; bottom: -.16em; width: 102%; height: .22em; max-width: none; overflow: visible; }
.sub svg path { fill: none; stroke: var(--arcilla); stroke-width: 1.5px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.urgencia-linea .nota { max-width: 30em; }

/* 12. Reseñas en la portada */
.palabra-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: stretch; }
.palabra-texto .eti { margin-bottom: 1.5rem; }
.palabra-texto h2 { margin-bottom: 1.5rem; }
.palabra-texto p { margin-bottom: 1rem; }
.palabra-texto .acciones { margin-top: 1.75rem; }
.ficha-google { display: inline-flex; align-items: center; gap: 1rem; margin-top: 1.5rem; padding: .85rem 1.1rem; border: 1px solid var(--arena); border-radius: var(--r2); text-decoration: none; transition: border-color .2s; }
.ficha-google:hover { border-color: var(--azul); }
.ficha-nota { font: 380 1.75rem/1 var(--serif); font-variation-settings: "SOFT" 50, "WONK" 0; color: var(--azul); white-space: nowrap; }
.ficha-nota span { font-size: .7em; }
.ficha-texto { font-size: var(--t-chico); line-height: 1.35; font-weight: 600; color: var(--tinta); }
.ficha-texto small { display: block; font-size: var(--t-nota); font-weight: 400; color: var(--tinta2); }

/* 13. Médicos veterinarios */
.colegas-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
.colegas-texto .eti { margin-bottom: 1.5rem; }
.colegas-texto h2 { margin-bottom: 1.5rem; }
.colegas-texto .entrada { margin-bottom: 2rem; }
.colegas-ficha { margin: 0 1.375rem 1.375rem 0; padding: clamp(1.5rem, 3.5vw, 2.75rem); border-radius: var(--r2); background: #fff; color: var(--tinta); }
.colegas-ficha .eti { margin-bottom: .9rem; color: var(--azul); }
.colegas-ficha h3 { margin-bottom: 1.25rem; color: var(--azul); }
.colegas-ficha .nota { margin-top: 1.25rem; color: var(--tinta2); }
.lista-n { counter-reset: n; border-top: 1px solid rgba(17, 53, 110, .2); }
.lista-n li { counter-increment: n; display: grid; grid-template-columns: 2rem minmax(0, 1fr); padding: .7rem 0; border-bottom: 1px solid rgba(17, 53, 110, .2); }
.lista-n li::before { content: counter(n); font-weight: 650; font-feature-settings: "tnum"; color: var(--azul); }

/* 14. Preguntas */
.questions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(2rem, 7vw, 7rem); align-items: start; }
.questions .eti, .questions .eyebrow { margin-bottom: 1.5rem; }
.questions h2 { margin-bottom: 1.25rem; }
details { border-bottom: 1px solid var(--c-pelo); }
details:first-of-type { border-top: var(--lin) solid var(--azul); }
summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.25rem; padding: 1.1rem 0; font: 440 clamp(1.1875rem, 1.1rem + .4vw, 1.375rem)/1.25 var(--serif); font-variation-settings: "SOFT" 50, "WONK" 0; color: var(--azul); list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: none; width: 1.5rem; height: 1.5rem; background: var(--azul); -webkit-mask: var(--mas) center / contain no-repeat; mask: var(--mas) center / contain no-repeat; transition: transform .3s var(--ease); }
details[open] > summary::after { transform: rotate(45deg); }
summary:hover { text-decoration: underline; text-decoration-thickness: var(--lin); text-underline-offset: .2em; }
details > p { max-width: 38em; padding: 0 3rem 1.6rem 0; }

/* 15. Formulario de revisión y ubicación */
.consulta-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.consulta-texto .eti { margin-bottom: 1.5rem; }
.consulta-texto h2 { margin-bottom: 1.5rem; }
.directo { margin-top: 1.5rem; font-size: var(--t-entrada); }
.directo a { font: 420 1.25em/1 var(--serif); font-variation-settings: "SOFT" 50, "WONK" 0; color: var(--azul); white-space: nowrap; text-decoration-thickness: var(--lin); text-underline-offset: .2em; }
.ubicacion { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem; border-top: var(--lin) solid var(--azul); }
.ubicacion .eti { margin-bottom: .9rem; }
.ubicacion h3 { margin-bottom: .4rem; font-size: clamp(1.625rem, 1.4rem + 1vw, 2.125rem); font-weight: 380; }
.ubicacion address { margin: 1rem 0 1.5rem; font-weight: 600; }
.consulta-form { padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--r2); }
.consulta-form h3 { margin-bottom: .75rem; font-size: clamp(1.5rem, 1.3rem + .9vw, 2rem); font-weight: 380; }
.form-nota { margin-bottom: 1.75rem; font-size: var(--t-chico); color: var(--tinta2); }
.form-nota a, .form-urg a { font-weight: 650; color: var(--azul); white-space: nowrap; }
.fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.campo { margin-bottom: 1.1rem; }
.campo label { display: block; margin-bottom: .4rem; font-size: var(--t-chico); font-weight: 600; }
.req { color: var(--arcilla); }
.opc { font-weight: 400; color: var(--tinta2); }
.campo input, .campo select, .campo textarea { display: block; width: 100%; min-height: 3.25rem; padding: .8rem 1rem; border: 1px solid var(--borde-campo); border-radius: var(--r1); background: #fff; color: var(--tinta); font: 400 1rem/1.4 var(--sans); transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
.campo textarea { min-height: 6.5rem; resize: vertical; }
.campo select { padding-right: 2.75rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2311356e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5L12 15L17.5 9.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 1.25rem; }
.campo ::placeholder { color: #6b7385; opacity: 1; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--azul); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.campo [aria-invalid="true"] { border-color: var(--arcilla); box-shadow: inset 0 0 0 1px var(--arcilla); }
.error { margin-top: .4rem; font-size: var(--t-nota); font-weight: 600; color: var(--arcilla); }
.form-req { margin: -.2rem 0 1.25rem; font-size: var(--t-nota); color: var(--tinta2); }
.form-req span { color: var(--arcilla); font-weight: 700; }
.form-urg { margin-top: 1.25rem; font-size: var(--t-chico); color: var(--tinta2); }
.form-urg a { color: var(--arcilla); }

.resumen { width: min(35rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-radius: var(--r2); background: #fff; color: var(--tinta); overflow: auto; }
.resumen::backdrop { background: rgba(17, 53, 110, .6); }
.resumen-in { position: relative; padding: clamp(1.5rem, 5vw, 2.75rem); }
.resumen-cerrar { position: absolute; top: .6rem; right: .6rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--azul); cursor: pointer; }
.resumen-cerrar:hover { background: var(--lino); }
.resumen-cerrar svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.resumen .eti { margin-bottom: .9rem; }
.resumen h2 { margin: 0 2rem 1.5rem 0; font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.375rem); }
.resumen dl { border-top: var(--lin) solid var(--azul); }
.resumen dl > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--arena); }
.resumen dt { padding-top: .2rem; font: 650 var(--t-eti)/1.35 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta2); }
.resumen dd { overflow-wrap: anywhere; }
.resumen-aviso { margin: 1.5rem 0; padding: 1rem 1.15rem; border-radius: var(--r1); background: var(--lino); font-size: var(--t-chico); }

/* 16. Pie */
.pie { padding-top: clamp(3.5rem, 7vw, 6rem); }
.pie-arriba { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); gap: clamp(2.5rem, 6vw, 6rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.pie .lg { --u: .27px; }
.pie .lg-d { color: #fff; }
.pie-lema { margin-top: 2rem; font: italic 340 1.375rem/1.3 var(--serif); font-variation-settings: "SOFT" 50, "WONK" 0; }
.pie-lugar { margin-top: 1rem; font-size: var(--t-chico); color: var(--cielo); }
.pie-mapa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.25fr); gap: 2rem; }
.pie-mapa .eti { margin-bottom: .75rem; }
.pie-mapa a { display: inline-flex; align-items: center; min-height: 2.5rem; text-decoration: none; }
.pie-mapa a:hover { text-decoration: underline; }
.pie-mapa b { margin-left: .35em; font-feature-settings: "tnum"; }
.pie-mapa .pie-urg b { margin-left: 0; white-space: nowrap; }
.pie-mapa .pie-urg { flex-wrap: wrap; column-gap: .35em; min-height: 2.25rem; margin: .15rem 0; padding: .3rem .7rem; font-size: var(--t-chico); line-height: 1.3; border-radius: var(--r1); background: var(--lino); color: var(--arcilla); font-weight: 600; }
.pie-abajo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2rem; padding-block: 1.5rem 5.5rem; border-top: 1px solid var(--c-pelo); font-size: var(--t-nota); color: var(--cielo); }
.pie-cierre { margin-right: auto; font: italic 400 .9375rem/1.3 var(--serif); font-variation-settings: "SOFT" 50, "WONK" 0; color: #fff; }
.pie-abajo a { display: inline-flex; align-items: center; min-height: 2.75rem; color: #fff; }

/* 17. Páginas internas: vocabulario de la fuente */
.page-hero { padding-top: clamp(2rem, 4vw, 3.25rem); }
.page-hero .container { display: grid; grid-template-columns: minmax(0, 1fr); }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .6rem; font-size: var(--t-nota); color: var(--c-suave); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--c-titulo); }
.page-hero .breadcrumb { grid-area: 1 / 1; margin-bottom: clamp(1.75rem, 5vw, 4rem); }
.page-hero .eyebrow { grid-area: 2 / 1; margin-bottom: 1.25rem; }
.page-hero h1 { grid-area: 3 / 1; max-width: 15em; padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem); font-size: clamp(2.5rem, 1.25rem + 4.4vw, 4.75rem); }
.page-hero .lead { grid-area: 4 / 1; padding-block: clamp(1.5rem, 3vw, 2.25rem) clamp(3rem, 6vw, 5rem); padding-right: 2rem; }
/* La línea sale de debajo del título, gira y baja al contenido, como en las aperturas del libro */
.page-hero .container::after { content: ""; grid-area: 4 / 1; border: solid #fff; border-width: var(--lin) var(--lin) 0 0; border-top-right-radius: var(--giro); pointer-events: none; }
.page-hero + * { position: relative; }
.page-hero + *::before { content: ""; position: absolute; top: 0; right: max(var(--margen), (100% - var(--max)) / 2); height: clamp(2rem, 4vw, 3rem); border-right: var(--lin) solid var(--azul); border-radius: 0 0 1px 1px; pointer-events: none; }

.section { padding-block: var(--sec); }
.page-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: start; padding-right: 1.5rem; }
.article > * { max-width: 40rem; }
.article h2 { margin: 2.75rem 0 .9rem; padding-top: 1.6rem; border-top: 1px solid var(--arena); font-size: clamp(1.5rem, 1.3rem + .9vw, 2rem); font-weight: 400; letter-spacing: -.01em; }
.article h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.article p { margin-bottom: 1rem; }
.article ul { margin: .25rem 0 1rem; }
.article li { position: relative; padding-left: 1.4rem; margin-bottom: .55rem; }
.article li::before { content: ""; position: absolute; left: .15rem; top: .62em; width: .38rem; height: .38rem; border-radius: 50%; background: var(--azul); }
.article .text-link { margin-top: .25rem; }

.side-panel { position: relative; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--r2); background: var(--lino); --fondo: var(--lino); }
.side-panel .eyebrow { margin-bottom: 1rem; }
.side-panel h3 { margin-bottom: .75rem; font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem); font-weight: 400; }
.side-panel p { margin-bottom: 1.5rem; }
.side-panel .button { width: 100%; margin-top: .75rem; }
.side-panel p + .button { margin-top: 0; }
/* La línea que baja de la apertura pasa junto a la tarjeta y la sostiene por debajo */
.side-panel::after { content: ""; position: absolute; top: calc(-1 * var(--sec)); right: -1.5rem; bottom: -1.5rem; left: 30%; border: solid var(--azul); border-width: 0 var(--lin) var(--lin) 0; border-bottom-right-radius: var(--giro); pointer-events: none; }

.visit-strip { padding-block: clamp(3rem, 6vw, 5rem); background: var(--lino); --fondo: var(--lino); }
.visit-strip .container { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.visit-strip .eyebrow { margin-bottom: 1rem; }
.visit-strip h2 { margin-bottom: .5rem; }

.specialty-surgery-lead { padding-block: clamp(3rem, 6vw, 5rem); background: var(--lino); --fondo: var(--lino); }
.specialty-surgery-lead .container, .referral .container { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.specialty-surgery-lead .eyebrow, .referral .eyebrow { margin-bottom: 1.5rem; }
.specialty-surgery-lead p:not(.eyebrow), .referral p:not(.eyebrow) { margin-bottom: 1.25rem; font-size: var(--t-entrada); line-height: 1.5; }
.referral .button { margin-top: .5rem; }

.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.5rem 2rem; }
.service { display: flex; flex-direction: column; min-height: 14.5rem; padding-top: 1.1rem; border-top: var(--lin) solid var(--azul); color: var(--tinta); text-decoration: none; }
.service .number { margin-bottom: 2rem; font: 650 var(--t-eti)/1 var(--sans); letter-spacing: .14em; font-feature-settings: "tnum"; color: var(--tinta2); }
.service h3 { margin-bottom: .6rem; font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem); font-weight: 400; }
.service .arrow { display: block; margin-top: auto; padding-top: 1.5rem; font-size: 0; }
.service .arrow::after { content: ""; display: block; width: 1.5rem; height: 1.5rem; background: var(--azul); -webkit-mask: var(--flecha) center / contain no-repeat; mask: var(--flecha) center / contain no-repeat; transition: transform .3s var(--ease); }
.service:hover .arrow::after { transform: translateX(6px); }
.service:hover h3 { text-decoration: underline; text-decoration-thickness: var(--lin); text-underline-offset: .18em; }
.section-end { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--arena); color: var(--tinta); }

.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.contact-card { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--arena); border-radius: var(--r2); }
.contact-card .eyebrow { margin-bottom: 1.25rem; }
.contact-card h2 { font-size: var(--t-sub); font-weight: 460; letter-spacing: -.006em; line-height: 1.2; }
.phone { display: inline-block; margin: .9rem 0 1.25rem; font: 320 clamp(2.75rem, 1.8rem + 3.6vw, 4.75rem)/1 var(--serif); font-variation-settings: "SOFT" 50, "WONK" 0; font-feature-settings: "lnum"; letter-spacing: -.03em; color: var(--azul); white-space: nowrap; text-decoration: none; }
.phone:hover { text-decoration: underline; text-decoration-thickness: var(--lin); text-underline-offset: .14em; }
.contact-card p:not(.eyebrow) { max-width: 30em; margin-bottom: 1rem; }
.contact-card .text-link { margin-top: auto; }
.contact-card.urgent { border-color: transparent; background: var(--lino); --fondo: var(--lino); }
.contact-card.urgent .eyebrow, .contact-card.urgent .phone { color: var(--arcilla); }
.address-block { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; margin-top: clamp(3.5rem, 7vw, 6rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: var(--lin) solid var(--azul); }
.address-block .eyebrow { margin-bottom: 1.5rem; }
.address-block h2 { margin-bottom: 1.25rem; }
.address-block p:not(.eyebrow) { margin-bottom: 1.25rem; }
.address-block div:first-child p:not(.eyebrow) { font-weight: 600; margin-bottom: 0; }

/* Su visita: los cuatro momentos, unidos por la línea */
body[data-ruta="/su-visita"] .article { position: relative; padding-left: 4.5rem; counter-reset: paso; }
body[data-ruta="/su-visita"] .article::before { content: ""; position: absolute; left: calc(var(--nodo) / 2); top: 1rem; bottom: .25rem; border-left: var(--lin) solid var(--azul); border-radius: 1px; }
body[data-ruta="/su-visita"] .article h2 { position: relative; counter-increment: paso; margin-top: 3.25rem; padding-top: 0; border-top: 0; }
body[data-ruta="/su-visita"] .article h2:first-child { margin-top: 0; }
body[data-ruta="/su-visita"] .article h2::before { content: counter(paso); position: absolute; left: -4.5rem; top: calc((1.07em - var(--nodo)) / 2); display: grid; place-items: center; width: var(--nodo); height: var(--nodo); border: var(--lin) solid var(--azul); border-radius: 50%; background: #fff; color: var(--azul); font: 600 1rem/1 var(--sans); letter-spacing: 0; }

/* 17b. Páginas rediseñadas: cirugía, emergencias y reseñas */
.page-hero h1 em { color: var(--cielo); }
.page-hero .lead p { margin-bottom: 1.75rem; }
.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.pasos li { position: relative; padding-right: 1rem; }
.pasos li:not(:last-child)::before { content: ""; position: absolute; left: var(--nodo); right: -2rem; top: calc(var(--nodo) / 2 - .75px); border-top: var(--lin) solid var(--c-linea); }
.pasos .nodo { margin-bottom: 1.5rem; }
.pasos h2, .pasos h3 { margin-bottom: .6rem; font-size: clamp(1.5rem, 1.3rem + .9vw, 2rem); font-weight: 400; line-height: 1.15; letter-spacing: -.01em; }
.pasos p { max-width: 24em; }
.sobre-azul .pasos p { color: var(--cielo); }
.boton--urg-linea { background: transparent; border-color: var(--arcilla); color: var(--arcilla); }
.boton--urg-linea:hover { background: var(--arcilla); border-color: var(--arcilla); color: #fff; }
.apertura .sosten::after, .res-hero .sosten::after { left: -22%; }
.sobre-azul .colegas-ficha.sosten::after { border-color: #fff; }

/* Cirugía */
.cir-indice-zona { --pz: clamp(3rem, 6vw, 5rem); padding-block: var(--pz); overflow: clip; }
.cir-indice-in { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.cir-rotulo .eti { margin-bottom: 1rem; }
.cir-cinco { font-size: var(--t-chico); line-height: 1.45; color: var(--tinta2); }
.cir-cinco .cifra { display: block; margin-bottom: .6rem; font-size: clamp(3rem, 2.4rem + 2.6vw, 4.75rem); font-weight: 300; }
.cir-indice { padding-right: 0; }
.cir-indice::before { content: ""; position: absolute; left: calc(var(--nodo) / 2); right: 0; bottom: calc(100% - var(--nodo) / 2 - .75px); height: 60rem; border: solid var(--azul); border-width: 0 var(--lin) var(--lin) 0; border-bottom-right-radius: var(--giro); pointer-events: none; }
.cir-tesis { padding-bottom: clamp(3.5rem, 7vw, 6.5rem); }
.cir-tesis .cab-seccion, .cir-contacto .cab-seccion { margin-bottom: 0; }
.cir-grupos { margin-top: clamp(1rem, 3vw, 2rem); }
.cir-grupo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 4fr) minmax(0, 6fr); gap: 1.5rem clamp(1.5rem, 3vw, 3rem); padding-block: clamp(2rem, 4vw, 3.25rem); border-top: var(--lin) solid var(--azul); scroll-margin-top: calc(var(--cab-h) + var(--llamar-h) + 1rem); }
.cir-n b { display: block; font: 300 clamp(2.5rem, 2rem + 2vw, 3.75rem)/1 var(--serif); font-variation-settings: "SOFT" 50, "WONK" 0; font-feature-settings: "lnum"; letter-spacing: -.03em; color: var(--azul); }
.cir-n span { display: block; margin-top: .5rem; font: 650 var(--t-eti)/1.35 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta2); }
.cir-intro h3 { margin-bottom: .75rem; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 380; letter-spacing: -.014em; line-height: 1.1; }
.cir-intro p { max-width: 24em; }
.cir-lista { columns: 2; column-gap: clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid var(--c-pelo); }
.cir-lista li { position: relative; padding: .7rem 0 .7rem 1.4rem; border-bottom: 1px solid var(--c-pelo); break-inside: avoid; }
.cir-lista li::before { content: ""; position: absolute; left: .15rem; top: 1.3em; width: .38rem; height: .38rem; border-radius: 50%; background: var(--azul); }
.cir-camino-cab { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.cir-camino-cab .eti { margin-bottom: 1.5rem; }
.cir-testigo { max-width: 54rem; margin-top: clamp(3.5rem, 7vw, 6rem); padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--c-pelo); }
.cir-contacto .entrada { margin-bottom: 1.75rem; }

/* El hospital */
.hosp-origen-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.hosp-origen .etapa-foto { margin: 0 1.375rem 1.375rem 0; }
.hosp-texto .eti { margin-bottom: 1.5rem; }
.hosp-texto h2 { margin-bottom: 1.5rem; }
.hosp-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem clamp(1.5rem, 3vw, 3rem); }
.hosp-tres > div { padding-top: 1.4rem; border-top: var(--lin) solid var(--azul); }
.hosp-tres h2 { margin-bottom: 1rem; font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: 400; line-height: 1.15; letter-spacing: -.01em; }
.hosp-lema .eti { margin-bottom: 1.5rem; }
.hosp-lema-t { margin-bottom: 1.75rem; font: 320 var(--t-titulo)/1.1 var(--serif); font-variation-settings: "SOFT" 50, "WONK" 0; letter-spacing: -.017em; }
.hosp-lema-t em { color: var(--cielo); }
.hosp-cierre .colegas-ficha p:not(.eti) { margin-bottom: 1.5rem; }
.hosp-cierre .colegas-ficha h3 { margin-bottom: .75rem; font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem); font-weight: 400; }

/* Para médicos veterinarios */
.ref-caso-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.ref-texto .eti, .ref-cirugia .eti { margin-bottom: 1.5rem; }
.ref-texto h2, .ref-cirugia h2, .ref-urg h2 { margin-bottom: 1.25rem; font-size: clamp(1.875rem, 1.4rem + 2vw, 2.875rem); }
.ref-texto .ref-h2 { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--arena); }
.ref-texto p:not(.eti) { max-width: 36em; }
.ref-ficha { background: var(--lino); }
.ref-ficha h2 { margin-bottom: 1.25rem; font-size: var(--t-sub); font-weight: 460; line-height: 1.2; letter-spacing: -.006em; }
.ref-cirugia-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.ref-cirugia .entrada { margin-bottom: 1rem; }
.ref-cierre .cab-seccion { margin-bottom: 0; }
.ref-cierre .entrada { margin-bottom: 1.75rem; }

/* Emergencias */
.urg-hero { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3.5rem, 7vw, 6rem); }
.urg-hero-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.urg-hero .breadcrumb { margin-bottom: clamp(1.75rem, 5vw, 4rem); }
.urg-hero-texto .eti { margin-bottom: 1.25rem; }
.urg-hero h1 { margin-bottom: 1.5rem; font-size: clamp(2.75rem, 1.2rem + 5.4vw, 5.5rem); }
.urg-hero-linea .eti { color: var(--tinta2); }
.urg-hero-linea .tel-grande { margin-bottom: 2.6rem; }
.urg-apoyo-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
.urg-apoyo-in .testigo { margin-top: 0; max-width: none; }
.urg-apoyo .colegas-ficha p:not(.eti) { margin-bottom: 1.5rem; }
.urg-apoyo .colegas-ficha h3 { margin-bottom: .75rem; font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem); font-weight: 400; }
.urg-apoyo-acciones .boton { flex: 1 1 100%; }

/* Reseñas */
.res-hero { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(4rem, 8vw, 6.5rem); }
.res-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 7vw, 7rem); align-items: center; }
.res-hero .breadcrumb { margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.res-hero-texto .eti { margin-bottom: 1.25rem; }
.res-hero h1 { margin-bottom: 1.5rem; font-size: clamp(2.5rem, 1.2rem + 4.8vw, 5rem); }
.res-hero .ficha-google { background: #fff; }
.res-hero-escena { width: clamp(16rem, 28vw, 24rem); }
.res-hero-escena figcaption { margin-top: 2.35rem; font: italic 340 1.0625rem/1.3 var(--serif); font-variation-settings: "SOFT" 50, "WONK" 0; color: var(--azul); }
.res-intro { border-bottom: 1px solid var(--arena); }
.res-intro-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: .5rem clamp(2rem, 5vw, 5rem); align-items: baseline; padding-block: clamp(1.75rem, 3vw, 2.5rem); }
.res-intro-t { font: 420 1.5rem/1.2 var(--serif); font-variation-settings: "SOFT" 50, "WONK" 0; color: var(--azul); }
.res-intro-in p:last-child { max-width: 40em; color: var(--tinta2); }
.cap { padding-block: clamp(3rem, 6vw, 5.5rem); }
.cap + .cap { padding-top: 0; }
.cap-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.cap-titulo { position: sticky; top: calc(var(--cab-h) + 2rem); }
.cap-titulo .nodo { margin-bottom: 1.5rem; }
.cap-titulo .eti { margin-bottom: .9rem; color: var(--tinta2); }
.cap-titulo h2 { margin-bottom: .9rem; font-size: clamp(1.875rem, 1.4rem + 2vw, 2.875rem); }
.cap-titulo p:last-child { max-width: 22em; color: var(--tinta2); }
.resena blockquote p { font: 300 clamp(1.25rem, 1.15rem + .5vw, 1.4375rem)/1.26 var(--serif); font-variation-settings: "SOFT" 50, "WONK" 0; letter-spacing: -.01em; color: var(--azul); }
.resena--principal { margin-bottom: clamp(1rem, 2vw, 1.5rem); padding: clamp(1.75rem, 4vw, 3.5rem); border-radius: var(--r3); }
.resena--principal blockquote p { font-size: var(--t-cita); line-height: 1.12; letter-spacing: -.017em; text-wrap: balance; }
.resena--principal .resena-pie { margin-top: clamp(1.75rem, 4vw, 3rem); }
.resenas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); }
.resenas .resena { display: flex; flex-direction: column; justify-content: space-between; padding: 1.6rem 0 1.1rem; border-bottom: 1px solid var(--arena); }
.resena-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .7rem; margin-top: 1rem; font-size: var(--t-nota); line-height: 1.3; color: var(--tinta2); }
.resena-pie i { flex: 0 0 2.25rem; height: 0; border-top: var(--lin) solid var(--azul); border-radius: 1px; }
.resena-pie h3 { flex: 1 1 calc(100% - 3rem); font: 650 var(--t-chico)/1.3 var(--sans); letter-spacing: 0; color: var(--azul); }
.resena-pie a { display: inline-flex; align-items: center; min-height: 2.75rem; margin-left: auto; padding-left: .5rem; font-weight: 600; color: var(--azul); text-decoration-thickness: 1px; }
.resena-pie a:hover { text-decoration-thickness: var(--lin); }
.res-pausa-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4.6fr) minmax(0, 3.4fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.res-pausa-video { margin-bottom: clamp(0rem, 5vw, 5rem); }
.res-pausa-foto { margin-top: clamp(0rem, 9vw, 9rem); }
.res-pausa-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r3); }
.res-pausa-texto .eti { margin-bottom: 1.5rem; }
.res-pausa-texto h2 { margin-bottom: 1.5rem; }
.res-notas-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.res-notas h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); }
.res-notas p { max-width: 42em; margin-bottom: 1rem; }
.res-final .eti { margin-bottom: 1.5rem; }
.res-final h2 { margin-bottom: 2.25rem; }

/* 18. Movimiento */
.js-rev .reveal { opacity: 0; transform: translateY(1.1rem); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js-rev .reveal.visible { opacity: 1; transform: none; }
.js-rev .services .reveal:nth-child(3n + 2) { transition-delay: .08s; }
.js-rev .services .reveal:nth-child(3n) { transition-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js-rev .reveal { opacity: 1; transform: none; }
}

/* 19. Anchos medios: el menú se pliega */
/* Donde falta ancho, el rótulo de emergencias se guarda para lectores de pantalla */
@media (min-width: 1240px) and (max-width: 1399px), (min-width: 760px) and (max-width: 999px) {
  .urg-tx { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (max-width: 1239px) {
  .menu-btn { display: inline-flex; order: 4; margin-left: 0; }
  .urg { order: 2; margin-left: auto; }
  .cab-cta { order: 3; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: .5rem var(--margen) 2rem; max-height: calc(100dvh - var(--cab-h) - var(--llamar-h)); overflow: auto; background: #fff; color: var(--tinta); border-top: 1px solid var(--arena); box-shadow: 0 1.5rem 2.5rem -1.5rem rgba(27, 37, 54, .3); }
  .js .nav { display: none; }
  .js .nav.abierta { display: block; }
  .nav-lista { flex-direction: column; }
  .nav-lista a { width: 100%; height: auto; min-height: 3.75rem; padding: .5rem 0; border-bottom: 1px solid var(--arena); font: 400 1.5rem/1.2 var(--serif); font-variation-settings: "SOFT" 50, "WONK" 0; color: var(--azul); }
  .nav-lista a::after { display: none; }
  .nav-lista a[aria-current] { font-style: italic; }
  .nav-extra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.5rem; }
  .nav-tel { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .25rem 2rem; }
  .nav-tel a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 400; color: var(--azul); text-decoration: none; }
  .nav-tel b { margin-left: .4em; font-feature-settings: "tnum"; }
  .nav-tel .nav-urg { color: var(--arcilla); }
  html:not(.js) .cab { position: static; }
  html:not(.js) .cab-fila { height: auto; flex-wrap: wrap; padding-block: .75rem; }
  html:not(.js) .menu-btn { display: none; }
  html:not(.js) .nav { position: static; order: 9; flex-basis: 100%; max-height: none; padding: 0; box-shadow: none; }
}

/* En anchos medios la franja guarda solo los tres datos, a la derecha */
@media (min-width: 900px) and (max-width: 1399px) {
  .banda .enlace { display: none; }
  .dato-t { white-space: nowrap; }
}

@media (max-width: 1099px) {
  .areas a { grid-template-columns: minmax(0, 1fr) 1.25rem; }
  .areas span { grid-column: 1; }
  .areas a::after { grid-column: 2; grid-row: 1 / 3; }
}

/* 20. Columnas que se apilan y el hilo recto */
@media (max-width: 899px) {
  :root { --hilo: recto; --nodo: 2.25rem; --banda-h: 0px; }
  .cab-util .util-lema { display: none; }
  .cab-cta { display: none; }
  .cab-util .util-lugar { margin-right: auto; }

  .apertura-in { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: clamp(2rem, 6vw, 3.5rem) 4.5rem; gap: 3rem; }
  .js body[data-ruta="/"] .apertura-in { min-height: 0; }
  .apertura-escena { width: min(100%, 26rem); }
  .sosten::after, .apertura .sosten::after, .res-hero .sosten::after { left: 18%; right: -.75rem; bottom: -.75rem; }
  .apertura-escena figcaption { margin-top: 1.9rem; }
  .banda-in { flex-direction: column; align-items: flex-start; padding-block: 2rem; }
  .datos { flex-wrap: wrap; gap: 1.25rem 2.5rem; }

  .inicio-cab, .cab-seccion, .urgencia-in, .palabra-in, .colegas-in, .questions, .consulta-in, .page-grid,
  .specialty-surgery-lead .container, .referral .container, .address-block { grid-template-columns: minmax(0, 1fr); }
  .inicio-cab { display: block; }
  .cab-seccion, .specialty-surgery-lead .container, .referral .container, .address-block { align-items: start; gap: 1.5rem; }
  .indice { grid-template-columns: minmax(0, 1fr); gap: 0; padding-right: 0; }
  .indice a { display: grid; grid-template-columns: var(--nodo) minmax(0, 1fr); column-gap: 1rem; align-items: center; min-height: 4.5rem; padding: .6rem 0; }
  .indice .nodo { grid-row: 1 / 3; margin: 0; }
  .indice-t { align-self: end; font-size: 1.25rem; }
  .indice-d { align-self: start; margin-top: .1rem; }
  html:not(.hilo-ok) .inicio .indice::before { left: calc(var(--nodo) / 2); right: auto; top: 1rem; bottom: 1rem; border-top: 0; border-left: var(--lin) solid var(--c-linea); }

  .etapa-in { display: block; padding-left: calc(var(--nodo) + 1rem); }
  .etapa--der .etapa-texto, .etapa--izq .etapa-texto { padding: 0; }
  .etapa--der .etapa-nodo, .etapa--izq .etapa-nodo { left: 0; right: auto; }
  html:not(.hilo-ok) .etapa--der::before, html:not(.hilo-ok) .etapa--izq::before { left: calc(var(--margen) + var(--nodo) / 2); right: auto; }
  .etapa-foto, .etapa-mapa, .etapa-cita { margin-top: 2.75rem; }
  .etapa--plan .etapa-cita { padding-right: 0; }
  .testigo--grande blockquote p { text-indent: 0; }
  .etapa-pasos { grid-template-columns: minmax(0, 1fr); padding-left: 0; }

  .directorio a { grid-template-columns: 2.5rem minmax(0, 1fr) 1.5rem; gap: .35rem 1rem; padding: 1.25rem 0; }
  .directorio h3 { grid-column: 2; }
  .directorio p { grid-column: 2; grid-row: 2; }
  .directorio .ico { grid-column: 3; grid-row: 1; }
  .colegas-ficha { margin: 0 .75rem .75rem 0; }
  .pie-arriba { grid-template-columns: minmax(0, 1fr); }

  .page-grid { padding-right: 0; }
  .side-panel { margin: 0 .75rem .75rem 0; }
  .side-panel::after { top: auto; right: -.75rem; bottom: -.75rem; left: 22%; height: 44%; }
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
  .js-rev .services .reveal { transition-delay: 0s; }

  .pasos { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pasos li { padding: 0 0 2.25rem calc(var(--nodo) + 1rem); }
  .pasos li:last-child { padding-bottom: 0; }
  .pasos li:not(:last-child)::before { left: calc(var(--nodo) / 2 - .75px); right: auto; top: var(--nodo); bottom: 0; border-top: 0; border-left: var(--lin) solid var(--c-linea); }
  .pasos .nodo { position: absolute; left: 0; top: 0; margin: 0; }
  .pasos h2, .pasos h3 { padding-top: calc((var(--nodo) - 1.15em) / 2); }
  .hosp-origen-in, .hosp-tres, .ref-caso-in, .ref-cirugia-in, .cir-indice-in, .cir-grupo, .urg-hero-in, .urg-apoyo-in, .res-hero-in, .res-intro-in, .cap-in, .res-notas-in { grid-template-columns: minmax(0, 1fr); }
  .hosp-origen .etapa-foto { margin: 0 .75rem .75rem 0; max-width: 26rem; }
  .cir-indice-in { gap: 3.25rem; }
  .cir-rotulo { max-width: 80%; }
  .cir-indice::before { left: calc(var(--nodo) / 2 + var(--giro)); bottom: calc(100% + 1.25rem); }
  .cir-indice::after { content: ""; position: absolute; left: calc(var(--nodo) / 2 - .75px); width: calc(var(--giro) + .75px); top: calc(-1.25rem - var(--lin)); bottom: 2.25rem; border: solid var(--azul); border-width: var(--lin) 0 0 var(--lin); border-top-left-radius: var(--giro); pointer-events: none; }
  .cir-grupo { gap: 1rem; }
  .cir-n { display: flex; align-items: baseline; gap: .75rem; }
  .cir-n span { margin: 0; }
  .urg-hero-in { align-items: start; }
  .res-hero-escena { width: min(100%, 24rem); margin-top: 1rem; }
  .cap-titulo { position: static; }
  .cap-titulo .nodo { margin-bottom: 1rem; }
  .res-pausa-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .res-pausa-texto { grid-column: 1 / -1; grid-row: 1; }
  .res-pausa-video, .res-pausa-foto { margin: 0; }
  .res-pausa-foto { margin-top: 3rem; }
}

/* 21. Teléfono */
@media (max-width: 759px) {
  :root { --util-h: 0px; --cab-h: 64px; --llamar-h: 44px; }
  .llamar { position: sticky; top: 0; z-index: 60; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); height: var(--llamar-h); overflow: hidden; }
  .llamar a { display: flex; align-items: center; justify-content: center; gap: .45rem; background: var(--lino); color: var(--azul); font-size: var(--t-nota); white-space: nowrap; text-decoration: none; }
  .llamar b { font-size: var(--t-chico); font-weight: 700; font-feature-settings: "tnum"; }
  .llamar .llamar-urg { background: var(--arcilla); color: #fff; }
  .llamar a:focus-visible { outline-offset: -3px; }
  .llamar .llamar-urg:focus-visible { outline-color: #fff; }
  .cab { top: var(--llamar-h); }
  .cab-util, .urg, .cab-cta { display: none; }
  .menu-btn { margin-left: auto; }
  .lg { --u: .2087px; }
  .pie .lg { --u: .23px; }
  .nav-extra { grid-template-columns: minmax(0, 1fr); }

  .acciones .boton, .actions .button { flex: 1 1 100%; }
  .acciones .enlace { margin-left: 0; }
  .apertura-texto .entrada { margin-bottom: 1.75rem; }
  .datos { flex-direction: column; gap: 1rem; }
  .datos li { gap: 1rem; }
  .cifra { min-width: 4.6rem; font-size: 2.25rem; }
  .cifra--palabra { min-width: 0; font-size: 1.625rem; }
  .mapa a { grid-template-columns: 2rem minmax(0, 1fr) 1.25rem; }
  .mapa-c { grid-column: 2; grid-row: 2; }
  .mapa a::after { grid-column: 3; grid-row: 1 / 3; }
  .mapa b { font-size: 1.375rem; }
  .fila { grid-template-columns: minmax(0, 1fr); }
  details > p { padding-right: 0; }
  .resumen dl > div { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .pie-mapa { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .pie-mapa a { min-height: 2.75rem; }
  .pie-abajo { flex-direction: column; align-items: flex-start; gap: .25rem; }

  .page-hero .lead { padding-right: 1.75rem; }
  .services { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .service { min-height: 0; }
  .service .number { margin-bottom: 1.25rem; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .visit-strip .container { align-items: flex-start; }
  .cir-lista { columns: 1; }
  .resenas { grid-template-columns: minmax(0, 1fr); }
  .resena-pie { gap: 0 .6rem; }
  body[data-ruta="/su-visita"] .article { padding-left: 3.25rem; }
  body[data-ruta="/su-visita"] .article h2::before { left: -3.25rem; }
}

/* Lema en el encabezado: en pantallas anchas ya va en la franja superior (.util-lema).
   Por debajo de 900 px esa franja lo oculta, y entonces aparece esta, al inicio de cada página. */
.lema-cab { display: none; margin: 0; padding: .5rem 1rem; background: #11356e; color: #fff; text-align: center; text-wrap: balance; font-family: "Fraunces", Georgia, "Times New Roman", serif; font-variation-settings: "SOFT" 50, "WONK" 0; font-style: italic; font-weight: 400; font-size: .9375rem; line-height: 1.25; letter-spacing: .005em; }
@media (max-width: 899px) { .lema-cab { display: block; } }