@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/shape.css");
@import url("tokens/motion.css");
@import url("tokens/semantic.css");

/* ==========================================================================
   Base
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  hyphens:none;
  -webkit-hyphens:none;
}

body{
  margin:0;
  background:var(--larrc-blanco-hueso);
  color:var(--text-body);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%}

/* `hidden` tiene que ganarle a cualquier display de clase (.field-group es flex,
   y sin esto el campo oculto se seguía pintando). */
[hidden]{display:none !important}

:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:0.01ms !important}
  /* La entrada del hero se salta por completo: el contenido aparece ya colocado. */
  *,*::before,*::after{animation:none !important}
}

/* El header es fijo: los anclajes se detienen antes de quedar debajo. */
section[id]{scroll-margin-top:104px}

/* Contenedor: la caja de 1320px centrada que usan todas las secciones */
.container{max-width:var(--container);margin:0 auto;width:100%}

/* ==========================================================================
   Tipografía de marca
   ========================================================================== */

.display{
  margin:0;
  overflow-wrap:break-word;
  hyphens:none;
  -webkit-hyphens:none;
  font-family:var(--font-display);
  font-weight:var(--fw-regular);
  line-height:var(--lh-display);
  letter-spacing:var(--ls-display);
  color:var(--larrc-azul-oscuro);
}
.display--xl{font-size:clamp(32px, 8vw, var(--fs-display-xl))}
.display--l{font-size:clamp(28px, 6.2vw, var(--fs-display-l))}
.display--s{font-size:var(--fs-display-s)}
.display--on-dark{color:var(--text-on-dark)}

/* Versales: sólo etiquetas, navegación y pasos. Nunca titulares. */
.eyebrow{
  font-family:var(--font-body);
  font-size:var(--fs-micro);
  font-weight:var(--fw-semibold);
  text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);
  color:var(--text-secondary);
}
.eyebrow--warm{color:var(--larrc-naranja-hocoma)}
.eyebrow--dark{color:var(--larrc-azul-oscuro)}

.body-copy{
  margin:0;
  font-family:var(--font-body);
  font-weight:var(--fw-medium);
  font-size:var(--fs-body-l);
  line-height:1.75;
  color:var(--text-secondary);
  text-align:justify;
  text-wrap:pretty;
}
.body-copy--on-dark{color:var(--text-on-dark-muted)}

/* ==========================================================================
   Botón (pill, versales) — Button del sistema de diseño
   ========================================================================== */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  font-family:var(--font-body);
  font-weight:var(--fw-semibold);
  text-transform:uppercase;
  letter-spacing:var(--ls-label);
  line-height:1;
  border-radius:var(--radius-pill);
  text-decoration:none;
  cursor:pointer;
  transition:var(--transition-ui);
}
.btn--md{padding:12px 24px;font-size:var(--fs-body-s)}
.btn--lg{padding:16px 32px;font-size:var(--fs-body)}

.btn--primary{
  background:var(--action-primary-bg);
  color:var(--action-primary-fg);
  border:1px solid var(--action-primary-bg);
}
.btn--primary:hover{
  background:var(--action-primary-bg-hover);
  border-color:var(--action-primary-bg-hover);
  color:var(--action-primary-fg);
}

.btn--on-dark{
  background:var(--larrc-blanco-hueso);
  color:var(--larrc-azul-oscuro);
  border:1px solid var(--larrc-blanco-hueso);
}
.btn--on-dark:hover{
  background:var(--larrc-blanco);
  border-color:var(--larrc-blanco);
  color:var(--larrc-azul-oscuro);
}

/* Contorno claro: para acciones secundarias sobre foto o fondo oscuro. */
.btn--outline-light{
  background:transparent;
  color:var(--larrc-blanco-hueso);
  border:1px solid rgba(249,248,242,.55);
}
.btn--outline-light:hover{
  background:var(--larrc-blanco-hueso);
  border-color:var(--larrc-blanco-hueso);
  color:var(--larrc-azul-oscuro);
}

/* ==========================================================================
   Header
   ========================================================================== */

/* Va montado sobre la foto del hero: transparente al inicio, sólido al bajar. */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:20;
  background:transparent;
  padding:32px var(--page-margin);
  transition:background-color var(--dur-base) var(--ease-standard);
}
.site-header.is-solid{background:var(--larrc-blanco-hueso)}

.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-8);
  animation:hero-fade 600ms var(--ease-out) both;
  animation-delay:80ms;
}

/* Dos masters del logo superpuestos: se funden en vez de cambiar de archivo. */
.site-header__logo{
  display:block;
  position:relative;
  line-height:0;
  height:40px;
  /* Nunca se encoge: la altura está fija, así que ceder ancho lo deforma. */
  flex:0 0 auto;
}
.site-header__logo-img{
  height:40px;
  width:auto;
  max-width:none;
  display:block;
  transition:opacity var(--dur-base) var(--ease-standard);
}
.site-header__logo-img--dark{position:absolute;top:0;left:0;opacity:0}
.site-header.is-solid .site-header__logo-img--light{opacity:0}
.site-header.is-solid .site-header__logo-img--dark{opacity:1}

