/* Cevetex v5. Cálida y cercana: títulos en Luckiest Guy, fotos a color en formas redondeadas,
   superficies blancas que flotan sobre un fondo claro. Colores del logo. Todo local. */
/* Letras del Instagram de Cevetex (elegidas por Ítalo el 31-10-2026): Luckiest Guy en títulos, Poppins en el texto.
   Luckiest Guy tiene un solo peso y no tiene cursiva: se declara para 400-800 y se apaga la síntesis para que no se vea borrosa. */
@font-face { font-family: "Luckiest Guy"; src: url("fuentes/luckiest-guy-400.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fuentes/poppins-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fuentes/poppins-500.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fuentes/poppins-700.woff2") format("woff2"); font-weight: 700 800; font-display: swap; }

:root {
  color-scheme: light;
  --fondo: #f5f7f0;
  --fondo-2: #edf2e4;
  --blanco: #ffffff;
  --tinta: #1d2719;
  --tinta-suave: #536048;
  --verde: #3f6b2a;
  --verde-osc: #2c4d1d;
  --verde-claro: #e2ecd2;
  --verde-hoja: #c9dba7;
  --azul: #2e5f8f;
  --azul-claro: #e3eef8;
  --alerta: #b3261e;
  --alerta-osc: #8f1d17;
  --alerta-claro: #fbeceb;
  --linea: rgba(29, 39, 25, 0.09);
  --sobre-oscuro: #f5f7f0;
  --sobre-oscuro-suave: #c7d3bd;
  --sobre-verde-suave: #e3ead9;
  --whatsapp: #dcf8c6;
  --marca-ejemplo: #fff1a8;

  --serif: "Luckiest Guy", "Arial Rounded MT Bold", "Arial Black", sans-serif; /* nombre histórico: ya no es serif */
  --sans: "Poppins", "Segoe UI", Helvetica, Arial, sans-serif;

  --t-chico: 0.875rem;
  --t-cuerpo: 1rem;
  --t-entrada: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-sub: clamp(1.25rem, 1.1rem + 0.6vw, 1.5625rem);
  --t-titulo: clamp(1.65rem, 1.15rem + 1.85vw, 2.5rem); /* -12 %: las mayúsculas de Luckiest Guy se ven más grandes */
  --t-portada: clamp(2rem, 1.15rem + 2.65vw, 3.4rem);

  --ancho: 1160px;
  --lado: max(clamp(20px, 5.5vw, 80px), env(safe-area-inset-left, 0px), calc((100% - var(--ancho)) / 2));
  --lado-der: max(clamp(20px, 5.5vw, 80px), env(safe-area-inset-right, 0px), calc((100% - var(--ancho)) / 2));
  --seccion: clamp(64px, 7vw, 112px);
  --r-xl: 30px;
  --r-l: 22px;
  --r-m: 16px;
  --pildora: 999px;
  --sombra: 0 1px 2px rgba(29, 39, 25, 0.04), 0 12px 32px -16px rgba(29, 39, 25, 0.18);
  --sombra-alta: 0 2px 6px rgba(29, 39, 25, 0.05), 0 30px 60px -24px rgba(29, 39, 25, 0.32);
  --sale: cubic-bezier(0.22, 1, 0.36, 1); /* curva única para todo cambio de estado */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(100px + var(--alto-extra, 0px)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--sans); font-size: var(--t-cuerpo); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2 { font-family: var(--serif); text-transform: uppercase; font-weight: 400; letter-spacing: 0.01em; line-height: 1.08; text-wrap: balance; }
h1 em, h2 em { font-style: normal; color: var(--verde); }
html { font-synthesis: none; } /* nunca negrita ni cursiva "inventadas" por el navegador */
:where(h1, h2, h3, .marca, .mapa__dir, .ayuda__titulo) em { font-style: normal; }
h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 6px; }
.oscuro :focus-visible, .tarjeta--verde :focus-visible, .urg__grave :focus-visible { outline-color: var(--sobre-oscuro); }
::selection { background: var(--verde); color: var(--sobre-oscuro); }
.saltar { position: absolute; left: 12px; top: -90px; z-index: 80; padding: 12px 18px; background: var(--tinta); color: var(--fondo); border-radius: var(--pildora); }
.saltar:focus { top: 12px; }
.contenido { padding-inline: var(--lado) var(--lado-der); }
.seccion { padding-block: var(--seccion); }
.cifras { font-variant-numeric: tabular-nums; }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 22px; background: var(--verde); color: var(--sobre-oscuro); border: 1.5px solid transparent; border-radius: var(--pildora); font-weight: 700; font-size: var(--t-chico); text-decoration: none; text-align: center; transition: background-color 200ms var(--sale), transform 300ms var(--sale), box-shadow 300ms var(--sale), border-color 200ms var(--sale); box-shadow: 0 10px 24px -12px rgba(44, 77, 29, 0.7); }
.boton svg { width: 18px; height: 18px; flex: none; transition: transform 300ms var(--sale); }
.boton--alerta { background: var(--alerta); box-shadow: 0 10px 24px -12px rgba(143, 29, 23, 0.7); }
.boton--blanco { background: var(--blanco); color: var(--tinta); box-shadow: var(--sombra); }
.boton--borde { background: transparent; color: var(--tinta); border-color: rgba(29, 39, 25, 0.2); box-shadow: none; }
.boton--chico { min-height: 42px; padding: 0 16px; }
.boton:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: var(--verde-osc); transform: translateY(-2px); }
  .boton:hover svg { transform: translateX(3px); }
  .boton--alerta:hover { background: var(--alerta-osc); }
  .boton--blanco:hover { background: var(--verde-claro); }
  .boton--borde:hover { background: var(--blanco); border-color: transparent; box-shadow: var(--sombra); }
}
.etiqueta { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; background: var(--blanco); border-radius: var(--pildora); font-size: var(--t-chico); font-weight: 500; color: var(--tinta-suave); box-shadow: var(--sombra); }
.etiqueta > img { width: 24px; height: 24px; flex: none; }
.nota-chica { font-size: var(--t-chico); color: var(--tinta-suave); }

