/* ============================================================
   Prototipo web informativa FRALCA — celular primero (375 px)
   Colores y fuentes del Home de Marketing: Sora y Arimo (docs/CRITERIOS.md)
   ============================================================ */

@font-face {
  font-family: 'Sora';
  src: url('/fuentes/sora.woff2') format('woff2'), url('../fuentes/Sora-Variable.ttf') format('truetype');
  font-weight: 100 800;
  font-display: swap;
}

/* Arimo servida desde la web (31-oct-2026), antes desde Google Fonts */
@font-face {
  font-family: 'Arimo';
  src: url('/fuentes/arimo.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --azul: #0047BA;
  --azul-oscuro: #003489;
  --verde: #00CE7C;
  --noche: #131E29;
  --tinte: #F4F7FC;
  --texto: #2B3440;
  --texto-suave: #5A6573;
  --borde: #DDE3EC;
  --blanco: #FFFFFF;
  --pendiente: #FFF4C2;
  --pendiente-borde: #E8C547;

  --titulos: 'Sora', system-ui, sans-serif;
  /* Arial mide igual que Arimo letra por letra: mientras Arimo llega, el texto no cambia de largo ni salta */
  --cuerpo: 'Arimo', Arial, system-ui, sans-serif;

  --radio: 16px;
  --radio-foto: 12px;
  --sombra: 0 2px 8px rgba(19, 30, 41, .06);
  --sombra-alta: 0 12px 32px rgba(0, 71, 186, .14);
  --seccion: 64px;
  --alto-encabezado: 64px;
}

@media (min-width: 900px) {
  :root { --seccion: 112px; --alto-encabezado: 76px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-encabezado) + 8px); }
body {
  margin: 0;
  background: var(--blanco);
  color: var(--texto);
  font: 1rem/1.6 var(--cuerpo);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 76px; /* espacio para la barra fija en celular */
}
@media (min-width: 900px) { body { padding-bottom: 0; } }
img, video { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { font-family: var(--titulos); color: var(--noche); line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2.25rem, 6vw, 4rem); font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -.01em; }
h3 { font-size: 1.15rem; font-weight: 700; }
/* palabra destacada del título: solo color, sin cursiva */
em, address, cite, i { font-style: normal; }
h1 em, h2 em { color: var(--azul); }
p { margin: 0 0 1em; }
a { color: var(--azul); }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 4px; }