.site-nav{display:flex;gap:var(--space-8);flex-wrap:wrap}
.nav-link{
  font-family:var(--font-body);
  font-size:var(--fs-micro);
  font-weight:var(--fw-semibold);
  text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);
  text-decoration:none;
  white-space:nowrap;
  color:var(--text-on-dark);
  transition:var(--transition-ui);
}
.site-header.is-solid .nav-link{color:var(--larrc-azul-oscuro)}
.nav-link:hover{color:var(--larrc-naranja-hocoma)}
.nav-link--contact{
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
}
.nav-link--contact:hover{border-bottom-color:var(--larrc-naranja-hocoma)}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
  position:relative;
  /* Alto mínimo, no fijo: con zoom o con textos largos el bloque crece en vez
     de recortar el contenido (antes se comía los botones). */
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:flex-start;
  overflow:hidden;
}
/* Más alta que el hero: el sobrante es lo que se desplaza en el parallax.
   El JS mueve la foto con la propiedad `translate`, que no pisa el `transform`
   del zoom de entrada. */
.hero__photo{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:122%;
  object-fit:cover;
  object-position:center 30%;
  display:block;
  will-change:translate;
  animation:hero-zoom 1600ms var(--ease-out) both;
}

/* Velo azul oscuro: la foto es muy luminosa y encima van el menú y el texto.
   Dos capas: una cargada a la izquierda, donde está el texto, y otra vertical
   que asienta el menú arriba. La derecha queda más limpia para que se lea el equipo. */
.hero__scrim{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(100deg,
      rgba(35,43,45,.88) 0%,
      rgba(35,43,45,.74) 32%,
      rgba(35,43,45,.42) 62%,
      rgba(35,43,45,.28) 100%),
    linear-gradient(180deg,
      rgba(35,43,45,.62) 0%,
      rgba(35,43,45,.30) 38%,
      rgba(35,43,45,.30) 62%,
      rgba(35,43,45,.58) 100%);
  animation:hero-fade var(--dur-slow) var(--ease-out) both;
}

.hero__copy{
  position:relative;
  z-index:1;
  padding:var(--space-10) var(--page-margin) var(--space-9);
  display:flex;
  flex-direction:column;
  gap:var(--space-5);
  max-width:min(56rem, 70vw);
}
.hero__title{color:var(--text-on-dark)}
.hero__word{display:inline-block;animation:hero-rise 800ms var(--ease-out) both}
.hero__word:nth-child(1){animation-delay:120ms}
.hero__word:nth-child(2){animation-delay:220ms}
.hero__word:nth-child(3){animation-delay:320ms}

.hero__actions{
  display:flex;
  gap:var(--space-4);
  flex-wrap:wrap;
  animation:hero-rise 800ms var(--ease-out) both;
  animation-delay:620ms;
}

.hero__lead{
  margin:0;
  font-family:var(--font-body);
  /* Más peso que el cuerpo normal: es una frase corta sobre foto y tiene que pesar. */
  font-weight:var(--fw-medium);
  font-size:var(--fs-body-l);
  line-height:1.7;
  color:var(--text-on-dark);
  text-align:justify;
  text-wrap:pretty;
  animation:hero-rise 800ms var(--ease-out) both;
  animation-delay:480ms;
}

/* Entrada del hero. Se mantiene dentro del carácter de la marca:
   fundido y desplazamiento corto, sin rebote ni sobrepaso. */
@keyframes hero-rise{
  from{opacity:0;transform:translateY(26px);filter:blur(10px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes hero-fade{
  from{opacity:0}
  to{opacity:1}
}
@keyframes hero-zoom{
  from{transform:scale(1.06)}
  to{transform:scale(1)}
}

/* ==========================================================================
   Filosofía
   ========================================================================== */

.philosophy{
  padding:var(--space-10) var(--page-margin);
  display:flex;
  justify-content:center;
}
.philosophy__line{max-width:18ch;text-align:center;line-height:1.25}

/* ==========================================================================
   Encabezado de sección con filete
   ========================================================================== */

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:var(--space-6);
  border-bottom:1px solid var(--line-subtle);
  padding-bottom:var(--space-4);
}

/* ==========================================================================
   Equipo
   ========================================================================== */

.team{padding:0 var(--page-margin) var(--space-10)}
.team__inner{display:flex;flex-direction:column;gap:var(--space-8)}
.team__grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--space-6);
}
/* DisciplineTile: la ilustración trae el nombre de la disciplina incorporado. */
.discipline{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-4);
}
.discipline img{width:100%;height:auto;display:block}

