/* =========================================================================
   Humanimals — sitio público
   Identidad: blanco y negro (inspiración Uber), Gilroy, fotos con grado «película».
   ========================================================================= */

@font-face { font-family: "Gilroy"; src: url("fuentes/Gilroy-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("fuentes/Gilroy-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("fuentes/Gilroy-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("fuentes/Gilroy-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("fuentes/Gilroy-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("fuentes/Gilroy-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("fuentes/Gilroy-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("fuentes/Gilroy-Heavy.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  --negro: #000000;
  --blanco: #ffffff;
  --gris-campo: #f3f3f3;   /* campos y tarjetas, como Uber */
  --gris-borde: #e2e2e2;
  --gris-texto: #5e5e5e;   /* 6.6:1 sobre blanco */
  --gris-oscuro: #afafaf;  /* texto secundario sobre negro, 9:1 */
  --nav-alto: 72px;
  --margen: clamp(20px, 5vw, 72px);
  --ancho: 1360px;
  --radio: 8px;
  --radio-foto: 16px;
  --suave: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--negro); scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-alto) + 16px); }
body {
  margin: 0; background: var(--blanco); color: var(--negro);
  font: 500 18px/1.5 "Gilroy", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; }
p { margin: 0; }
svg { fill: currentColor; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--negro); outline-offset: 3px; border-radius: 4px; }
.nav :focus-visible, .convicciones :focus-visible, .cierre :focus-visible, .pie :focus-visible { outline-color: var(--blanco); }

.saltar { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--blanco); color: var(--negro); padding: 10px 16px; border-radius: var(--radio); }
.saltar:focus { top: 16px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: var(--radio); border: 0;
  font: 600 17px/1 "Gilroy", sans-serif; text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, transform .15s;
}
.btn:active { transform: scale(.98); }
.btn svg { width: 20px; height: 20px; }
.btn--negro { background: var(--negro); color: var(--blanco); }
.btn--negro:hover { background: #333; }
.btn--blanco { background: var(--blanco); color: var(--negro); }
.btn--blanco:hover { background: var(--gris-borde); }
.btn--contorno { background: transparent; color: var(--blanco); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); }
.btn--contorno:hover { box-shadow: inset 0 0 0 1.5px var(--blanco); }
.btn--chico { min-height: 40px; padding: 0 18px; font-size: 15px; border-radius: 999px; }
.btn--ancho { width: 100%; }

.circulo {
  display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none;
  border-radius: 50%; border: 0; background: var(--negro); color: var(--blanco); cursor: pointer;
  transition: background-color .2s, transform .2s var(--suave);
}
.circulo svg { width: 22px; height: 22px; }
.circulo:hover { transform: scale(1.06); }
.circulo:disabled { opacity: .25; cursor: default; transform: none; }
.circulo--gris { background: var(--gris-campo); color: var(--negro); }
.circulo--gris:hover { background: var(--negro); color: var(--blanco); }