/* Barra flotante */
.barra { position: fixed; top: max(14px, env(safe-area-inset-top, 0px)); left: var(--lado); right: var(--lado-der); z-index: 50; display: flex; align-items: center; gap: 8px 20px; min-height: 60px; padding: 0 9px 0 16px; background: rgba(255, 255, 255, 0.82); border-radius: var(--pildora); box-shadow: var(--sombra); transition: box-shadow 300ms var(--sale), background-color 300ms var(--sale); }
@supports (backdrop-filter: blur(1px)) { .barra { background: rgba(255, 255, 255, 0.7); backdrop-filter: saturate(1.6) blur(16px); } }
.barra.flota { box-shadow: var(--sombra-alta); }
.marca { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); text-transform: uppercase; font-weight: 600; font-size: 1.3125rem; letter-spacing: -0.02em; text-decoration: none; }
.marca img { width: 34px; height: 34px; }
.barra nav { display: none; gap: 2px; margin-left: auto; }
.barra nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--pildora); font-weight: 500; font-size: var(--t-chico); color: var(--tinta-suave); text-decoration: none; transition: background-color 200ms var(--sale), color 200ms var(--sale); }
@media (hover: hover) and (pointer: fine) { .barra nav a:hover { background: var(--fondo-2); color: var(--tinta); } }
.barra__acciones { display: flex; gap: 8px; margin-left: auto; }
@media (min-width: 1060px) { .barra nav { display: flex; } .barra__acciones { margin-left: 6px; } }
/* Bajo 1060 px: botón ☰ que abre el panel .menu-movil. Sin script, las pestañas van en una fila bajo el logo. */
.barra__menu { -webkit-tap-highlight-color: transparent; display: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--fondo-2); color: var(--tinta); flex: none; }
.barra__menu svg { width: 22px; height: 22px; }
@media (max-width: 1059px) {
  .js .barra__menu { display: grid; }
  html:not(.js) { --alto-extra: 50px; }
  html:not(.js) .barra { flex-wrap: wrap; row-gap: 2px; padding: 8px 9px 6px 16px; border-radius: var(--r-l); }
  html:not(.js) .barra nav { display: flex; order: 3; flex-basis: 100%; margin: 0 -2px 0 -10px; overflow-x: auto; scrollbar-width: none; }
  html:not(.js) .barra nav::-webkit-scrollbar { display: none; }
  html:not(.js) .barra nav a { flex: none; padding: 0 10px; }
}
/* Celular: barra más compacta. Los botones conservan 44 px de alto para tocarlos con el dedo. */
@media (max-width: 719px) {
  .barra { min-height: 56px; padding: 0 2px 0 12px; gap: 8px 6px; }
  /* Si la palabra no cabe (letra del sistema aumentada), salta a una segunda línea oculta: queda solo el logo. */
  .marca { flex: 0 1 auto; min-width: 34px; flex-wrap: wrap; align-content: flex-start; height: 44px; overflow: hidden; }
  .marca span { line-height: 44px; }
  .marca img { margin-block: 5px; }
  .marca.sola img { width: 42px; height: 42px; margin-block: 1px; }
  .marca.sola span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .barra__acciones { gap: 2px; }
  .barra .boton--chico { min-height: 44px; padding: 0 10px; font-size: 0.8125rem; }
  .barra__menu { background: transparent; }
  .barra__menu svg { width: 20px; height: 20px; }
}
@media (max-width: 719px) {
  html:not(.js) .barra nav { justify-content: space-between; }
  html:not(.js) .barra nav a { padding: 0 6px; }
}
.menu-movil { position: fixed; inset: 0 0 0 auto; width: min(320px, 86vw); height: 100%; max-height: none; margin: 0; padding: max(18px, env(safe-area-inset-top, 0px)) 20px 24px; border: 0; border-radius: var(--r-xl) 0 0 var(--r-xl); background: var(--fondo); color: var(--tinta); box-shadow: -20px 0 60px rgba(20, 26, 16, 0.25); }
.menu-movil[open] { display: flex; flex-direction: column; gap: 22px; }
.menu-movil::backdrop { background: rgba(20, 26, 16, 0.45); backdrop-filter: blur(3px); }
.menu-movil__cabeza { display: flex; align-items: center; justify-content: space-between; min-height: 60px; }
.menu-movil__titulo { font-family: var(--serif); text-transform: uppercase; font-size: 1.375rem; }
.menu-movil__cerrar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--fondo-2); font-size: 1.5rem; line-height: 1; }
.menu-movil nav { display: grid; gap: 4px; }
.menu-movil nav a { display: flex; align-items: center; min-height: 52px; padding: 0 16px; border-radius: var(--r-m); font-size: 1.125rem; font-weight: 500; text-decoration: none; }
.menu-movil nav a[aria-current="page"] { background: var(--verde-claro); color: var(--verde-osc); }
.menu-movil .boton { margin-top: auto; justify-content: center; }
.menu-abierto { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .menu-movil[open] { animation: entra-derecha 260ms var(--sale); }
  .menu-movil[open]::backdrop { animation: aparece-fondo 260ms var(--sale); }
}
@keyframes entra-derecha { from { transform: translateX(100%); } }
@keyframes aparece-fondo { from { opacity: 0; } }
@media (max-width: 440px) { .barra__hora { display: none; } }

/* Portada */
.portada { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; padding-top: calc(clamp(104px, 9vw, 124px) + var(--alto-extra, 0px)); padding-bottom: clamp(48px, 5vw, 72px); }
.portada__texto { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; justify-items: start; }
.portada h1 { font-size: var(--t-portada); max-width: 15ch; }
.portada__frase { font-size: var(--t-entrada); color: var(--tinta-suave); max-width: 40ch; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.confianza { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; width: 100%; max-width: 620px; margin-top: 8px; }
.confianza div { display: grid; gap: 2px; padding: 12px 16px; background: var(--blanco); border-radius: var(--r-m); box-shadow: var(--sombra); }
.confianza dt { font-size: 0.875rem; color: var(--tinta-suave); }
.confianza dd { font-family: var(--serif); text-transform: uppercase; font-size: 1.1875rem; line-height: 1.2; color: var(--verde); }
.confianza span { font-size: 0.875rem; color: var(--tinta-suave); }
.portada__datos { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 8px; font-size: var(--t-chico); color: var(--tinta-suave); }
.portada__datos li { display: inline-flex; align-items: center; gap: 10px; }
.portada__datos svg { width: 20px; height: 20px; color: var(--verde); }
.escena { position: relative; width: min(100%, 430px); justify-self: center; padding: 0 0 44px 44px; }
.escena__principal { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 220px 220px var(--r-xl) var(--r-xl); box-shadow: var(--sombra-alta); }
.escena__chica { position: absolute; left: 0; bottom: 0; width: 46%; aspect-ratio: 600 / 378; object-fit: cover; border: 7px solid var(--fondo); border-radius: var(--r-l); box-shadow: var(--sombra-alta); }
.flotante { position: absolute; display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--blanco); border-radius: var(--r-m); box-shadow: var(--sombra-alta); font-size: var(--t-chico); line-height: 1.3; }
.flotante b { display: block; font-weight: 700; color: var(--tinta); }
.flotante span { color: var(--tinta-suave); }
.flotante--estado { right: 8px; top: 15%; }
@media (min-width: 1240px) { .flotante--estado { right: -12px; } }
.flotante--estado .punto { width: 12px; height: 12px; border-radius: 50%; background: #9aa58f; box-shadow: 0 0 0 5px #edf0ea; flex: none; }
.flotante--estado.abierto .punto { background: #3fae3a; box-shadow: 0 0 0 5px #dff3dc; }
.flotante--solo { right: 6%; bottom: 14%; }
.flotante--solo .icono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--verde-claro); color: var(--verde); flex: none; }
.flotante--solo svg { width: 22px; height: 22px; }
@media (max-width: 719px) {
  .escena { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0; }
  .escena__principal { grid-column: 1 / -1; }
  .escena__chica { display: none; }
  .flotante { position: static; padding: 12px 14px; gap: 10px; }
  .flotante--solo .icono { display: none; }
  html.anima .flotante { animation: none; }
}
@media (min-width: 960px) {
  .portada { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 40px; }
  .escena { justify-self: end; }
}