/* ==========================================================================
   Patologías
   ========================================================================== */

.pathologies{
  background:var(--larrc-azul-oscuro);
  padding:var(--space-10) var(--page-margin);
}
.pathologies__inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-9);
  align-items:center;
}
.pathologies__copy{display:flex;flex-direction:column;gap:var(--space-7)}
.pathologies__copy .body-copy{max-width:40ch}
/* Los iconos traen el nombre de la patología dentro del dibujo, así que necesitan
   tamaño para leerse: ocupan la columna entera, no una fila de miniaturas. */
.pathologies__icons{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-6);
  padding-top:var(--space-6);
  border-top:1px solid var(--line-on-dark);
}
.pathology-icon img{width:100%;height:auto;display:block}
.pathologies__extra{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body-s);
  font-weight:var(--fw-medium);
  line-height:var(--lh-body);
  color:var(--text-on-dark-muted);
}
.pathologies__photo{
  width:100%;
  height:600px;
  object-fit:cover;
  display:block;
}

/* ==========================================================================
   Tratamiento — La ruta
   ========================================================================== */

.treatment{
  background:var(--larrc-celeste-vintage);
  padding:var(--space-10) var(--page-margin);
}
.treatment__inner{display:flex;flex-direction:column;gap:var(--space-8)}
.treatment__head{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  max-width:46ch;
}
.treatment__route{width:100%;height:auto;display:block}
.treatment__quote{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--fw-regular);
  font-size:var(--fs-heading);
  line-height:1.4;
  letter-spacing:var(--ls-display);
  color:var(--larrc-naranja-hocoma);
  max-width:52ch;
}

/* ==========================================================================
   Tecnología
   ========================================================================== */

.tech{padding:var(--space-10) var(--page-margin)}
.tech__inner{display:flex;flex-direction:column;gap:var(--space-8)}
.tech__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-7);
}
/* TechCard: la ilustración ya trae el fondo celeste vintage y el nombre del equipo. */
.tech-card{margin:0;display:flex;flex-direction:column;gap:var(--space-3)}
.tech-card img{width:100%;height:auto;display:block}

/* ==========================================================================
   Médicos derivadores y aseguradoras
   ========================================================================== */

.referrals{
  background:var(--larrc-azul-oscuro);
  padding:var(--space-10) var(--page-margin);
}
.referrals__inner{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:var(--space-8);
}
.referrals__copy{display:flex;flex-direction:column;gap:var(--space-5)}
.referrals__copy .body-copy{max-width:52ch}

/* ==========================================================================
   Contacto
   ========================================================================== */

.contact{padding:var(--space-10) var(--page-margin)}
.contact__inner{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:var(--space-9);
}
.contact__aside{display:flex;flex-direction:column;gap:var(--space-8);min-width:0}
.contact__intro{display:flex;flex-direction:column;gap:var(--space-4)}
.contact__intro p{
  margin:0;
  font-family:var(--font-body);
  font-weight:var(--fw-medium);
  font-size:var(--fs-body);
  line-height:1.75;
  color:var(--text-secondary);
  max-width:32ch;
}
.contact__detail{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  border-top:1px solid var(--line-subtle);
  padding-top:var(--space-5);
}
.contact__value{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  color:var(--larrc-azul-oscuro);
}

.contact__form{display:flex;flex-direction:column;gap:var(--space-5);min-width:0}
.contact__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}

/* Campos con subrayado, sin cajas */
.field{
  width:100%;
  border:none;
  border-bottom:1px solid var(--line-subtle);
  border-radius:0;
  padding:8px 0;
  outline:none;
  background:transparent;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  color:var(--larrc-azul-oscuro);
  transition:var(--transition-ui);
}
.field::placeholder{color:var(--neutral-300)}
.field:focus{border-bottom-color:var(--larrc-azul-oscuro)}
textarea.field{resize:vertical}

.contact__submit{align-self:flex-start}

/* Sólo visible para lectores de pantalla (labels de los campos) */
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer{
  padding:var(--space-8) var(--page-margin);
  border-top:1px solid var(--line-subtle);
}
.site-footer__inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-8);
}
.site-footer__logo{line-height:0}
.site-footer__logo img{height:52px;width:auto;display:block}
.site-footer__note{
  font-family:var(--font-body);
  font-size:var(--fs-body-s);
  font-weight:var(--fw-medium);
  color:var(--text-secondary);
  text-align:right;
}

/* ==========================================================================
   Responsive — el prototipo es de escritorio; aquí baja a tablet y móvil
   ========================================================================== */

/* El header se queda sin espacio antes que el resto de la maquetación: con el
   logo a tamaño completo, el menú de seis ítems ya no cabe en una línea. Se
   recorta el espacio, se baja un punto el logo y se saca "Para profesionales",
   que tiene su botón en el hero y su banda al final de la página. */