/* ---------- Franja negra (navegación) ----------
   Fija arriba. Al bajar o subir de golpe se estira y rebota como resorte (app.js mueve --rebote). */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-alto);
  background: var(--negro); color: var(--blanco);
  transform: translateY(calc(var(--rebote, 0) * 1px));
  will-change: transform;
}
/* Relleno negro arriba de la franja para que al rebotar hacia abajo no se vea un hueco. */
.nav::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 80px; background: var(--negro); }
.nav__in {
  max-width: var(--ancho); height: 100%; margin: 0 auto; padding: 0 var(--margen);
  display: flex; align-items: center; gap: 40px;
}
.nav__logo { display: block; color: var(--blanco); line-height: 0; text-decoration: none; }
/* Logo oficial (vector tomado de LOGO.pdf) */
.logo { display: block; width: 156px; height: auto; }
.nav__links { display: flex; gap: 6px; margin-right: auto; }
.nav__links a {
  padding: 8px 14px; border-radius: 999px; text-decoration: none; font-size: 16px; font-weight: 500;
  transition: background-color .2s;
}
.nav__links a:hover { background: #282828; }
.nav__cta { background: var(--blanco); color: var(--negro); }
.nav__cta:hover { background: var(--gris-borde); }
.nav__menu { display: none; }
.menu-movil { display: none; }

/* ---------- Portada ---------- */
.hero {
  max-width: var(--ancho); margin: 0 auto;
  padding: calc(var(--nav-alto) + clamp(32px, 5vh, 64px)) var(--margen) clamp(56px, 8vh, 96px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center;
}
.hero__titulo { font-size: clamp(36px, 3.6vw, 54px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; }
.hero__titulo .linea { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero__titulo .linea > span { display: block; transform: translateY(105%); transition: transform 1s var(--suave); }
.cargado .hero__titulo .linea > span { transform: none; }
.cargado .hero__titulo .linea:nth-child(2) > span { transition-delay: .08s; }
.cargado .hero__titulo .linea:nth-child(3) > span { transition-delay: .16s; }
.hero__sub { margin-top: 20px; max-width: 38ch; font-size: 20px; color: var(--gris-texto); }

.hero__foto { margin: 0; position: relative; border-radius: var(--radio-foto); overflow: hidden; aspect-ratio: 4 / 4.6; clip-path: inset(0 0 0 100% round var(--radio-foto)); transition: clip-path 1.3s var(--suave) .25s; }
.cargado .hero__foto { clip-path: inset(0 0 0 0 round var(--radio-foto)); }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; transform: scale(1.12); transition: transform 1.8s var(--suave) .25s; }
.cargado .hero__foto img { transform: scale(1); }

/* Tarjeta para agendar, al estilo del pedido de viaje de Uber */
.reserva { margin-top: 36px; max-width: 460px; }
.reserva__tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.tab { position: relative; }
.tab input, .chip input { position: absolute; opacity: 0; pointer-events: none; }
.tab span {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  background: var(--gris-campo); font-size: 16px; font-weight: 600; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.tab svg { width: 18px; height: 18px; }
.tab span:hover { background: var(--gris-borde); }
.tab input:checked + span { background: var(--negro); color: var(--blanco); }
.tab input:focus-visible + span, .chip input:focus-visible + span { outline: 2px solid var(--negro); outline-offset: 2px; }

.reserva__campos { position: relative; display: grid; gap: 8px; padding-left: 0; }
.reserva__ruta { position: absolute; left: 18px; top: 22px; bottom: 22px; width: 10px; display: flex; flex-direction: column; align-items: center; z-index: 1; pointer-events: none; }
.reserva__ruta .ruta-inicio { width: 10px; height: 10px; border-radius: 50%; background: var(--negro); }
.reserva__ruta .ruta-linea { flex: 1; width: 2px; background: var(--negro); margin: 4px 0; }
.reserva__ruta .ruta-fin { width: 10px; height: 10px; background: var(--negro); }
.campo select, .campo input {
  width: 100%; height: 56px; padding: 0 16px 0 44px; border: 2px solid transparent; border-radius: var(--radio);
  background: var(--gris-campo); color: var(--negro); font: 500 17px "Gilroy", sans-serif;
  appearance: none; -webkit-appearance: none; transition: border-color .2s, background-color .2s;
}
.campo select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 9.5 12 14.5 17 9.5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 22px; cursor: pointer; }
.campo input::placeholder { color: var(--gris-texto); }
.campo select:focus, .campo input:focus { outline: none; border-color: var(--negro); background-color: var(--blanco); }

.reserva__cuando { display: flex; gap: 8px; margin: 16px 0 20px; }
.chip span {
  display: inline-block; padding: 8px 14px; border-radius: 999px; font-size: 15px; font-weight: 600;
  box-shadow: inset 0 0 0 1.5px var(--gris-borde); cursor: pointer; transition: box-shadow .2s, background-color .2s, color .2s;
}
.chip span:hover { box-shadow: inset 0 0 0 1.5px var(--negro); }
.chip input:checked + span { background: var(--negro); color: var(--blanco); box-shadow: none; }
.reserva__nota { margin-top: 12px; font-size: 15px; color: var(--gris-texto); }

/* ---------- El punto: la ventana que se abre ---------- */
/* Fondo negro con el logo en blanco: así el logo conserva el cuerpo que tiene en la franja, el uniforme y la fachada. */
.punto { position: relative; height: 320vh; background: var(--negro); }
.punto__fijo { pointer-events: none; }
.punto__fijo { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.punto__marca { width: min(62vw, 960px); height: auto; overflow: visible; color: var(--blanco); transform-origin: 56.8% 12.2%; }
.punto__ventana { position: absolute; inset: 0; clip-path: circle(0px at 50% 50%); will-change: clip-path; }
.punto__ventana img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%; transform: scale(calc(1.25 - var(--p, 0) * .25)); }
.punto__velo { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0) 55%), linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,0) 60%); }
/* Al abrirse, la ventana empieza blanca (igual que el punto de la «i») y se desvanece hacia la foto. */
.punto__ventana::after { content: ""; position: absolute; inset: 0; background: var(--blanco); opacity: var(--negrura, 1); }
.punto__texto {
  position: absolute; left: max(var(--margen), calc((100vw - var(--ancho)) / 2 + var(--margen))); bottom: clamp(40px, 12vh, 120px); max-width: min(780px, 88vw); color: var(--blanco);
  opacity: var(--t, 0); transform: translateY(calc((1 - var(--t, 0)) * 40px));
}
.punto__texto h2 { font-size: clamp(28px, 3vw, 44px); letter-spacing: -0.03em; line-height: 1.1; }
.punto__texto p { margin-top: 18px; font-size: 20px; color: rgba(255,255,255,.82); max-width: 40ch; }

