/* ---------------------------------------------------------------
   Dr. Miguel Ángel Velasco Castillo — landing
   Base, keyframes, breakpoints y estados :hover.
   El resto del estilo vive inline en index.html, tal como en el
   diseño original (Claude Design: "Dr Velasco Landing.dc.html").
   --------------------------------------------------------------- */

html, body { margin: 0; padding: 0; background: #0A0A0B; overflow-x: clip; }
body { font-family: 'Sora', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: #D8CFC0; text-decoration: none; }
a:hover { color: #FFFFFF; }
::selection { background: #1F4F4C; color: #F4EFE6; }

@keyframes velFade {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* --- Breakpoints ---------------------------------------------------- */

/* En móvil la píldora del header no da para la insignia ni el menú:
   quedan fuera y el nombre recupera ese ancho. El h1 del hero pasa a
   tamaño fijo porque 64px no cabe en una pantalla estrecha. */
@media (max-width: 760px) {
  [data-header-mark] { display: none !important; }
  [data-header-nav] { display: none !important; }
  [data-hero] h1 { font-size: 34px !important; }

  /* El header va justo de sitio: se recorta el nombre a "Dr. Velasco" y
     el epígrafe a "Neurocirugía". El texto completo sigue en el DOM,
     sólo se oculta lo que sobra. */
  [data-hide-mobile] { display: none !important; }

  /* La foto vertical de móvil viene recortada por arriba (sin el techo
     de la sala), así que la cara sube dentro del encuadre: la barbilla
     queda al 28,6% de la altura en vez del 42% de la original. Como la
     imagen se escala a lo alto de la sección, eso permite arrancar el
     texto mucho antes y el hero baja de ~1064px a ~854px en un móvil
     de 390px. El valor sale de la geometría: el texto tiene que
     empezar por debajo de 0,286 × (altura de la sección). */
  [data-hero-content] { padding-top: 270px !important; }
}

/* En pantallas muy estrechas el párrafo ocupa más líneas, la sección
   crece y la barbilla vuelve a alcanzar al texto: hace falta un poco más. */
@media (max-width: 380px) {
  [data-hero-content] { padding-top: 320px !important; }
}

/* De tablet en adelante la columna del texto del hero ocupa el ancho
   disponible en vez de quedarse en 440px. */
@media (min-width: 761px) {
  div:has(> [data-hero-btns]) { max-width: none !important; flex: 1 1 380px !important; }
}

/* Los dos botones del hero en una sola fila. El diseño lo pedía desde
   761px, pero a partir de ~1040px las columnas del hero dejan de
   envolverse y la derecha cae a ~390px: con nowrap, "Ver presentación"
   (los dos botones suman ~442px) se salía del viewport. Sólo se fuerza
   donde la columna da de sí; por debajo se apilan, que es el
   comportamiento base. */
@media (min-width: 1250px) {
  [data-hero-btns] { flex-wrap: nowrap !important; }
}

/* El bloque legal del footer va en una sola línea por diseño, pero por
   debajo de ~430px no cabe y overflow-x:clip lo recortaba. Ahí envuelve. */
@media (max-width: 430px) {
  [data-footer-legal] { flex-wrap: wrap !important; white-space: normal !important; }
}

/* --- Estados :hover -------------------------------------------------
   Los valores base de estas propiedades están inline en el markup, así
   que los overrides necesitan !important para ganar en especificidad. */

.hv-navlink:hover { color: #FFFFFF !important; }

.hv-light:hover { background: #FFFFFF !important; color: #12201E !important; }

.hv-videobtn:hover { background: rgba(255, 255, 255, 0.2) !important; transform: translateY(-2px); }

.hv-videoclose:hover { background: rgba(244, 239, 230, 0.2) !important; color: #FFFFFF !important; }

.hv-solid:hover { background: #276260 !important; }

.hv-ghost-light:hover { background: rgba(23, 23, 26, 0.06) !important; color: #17171A !important; }

.hv-spec-link:hover { color: #F4EFE6 !important; }

.hv-vid:hover {
  box-shadow: 0 26px 64px rgba(23, 23, 26, 0.22) !important;
  transform: translateY(-4px);
}

.hv-doctoralia:hover { background: #121214 !important; transform: translateY(-2px); }

.hv-social:hover { background: rgba(244, 239, 230, 0.08) !important; }

.hv-credit:hover { opacity: 1 !important; color: #FFFFFF !important; }

.hv-fab:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 16px 38px rgba(37, 211, 102, 0.42) !important;
  background: #20BD5A !important;
  color: #FFFFFF !important;
}

@media (prefers-reduced-motion: reduce) {
  .hv-vid:hover, .hv-doctoralia:hover, .hv-fab:hover, .hv-videobtn:hover { transform: none; }
}