@media (max-width:1460px){
  .site-header__inner{gap:var(--space-6)}
  .site-nav{gap:var(--space-5)}
  .site-header__logo,
  .site-header__logo-img{height:34px}
  .nav-link--pro{display:none}
}

@media (max-width:1180px){
  :root{
    --page-margin:40px;
    --fs-display-xl:56px;
    --fs-display-l:44px;
  }
  .team__grid{grid-template-columns:repeat(3,1fr);gap:var(--space-7)}
  .tech__grid{grid-template-columns:repeat(2,1fr)}

  .site-nav{gap:var(--space-5)}
}

@media (max-width:860px){
  :root{
    --page-margin:24px;
    --fs-display-xl:42px;
    --fs-display-l:34px;
    --fs-display-s:24px;
    --fs-body-l:17px;
  }

  .site-header{padding:20px var(--page-margin)}
  .site-header__inner{flex-wrap:wrap;gap:var(--space-4)}
  .site-nav{order:3;width:100%;flex-wrap:wrap;gap:var(--space-5)}
  /* En móvil el menú ya ocupa dos líneas: este enlace sobra porque el botón
     "Soy profesional" del hero lleva al mismo sitio. */
  .nav-link--pro{display:none}

  section[id]{scroll-margin-top:132px}

  /* El texto se mantiene sobre la foto; baja al pie para no chocar con el menú,
     que aquí ocupa dos líneas. */
  .hero{min-height:560px;align-items:flex-end}
  .hero__title{line-height:1.2}
  .hero__copy{
    padding:var(--space-7) var(--page-margin) var(--space-8);
    max-width:none;
  }
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(35,43,45,.80) 0%,
      rgba(35,43,45,.50) 40%,
      rgba(35,43,45,.78) 100%);
  }

  .philosophy{padding:var(--space-9) var(--page-margin)}
  .philosophy__line{max-width:22ch}

  .section-head{flex-direction:column;align-items:flex-start;gap:var(--space-2)}

  .team{padding-bottom:var(--space-9)}
  .team__grid{grid-template-columns:repeat(2,1fr)}

  .pathologies,.treatment,.tech,.referrals,.contact{padding-block:var(--space-9)}
  .pathologies__inner{grid-template-columns:1fr;gap:var(--space-7)}
  .pathologies__icons{gap:var(--space-5);flex-wrap:wrap}
  .pathologies__photo{height:320px}

  .referrals__inner{grid-template-columns:1fr}
  .contact__inner{grid-template-columns:1fr;gap:var(--space-8)}
  .contact__row{grid-template-columns:1fr}

  .site-footer__inner{flex-direction:column;align-items:flex-start;gap:var(--space-5)}
  .site-footer__note{text-align:left}
}

@media (max-width:520px){
  .team__grid{grid-template-columns:1fr;gap:var(--space-6)}
  .tech__grid{grid-template-columns:1fr}
  .pathology-icon{width:72px}
}

/* ==========================================================================
   Animaciones de scroll
   Todo entra una sola vez, con fundido y un desplazamiento corto. El escalonado
   se controla con --i en cada hijo (0, 1, 2…).
   ========================================================================== */

.reveal{
  opacity:0;
  transform:translateY(22px);
  filter:blur(6px);
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out),
    filter 700ms var(--ease-out);
  transition-delay:calc(var(--i, 0) * 80ms);
}
.reveal.is-visible{opacity:1;transform:none;filter:blur(0)}

/* La ruta se descubre de izquierda a derecha, como si se recorriera. */
.reveal--wipe{
  opacity:1;
  transform:none;
  filter:none;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1400ms var(--ease-out);
}
.reveal--wipe.is-visible{clip-path:inset(0 0 0 0)}

/* Enlace de la sección en pantalla, en naranja, como en las láminas web del manual. */
.nav-link.is-active{color:var(--larrc-naranja-hocoma)}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal--wipe{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    clip-path:none !important;
    transition:none !important;
  }
}

/* ==========================================================================
   Piezas compartidas entre páginas
   ========================================================================== */

/* Bloque de dos columnas: texto y foto */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-9);
  align-items:center;
}
.split__copy{display:flex;flex-direction:column;gap:var(--space-5);min-width:0}
.split__photo{width:100%;height:560px;object-fit:cover;display:block}

.stack{display:flex;flex-direction:column;gap:var(--space-4)}

.prose p{
  margin:0 0 var(--space-4);
  font-family:var(--font-body);
  font-weight:var(--fw-medium);
  font-size:var(--fs-body);
  line-height:1.85;
  color:var(--text-secondary);
  max-width:46ch;
  text-align:justify;
  text-wrap:pretty;
}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--larrc-azul-oscuro);font-weight:var(--fw-medium)}
.prose--on-dark p{color:var(--text-on-dark-muted)}
.prose--on-dark strong{color:var(--text-on-dark)}