/* ---------- Especialidades ---------- */
.especialidades { max-width: var(--ancho); margin: 0 auto; padding: clamp(80px, 12vh, 140px) var(--margen) clamp(40px, 6vh, 80px); }
.seccion-cabeza { max-width: 760px; margin-bottom: clamp(48px, 8vh, 96px); }
.seccion-cabeza h2 { font-size: clamp(30px, 3vw, 44px); line-height: 1.08; }
.seccion-cabeza p { margin-top: 16px; font-size: 20px; color: var(--gris-texto); }

.pilar { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; padding-bottom: clamp(80px, 12vh, 140px); }
.pilar--inverso .pilar__foto { order: 2; }
.pilar__foto { margin: 0; border-radius: var(--radio-foto); overflow: hidden; aspect-ratio: 4 / 3; position: sticky; top: calc(var(--nav-alto) + 24px); }
.pilar__foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1 + var(--z, 0) * .12)); transform-origin: 50% 40%; will-change: transform; }
.pilar__texto h3 { font-size: clamp(26px, 2.2vw, 34px); }
.pilar__intro { margin-top: 18px; font-size: 19px; color: var(--gris-texto); max-width: 46ch; }

.lista { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--gris-borde); }
.lista li { display: grid; gap: 2px; padding: 18px 0; border-bottom: 1px solid var(--gris-borde); }
.lista strong { font-weight: 700; font-size: 18px; }
.lista span { font-size: 16px; color: var(--gris-texto); }

.farmacia { display: flex; gap: 18px; align-items: center; margin-top: 32px; padding: 14px; background: var(--gris-campo); border-radius: 12px; }
.farmacia img { width: 112px; height: 112px; object-fit: cover; border-radius: var(--radio); flex: none; }
.farmacia h4 { font-size: 20px; letter-spacing: -0.02em; }
.farmacia p { margin-top: 6px; font-size: 16px; color: var(--gris-texto); }

/* ---------- Convicciones ---------- */
.convicciones { background: var(--negro); color: var(--blanco); }
.convicciones__in { max-width: var(--ancho); margin: 0 auto; padding: clamp(88px, 14vh, 160px) var(--margen); }
.convicciones h2 { font-size: clamp(30px, 3vw, 44px); line-height: 1.08; max-width: 20ch; }
.convicciones__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(56px, 9vh, 110px); border-top: 1px solid #333; }
.conviccion { padding: 28px 28px 8px 0; }
.conviccion + .conviccion { padding-left: 28px; border-left: 1px solid #333; }
.conviccion h3 { font-size: clamp(22px, 1.7vw, 26px); }
.conviccion p { margin-top: 14px; font-size: 17px; color: var(--gris-oscuro); max-width: 26ch; }

/* ---------- Galería ---------- */
.galeria { padding: clamp(80px, 12vh, 140px) 0; overflow: hidden; }
.galeria__cabeza { max-width: var(--ancho); margin: 0 auto 40px; padding: 0 var(--margen); display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.galeria__cabeza h2 { font-size: clamp(30px, 3vw, 44px); line-height: 1.08; max-width: 18ch; }
.galeria__flechas { display: flex; gap: 10px; }
.galeria__pista {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  --borde: max(var(--margen), calc((100vw - var(--ancho)) / 2 + var(--margen)));
  padding: 0 var(--borde); scroll-padding: 0 var(--borde); cursor: grab;
}
.galeria__pista::-webkit-scrollbar { display: none; }
.galeria__pista.arrastrando { cursor: grabbing; scroll-snap-type: none; }
.galeria__pista.arrastrando img { pointer-events: none; }
.galeria__pista figure { margin: 0; flex: 0 0 clamp(260px, 30vw, 440px); scroll-snap-align: start; user-select: none; }
.galeria__pista figure:nth-child(even) { flex-basis: clamp(300px, 38vw, 560px); }
.galeria__pista img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radio-foto); -webkit-user-drag: none; }
.galeria__pista figure:nth-child(even) img { aspect-ratio: 5 / 4.6; }
.galeria__pista figcaption { margin-top: 12px; font-size: 16px; color: var(--gris-texto); }