.contenedor { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.centrado { text-align: center; margin-top: 40px; }
/* contenedor más ancho para secciones que necesitan aprovechar pantallas grandes */
.contenedor-ancho { max-width: 1480px; }

.saltar { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--azul); color: #fff; padding: 12px 16px; border-radius: 8px; }
.saltar:focus { left: 8px; }

/* ----- Marcas de dato pendiente (solo para el prototipo) ----- */
.pendiente {
  background: var(--pendiente);
  outline: 1px dashed var(--pendiente-borde);
  color: #6B5600 !important;
  border-radius: 4px;
  padding: 0 .25em;
}
.aviso-prototipo {
  background: var(--pendiente);
  color: #4A3C00;
  font-size: .85rem;
  text-align: center;
  padding: 8px 20px;
}
.aviso-prototipo .pendiente { padding: 0 .2em; }

/* ----- Antetítulo y cabecera de sección ----- */
.antetitulo {
  font-family: var(--titulos);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--azul);
  margin-bottom: .75em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.antetitulo::before { content: ''; width: 24px; height: 3px; background: var(--verde); border-radius: 2px; }
.seccion-cabecera { max-width: 640px; margin-bottom: 40px; }
.seccion-cabecera p:last-child { color: var(--texto-suave); margin-bottom: 0; }

/* ----- Botones ----- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 2px solid transparent;
  font: 700 1rem/1.2 var(--titulos);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.boton:active { transform: scale(.98); }
.boton-azul { background: var(--azul); color: #fff; }
.boton-azul:hover { background: var(--azul-oscuro); }
.boton-whatsapp, .boton-verde { background: var(--verde); color: var(--noche); }
.boton-whatsapp:hover, .boton-verde:hover { background: #00B86E; }
.boton small { font: 400 .8rem var(--cuerpo); opacity: .8; }
.boton-borde { background: transparent; color: var(--azul); border-color: var(--azul); }
.boton-borde:hover { background: var(--azul); color: #fff; }
.boton-claro { background: #fff; color: var(--azul); border-color: var(--borde); }
.boton-claro:hover { border-color: var(--azul); }
.botones { display: flex; flex-wrap: wrap; gap: 12px; }

.enlace {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font: 700 .95rem var(--titulos);
  text-decoration: none;
  color: var(--azul);
}
.enlace::after { content: '→'; transition: transform .2s; }
.enlace:hover::after { transform: translateX(4px); }

/* ----- Encabezado ----- */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
/* El desenfoque va en una capa aparte: si lo lleva el encabezado, el menú fijo de
   celular se mide contra el encabezado y no contra la pantalla */
.encabezado::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.encabezado.con-sombra { border-color: var(--borde); box-shadow: var(--sombra); }
.encabezado-fila { display: flex; align-items: center; justify-content: space-between; height: var(--alto-encabezado); gap: 24px; }
.logo img { width: 128px; height: auto; }
@media (min-width: 900px) { .logo img { width: 150px; } }

.menu-boton {
  display: grid;
  place-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 12px;
  background: var(--tinte);
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.menu-boton span { display: block; width: 22px; height: 2px; background: var(--noche); border-radius: 2px; transition: transform .2s, opacity .2s; }
.menu-boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menú en celular: panel a pantalla completa */
.menu {
  position: fixed;
  inset: var(--alto-encabezado) 0 0 0;
  background: #fff;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
/* visibility sin demora al abrir, para que el foco pueda entrar al primer enlace */
.menu.abierto { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .2s, visibility 0s; }
.menu ul a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--borde);
  font: 700 1.25rem var(--titulos);
  color: var(--noche);
  text-decoration: none;
}
.menu-acciones { display: grid; gap: 12px; }

@media (min-width: 1080px) {
  .menu-boton { display: none; }
  .menu {
    position: static;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 28px;
    visibility: visible;
    opacity: 1;
    transform: none;
    overflow: visible;
    background: none;
  }
  .menu ul { display: flex; gap: 4px; }
  .menu ul a { border: 0; padding: 8px 12px; font-size: .95rem; border-radius: 999px; }
  .menu ul a:hover, .menu ul a.activo { background: var(--tinte); color: var(--azul); }
  .menu-acciones { display: flex; gap: 8px; }
  .menu-acciones .boton { min-height: 44px; padding: 8px 18px; font-size: .9rem; }
}

/* ----- Portada ----- */
/* Celular: el video vertical ocupa todo el fondo; computadora: texto + video en marco */
.portada { position: relative; overflow: hidden; background: var(--noche); color: #fff; }
/* static: así el video (absolute) cubre toda la sección y no solo el contenedor de 1200 px */
.portada-fila { position: static; min-height: calc(100svh - var(--alto-encabezado) - 40px); display: flex; align-items: flex-end; padding-top: 48px; padding-bottom: 48px; }
.portada-texto { position: relative; z-index: 2; max-width: 620px; }
.portada h1 { color: #fff; }
.portada h1 em { color: var(--verde); }
.portada .antetitulo { color: #fff; }
.portada-bajada { font-size: 1.1rem; color: rgba(255, 255, 255, .88); max-width: 520px; margin-bottom: 28px; }
.portada .boton-claro { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.portada .boton-claro:hover { background: #fff; color: var(--azul); }

.portada-video { margin: 0; position: absolute; inset: 0; z-index: 1; }
.portada-video video { width: 100%; height: 100%; object-fit: cover; }
.portada-video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(19, 30, 41, .35) 0%, rgba(19, 30, 41, .55) 45%, rgba(19, 30, 41, .92) 100%);
  pointer-events: none;
}
.video-control {
  position: absolute;
  z-index: 3;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(19, 30, 41, .55);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.icono-pausa { width: 12px; height: 14px; border-left: 4px solid #fff; border-right: 4px solid #fff; }
.video-control.pausado .icono-pausa { width: 0; height: 0; border: 0; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }

/* Computadora: el video horizontal de fondo; el texto a la izquierda, sobre un degradado lateral */
@media (min-width: 900px) {
  .portada-fila { align-items: center; min-height: min(calc(100svh - var(--alto-encabezado) - 40px), 760px); padding-top: 72px; padding-bottom: 72px; }
  .portada-video::after {
    background: linear-gradient(90deg, rgba(19, 30, 41, .9) 0%, rgba(19, 30, 41, .7) 45%, rgba(19, 30, 41, .25) 100%);
  }
  .video-control { top: auto; bottom: 24px; right: 24px; }
}

/* ----- Cifras ----- */
.cifras { background: var(--noche); color: #fff; padding: 32px 0; }
.cifras-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
.cifras-lista li { display: flex; flex-direction: column; gap: 4px; }
.cifras-lista strong { font: 800 2.25rem/1 var(--titulos); color: var(--verde); }
.cifras-lista strong.pendiente { font-size: 1.4rem; align-self: flex-start; }
.cifras-lista li > span { font-size: .9rem; color: rgba(255, 255, 255, .78); }
@media (min-width: 900px) {
  .cifras { padding: 44px 0; }
  .cifras-lista { grid-template-columns: repeat(4, 1fr); }
  .cifras-lista li + li { border-left: 1px solid rgba(255, 255, 255, .12); padding-left: 32px; }
  .cifras-lista strong { font-size: 3rem; }
}

/* ----- Secciones ----- */
.seccion { padding: var(--seccion) 0; }
.seccion-corta { padding: calc(var(--seccion) * .7) 0; }
.fondo-tinte { background: var(--tinte); }
.fondo-oscuro { background: var(--noche); color: rgba(255, 255, 255, .85); }
.fondo-oscuro h2, .fondo-oscuro h3 { color: #fff; }
.fondo-oscuro h2 em { color: var(--verde); }
.fondo-oscuro .antetitulo { color: var(--verde); }
.fondo-oscuro .seccion-cabecera p:last-child { color: rgba(255, 255, 255, .7); }
.fondo-oscuro a { color: #fff; }

.dos-columnas { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .dos-columnas { grid-template-columns: 1fr 1fr; gap: 72px; } }

/* Misión arriba y visión debajo, a todo el ancho de la columna */
.mision-vision { display: grid; gap: 20px; margin: 28px 0 0; }
.mision-vision > div { background: var(--tinte); border-radius: var(--radio); padding: 24px 28px; border-left: 4px solid var(--verde); }
.mision-vision h3 { margin-bottom: .4em; font-size: 1.3rem; }
.mision-vision p { margin: 0; font-size: 1rem; line-height: 1.65; }

/* Mosaico de fotos de la planta (el mismo del Home): se ve completo, sin recorte */
.mosaico { margin: 0; }
.mosaico img { width: 100%; height: auto; }
/* Computadora (desde 1150 px; más angosto recortaría mucho): el mosaico ocupa todo el alto de la columna de texto, así su borde de abajo
   coincide con el de la tarjeta de Visión (recorta un poco los lados, no las fotos de arriba/abajo) */
@media (min-width: 1150px) {
  #nosotros .dos-columnas { align-items: stretch; }
  #nosotros .mosaico { position: relative; min-height: 420px; }
  #nosotros .mosaico img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}

/* ----- Tarjetas ----- */
.tarjetas { display: grid; gap: 20px; }
@media (min-width: 600px) { .tarjetas-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tarjetas-4 { grid-template-columns: repeat(4, 1fr); } }
/* 5 servicios: 2 columnas, luego 3 + 2 y en pantallas anchas las 5 en una fila */
@media (min-width: 600px) { .tarjetas-5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .tarjetas-5 { grid-template-columns: repeat(6, 1fr); } .tarjetas-5 > li { grid-column: span 2; } .tarjetas-5 > li:nth-child(4) { grid-column: 2 / span 2; } }
@media (min-width: 1200px) { .tarjetas-5 { grid-template-columns: repeat(5, 1fr); } .tarjetas-5 > li, .tarjetas-5 > li:nth-child(4) { grid-column: auto; } }
.tarjeta {
  background: #fff;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
/* Mismo efecto que las tarjetas de «Por qué FRALCA»: sube, sombra, borde y título azules */
.tarjeta h3 { transition: color .3s; }
.tarjeta:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(19, 30, 41, .12); border-color: var(--azul); }
.tarjeta:hover h3 { color: var(--azul); }
.tarjeta img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tarjeta-cuerpo { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.tarjeta-cuerpo p { color: var(--texto-suave); font-size: .95rem; flex: 1; }
.tarjeta-cuerpo .enlace { align-self: flex-start; }
.numero { font: 800 .9rem var(--titulos); color: var(--azul); margin-bottom: 6px; letter-spacing: .05em; }
.tarjeta-servicio { border: 1px solid var(--borde); box-shadow: none; }
.tarjeta-servicio img { aspect-ratio: 4 / 3; }
.tarjeta-servicio p { margin: 0; }

/* ----- Pasos ----- */
/* Pasos unidos por una línea (verde → azul) con el número dentro de un rombo.
   Celular: línea vertical a la izquierda. Computadora: 4 columnas con línea horizontal. */
.pasos { display: grid; gap: 32px; position: relative; }
.pasos li { display: grid; grid-template-columns: 64px 1fr; column-gap: 20px; align-content: start; position: relative; }
.pasos li > :not(.paso-marca) { grid-column: 2; }
.pasos li:not(:last-child)::after {
  /* tramo de línea hasta el siguiente paso */
  content: '';
  position: absolute;
  left: 31px;
  top: 64px;
  bottom: -32px;
  width: 2px;
  background: linear-gradient(180deg, var(--verde), rgba(0, 71, 186, .8));
  opacity: .6;
}
.paso-marca {
  grid-row: 1 / span 3;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}
.paso-marca::before {
  content: '';
  position: absolute;
  inset: 10px;
  transform: rotate(45deg);
  border: 2px solid var(--verde);
  border-radius: 8px;
  background: var(--noche);
  box-shadow: 0 0 0 8px rgba(0, 206, 124, .1);
  transition: background-color .3s, box-shadow .3s;
}
.paso-marca span { position: relative; font: 800 1rem var(--titulos); color: var(--verde); transition: color .3s; }
.pasos li:hover .paso-marca::before { background: var(--verde); box-shadow: 0 0 0 12px rgba(0, 206, 124, .16); }
.pasos li:hover .paso-marca span { color: var(--noche); }
.paso-etiqueta { margin: 6px 0 4px; font: 700 .72rem var(--titulos); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.pasos h3 { font-size: 1.35rem; margin-bottom: .35em; }
.pasos p:last-child { margin: 0; font-size: .95rem; color: rgba(255, 255, 255, .72); }
@media (min-width: 900px) {
  .pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .pasos::before {
    /* línea horizontal que pasa por el centro de los rombos */
    content: '';
    position: absolute;
    top: 31px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: linear-gradient(90deg, var(--verde), rgba(0, 71, 186, .9));
    opacity: .6;
  }
  .pasos li { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pasos li > :not(.paso-marca) { grid-column: 1; }
  .pasos li:not(:last-child)::after { display: none; }
  .paso-marca { grid-row: auto; margin-bottom: 16px; }
  .paso-etiqueta { margin-top: 4px; }
  .pasos p:last-child { max-width: 240px; }
}
/* Pantallas anchas: la sección ocupa más espacio (rombos, títulos y textos más grandes) */
@media (min-width: 1100px) {
  .pasos { gap: 40px; margin-top: 16px; }
  .pasos::before { top: 55px; height: 3px; }
  .paso-marca { width: 112px; height: 112px; margin-bottom: 28px; }
  .paso-marca::before { inset: 18px; border-width: 3px; border-radius: 14px; box-shadow: 0 0 0 12px rgba(0, 206, 124, .1); }
  .pasos li:hover .paso-marca::before { box-shadow: 0 0 0 18px rgba(0, 206, 124, .16); }
  .paso-marca span { font-size: 1.6rem; }
  .paso-etiqueta { font-size: .85rem; margin-bottom: 8px; }
  .pasos h3 { font-size: clamp(1.4rem, 1.6vw, 1.8rem); }
  .pasos p:last-child { max-width: 270px; font-size: 1.08rem; line-height: 1.6; }
}

/* ----- Razones ----- */
.razones { display: grid; gap: 16px; }
@media (min-width: 600px) { .razones { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .razones { grid-template-columns: repeat(3, 1fr); } }
.razones li { padding: 24px; border-radius: var(--radio); border: 1px solid var(--borde); position: relative; background: #fff; transition: transform .3s, box-shadow .3s, border-color .3s; }
.razones li::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--verde); margin-bottom: 16px; transition: width .3s; }
.razones h3 { transition: color .3s; }
/* Al pasar el cursor: la tarjeta sube, toma sombra y borde azul, y la raya verde se alarga */
.razones li:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(19, 30, 41, .12); border-color: var(--azul); }
.razones li:hover::before { width: 72px; }
.razones li:hover h3 { color: var(--azul); }
.razones p { margin: 0; color: var(--texto-suave); font-size: .95rem; }

/* ----- Galería ----- */
.filtros { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 24px; scrollbar-width: none; }
.filtros button {
  flex: none;
  min-height: 44px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: #fff;
  font: 700 .9rem var(--titulos);
  color: var(--texto);
  cursor: pointer;
}
.filtros button[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
.galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 900px) { .galeria { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.galeria li[hidden] { display: none; }
.galeria button { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radio-foto); overflow: hidden; }
.galeria img, .galeria video { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .4s; }
.galeria button:hover img, .galeria button:hover video { transform: scale(1.04); }
/* videos: se reproducen sin sonido en la cuadrícula; con clic se abren con sonido */
.etiqueta-video {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: rgba(19, 30, 41, .72);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
}
.etiqueta-video::before { content: ''; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--verde); }
.etiqueta-foto { position: absolute; left: 8px; bottom: 8px; font-size: .7rem; font-weight: 700; padding: 2px 6px; }

/* ----- Historia: hitos con foto ----- */
/* Foto en paralelogramo (como las flechas de la marca), año grande encima y texto debajo.
   Al pasar el cursor, tocarla o enfocarla: se quita el tinte azul y la tarjeta salta hacia adelante.
   Celular: una columna. Computadora: 3 por fila, colgando de una línea azul. */
.hitos { display: grid; gap: 40px; }
.hito { text-align: center; position: relative; cursor: pointer; outline: none; }
.hito-foto {
  margin: 0 auto 20px;
  position: relative;
  max-width: 340px;
  aspect-ratio: 4 / 3;
  transition: transform .35s cubic-bezier(.2, .8, .3, 1.3), filter .35s;
}
/* el recorte va en un marco interno; así la sombra (filter en la figura) no se recorta */
.hito-marco {
  position: absolute;
  inset: 0;
  clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
  overflow: hidden;
}
.hito-marco img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35); transition: transform .4s, filter .4s; }
.hito-marco::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(0, 71, 186, .72), rgba(19, 30, 41, .78));
  transition: opacity .35s;
}
/* Capa sobre la foto: el año al centro y el botón (Cómo llegar / Ir a la tienda) abajo */
.hito-capa { position: absolute; inset: 0; z-index: 1; }
.hito-anio {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 800 clamp(2.5rem, 6vw, 3.5rem)/1 var(--titulos);
  color: #fff;
  letter-spacing: -.02em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .45), 0 6px 20px rgba(0, 0, 0, .5);
}
.hito h3 { margin-bottom: .3em; }
.hito h3::after { content: ''; display: block; width: 32px; height: 3px; border-radius: 2px; background: var(--verde); margin: 8px auto 0; transition: width .35s; }
.hito p { max-width: 320px; margin: 0 auto; color: var(--texto-suave); font-size: .95rem; }
.hito-boton {
  position: absolute;
  left: 50%;
  bottom: 16px;
  translate: -50% 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  color: var(--azul);
  font: 700 .85rem var(--titulos);
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  transition: background-color .2s, color .2s, transform .2s;
}
.hito-boton::after { content: '→'; }
.hito-boton:hover { background: var(--verde); color: var(--noche); transform: translateY(-2px); }

.hito:hover .hito-foto, .hito:focus .hito-foto {
  transform: translateY(-10px) scale(1.06);
  filter: drop-shadow(0 18px 24px rgba(19, 30, 41, .3));
}
.hito:hover .hito-marco::after, .hito:focus .hito-marco::after { opacity: 0; }
.hito:hover .hito-marco img, .hito:focus .hito-marco img { filter: none; }
.hito:hover h3::after, .hito:focus h3::after { width: 56px; }

@media (min-width: 900px) {
  .hitos { grid-template-columns: repeat(3, 1fr); gap: 56px 32px; padding-top: 32px; border-top: 2px solid var(--azul); }
  /* cada hito cuelga de la línea con un trazo vertical */
  .hito::before { content: ''; position: absolute; left: 50%; top: -32px; width: 2px; height: 28px; background: var(--azul); }
  .hito:nth-child(n + 4)::before { display: none; }
}

/* ----- Contacto ----- */
/* Avatar de la empresa: en computadora queda apoyada en el borde inferior de la sección */
.avatar { width: min(100%, 340px); margin: 24px auto 0; }
@media (min-width: 900px) {
  #contacto .dos-columnas { align-items: end; }
  #contacto .formulario { align-self: center; }
  .avatar { margin: 24px 0 calc(-1 * var(--seccion)); }
}
.formulario { background: #fff; border-radius: 20px; padding: 24px; display: grid; gap: 8px; color: var(--texto); }
.formulario label { font: 700 .9rem var(--titulos); color: var(--noche); margin-top: 8px; }
.formulario input, .formulario select, .formulario textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  font: 1rem var(--cuerpo);
  color: var(--texto);
  background: #fff;
}
.formulario textarea { resize: vertical; }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: 2px solid var(--azul); border-color: var(--azul); }
.formulario .boton { margin-top: 12px; }
.formulario-error { color: #B00020; font-size: .9rem; margin: 4px 0 0; }

/* ----- Barra fija en celular ----- */
.barra-movil {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--borde);
}
.barra-movil .boton { width: 100%; }
@media (min-width: 900px) { .barra-movil { display: none; } }

/* ----- Visor de fotos y video ----- */
.visor { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.visor::backdrop { background: rgba(12, 20, 28, .94); }
.visor[open] { display: grid; place-items: center; }
.visor figure { margin: 0; display: grid; gap: 12px; justify-items: center; padding: 56px 16px; }
/* alto disponible = pantalla − márgenes de arriba y abajo (112) − pie de foto y su espacio (~40) */
.visor img, .visor figure video { max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px); width: auto; max-width: 100%; border-radius: 8px; }
/* celular acostado: menos margen para que el video no quede diminuto */
@media (max-height: 500px) {
  .visor figure { padding: 12px 72px; gap: 6px; }
  .visor img, .visor figure video { max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); }
}
.visor [hidden] { display: none; }
.visor figcaption { color: #fff; font-size: .95rem; text-align: center; }
.visor figcaption .pendiente { margin-left: 8px; font-size: .8rem; font-weight: 700; }
.visor-cerrar, .visor-flecha {
  position: fixed;
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
.visor-cerrar { top: 12px; right: 12px; }
.visor-flecha { top: 50%; transform: translateY(-50%); }
.visor-flecha.anterior { left: 12px; }
.visor-flecha.siguiente { right: 12px; }

/* ----- Menos movimiento ----- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ----- Celular: filas que se deslizan de lado (30-oct-2026, referencia Farmatodo) -----
   Líneas, servicios, razones e historia iban una tarjeta debajo de otra (unas 19 pantallas de alto).
   En celular cada grupo es una fila que se desliza con el dedo: la tarjeta siguiente asoma
   por la derecha para que se note que hay más, y cada tarjeta se detiene alineada al borde. */
@media (max-width: 599px) {
  .tarjetas, .razones, .hitos {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    /* la fila llega a los bordes de la pantalla; el relleno deja el margen de siempre */
    margin-inline: -20px;
    padding: 8px 20px 16px;
    scrollbar-width: none;
  }

/* Arimo servida desde la web (31-oct-2026), antes desde Google Fonts */
@font-face {
  font-family: 'Arimo';
  src: url('/fuentes/arimo.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
  .tarjetas::-webkit-scrollbar, .razones::-webkit-scrollbar, .hitos::-webkit-scrollbar { display: none; }
  .tarjetas > li, .razones > li, .hitos > li { flex: 0 0 80%; scroll-snap-align: start; }
  .razones > li { flex-basis: 72%; }
  /* la foto del hito crece al tocarla: espacio arriba para que no se corte */
  .hitos { padding-top: 24px; }
  /* en una fila deslizable, «subir» la tarjeta al tocarla la cortaría arriba */
  .tarjeta:hover, .razones li:hover { transform: none; }
}

/* Texto solo para lectores de pantalla (completa el nombre de un enlace sin cambiar lo que se ve) */
.solo-lector { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Botón de pausa del video de portada oculto (31-oct-2026, pedido del dueño). El video ya no se reproduce
   para quien pidió «reducir movimiento» o ahorro de datos. Para volver a mostrarlo, borrar esta regla. */
.video-control { display: none !important; }