/* Ficha plana: filete, sin sombra ni redondeo — Card del sistema */
.card{
  border:1px solid var(--line-subtle);
  padding:var(--space-6);
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  background:var(--surface-card);
  transition:var(--transition-ui);
}
.card:hover{border-color:var(--larrc-azul-oscuro)}
.card__num{
  font-family:var(--font-display);
  font-size:var(--fs-display-s);
  line-height:1;
  color:var(--larrc-naranja-hocoma);
}
.card h3{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:var(--fw-semibold);
  color:var(--larrc-azul-oscuro);
}
.card p{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body-s);
  font-weight:var(--fw-medium);
  line-height:var(--lh-body);
  color:var(--text-secondary);
}
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5)}

/* Lista de disciplinas con filetes */
.rows{border-top:1px solid var(--line-subtle)}
.rows li{
  list-style:none;
  display:flex;
  align-items:center;
  gap:var(--space-4);
  padding:var(--space-4) 0;
  border-bottom:1px solid var(--line-subtle);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  color:var(--larrc-azul-oscuro);
}
.rows{margin:0;padding:0}
.rows li::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:var(--radius-pill);
  background:var(--larrc-naranja-hocoma);
  flex:0 0 auto;
}
.rows li:last-child{color:var(--text-secondary);font-size:var(--fs-body-s)}
.rows li:last-child::before{background:var(--celeste-600)}

/* ==========================================================================
   La ruta, paso a paso — RouteStep del sistema
   ========================================================================== */

.steps{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--space-6);
  list-style:none;
  margin:0;
  padding:0;
}
.step{display:flex;flex-direction:column;gap:var(--space-3)}
.step__num{
  width:28px;
  height:28px;
  border-radius:var(--radius-pill);
  border:1px solid var(--line-strong);
  display:grid;
  place-items:center;
  font-family:var(--font-body);
  font-size:var(--fs-micro);
  font-weight:var(--fw-semibold);
  color:var(--larrc-azul-oscuro);
}
.step__stage{
  font-family:var(--font-body);
  font-size:var(--fs-label);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--text-secondary);
}
.step h3{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  line-height:var(--lh-heading);
  color:var(--larrc-azul-oscuro);
}
.step p{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body-s);
  font-weight:var(--fw-medium);
  line-height:var(--lh-body);
  color:var(--text-secondary);
  text-align:justify;
  text-wrap:pretty;
}

/* ==========================================================================
   Banda hacia la otra página
   ========================================================================== */

.band{
  background:var(--larrc-azul-oscuro);
  padding:var(--space-9) var(--page-margin);
}
.band__inner{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:var(--space-8);
}
.band__copy{display:flex;flex-direction:column;gap:var(--space-5)}
.band__copy .body-copy{max-width:52ch}

/* ==========================================================================
   Portada de página interior (sin foto: textura de isotipo)
   ========================================================================== */

.page-hero{
  position:relative;
  overflow:hidden;
  background:var(--larrc-azul-oscuro);
  padding:calc(var(--space-10) + 40px) var(--page-margin) var(--space-10);
}
.page-hero__texture{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.16;
  pointer-events:none;
}
.page-hero__inner{position:relative;display:flex;flex-direction:column;gap:var(--space-6)}
.page-hero h1{font-size:clamp(28px, 4.2vw, var(--fs-display-m));max-width:22em}
.page-hero .body-copy{max-width:56ch}

/* Cifras del modelo */
.figures{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,220px));
  gap:var(--space-8);
  padding-top:var(--space-6);
  border-top:1px solid var(--line-on-dark);
}
.figure__num{
  font-family:var(--font-display);
  font-size:var(--fs-display-m);
  line-height:1;
  color:var(--larrc-celeste-vintage);
}
.figure p{
  margin:var(--space-2) 0 0;
  font-family:var(--font-body);
  font-size:var(--fs-body-s);
  font-weight:var(--fw-medium);
  line-height:var(--lh-body);
  color:var(--text-on-dark-muted);
}

/* ==========================================================================
   Formulario — campos select y bloques
   ========================================================================== */

select.field{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--larrc-azul-oscuro) 50%),
                   linear-gradient(135deg,var(--larrc-azul-oscuro) 50%,transparent 50%);
  background-position:calc(100% - 12px) 20px,calc(100% - 7px) 20px;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:var(--space-6);
  cursor:pointer;
}
select.field:invalid{color:var(--neutral-300)}

.form-section-label{
  font-family:var(--font-body);
  font-size:var(--fs-micro);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--larrc-naranja-hocoma);
  /* Sin filete propio: el subrayado del campo de arriba ya hace de separador. */
  padding-top:var(--space-2);
}