/* ---------- Sucursales ---------- */
.sucursales { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen) clamp(80px, 12vh, 140px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.sucursales__foto { border-radius: var(--radio-foto); overflow: hidden; aspect-ratio: 4 / 5; }
.sucursales__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.sucursales h2 { font-size: clamp(30px, 3vw, 44px); line-height: 1.08; }
.sucursales__sub { margin-top: 14px; font-size: 20px; color: var(--gris-texto); }
.sucursales ul { list-style: none; margin: 36px 0 0; padding: 0; }
.suc { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; border-top: 1px solid var(--gris-borde); }
.suc:last-child { border-bottom: 1px solid var(--gris-borde); }
.suc h3 { font-size: 22px; letter-spacing: -0.03em; }
.suc p { margin-top: 4px; font-size: 16px; color: var(--gris-texto); }
.suc div > a { display: inline-block; margin-top: 6px; font-size: 16px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }

/* ---------- Cierre ---------- */
.cierre { background: var(--negro); color: var(--blanco); padding: clamp(88px, 14vh, 150px) var(--margen); text-align: left; }
.cierre__titulo { max-width: calc(var(--ancho) - 2 * var(--margen)); margin: 0 auto; font-size: clamp(36px, 4.2vw, 60px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }
.cierre__acciones { max-width: calc(var(--ancho) - 2 * var(--margen)); margin: 36px auto 0; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Pie ---------- */
.pie { background: var(--negro); color: var(--blanco); border-top: 1px solid #262626; }
.pie__in { max-width: var(--ancho); margin: 0 auto; padding: 64px var(--margen) 48px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.pie__marca .logo { width: 176px; }
.pie__marca p { margin-top: 20px; max-width: 32ch; font-size: 16px; color: var(--gris-oscuro); }
.pie__col { display: flex; flex-direction: column; gap: 12px; }
.pie__col h3 { font-size: 16px; letter-spacing: 0; margin-bottom: 6px; }
.pie__col a { font-size: 16px; color: var(--gris-oscuro); text-decoration: none; }
.pie__col a:hover { color: var(--blanco); }
.pie__base { max-width: var(--ancho); margin: 0 auto; padding: 24px var(--margen) 40px; display: flex; justify-content: space-between; font-size: 14px; color: var(--gris-oscuro); }
.pie__base a { color: var(--gris-oscuro); }

/* ---------- Tableta y móvil ---------- */
@media (max-width: 1000px) {
  .nav__links, .nav__cta { display: none; }
  .nav__in { justify-content: space-between; }
  .nav__menu {
    display: grid; gap: 6px; place-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: transparent; cursor: pointer;
  }
  .nav__menu span { display: block; width: 22px; height: 2px; background: var(--blanco); transition: transform .3s var(--suave); }
  .nav__menu[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav__menu[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .menu-movil:not([hidden]) {
    display: flex; flex-direction: column; gap: 4px; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--negro); padding: 8px var(--margen) 28px;
  }
  .menu-movil a:not(.btn) { padding: 14px 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; border-bottom: 1px solid #262626; }
  .menu-movil .btn { margin-top: 20px; background: var(--blanco); color: var(--negro); }

  .hero { grid-template-columns: 1fr; }
  .hero__foto { order: -1; aspect-ratio: 4 / 3; }
  .reserva { max-width: none; }
  .pilar, .sucursales { grid-template-columns: 1fr; }
  .pilar--inverso .pilar__foto { order: 0; }
  .pilar__foto { position: relative; top: 0; }
  .convicciones__grid { grid-template-columns: 1fr 1fr; }
  .conviccion:nth-child(3) { padding-left: 0; border-left: 0; }
  .conviccion:nth-child(n+3) { border-top: 1px solid #333; margin-top: 16px; }
  .pie__in { grid-template-columns: 1fr 1fr; }
  .pie__marca { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  :root { --nav-alto: 64px; }
  body { font-size: 17px; }
  .logo { width: 136px; }
  .hero__sub { font-size: 18px; }
  .reserva__tabs { gap: 6px; }
  .tab span { padding: 10px 12px; font-size: 15px; }
  .punto { height: 260vh; }
  .punto__texto p { font-size: 17px; }
  .convicciones__grid { grid-template-columns: 1fr; }
  .conviccion, .conviccion + .conviccion { padding: 24px 0 12px; border-left: 0; }
  .conviccion + .conviccion { border-top: 1px solid #333; }
  .conviccion:nth-child(n+3) { margin-top: 0; }
  .galeria__flechas { display: none; }
  .suc h3 { font-size: 22px; }
  .pie__base { flex-direction: column; gap: 8px; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; }
  .nav { transform: none; }
  .punto { height: auto; margin-top: 0; }
  .punto__fijo { position: relative; }
  .punto__marca { display: none; }
  .punto__ventana { position: relative; clip-path: none; height: 100%; }
  .punto__ventana::after { opacity: 0; }
  .punto__ventana img { transform: none; }
  .punto__texto { opacity: 1; transform: none; }
  .pilar__foto img { transform: none; }
}