/* Bigotes (muestra): letras, colores, barra, botones, letreros, dibujos y pie. Estilo tomado de petspan.com
   (Be Vietnam Pro + Old Standard TT cursiva, botones en píldora, fondos que alternan), con la paleta pino y durazno. */
@font-face { font-family: "Be Vietnam Pro"; src: url("../fuentes/be-vietnam-pro-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("../fuentes/be-vietnam-pro-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("../fuentes/be-vietnam-pro-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("../fuentes/be-vietnam-pro-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Old Standard TT"; src: url("../fuentes/old-standard-tt-italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }

:root {
  --pino: #1E3A2B;
  --pino-osc: #0E2318;
  --crema: #F5EEDC;
  --hueso: #F7F6F1;
  --durazno: #FFDCC8;
  --t80: rgb(30 58 43 / 0.8);
  --t72: rgb(30 58 43 / 0.72); /* el 60 % de Petspan no llega a 4.5:1; 72 % sí, en todos los fondos */
  --t20: rgb(30 58 43 / 0.2);
  --t10: rgb(30 58 43 / 0.1);
  /* tokens de kamu-ui con la paleta */
  --radius: 20px;
  --background: #FFFFFF;
  --foreground: var(--pino);
  --card: #FFFFFF;
  --card-foreground: var(--pino);
  --primary: var(--pino);
  --primary-foreground: #FFFFFF;
  --secondary: var(--crema);
  --secondary-foreground: var(--pino);
  --muted: var(--hueso);
  --muted-foreground: var(--t72);
  --destructive: #B3261E;
  --border: var(--t20);
  --input: rgb(30 58 43 / 0.55);
  --ring: var(--pino);
  --barra: 80px;
  --lado: max(16px, 4vw);
  --f-h1: clamp(44px, 7.125vw, 136px);
  --f-h2: clamp(34px, 3.625vw, 68px);
  --f-h3: clamp(22px, 2vw, 36px);
  --f-texto: clamp(16px, 1.06vw, 19px);
  --f-chico: clamp(13px, 0.9vw, 15px);
  --ease: cubic-bezier(0.22, 0.75, 0.2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: var(--barra); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #FFFFFF;
  color: var(--pino);
  font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--f-texto);
  line-height: 1.45;
  letter-spacing: -0.02em;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
svg.icono { width: 1.1em; height: 1.1em; flex: none; fill: currentColor; }
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: fixed; left: 16px; top: -64px; z-index: 100; padding: 12px 20px; border-radius: 999px; background: var(--pino); color: #FFFFFF; font-weight: 500; text-decoration: none; }
.saltar:focus { top: 16px; }
:focus-visible { outline: 3px solid var(--pino); outline-offset: 3px; }

/* ---------- Títulos: sans fina con una palabra en cursiva serif, como Petspan ---------- */
.titulo, .h1 { font-weight: 400; line-height: 1; letter-spacing: -0.06em; text-wrap: balance; }
.titulo { font-size: var(--f-h2); }
.h1 { font-size: var(--f-h1); }
.titulo em, .h1 em, .letrero em, .cursiva {
  font-family: "Old Standard TT", Georgia, serif;
  font-style: italic;
  font-size: 1.12em;
  letter-spacing: -0.035em;
  line-height: 0.9;
}
.h1 em { font-size: 1.07em; }
.nowrap { white-space: nowrap; }
.etiqueta { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

/* ---------- Botones en píldora (kamu-ui .ui-btn con la forma de Petspan) ---------- */
[hidden] { display: none !important; } /* kamu-ui pone display en .ui-accordion y le gana al hidden del navegador */
.ui-btn {
  color: #FFFFFF; /* kamu-ui vive en una capa: el "a { color: inherit }" de aquí le ganaba al blanco */
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid var(--pino);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
  overflow: hidden;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.ui-btn--outline { background: transparent; color: var(--pino); border-color: var(--t20); box-shadow: none; } /* taste-skill-ignore: quita la sombra que trae kamu-ui; el borde es el botón de Petspan */
.ui-btn--outline:hover { border-color: var(--pino); }
.ui-btn:not(.ui-btn--outline):hover { background: var(--pino-osc); border-color: var(--pino-osc); }
.ui-btn--claro { background: #FFFFFF; color: var(--pino); border-color: #FFFFFF; }
.ui-btn .icono { width: 18px; height: 18px; }
/* Texto que da la vuelta al pasar el mouse (como los botones de Petspan), sin mover el botón. */
.voltea { display: inline-grid; overflow: hidden; line-height: 1.5; }
.voltea > span { grid-area: 1 / 1; transition: transform 0.35s var(--ease); }
.voltea > span + span { transform: translateY(110%); }
@media (hover: hover) {
  .ui-btn:hover .voltea > span:first-child { transform: translateY(-110%); }
  .ui-btn:hover .voltea > span + span { transform: none; }
}
.enlace-flecha { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; text-decoration: none; }
.enlace-flecha .icono { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
.enlace-flecha:hover .icono { transform: translateX(4px); }
.pildora { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--durazno); font-size: 13px; font-weight: 700; }

/* ---------- Barra ---------- */
.barra {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--barra);
  display: flex; align-items: center; gap: 36px;
  padding: 0 var(--lado);
  background: #FFFFFF;
}
.barra__logo { display: flex; align-items: center; color: var(--pino); text-decoration: none; }
.barra__logo svg { width: 138px; height: 39px; }
.barra__links { display: flex; gap: 32px; margin-left: auto; font-size: 15px; font-weight: 500; }
.barra__links a { text-decoration: none; padding: 10px 0; }
.barra__links a:hover { text-decoration: underline; text-underline-offset: 6px; }
.barra__acciones { display: flex; align-items: center; gap: 12px; }
.idioma {
  display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 12px;
  border: 0; border-radius: 999px; background: transparent; cursor: pointer; font-size: 15px; font-weight: 600;
}
.idioma span { color: var(--t72); }
.idioma span[aria-current="true"] { color: var(--pino); text-decoration: underline; text-underline-offset: 4px; }
.barra .ui-btn { min-height: 44px; font-size: 15px; padding: 0 20px; }
.barra__menu { display: none; width: 44px; height: 44px; margin-left: auto; border: 0; background: transparent; cursor: pointer; }
.barra__menu .icono { width: 28px; height: 28px; }
.barra__llamar { display: none; place-items: center; width: 44px; height: 44px; border: 1px solid var(--t20); border-radius: 999px; color: var(--pino); }
.barra__llamar .icono { width: 20px; height: 20px; }
.flecha { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; }
.flecha:disabled { color: var(--t72); opacity: 0.45; cursor: default; }
.flecha .icono { width: 20px; height: 20px; }
.panel {
  position: fixed; inset: var(--barra) 0 0; z-index: 49;
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px var(--lado) 40px;
  background: #FFFFFF;
  visibility: hidden; opacity: 0; transition: opacity 0.3s, visibility 0s 0.3s;
}
.panel[data-abierto] { visibility: visible; opacity: 1; transition: opacity 0.3s; }
.panel > a:not(.ui-btn) { font-size: 34px; letter-spacing: -0.05em; text-decoration: none; padding: 6px 0; border-bottom: 1px solid var(--t10); }
.panel__fila { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* ---------- Letrero gigante que corre de lado ---------- */
.letrero { overflow: hidden; white-space: nowrap; font-size: var(--f-h1); line-height: 1.2; letter-spacing: -0.06em; user-select: none; }
.letrero__pista { display: inline-flex; will-change: transform; }
.letrero__pista > span { padding-right: 0.3em; }

/* ---------- Dibujos (Recraft limpiados): línea y puntitos con currentColor ---------- */
.dib { color: var(--pino); line-height: 0; }
.dib .dib__svg { width: 100%; height: auto; overflow: visible; }
.dib__cuerpo { position: relative; }
/* Capa propia para lo que se mueve: así el bucle no vuelve a pintar el SVG con sus puntitos en cada cuadro. */
.dib, .dib__cuerpo, .destello, [data-parallax], .paso__caja { will-change: transform; }
.dib .dib__parte { position: absolute; left: 0; top: 0; will-change: transform; }
.dib--crema .dib__svg [fill="#fff"], .dib--crema pattern rect { fill: var(--crema); }
.destello { position: absolute; width: clamp(14px, 1.6vw, 26px); color: var(--pino); pointer-events: none; }
.destello svg { width: 100%; height: auto; overflow: visible; }

/* ---------- Pie con el logo gigante ---------- */
.pie { padding: clamp(48px, 6vw, 96px) var(--lado) 32px; background: #FFFFFF; }
.pie__logo { display: block; width: 100%; height: auto; color: var(--pino); }
.pie__fila { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; margin-top: clamp(40px, 5vw, 80px); }
.pie h2 { font-size: clamp(22px, 2vw, 30px); font-weight: 500; letter-spacing: -0.04em; margin-bottom: 20px; }
.pie h3 { font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.pie li { font-size: 15px; margin-bottom: 10px; }
.pie li a { text-decoration: none; }
.pie li a:hover { text-decoration: underline; }
.pie__contacto li { display: flex; gap: 10px; align-items: flex-start; }
.pie__contacto .icono { margin-top: 2px; }
.pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--t20); font-size: 13px; color: var(--t72); }
.pie__legal strong { color: var(--pino); font-weight: 600; }

/* ---------- Aviso flotante ---------- */
.aviso {
  position: fixed; left: 50%; bottom: 24px; z-index: 60; width: max-content; max-width: calc(100vw - 32px);
  padding: 12px 20px; border-radius: 999px; background: var(--pino); color: #FFFFFF; font-size: 15px;
  transform: translate(-50%, calc(100% + 40px)); visibility: hidden; transition: transform 0.4s var(--ease), visibility 0s 0.4s;
}
.aviso[data-visible] { transform: translate(-50%, 0); visibility: visible; transition: transform 0.4s var(--ease); }

/* ---------- Urgencias desde la compu (tarjeta con el número) ---------- */
.urgencias { width: min(92vw, 440px); padding: 0; border: 0; border-radius: 28px; background: var(--crema); color: var(--pino); }
.urgencias::backdrop { background: rgb(14 35 24 / 0.55); }
.urgencias__caja { position: relative; display: grid; gap: 16px; padding: 40px 32px 28px; }
.urgencias__cerrar { position: absolute; top: 12px; right: 12px; }
.urgencias__numero { font-size: clamp(40px, 4.4vw, 56px); font-weight: 400; letter-spacing: -0.05em; line-height: 1; }
.urgencias__texto { font-size: 16px; }
.urgencias__botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.urgencias__botones .ui-btn { gap: 8px; }
.urgencias__botones .icono { width: 18px; height: 18px; }
.urgencias__nota { font-size: 14px; color: var(--t72); }

@media (max-width: 1023px) {
  .barra__links { display: none; }
  .barra__acciones .idioma, .barra__acciones .ui-btn--outline { display: none; }
  .barra__acciones { margin-left: auto; }
  .barra__menu { display: grid; place-items: center; margin-left: 0; }
  .barra__llamar { display: grid; } /* clínica de 24 horas: llamar siempre a la mano */
}
@media (max-width: 767px) {
  :root { --barra: 64px; --f-h1: 14.6vw; --f-h2: 10.5vw; } /* los tamaños de Petspan en celular (57 y 41 px a 390) */
  .barra { gap: 8px; }
  .barra__logo svg { width: 112px; height: 32px; }
  .barra__acciones { display: none; }
  .barra__llamar { margin-left: auto; }
  .pie__fila { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .pie__fila > :first-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}