/* Formulario corto de una línea (página de profesionales) */
.inline-form{display:flex;gap:var(--space-4);align-items:flex-end;max-width:520px;flex-wrap:wrap}
.inline-form .field{flex:1 1 220px;color:var(--text-on-dark);border-bottom-color:var(--line-on-dark)}
.inline-form .field::placeholder{color:var(--text-on-dark-muted)}
.inline-form .field:focus{border-bottom-color:var(--larrc-blanco-hueso)}
.form-note{
  margin:var(--space-4) 0 0;
  font-family:var(--font-body);
  font-size:var(--fs-body-s);
  font-weight:var(--fw-medium);
  color:var(--text-on-dark-muted);
}

/* ==========================================================================
   Ubicación
   ========================================================================== */

.location__address{
  margin:0;
  font-family:var(--font-display);
  font-size:var(--fs-heading);
  line-height:1.6;
  letter-spacing:var(--ls-display);
  color:var(--larrc-azul-oscuro);
}

/* ==========================================================================
   Responsive de las piezas nuevas
   ========================================================================== */

@media (max-width:1180px){
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:var(--space-7)}
}

@media (max-width:860px){
  .split{grid-template-columns:1fr;gap:var(--space-7)}
  .split__photo{height:320px}
  .steps{grid-template-columns:1fr}
  .card-grid{grid-template-columns:1fr}
  .band{padding:var(--space-8) var(--page-margin)}
  .band__inner{grid-template-columns:1fr}
  .page-hero{padding-top:calc(var(--space-9) + 60px)}
  .figures{grid-template-columns:1fr 1fr;gap:var(--space-5)}
  .pathologies__icons{grid-template-columns:1fr 1fr;gap:var(--space-5)}
}

@media (max-width:520px){
  .pathologies__icons{grid-template-columns:1fr}
}

/* ==========================================================================
   La ruta — versión B: línea de tiempo que se dibuja al bajar
   Convive con la versión A (la lámina de marca) sólo mientras el cliente elige.
   Al decidir, se borra la que sobre junto con su marcador .variant.
   ========================================================================== */

.variant{
  display:flex;
  align-items:baseline;
  gap:var(--space-4);
  padding-bottom:var(--space-4);
  border-bottom:1px solid rgba(35,43,45,.2);
}
.variant__tag{
  font-family:var(--font-body);
  font-size:var(--fs-micro);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--larrc-naranja-hocoma);
}
.variant__note{
  font-family:var(--font-body);
  font-size:var(--fs-body-s);
  font-weight:var(--fw-medium);
  color:var(--text-secondary);
}

.timeline{
  position:relative;
  list-style:none;
  margin:0;
  padding:0 0 0 var(--space-8);
}
/* Riel completo y, encima, el tramo recorrido en naranja. */
.timeline::before,
.timeline__progress{
  content:"";
  position:absolute;
  left:13px;
  top:6px;
  bottom:6px;
  width:1px;
  background:rgba(35,43,45,.25);
}
.timeline__progress{
  bottom:auto;
  height:var(--progress,0%);
  background:var(--larrc-naranja-hocoma);
  transition:height 120ms linear;
}

.tl-step{
  position:relative;
  padding-bottom:var(--space-8);
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.tl-step:last-child{padding-bottom:0}

.tl-step__num{
  position:absolute;
  left:calc(var(--space-8) * -1);
  top:0;
  width:28px;
  height:28px;
  border-radius:var(--radius-pill);
  border:1px solid rgba(35,43,45,.35);
  background:var(--larrc-celeste-vintage);
  display:grid;
  place-items:center;
  font-family:var(--font-body);
  font-size:var(--fs-micro);
  font-weight:var(--fw-semibold);
  color:var(--larrc-azul-oscuro);
  transition:
    background-color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard),
    transform var(--dur-base) var(--ease-standard);
}
.tl-step.is-reached .tl-step__num{
  background:var(--larrc-naranja-hocoma);
  border-color:var(--larrc-naranja-hocoma);
  color:var(--larrc-blanco);
  transform:scale(1.12);
}

.tl-step__stage{
  font-family:var(--font-body);
  font-size:var(--fs-label);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--text-secondary);
  transition:color var(--dur-base) var(--ease-standard);
}
.tl-step.is-reached .tl-step__stage{color:var(--larrc-naranja-hocoma)}

.tl-step h3{
  margin:0;
  font-family:var(--font-display);
  font-size:var(--fs-heading);
  font-weight:var(--fw-regular);
  letter-spacing:var(--ls-display);
  line-height:var(--lh-heading);
  color:var(--larrc-azul-oscuro);
}
.tl-step p{
  margin:0;
  max-width:52ch;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:var(--fw-medium);
  line-height:var(--lh-body);
  color:var(--text-secondary);
}

@media (max-width:860px){
  .timeline{padding-left:var(--space-7)}
  .tl-step__num{left:calc(var(--space-7) * -1)}
  .timeline::before,.timeline__progress{left:13px}
  .variant{flex-direction:column;gap:var(--space-1)}
}