/* Cinta de especies */
.cinta { overflow: hidden; padding-block: 18px; background: var(--verde); color: var(--sobre-oscuro); }
.cinta__pista { display: flex; width: max-content; }
.cinta ul { display: flex; flex: none; align-items: center; }
.cinta li { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font-family: var(--serif); text-transform: uppercase; font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); white-space: nowrap; }
.cinta li::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--verde-hoja); }

/* Especies */
.especies { display: grid; gap: 40px; align-items: start; }
.especies__texto { display: grid; gap: 16px; align-content: start; justify-items: start; }
.especies__texto h2 { font-size: var(--t-titulo); }
.especies__texto p { color: var(--tinta-suave); max-width: 40ch; font-size: var(--t-entrada); }
.nube > .ficha { flex-basis: 100%; margin: 6px 0; }
/* Celular: título, instrucción y de inmediato las especies; el enlace a todas las fichas al final. */
@media (max-width: 719px) {
  .especies { gap: 16px; }
  .especies__texto { display: contents; }
  .especies__texto h2 { order: 1; }
  .especies__texto p { order: 2; }
  .especies__lista { order: 3; margin-top: 8px; }
  .especies__texto .ver-mas { order: 4; margin-top: 8px; }
  .especies__foto { display: none; }
}
.especies__foto { width: 100%; max-width: 380px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-l); box-shadow: var(--sombra); margin-top: 8px; }
.nube { display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
.nube > :is(a, button) { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 7px; background: var(--blanco); border-radius: var(--pildora); box-shadow: var(--sombra); text-decoration: none; font-weight: 500; transition: transform 150ms var(--sale), background-color 150ms var(--sale), color 150ms var(--sale), box-shadow 150ms var(--sale); }
.nube > :is(a, button) > i, .nube > :is(a, button) > img { width: 34px; height: 34px; border-radius: 50%; background: var(--c, var(--verde-claro)); flex: none; object-fit: cover; transition: transform 150ms var(--sale); }
.nube > :is(a, button)[data-g="r"] { --c: #dcebd0; }
.nube > :is(a, button)[data-g="a"] { --c: #fdeccf; }
.nube > :is(a, button)[data-g="m"] { --c: #e3eef8; }
.nube > :is(a, button)[data-g="p"] { --c: #d7eeee; }
@media (hover: hover) and (pointer: fine) {
  .nube > :is(a, button):hover { background: var(--tinta); color: var(--sobre-oscuro); transform: translateY(-3px); box-shadow: var(--sombra-alta); }
  .nube > :is(a, button):hover > i { transform: scale(0.45); }
  .nube > :is(a, button):hover > img { transform: scale(1.12); }
}
.nube .nube__otra { background: var(--verde); color: var(--sobre-oscuro); padding-left: 22px; }
.nube .nube__otra::before { content: none; }
.ficha { display: grid; gap: 14px; margin-top: 18px; padding: 24px; background: var(--blanco); border-radius: var(--r-l); box-shadow: var(--sombra-alta); }
.ficha[hidden] { display: none; }
.ficha__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ficha h3 { font-family: var(--serif); text-transform: uppercase; font-weight: 600; font-size: var(--t-sub); }
.ficha h4 { margin: 0 0 8px; font-size: 0.9375rem; font-weight: 700; }
.ficha__desc { color: var(--tinta-suave); }
.ficha__cols { display: grid; gap: 18px; }
.ficha__cols > div { padding: 18px 20px; background: var(--fondo); border-radius: var(--r-m); }
.ficha ul { display: grid; gap: 8px; }
.ficha li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; color: var(--tinta-suave); font-size: 0.9375rem; }
.ficha li::before { content: ""; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--alerta); }
.ficha__cols p { color: var(--tinta-suave); font-size: 0.9375rem; }
.ficha .boton { justify-self: start; }
.ficha__cerrar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--fondo-2); font-size: 1.5rem; line-height: 1; }
.nube > :is(a, button)[aria-pressed="true"] { background: var(--tinta); color: var(--sobre-oscuro); }
@media (min-width: 720px) { .ficha__cols { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: no-preference) { .ficha.abre { animation: aparece 600ms var(--sale) both; } }
.calor { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 14px 18px; background: var(--fondo-2); border-radius: var(--r-m); font-size: var(--t-chico); color: var(--tinta-suave); }
.calor svg { width: 24px; height: 24px; flex: none; color: var(--alerta); margin-top: 2px; }
.calor b { color: var(--tinta); }
@media (min-width: 960px) {
  .especies { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: stretch; }
  /* La foto llena el alto que sobra para terminar a la par de la columna derecha (máx. 520 px si se abre una ficha). */
  .especies__texto { grid-template-rows: auto auto auto minmax(160px, 1fr); }
  .especies__foto { max-width: none; height: 100%; max-height: 520px; aspect-ratio: auto; contain: size; object-position: 46% 50%; margin-top: 0; }
}

/* Servicios */
.cabeza { display: grid; gap: 12px; margin-bottom: clamp(28px, 3vw, 44px); }
.cabeza h2 { font-size: var(--t-titulo); max-width: 18ch; }
.cabeza p { color: var(--tinta-suave); font-size: var(--t-entrada); max-width: 46ch; }
@media (min-width: 960px) { .cabeza { grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 48px; } .cabeza p { justify-self: end; } }
.servicios { display: grid; gap: 18px; }
.tarjeta { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px; background: var(--blanco); border-radius: var(--r-l); box-shadow: var(--sombra); overflow: hidden; transition: transform 400ms var(--sale), box-shadow 400ms var(--sale); }
@media (hover: hover) and (pointer: fine) { .tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); } }
.tarjeta__icono { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--verde-claro); color: var(--verde); }
.tarjeta__icono svg { width: 28px; height: 28px; }
.tarjeta h3 { font-family: var(--serif); text-transform: uppercase; font-weight: 600; font-size: var(--t-sub); letter-spacing: -0.015em; }
.tarjeta p { color: var(--tinta-suave); }
.precio { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.precio b { font-family: var(--serif); text-transform: uppercase; font-weight: 600; font-size: 1.625rem; letter-spacing: -0.02em; }
.precio small { font-size: var(--t-chico); color: var(--tinta-suave); }
.tarjeta--verde { background: var(--verde); color: var(--sobre-oscuro); }
.tarjeta--verde p, .tarjeta--verde .precio small { color: var(--sobre-oscuro-suave); }
.tarjeta--verde .tarjeta__icono { background: rgba(255, 255, 255, 0.14); color: var(--sobre-oscuro); }
.tarjeta--foto { padding: 0; }
.tarjeta--foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tarjeta--foto .tarjeta__cuerpo { display: grid; gap: 8px; padding: 20px 26px 26px; }
.sin-rayos { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 6px 12px; background: var(--fondo-2); border-radius: var(--pildora); font-size: 0.875rem; color: var(--tinta-suave); }
@media (min-width: 720px) { .servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .servicios { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tarjeta--foto img { aspect-ratio: 16 / 9; }
}

/* Pedir hora: conversación */
.hora { display: grid; gap: 48px; align-items: center; }
.hora__texto { display: grid; gap: 20px; justify-items: start; }
.hora__texto h2 { font-size: var(--t-titulo); }
.hora__texto > p { color: var(--tinta-suave); font-size: var(--t-entrada); max-width: 42ch; }
.pasos { display: grid; gap: 14px; counter-reset: paso; }
.pasos li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; counter-increment: paso; }
.pasos li::before { content: counter(paso); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blanco); box-shadow: var(--sombra); font-family: var(--serif); text-transform: uppercase; font-size: 1.25rem; color: var(--verde); }
.pasos b { display: block; font-size: var(--t-entrada); }
.pasos span { color: var(--tinta-suave); }
.telefono { position: relative; justify-self: center; width: min(100%, 340px); padding: 12px; background: var(--tinta); border-radius: 48px; box-shadow: var(--sombra-alta); }
.telefono__pantalla { display: grid; gap: 8px; align-content: start; min-height: 440px; padding: 0 16px 22px; background: #ece5dd; border-radius: 36px; overflow: hidden; }
.telefono__cabeza { display: flex; align-items: center; gap: 12px; margin: 0 -16px 8px; padding: 22px 18px 14px; background: #1f5c4b; color: #fff; }
.telefono__cabeza img { width: 40px; height: 40px; background: #fff; border-radius: 50%; padding: 3px; }
.telefono__cabeza b { display: block; font-weight: 700; }
.telefono__cabeza span { font-size: 0.875rem; opacity: 0.85; }
.burbuja { max-width: 82%; padding: 10px 14px 8px; border-radius: 16px; font-size: 0.9375rem; line-height: 1.45; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); }
.burbuja small { display: block; text-align: right; font-size: 0.875rem; color: #667781; margin-top: 2px; }
.burbuja--yo { justify-self: end; background: var(--whatsapp); border-top-right-radius: 4px; }
.burbuja--ellos { justify-self: start; background: #fff; border-top-left-radius: 4px; }
.escribiendo { justify-self: start; display: none; gap: 4px; padding: 12px 14px; background: #fff; border-radius: 16px; border-top-left-radius: 4px; }
.escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: #9aa1a6; animation: punto 1s infinite ease-in-out; }
.escribiendo i:nth-child(2) { animation-delay: 150ms; } .escribiendo i:nth-child(3) { animation-delay: 300ms; }
@keyframes punto { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
.telefono__nota { position: absolute; left: -24px; bottom: 48px; max-width: 220px; }
@media (min-width: 960px) { .hora { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; } }

/* Urgencias */
.urg { display: grid; gap: 24px; padding: clamp(28px, 4.5vw, 64px); background: var(--blanco); border-radius: var(--r-xl); box-shadow: var(--sombra); }
.urg__cabeza { display: grid; gap: 14px; }
.urg__cabeza h2 { font-size: var(--t-titulo); }
.urg__cabeza p { color: var(--tinta-suave); font-size: var(--t-entrada); max-width: 52ch; }
.urg__cols { display: grid; gap: 18px; }
.urg__caja { display: grid; gap: 14px; align-content: start; padding: 26px; border-radius: var(--r-l); }
.urg__caja h3 { font-family: var(--serif); text-transform: uppercase; font-weight: 600; font-size: var(--t-sub); }
.urg__caja ul { display: grid; gap: 10px; }
.urg__caja li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; }
.urg__caja li svg { width: 22px; height: 22px; margin-top: 2px; }
.urg__grave { background: var(--alerta); color: var(--sobre-oscuro); }
.urg__grave li svg { color: #ffd0cc; }
.urg__menor { background: var(--fondo-2); }
.urg__menor li svg { color: var(--verde); }
.urg__menor p { color: var(--tinta-suave); }
.clinicas { display: grid; gap: 10px; margin-top: 4px; }
.clinica24 { display: grid; gap: 2px; padding: 14px 16px; background: rgba(255, 255, 255, 0.12); border-radius: 14px; font-size: var(--t-chico); }
.clinica24 b { font-size: var(--t-cuerpo); }
.urg__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 4px; }
.enlace { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
@media (min-width: 900px) { .urg__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Preguntas */
.preguntas { display: grid; gap: 40px; }
.preguntas__lado { display: grid; gap: 20px; align-content: start; justify-items: start; }
.preguntas__lado h2 { font-size: var(--t-titulo); }
.preguntas__lado p, .preguntas__pie p { color: var(--tinta-suave); }
.preguntas__pie { display: grid; gap: 16px; align-content: start; justify-items: start; }
/* Recuadro "¿Necesitas ayuda?": caras del equipo, horario y WhatsApp. */
.ayuda { display: grid; gap: 10px; justify-items: start; width: 100%; padding: 24px; background: var(--blanco); border-radius: var(--r-l); box-shadow: var(--sombra); }
.ayuda__caras { display: flex; margin-bottom: 4px; }
.ayuda__caras img { width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--blanco); object-fit: cover; box-shadow: var(--sombra); }
.ayuda__caras img + img { margin-left: -14px; }
.preguntas__pie .ayuda__titulo { font-family: var(--serif); text-transform: uppercase; font-weight: 600; font-size: var(--t-entrada); line-height: 1.3; color: var(--tinta); }
.ayuda .boton { margin-top: 6px; }
.acordeon { display: grid; gap: 10px; }
.acordeon details { background: var(--blanco); border-radius: var(--r-m); box-shadow: var(--sombra); transition: box-shadow 300ms var(--sale); }
.acordeon details[open] { box-shadow: var(--sombra-alta); }
.acordeon summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding: 12px 18px 12px 22px; font-weight: 700; cursor: pointer; list-style: none; border-radius: var(--r-m); }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--fondo-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.5v9M1.5 6h9' stroke='%231d2719' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat; transition: transform 300ms var(--sale), background-color 200ms var(--sale); }
.acordeon details[open] summary::after { transform: rotate(45deg); background-color: var(--verde-claro); }
.acordeon details:not([open]) .respuesta { display: none; }
.acordeon .respuesta { padding: 0 22px 20px; color: var(--tinta-suave); max-width: 60ch; }
@media (min-width: 960px) {
  .preguntas { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); grid-template-rows: auto 1fr; gap: 24px 72px; }
  .preguntas .acordeon { grid-column: 2; grid-row: 1 / span 2; }
  .preguntas__pie { grid-column: 1; grid-row: 2; }
}

/* Cómo llegar */
.llegar { display: grid; gap: 18px; }
.llegar__ficha { display: grid; gap: 20px; padding: clamp(24px, 3vw, 40px); background: var(--blanco); border-radius: var(--r-xl); box-shadow: var(--sombra); }
.llegar__ficha h2 { font-size: var(--t-titulo); }
.llegar__direccion { font-family: var(--serif); text-transform: uppercase; font-size: var(--t-sub); line-height: 1.3; }
.llegar__direccion a { text-decoration: none; }
.horario { display: grid; gap: 8px; max-width: 420px; }
.horario div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; background: var(--fondo); border-radius: 12px; }
.horario dd { font-weight: 700; }
.llegar__botones { display: flex; flex-wrap: wrap; gap: 10px; }
.llegar__auto { display: flex; flex-direction: column; gap: 16px; padding: clamp(28px, 4vw, 48px); background: var(--verde); color: var(--sobre-oscuro); border-radius: var(--r-xl); box-shadow: var(--sombra); }
.llegar__auto h3 { font-family: var(--serif); text-transform: uppercase; font-weight: 600; font-size: var(--t-sub); }
.llegar__auto p { color: var(--sobre-oscuro-suave); }
.llegar__pin { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: rgba(255, 255, 255, 0.14); }
.llegar__pin svg { width: 32px; height: 32px; }
.llegar__chico { margin-top: auto; font-size: var(--t-chico); }
.llegar__foto { position: relative; min-height: 320px; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sombra); }
.llegar__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Barra inferior de vidrio esmerilado, igual que en la galería de pacientes. */
.llegar__foto p { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 14px 22px 16px; background: rgba(255, 255, 255, 0.9); border-top: 1px solid rgba(255, 255, 255, 0.6); font-size: var(--t-chico); color: var(--tinta); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .llegar__foto p { background: rgba(255, 255, 255, 0.66); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); }
}
.llegar__foto p b { color: var(--tinta); }
@media (min-width: 960px) { .llegar { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
/* Mapa de Google Maps insertado con carga diferida (se conecta al acercarse a él). */
.mapa { display: grid; place-items: center; align-content: center; gap: 12px; min-height: 300px; padding: 28px 20px; background: var(--verde-claro); border-radius: var(--r-xl); box-shadow: var(--sombra); text-align: center; overflow: hidden; }
.mapa.cargado { display: block; padding: 0; }
.mapa iframe { display: block; width: 100%; height: 360px; border: 0; }
.mapa__enlace { display: grid; place-items: center; width: 100%; height: 100%; min-height: 220px; background: var(--verde-claro); font-weight: 700; color: var(--verde); }
.mapa__aviso { margin-top: 10px; font-size: var(--t-chico); color: var(--tinta-suave); }
.llegar__ficha .mapa__aviso { margin-top: -6px; }
/* PC: ficha a la izquierda; a la derecha, estacionamiento compacto arriba y mapa abajo (la sección cabe en 768 px). */
@media (min-width: 960px) {
  .llegar { grid-template-rows: auto 1fr; }
  .llegar__ficha { grid-row: 1 / span 2; }
  .llegar .mapa { min-height: 220px; gap: 8px; padding: 18px; }
  .llegar .mapa.cargado { padding: 0; }
  .llegar .mapa.cargado iframe { height: 100%; min-height: 220px; }
}

/* Pie */
/* La última sección no suma su margen inferior al del pie (antes el espacio quedaba doble). */
main > .seccion:last-child { padding-bottom: 0; }
.pie { margin-top: var(--seccion); padding: clamp(48px, 5.5vw, 80px) var(--lado-der) 32px var(--lado); background: var(--tinta); color: var(--sobre-oscuro); border-radius: var(--r-xl) var(--r-xl) 0 0; }
.pie__arriba { display: grid; gap: 40px; }
.pie__cta h2 { font-size: var(--t-titulo); max-width: 14ch; }
.pie__cta h2 em { color: var(--verde-hoja); }
.pie__cta .boton { margin-top: 28px; }
.pie__col h3 { font-size: var(--t-chico); color: var(--sobre-oscuro-suave); font-weight: 500; margin-bottom: 12px; }
.pie__col a, .pie__col p { display: block; color: var(--sobre-oscuro); text-decoration: none; line-height: 2; }
.pie__col a svg { display: inline-block; width: 17px; height: 17px; margin-right: 8px; vertical-align: -3px; }
@media (hover: hover) and (pointer: fine) { .pie__col a:hover { color: var(--verde-hoja); } }
.pie__marca { display: flex; align-items: center; gap: 16px; margin-top: clamp(40px, 5vw, 72px); font-family: var(--serif); text-transform: uppercase; font-size: clamp(3rem, 10vw, 8.5rem); line-height: 1.05; letter-spacing: 0.035em; color: rgba(245, 247, 240, 0.12); white-space: nowrap; user-select: none; }
.pie__cierre { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 32px; font-size: 0.875rem; color: var(--sobre-oscuro-suave); }
@media (min-width: 900px) { .pie__arriba { grid-template-columns: 1.6fr 1fr 1fr; } }

/* Diálogo de urgencia */
.dialogo { width: min(580px, calc(100% - 32px)); max-height: calc(100svh - 32px); padding: 0; border: 0; border-radius: var(--r-xl); background: var(--fondo); color: var(--tinta); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.6); }
.dialogo::backdrop { background: rgba(20, 26, 16, 0.55); backdrop-filter: blur(4px); }
.dialogo__cuerpo { display: grid; gap: 14px; padding: 30px; }
.dialogo h2 { font-size: 2.25rem; }
.dialogo__op { display: grid; gap: 10px; padding: 22px; background: var(--blanco); border-radius: var(--r-l); }
.dialogo__op--grave { background: var(--alerta); color: var(--sobre-oscuro); }
.dialogo__op--grave :focus-visible { outline-color: var(--sobre-oscuro); }
.dialogo__op b { font-size: var(--t-entrada); line-height: 1.3; }
.dialogo__op .boton { justify-self: start; }
.dialogo__cerrar { justify-self: end; min-height: 44px; padding: 0 16px; border-radius: var(--pildora); font-weight: 700; }
.dialogo__cerrar:hover { background: var(--fondo-2); }

/* Datos de ejemplo: solo en la vista previa */
.ver-ejemplos [data-ejemplo] { background: var(--marca-ejemplo); color: #2a2a00; outline: 2px solid var(--marca-ejemplo); }
.interruptor { position: fixed; left: max(14px, env(safe-area-inset-left, 0px)); bottom: max(14px, env(safe-area-inset-bottom, 0px)); z-index: 45; display: none; min-height: 44px; padding: 0 16px; background: var(--marca-ejemplo); color: #2a2a00; border-radius: var(--pildora); font-size: 0.875rem; font-weight: 700; box-shadow: var(--sombra-alta); }
.borrador .interruptor { display: block; }

/* Movimiento. Sin script o con movimiento reducido, todo queda visible y quieto. */
@media (prefers-reduced-motion: no-preference) {
  .anima [data-entra] { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--sale), transform 1100ms var(--sale); transition-delay: calc(var(--d, 0) * 90ms); }
  .anima [data-entra].dentro { opacity: 1; transform: none; }
  .anima .escena__principal { animation: aparece 1400ms 100ms var(--sale) both; }
  .anima .escena__chica { animation: aparece 1200ms 500ms var(--sale) both; }
  .anima .flotante--estado { animation: aparece 900ms 800ms var(--sale) both, flota 6s 1.8s ease-in-out infinite; }
  .anima .flotante--solo { animation: aparece 900ms 1000ms var(--sale) both, flota 7s 2.2s ease-in-out infinite reverse; }
  /* Entrada con animación (no con transición) para que el hover no herede el retraso escalonado. */
  .anima .nube:not(.dentro) a { opacity: 0; }
  .anima .nube.dentro a { animation: sube 600ms var(--sale) backwards; animation-delay: calc(var(--n, 0) * 35ms); }
  .cinta__pista { animation: cinta 48s linear infinite; }
  .cinta:hover .cinta__pista { animation-play-state: paused; }
  .anima .burbuja, .anima .escribiendo { opacity: 0; transform: translateY(10px) scale(0.98); transition: opacity 400ms var(--sale), transform 500ms var(--sale); }
  .anima .burbuja.ve { opacity: 1; transform: none; }
  .anima .escribiendo.ve { display: flex; opacity: 1; transform: none; }
}
@keyframes sube { from { opacity: 0; transform: translateY(16px); } }
@keyframes aparece { from { opacity: 0; transform: translateY(40px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes cinta { to { transform: translateX(-50%); } }

/* Páginas interiores */
.pagina { display: grid; gap: 14px; justify-items: start; padding-top: calc(clamp(112px, 10vw, 140px) + var(--alto-extra, 0px)); padding-bottom: clamp(36px, 4vw, 56px); }
.pagina h1 { font-size: var(--t-portada); max-width: 18ch; }
.pagina > p { font-size: var(--t-entrada); color: var(--tinta-suave); max-width: 56ch; }
.miga { display: flex; gap: 8px; font-size: var(--t-chico); color: var(--tinta-suave); }
.miga a { color: inherit; }
.ver-mas { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--verde); text-decoration: none; }
.ver-mas svg { width: 18px; height: 18px; transition: transform 300ms var(--sale); }
@media (hover: hover) and (pointer: fine) { .ver-mas:hover svg { transform: translateX(4px); } }
.barra nav a[aria-current="page"] { background: var(--verde-claro); color: var(--verde-osc); }
.indice { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.indice a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--blanco); border-radius: var(--pildora); box-shadow: var(--sombra); font-size: var(--t-chico); font-weight: 500; text-decoration: none; transition: background-color 200ms var(--sale), color 200ms var(--sale); }
@media (hover: hover) and (pointer: fine) { .indice a:hover { background: var(--tinta); color: var(--sobre-oscuro); } }
.grupo-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 18px; font-family: var(--serif); text-transform: uppercase; font-weight: 600; font-size: var(--t-sub); scroll-margin-top: 100px; }
.grupo-titulo small { font-family: var(--sans); font-size: var(--t-chico); color: var(--tinta-suave); }
.rejilla { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); margin-bottom: clamp(40px, 5vw, 64px); }
.especie { display: flex; flex-direction: column; gap: 8px; padding: 22px; background: var(--blanco); border-radius: var(--r-l); box-shadow: var(--sombra); scroll-margin-top: 100px; }
.especie h3 { font-family: var(--serif); text-transform: uppercase; font-weight: 600; font-size: var(--t-sub); }
.especie h4 { margin: 6px 0 0; font-size: var(--t-chico); }
.especie p, .especie li { font-size: 0.9375rem; color: var(--tinta-suave); }
.especie ul { display: grid; gap: 4px; }
.especie li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 10px; }
.especie li::before { content: ""; width: 7px; height: 7px; margin-top: 8px; border-radius: 50%; background: var(--alerta); }
.especie .boton { margin-top: auto; align-self: flex-start; }
.especie > .boton { margin-top: 12px; }
.especie__grupo { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 700; color: var(--tinta-suave); }
.especie__grupo::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c, var(--verde-claro)); }
.especie__grupo[data-g="m"] { --c: #c7dcf0; } .especie__grupo[data-g="r"] { --c: #c6dcb2; } .especie__grupo[data-g="a"] { --c: #f6d9a8; } .especie__grupo[data-g="p"] { --c: #b8e0e0; }
.bloque { display: grid; gap: 28px; align-items: center; margin-bottom: clamp(56px, 6vw, 88px); }
.bloque__texto { display: grid; gap: 14px; align-content: start; justify-items: start; }
.bloque__texto h2 { font-size: var(--t-titulo); }
.bloque__texto > p { color: var(--tinta-suave); max-width: 58ch; }
.bloque__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-l); box-shadow: var(--sombra); }
.bloque__panel { display: grid; gap: 14px; align-content: start; padding: 26px; background: var(--blanco); border-radius: var(--r-l); box-shadow: var(--sombra); }
.bloque__panel h3 { font-family: var(--serif); text-transform: uppercase; font-weight: 600; font-size: var(--t-sub); }
.bloque__panel--verde { background: var(--verde); color: var(--sobre-oscuro); }
.bloque__panel--verde p, .bloque__panel--verde li { color: var(--sobre-oscuro-suave); }
.bloque__panel--verde .lista-check svg { color: var(--verde-hoja); }
@media (min-width: 900px) { .bloque { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } .bloque--al-reves > :last-child { order: -1; } }
.lista-check { display: grid; gap: 8px; }
.lista-check li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; color: var(--tinta-suave); }
.lista-check svg { width: 22px; height: 22px; color: var(--verde); margin-top: 1px; }
.datos-servicio { display: flex; flex-wrap: wrap; gap: 10px; }
.datos-servicio div { padding: 10px 16px; background: var(--blanco); border-radius: var(--r-m); box-shadow: var(--sombra); }
.datos-servicio dt { font-size: 0.8125rem; color: var(--tinta-suave); }
.datos-servicio dd { font-family: var(--serif); text-transform: uppercase; font-size: 1.125rem; }
.aviso { display: flex; gap: 12px; padding: 14px 18px; background: var(--fondo-2); border-radius: var(--r-m); color: var(--tinta-suave); font-size: 0.9375rem; max-width: 62ch; }
.aviso svg { width: 22px; height: 22px; flex: none; color: var(--azul); margin-top: 1px; }
.senales { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); margin-bottom: clamp(56px, 6vw, 88px); }
.senales article { display: grid; gap: 10px; align-content: start; padding: 22px; background: var(--blanco); border-radius: var(--r-l); box-shadow: var(--sombra); }
.senales h3 { font-family: var(--serif); text-transform: uppercase; font-weight: 600; font-size: var(--t-sub); }
.senales ul { display: grid; gap: 6px; }
.senales li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 10px; color: var(--tinta-suave); font-size: 0.9375rem; }
.senales li::before { content: ""; width: 7px; height: 7px; margin-top: 8px; border-radius: 50%; background: var(--alerta); }
.subtitulo { display: grid; gap: 10px; margin-bottom: 24px; }
.subtitulo h2 { font-size: var(--t-titulo); }
.subtitulo p { color: var(--tinta-suave); max-width: 58ch; }
.pasos-urg { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); counter-reset: pu; margin-bottom: clamp(56px, 6vw, 88px); }
.pasos-urg li { display: grid; gap: 6px; align-content: start; padding: 20px; background: var(--blanco); border-radius: var(--r-l); box-shadow: var(--sombra); counter-increment: pu; }
.pasos-urg li::before { content: counter(pu); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--alerta-claro); color: var(--alerta); font-weight: 700; }
.pasos-urg b { font-size: var(--t-entrada); }
.pasos-urg span { color: var(--tinta-suave); font-size: 0.9375rem; }
.horario-semana { display: grid; gap: 6px; }
.horario-semana div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; background: var(--fondo); border-radius: 10px; }
.horario-semana dd { font-weight: 700; }
.horario-semana .hoy { background: var(--verde-claro); }
.contacto-tarjetas { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); margin-bottom: clamp(56px, 6vw, 88px); }
.contacto-tarjetas article { display: grid; gap: 10px; align-content: start; padding: 24px; background: var(--blanco); border-radius: var(--r-l); box-shadow: var(--sombra); }
.contacto-tarjetas h2 { font-family: var(--serif); text-transform: uppercase; font-weight: 600; font-size: var(--t-sub); }
.contacto-tarjetas p { color: var(--tinta-suave); }
.contacto-tarjetas .boton { justify-self: start; margin-top: 4px; }
.contacto-tarjetas .grande { font-family: var(--serif); text-transform: uppercase; font-size: 1.375rem; color: var(--tinta); }
.etiqueta[data-estado] { gap: 8px; }
.etiqueta[data-estado] b { font-weight: 700; color: var(--tinta); }
.etiqueta[data-estado] span::before { content: "· "; }
.etiqueta[data-estado] i { flex: none; border-radius: 50%; background: #9aa58f; box-shadow: 0 0 0 4px #edf0ea; width: 12px; height: 12px; margin: 0 4px; }
.etiqueta[data-estado].abierto i { background: #3fae3a; box-shadow: 0 0 0 4px #dff3dc; }
.datos-servicio dt, .especie__grupo { font-size: 0.875rem; }
.bloque__panel--verde .lista-check li { color: var(--sobre-oscuro); }
.bloque:has(> .bloque__panel + .bloque__panel) { align-items: stretch; }
.tarjeta--verde p, .tarjeta--verde .precio small, .llegar__auto p, .bloque__panel--verde p, .bloque__panel--verde li { color: var(--sobre-verde-suave); }

/* Urgencias según horario. Sin script (sin clase de estado) se ve el texto que cubre ambos casos. */
.segun-horario { display: grid; gap: 10px; }
[data-si-abierto], [data-si-cerrado] { display: none; }
.esta-abierto [data-si-abierto], .esta-cerrado [data-si-cerrado] { display: grid; gap: 10px; }
.esta-abierto [data-sin-js], .esta-cerrado [data-sin-js] { display: none; }
[data-sin-js] { display: grid; gap: 10px; }
.letrero { padding: 14px 16px; background: rgba(255, 255, 255, 0.14); border-radius: 14px; }
.urg__menor .nota-chica, .dialogo__op .nota-chica { color: var(--tinta-suave); }
.correo a { font-weight: 700; overflow-wrap: anywhere; }
.especie__foto { width: calc(100% + 44px); max-width: none; margin: -22px -22px 6px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-l) var(--r-l) 0 0; }
.especie__foto--vacia { display: grid; place-items: center; background: var(--c, var(--verde-claro)); font-family: var(--serif); text-transform: uppercase; font-size: 3rem; color: rgba(29, 39, 25, 0.35); }
.especie__foto--vacia[data-g="m"] { --c: #e3eef8; } .especie__foto--vacia[data-g="r"] { --c: #dcebd0; } .especie__foto--vacia[data-g="a"] { --c: #fdeccf; } .especie__foto--vacia[data-g="p"] { --c: #d7eeee; }
.especie { overflow: hidden; }

/* Equipo: una tarjeta por médico. Lo que falta confirmar (.pendiente) solo se ve en la vista previa. */
.medicos { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.medico { display: flex; flex-direction: column; background: var(--blanco); border-radius: var(--r-l); box-shadow: var(--sombra); overflow: hidden; }
.medico img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.medico__texto { display: grid; gap: 6px; padding: 18px 22px 22px; }
.medico h3 { font-family: var(--serif); text-transform: uppercase; font-weight: 600; font-size: var(--t-sub); line-height: 1.2; }
.medico__titulo { color: var(--tinta-suave); font-size: var(--t-chico); }
.pendiente { display: none; }
.borrador .pendiente { display: block; padding: 6px 10px; border: 1.5px dashed #b9b37a; border-radius: 10px; background: #fbf9e8; color: #5c5726; font-size: var(--t-chico); }

/* Nota de Google en la portada (enlace a la ficha real). */
.resenas { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: -6px; font-size: var(--t-chico); color: var(--tinta-suave); text-decoration: none; }
.resenas b { display: inline-flex; align-items: center; gap: 4px; color: var(--tinta); font-weight: 700; }
.resenas svg { width: 16px; height: 16px; color: #e3a008; }
.resenas u { text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .resenas:hover u { color: var(--verde); } }

/* Aviso de privacidad */
.texto-legal { display: grid; gap: 12px; max-width: 70ch; margin-bottom: var(--seccion); }
.texto-legal h2 { margin-top: 18px; font-size: var(--t-sub); }
.texto-legal p { color: var(--tinta-suave); }
.texto-legal a, .pie__cierre a, .mapa__aviso a { color: inherit; text-underline-offset: 3px; }
.texto-legal__fecha { margin-top: 12px; font-size: var(--t-chico); }

/* Galería de pacientes: grilla con una foto destacada y visor a pantalla completa. */
.galeria { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.paciente { position: relative; display: block; overflow: hidden; aspect-ratio: 1; border-radius: var(--r-l); box-shadow: var(--sombra); background: var(--fondo-2); }
.paciente img, .paciente video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--sale); }
.paciente span { position: absolute; left: 0; right: 0; bottom: 0; padding: 11px 16px; background: rgba(255, 255, 255, 0.9); border-top: 1px solid rgba(255, 255, 255, 0.6); font-size: var(--t-chico); font-weight: 600; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Vidrio esmerilado: la foto se ve desenfocada detrás de la barra. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .paciente span { background: rgba(255, 255, 255, 0.58); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); }
}
.paciente--grande { grid-column: span 2; }
.paciente--extra { display: none; }
/* Celular: destacada + 4. Tablet (4 columnas) y PC (6 columnas): destacada 2×2 + 8. El resto, en el visor. */
@media (max-width: 719px) { .paciente:nth-child(n+6) { display: none; } }
@media (min-width: 720px) { .galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); } .paciente--grande { grid-row: span 2; } }
@media (min-width: 960px) { .galeria { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (hover: hover) and (pointer: fine) { .paciente:hover img, .paciente:hover video { transform: scale(1.05); } }
.galeria__todas { margin-top: 22px; }
.visor { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; }
.visor[open] { display: grid; place-items: center; }
.visor::backdrop { background: rgba(14, 18, 11, 0.9); backdrop-filter: blur(6px); }
.visor__foto { display: grid; gap: 12px; justify-items: center; max-width: min(92vw, 1100px); margin: 0; }
.visor__foto img { max-width: 100%; max-height: calc(100svh - 140px); border-radius: var(--r-l); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); }
.visor__foto figcaption { display: flex; gap: 14px; color: #fff; font-weight: 600; }
.visor__cuenta { color: rgba(255, 255, 255, 0.65); font-weight: 500; }
.visor__btn, .visor__cerrar { position: fixed; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 2rem; line-height: 1; transition: background-color 200ms var(--sale); }
.visor__btn:hover, .visor__cerrar:hover { background: rgba(255, 255, 255, 0.26); }
.visor__ant { left: max(12px, 2vw); top: 50%; transform: translateY(-50%); }
.visor__sig { right: max(12px, 2vw); top: 50%; transform: translateY(-50%); }
.visor__cerrar { top: max(12px, 2vw); right: max(12px, 2vw); font-size: 1.75rem; }
@media (max-width: 719px) { .visor__btn { top: auto; bottom: 18px; transform: none; } }
@media (prefers-reduced-motion: no-preference) { .visor[open] .visor__foto { animation: aparece 450ms var(--sale); } }

/* Contacto: "Así es la clínica", mosaico de fotos del local (mismo estilo y visor que la galería de pacientes). */
.local__cabeza { margin-top: clamp(40px, 5vw, 64px); }
.local { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; }
.local .paciente { aspect-ratio: auto; }
.local__fachada, .local__ancha { grid-column: span 2; }
.local__fachada { grid-row: span 2; }
@media (min-width: 720px) {
  .local { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 200px; }
  .local__fachada { grid-column: span 2; grid-row: span 2; }
}
.bloque__panel--verde { display: flex; flex-direction: column; }
.llegar__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: auto; padding-top: 18px; }
.llegar__acciones .enlace { color: var(--sobre-oscuro); }

/* Contacto: el número de WhatsApp es el botón (se ve el número y abre el chat). */
.boton--wsp { gap: 10px; font-size: 1.125rem; }
.boton--wsp svg { width: 22px; height: 22px; }
.contacto-wsp .nota-chica { color: var(--tinta-suave); font-size: var(--t-chico); }
.pie__col a[href^="https://wa.me"] svg { display: inline-block; width: 17px; height: 17px; margin-right: 8px; vertical-align: -3px; }
/* Clips: marca ▶ en los que no están sonando. */
.paciente--video::after { content: ""; position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%231d2a18'/%3E%3C/svg%3E") center / 18px no-repeat; box-shadow: var(--sombra); transition: opacity 300ms var(--sale); }
.paciente--video.sonando::after { opacity: 0; }
.visor__foto video { max-width: 100%; max-height: calc(100svh - 140px); border-radius: var(--r-l); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); background: #000; }

/* Encabezado de página interior con foto a la derecha (urgencias). En celular la foto no se muestra. */
.pagina__foto { display: none; position: relative; margin: 0; overflow: hidden; border-radius: var(--r-xl); box-shadow: var(--sombra-alta); }
.pagina__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pagina__foto figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 20px; background: rgba(255, 255, 255, 0.9); border-top: 1px solid rgba(255, 255, 255, 0.6); font-size: var(--t-chico); font-weight: 600; color: var(--tinta); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .pagina__foto figcaption { background: rgba(255, 255, 255, 0.62); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); }
}
@media (min-width: 960px) {
  .pagina:has(.pagina__foto) { grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); grid-template-rows: repeat(4, auto) 1fr; column-gap: 64px; align-content: start; }
  .pagina:has(.pagina__foto) > :not(.pagina__foto) { grid-column: 1; }
  .pagina__foto { display: block; grid-column: 2; grid-row: 1 / -1; align-self: start; aspect-ratio: 1 / 1; max-height: 400px; }
}

/* Señales: 5 grupos + tarjeta de acción = grilla pareja de 3×2 en PC. */
@media (min-width: 960px) { .senales { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.senales__cta { background: var(--verde) !important; color: var(--sobre-oscuro); align-content: space-between !important; }
.senales__cta h3 { color: var(--sobre-oscuro); }
.senales__cta p { color: var(--sobre-verde-suave); font-size: 0.9375rem; }
.senales__cta .boton { justify-self: start; }