/* ==========================================================================
   Zoom suave del equipo dentro de su mancha celeste
   El arte trae la mancha incorporada, así que se escala la lámina entera
   dentro de un marco que recorta. Poco y rápido: la marca es plana.
   ========================================================================== */

.tech-card{overflow:hidden}
.tech-card img{
  transition:scale var(--dur-base) var(--ease-standard);
}
.tech-card:hover img,
.tech-card:focus-within img{scale:1.04}

@media (prefers-reduced-motion:reduce){
  .tech-card img{transition:none}
  .tech-card:hover img,
  .tech-card:focus-within img{scale:1}
}

/* Las cifras cuentan al entrar: se reserva el ancho para que no salte el layout. */
.figure__num{display:inline-block;min-width:1.2ch;font-variant-numeric:tabular-nums}

/* ==========================================================================
   La ruta — versión C: sección fijada, recorrido horizontal
   El bloque mide varias pantallas de alto; mientras se le pasa por encima,
   queda pegado y las etapas se desplazan de lado. Nunca aparece una barra
   de scroll horizontal: lo que se mueve es un transform.
   ========================================================================== */

.pin{position:relative;height:420vh}
.pin__stage{
  position:sticky;
  top:104px;
  height:calc(100vh - 104px);
  height:calc(100svh - 104px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--space-7);
  overflow:hidden;
}
.pin__track{
  display:flex;
  gap:var(--space-7);
  will-change:transform;
}
.pin-card{
  flex:0 0 min(420px,72vw);
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  padding:var(--space-6);
  background:rgba(255,255,255,.55);
  border-top:2px solid var(--larrc-azul-oscuro);
}
.pin-card__num{
  font-family:var(--font-display);
  font-size:var(--fs-display-m);
  line-height:1;
  color:var(--larrc-naranja-hocoma);
}
.pin-card__stage{
  font-family:var(--font-body);
  font-size:var(--fs-label);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--text-secondary);
}
.pin-card h3{
  margin:0;
  font-family:var(--font-display);
  font-size:var(--fs-heading);
  font-weight:var(--fw-regular);
  letter-spacing:var(--ls-display);
  line-height:var(--lh-heading);
  color:var(--larrc-azul-oscuro);
}
.pin-card p{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body-s);
  font-weight:var(--fw-medium);
  line-height:var(--lh-body);
  color:var(--text-secondary);
}

/* Barra de avance del recorrido */
.pin__rail{position:relative;height:1px;background:rgba(35,43,45,.2)}
.pin__bar{
  position:absolute;
  inset:0 auto 0 0;
  width:var(--progress,0%);
  background:var(--larrc-naranja-hocoma);
}

/* ==========================================================================
   La ruta — versión D: la curva se dibuja y un punto la recorre
   Retoma la forma serpenteante de la lámina de marca. El texto de la etapa
   activa se escribe debajo, para que se lea sin depender del dibujo.
   ========================================================================== */

.route{position:relative}
.route__canvas{position:relative;width:100%}
.route__svg{display:block;width:100%;height:auto;overflow:visible}
.route__line{fill:none;stroke:rgba(35,43,45,.18);stroke-width:2}
.route__drawn{fill:none;stroke:var(--larrc-naranja-hocoma);stroke-width:2;stroke-linecap:round}
.route__dot{fill:var(--larrc-naranja-hocoma)}
.route__halo{fill:rgba(255,118,57,.22)}

.route__nodes{position:absolute;inset:0;pointer-events:none}
.route__node{
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-1);
  opacity:.4;
  transition:opacity var(--dur-base) var(--ease-standard);
}
.route__node.is-on{opacity:1}
.route__node-dot{
  width:14px;
  height:14px;
  border-radius:var(--radius-pill);
  border:2px solid var(--larrc-azul-oscuro);
  background:var(--larrc-celeste-vintage);
  transition:
    background-color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    scale var(--dur-base) var(--ease-standard);
}
.route__node.is-on .route__node-dot{
  background:var(--larrc-naranja-hocoma);
  border-color:var(--larrc-naranja-hocoma);
  scale:1.25;
}
.route__node-label{
  font-family:var(--font-body);
  font-size:var(--fs-micro);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--larrc-azul-oscuro);
  white-space:nowrap;
}

.route__caption{
  margin:var(--space-7) 0 0;
  min-height:6.5em;
  max-width:52ch;
}
.route__caption-stage{
  display:block;
  font-family:var(--font-body);
  font-size:var(--fs-micro);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--larrc-naranja-hocoma);
  margin-bottom:var(--space-2);
}
.route__caption-title{
  display:block;
  font-family:var(--font-display);
  font-size:var(--fs-display-s);
  letter-spacing:var(--ls-display);
  line-height:var(--lh-heading);
  color:var(--larrc-azul-oscuro);
  margin-bottom:var(--space-2);
}
.route__caption-body{
  display:block;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:var(--fw-medium);
  line-height:var(--lh-body);
  color:var(--text-secondary);
}

/* Sin animación y en pantallas chicas, las dos versiones se vuelven listas
   normales: el contenido nunca depende del movimiento. */
@media (max-width:860px){
  .pin{height:auto}
  .pin__stage{position:static;height:auto;overflow:visible;gap:var(--space-5)}
  .pin__track{flex-direction:column;transform:none !important}
  .pin-card{flex:1 1 auto}
  .pin__rail{display:none}
  .route__nodes{display:none}
}

@media (prefers-reduced-motion:reduce){
  .pin{height:auto}
  .pin__stage{position:static;height:auto;overflow:visible}
  .pin__track{flex-direction:column;transform:none !important}
  .pin__rail{display:none}
}

/* ==========================================================================
   Piezas añadidas al alinear los textos con los HTML del cliente
   ========================================================================== */

.eyebrow--on-dark{color:var(--text-on-dark-muted)}

/* Segunda línea de un titular, en cuerpo más chico */
.display__sub{
  display:block;
  font-size:.62em;
  color:var(--text-secondary);
}

/* Los dos pilares de "Nosotros": equipo y tecnología */
.pillars{
  display:flex;
  flex-direction:column;
  gap:var(--space-5);
  padding-top:var(--space-5);
  border-top:1px solid var(--line-subtle);
}
.pillar__label{
  font-family:var(--font-body);
  font-size:var(--fs-micro);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--larrc-naranja-hocoma);
}
.pillar p{
  margin:var(--space-2) 0 0;
  font-family:var(--font-body);
  font-size:var(--fs-body-s);
  font-weight:var(--fw-medium);
  line-height:var(--lh-body);
  color:var(--text-secondary);
}

/* Etiquetas visibles sobre cada campo, como en el formulario del cliente */
.field-group{display:flex;flex-direction:column;gap:var(--space-1)}
.field-label{
  font-family:var(--font-body);
  font-size:var(--fs-micro);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--text-secondary);
}

/* Ubicación */
.location{padding:var(--space-9) var(--page-margin);background:var(--larrc-celeste-vintage)}
.location__inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:center}
.location__pending{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body-s);
  font-weight:var(--fw-medium);
  color:var(--text-secondary);
}

@media (max-width:860px){
  .location__inner{grid-template-columns:1fr;gap:var(--space-5)}
}

/* ==========================================================================
   Consentimiento de datos
   ========================================================================== */

.consent{
  display:flex;
  gap:var(--space-3);
  align-items:flex-start;
  cursor:pointer;
  padding-top:var(--space-4);
  border-top:1px solid var(--line-subtle);
}
.consent__box{
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin-top:3px;
  accent-color:var(--larrc-naranja-hocoma);
  cursor:pointer;
}
.consent__text{
  font-family:var(--font-body);
  font-size:var(--fs-body-s);
  font-weight:var(--fw-medium);
  line-height:var(--lh-body);
  color:var(--text-secondary);
  max-width:62ch;
}

/* Nota de la ubicación (con quién compartimos espacio y por dónde se entra) */
.location__note{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:var(--fw-medium);
  line-height:var(--lh-body);
  color:var(--text-secondary);
  max-width:44ch;
}

/* Botón de contorno oscuro, para fondos claros */
.btn--secondary{
  background:var(--action-secondary-bg);
  color:var(--action-secondary-fg);
  border:1px solid var(--action-secondary-border);
  align-self:flex-start;
}
.btn--secondary:hover{
  background:var(--larrc-azul-oscuro);
  color:var(--larrc-blanco-hueso);
}

/* El titular del hero pasó de tres palabras cortas a una frase larga:
   baja de cuerpo para que quepa sin comerse la foto ni empujar los botones. */
.hero__title{
  font-size:clamp(36px,4.4vw,60px);
}

/* ==========================================================================
   Mapa
   ========================================================================== */

.map{
  position:relative;
  aspect-ratio:4 / 3;
  background:var(--larrc-blanco-hueso);
  border:1px solid rgba(35,43,45,.15);
  overflow:hidden;
}
.map iframe{width:100%;height:100%;border:0;display:block}

@media (max-width:860px){
  .map{aspect-ratio:3 / 2}
}

/* Crédito de las fotografías, exigido por el fabricante de los equipos. */
.site-footer__credit{
  display:inline-block;
  margin-top:var(--space-1);
  font-size:var(--fs-micro);
  color:var(--text-muted);
}

/* Realce dentro de una etiqueta: da protagonismo a una palabra sin partir la frase. */
.eyebrow__hi{color:var(--larrc-naranja-hocoma)}