/* Portada: web de servicio con secciones que cambian de color. La reserva (reservar.html) conserva la lógica de app. */
.lu { width: 1em; height: 1em; flex-shrink: 0; }
.tile .lu { width: 24px; height: 24px; }

/* Hero azul noche */
.hero-wrap { position: relative; overflow: hidden; padding-bottom: 96px; background: linear-gradient(160deg, #051B54 0%, #072A7A 55%, #093095 100%); color: #FFFFFF; }
.hero-wrap::before { content: ""; position: absolute; right: -140px; top: -80px; width: 620px; height: 620px; background: url('/img/icono.svg') no-repeat center / contain; opacity: 0.07; pointer-events: none; }
.hero-wrap::after { content: ""; position: absolute; left: -200px; bottom: -260px; width: 520px; height: 520px; border-radius: 999px; background: radial-gradient(closest-side, rgba(0,133,255,0.28), transparent); pointer-events: none; }
.top.sobre-oscuro { position: relative; z-index: 2; padding-top: 18px; padding-bottom: 6px; }
.top .logo { display: block; width: 132px; height: auto; }
.dos-col-donde .oficinas { grid-template-columns: 1fr; }
.top.sobre-oscuro nav a { color: rgba(255,255,255,0.85); }
.top.sobre-oscuro nav a:hover { color: #FFFFFF; }
.btn-blanco { background: #FFFFFF; color: var(--royal); box-shadow: 0 8px 20px rgba(0,0,0,0.18); }
.btn-blanco:hover { color: var(--midnight); background: #F8F9FF; }
.btn-linea { background: transparent; color: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.55); }
.btn-linea:hover { color: #FFFFFF; box-shadow: inset 0 0 0 1.5px #FFFFFF; }
.top.sobre-oscuro .btn-ghost { color: var(--royal); }
.hero { position: relative; z-index: 1; padding: 22px 20px 0; }
.hero h1 { color: #FFFFFF; font-weight: 600; letter-spacing: -0.03em; }
.hero .sub { color: rgba(255,255,255,0.78); }
.chip-claro { background: rgba(255,255,255,0.14); color: #FFFFFF; }
.chip-claro .lu { color: #8FB4FF; }
.pruebas { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pruebas li { display: flex; align-items: center; gap: 10px; font-size: 0.93rem; color: rgba(255,255,255,0.88); }
/* El icono lleva el azul del logotipo sobre una placa translúcida: da color sin
   ensuciar el fondo, y es el mismo acento que ya tiene la marca. */
.tile-prueba { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 10px; background: rgba(0,133,255,0.18); border: 1px solid rgba(0,133,255,0.32); color: #5AAEFF; }
.tile-prueba .lu { width: 16px; height: 16px; }
.hero-persona { position: relative; margin: 18px auto -96px; width: min(78%, 360px); }
/* Detrás de ella, uno de los chevrones del logotipo. Muy bajo de opacidad:
   se lee como marca de agua, no como un elemento más. */
.hero-persona::after { content: ""; position: absolute; left: 24%; bottom: 12%; width: 74%; aspect-ratio: 70 / 106; transform: translateX(-50%); background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22137%20123%2070%20106%22%3E%3Cpath%20d%3D%22M%20192%20138%20L%20152%20176%20L%20192%20214%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%2230%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; opacity: 0.13; pointer-events: none; }
.hero-persona img { position: relative; z-index: 1; display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 95%); mask-image: linear-gradient(to bottom, #000 70%, transparent 95%); }
.hero-card-wrap { position: relative; z-index: 2; margin-top: -40px; }
.hero-card { margin: 0; }
.hero .acciones-hero { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.hero .acciones-hero .btn { width: 100%; }

/* Bandas */
.banda { padding: 56px 0; }
.banda-ghost { background: var(--ghost); }
.banda-blanca { background: #FFFFFF; }
.banda-lavanda { background: var(--lavender); }
.banda-lavanda .card { box-shadow: 0 6px 24px rgba(9,48,149,0.10); }
.banda-royal { background: var(--royal); color: #FFFFFF; }
.banda-noche { background: var(--midnight); color: #FFFFFF; }
#por-que { padding-top: 56px; }
.cabeza { margin-bottom: 22px; }
.cabeza h2 { margin-bottom: 8px; }
.cabeza-clara h2, .banda-noche h2 { color: #FFFFFF; }
.cabeza-clara p, .banda-noche p { color: rgba(255,255,255,0.78); }
.cabeza-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cabeza-fila h2 { margin-bottom: 0; }
.rejilla-4, .rejilla-3 { display: grid; grid-template-columns: 1fr; gap: 12px; }
.rasgo, .entrevista { padding: 20px; }
.rasgo h3, .entrevista h3 { margin-top: 14px; }
.rasgo p, .entrevista p { margin-top: 6px; }
.pie-tarjeta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.precio-tag { font-family: 'Poppins', sans-serif; font-size: 1.6rem; font-weight: 700; color: var(--midnight); letter-spacing: -0.02em; }
.btn-chico { min-height: 44px; padding: 0 18px; font-size: 0.95rem; border-radius: 12px; box-shadow: none; }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; counter-reset: paso; }
.paso-card { position: relative; padding: 20px 20px 20px 20px; }
.paso-card .num { position: absolute; top: 16px; right: 16px; font-family: 'Poppins', sans-serif; font-size: 2rem; font-weight: 700; color: var(--lavender); line-height: 1; }
.paso-card h3 { margin-top: 14px; }
.paso-card p { margin-top: 6px; }
.precios { display: grid; grid-template-columns: 1fr; gap: 12px; }
.precio-card { padding: 24px 22px; color: var(--charcoal); }
.precio-card .etiqueta { font-weight: 600; color: var(--muted); }
.precio-card .cifra { font-family: 'Poppins', sans-serif; font-size: 3.4rem; font-weight: 700; color: var(--midnight); letter-spacing: -0.03em; line-height: 1; margin-top: 6px; }
.incluye { list-style: none; margin: 18px 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.incluye li { display: flex; align-items: flex-start; gap: 10px; }
.incluye .lu { color: var(--royal); margin-top: 3px; }
.precio-card .btn { width: 100%; }
.notas-precio { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.notas-precio span { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,0.85); font-size: 0.95rem; }
.notas-precio .lu { color: #8FB4FF; }
.dos-col-donde .oficinas { margin-top: 4px; }
.oficina .tile { width: 44px; height: 44px; border-radius: 14px; }
.resenas .resena p { margin-top: 12px; }
.resena .cab .texto { display: flex; flex-direction: column; gap: 3px; }
.estrellas { display: inline-flex; gap: 1px; color: #F5A524; width: auto; height: auto; }
.estrellas .lu { width: 11px; height: 11px; fill: currentColor; }
.chip .lu { color: var(--royal); }
.cierre { display: flex; flex-direction: column; gap: 22px; }
.cierre .acciones-hero { display: flex; flex-direction: column; gap: 10px; }
.pie-web { padding: 44px 0 120px; }
.pie-cols { display: grid; grid-template-columns: 1fr; gap: 26px; }
.pie-cols .logo { height: 24px; width: auto; }
.pie-cols .contacto { margin-top: 14px; color: var(--muted); font-size: 0.93rem; line-height: 1.7; }
.pie-col { display: flex; flex-direction: column; gap: 9px; }
.pie-col b { color: var(--midnight); margin-bottom: 2px; }
.pie-col a { color: var(--charcoal); }
.pie-col a:hover { color: var(--royal); }

@media (min-width: 900px) {
  .top .logo { width: 176px; }
  .top.sobre-oscuro { padding-top: 24px; padding-bottom: 10px; }
  .dos-col-donde .oficinas { grid-template-columns: 1fr; }
  .top.sobre-oscuro .acciones .btn-ghost { background: rgba(255,255,255,0.12); color: #FFFFFF; box-shadow: none; }
  .top.sobre-oscuro .acciones .btn-ghost:hover { background: rgba(255,255,255,0.2); }
  .google-chip { gap: 8px; padding: 7px 15px 7px 9px; }
  .google-chip img { width: 20px; height: 20px; }
  .google-chip .nota { font-size: 1rem; }
  .estrellas .lu { width: 12px; height: 12px; }
  .hero-wrap::before { right: auto; left: 46.6%; top: 105px; width: 71px; height: 108px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2293%2071%2070%20106%22%3E%3Cpath%20d%3D%22M%20108%2086%20L%20148%20124%20L%20108%20162%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%2230%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; opacity: 0.07; }
  .hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 64px; align-items: center; padding: 56px 40px 0; }
  .hero h1 { font-size: 3.9rem; }
  .hero .sub { font-size: 1.2rem; max-width: 560px; margin-top: 22px; }
  .hero .acciones-hero { flex-direction: row; margin-top: 32px; }
  .hero .acciones-hero .btn { width: auto; border-radius: 999px; min-height: 56px; padding: 0 30px; }
  .pruebas { flex-direction: row; gap: 26px; margin-top: 30px; }
  .hero { align-items: end; }
  .hero-texto { padding-bottom: 96px; }
  .hero-persona { margin: 0 0 -150px auto; width: min(100%, 450px); }
  /* Anclado al borde DERECHO de ella, no a un `left` en %: el ancho de la columna
     encoge con la ventana, y un `left` medido en un lienzo de 1440 se sale del
     hero (que recorta con overflow:hidden) en ventanas de ~1000. Con `right`
     negativo el chevron mantiene su sitio a la derecha de ella y nunca se corta. */
  .hero-persona::after { left: auto; right: -18%; bottom: 19.2%; width: 72%; transform: none; }
  .hero-persona img { -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 93%); mask-image: linear-gradient(to bottom, #000 68%, transparent 93%); }
  .hero-wrap { padding-bottom: 150px; }
  .hero-card-wrap { max-width: 820px; margin: -112px auto 0; padding: 0 40px; }
  .hero-card { margin: 0; }
  .banda { padding: 84px 0; }
  #por-que { padding-top: 84px; }
  .cabeza { margin-bottom: 34px; max-width: 720px; }
  .rejilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .rasgo, .entrevista { padding: 26px; }
  .pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .precios { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 900px; }
  .precio-card { padding: 30px 28px; }
  .notas-precio { flex-direction: row; flex-wrap: wrap; gap: 28px; margin-top: 28px; }
  .dos-col-donde { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 60px; align-items: start; }
  .dos-col-donde .cabeza { margin-bottom: 0; }
  .cierre { flex-direction: row; align-items: center; justify-content: space-between; gap: 60px; }
  .cierre .acciones-hero { flex-direction: row; flex-shrink: 0; }
  .cierre .acciones-hero .btn { border-radius: 999px; min-height: 56px; padding: 0 30px; }
  .pie-web { padding: 60px 0 60px; }
  .pie-cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
}

/* Nuestro equipo */
.equipo { display: grid; grid-template-columns: 1fr; gap: 16px; }
.persona { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 18px; align-items: end; background: #FFFFFF; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
.persona-foto { position: relative; align-self: stretch; min-height: 168px; background: linear-gradient(180deg, #EEF2FC 0%, var(--lavender) 100%); }
.persona-foto::before { content: ""; position: absolute; left: 50%; bottom: -30%; width: 140%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 999px; background: radial-gradient(closest-side, rgba(0,133,255,0.22), transparent); }
.persona-foto img { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 88%; height: 92%; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 12px 18px rgba(5,27,84,0.18)); }
.persona-texto { padding: 22px 22px 22px 0; }
.persona-texto h3 { font-size: 1.25rem; }
.persona-texto .rol { display: inline-block; margin: 6px 0 10px; padding: 4px 10px; border-radius: 999px; background: var(--ghost); color: var(--royal); font-size: 0.8rem; font-weight: 600; }
.persona-texto p { font-size: 0.95rem; }
.hechos { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hechos li { display: flex; align-items: center; gap: 10px; }
.hechos .lu { color: var(--royal); }

/* Opiniones */
.google-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 8px; border-radius: 999px; background: #FFFFFF; box-shadow: var(--shadow); color: var(--midnight); font-weight: 700; }
.google-chip img { width: 18px; height: 18px; }
.google-chip .nota { font-size: 0.95rem; letter-spacing: -0.01em; }
/* En el hero va sobre el azul, así que la pastilla blanca hace de acento. */
.hero .google-chip-hero { margin-bottom: 20px; box-shadow: 0 8px 22px rgba(5,27,84,0.32); }
.avatar-img { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; flex-shrink: 0; background: var(--lavender); }
.resena .cab { align-items: center; }

@media (min-width: 900px) {
  .equipo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .persona { grid-template-columns: 210px minmax(0, 1fr); gap: 26px; }
  .persona-foto { min-height: 250px; }
  .persona-texto { padding: 30px 28px 30px 0; }
  .hechos { flex-direction: row; flex-wrap: wrap; gap: 14px 28px; }
}

/* ── Hero v3 ──────────────────────────────────────────────
   Una sola idea: la entrevista, interpretada. La foto va enmarcada, como un
   fotograma, y abajo la pregunta del oficial en inglés con su interpretación
   detrás del chevron del logotipo, a modo de subtítulo. */
.hero h1 { text-wrap: balance; }
.btn-texto { background: transparent; color: #FFFFFF; box-shadow: none; padding: 0 6px; }
.btn-texto:hover { color: #FFFFFF; opacity: 0.8; }
.btn-texto .lu { color: #5AAEFF; }

.hero-persona { margin: 28px 0 0; width: 100%; }
.marco { position: relative; z-index: 1; margin: 0; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; background: #0A2466; box-shadow: 0 30px 60px -20px rgba(2,12,40,0.55), 0 0 0 1px rgba(255,255,255,0.10); }
.marco img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.marco::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to bottom, rgba(5,27,84,0) 0%, rgba(5,27,84,0.72) 55%, rgba(5,27,84,0.92) 100%); pointer-events: none; }
.marco .interpreta { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 0 22px 22px; }
.interpreta p { margin: 0; line-height: 1.3; transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1), filter .45s ease; }
.interpreta .en { color: rgba(255,255,255,0.72); font-size: 0.9rem; }
.interpreta .es { display: flex; align-items: flex-start; gap: 10px; margin-top: 6px; color: #FFFFFF; font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; transition-delay: .35s; }
.interpreta .chev-marca { width: 10px; height: 15px; margin-top: 5px; flex-shrink: 0; color: #0085FF; }
.interpreta.sale p { opacity: 0; transform: translateY(-6px); filter: blur(3px); transition-delay: 0s; }
.interpreta.entra p { opacity: 0; transform: translateY(8px); filter: blur(3px); transition: none; }

@media (max-width: 899px) {
  .hero .acciones-hero .btn-texto { display: none; }
  .hero { display: flex; flex-direction: column; }
  .hero-texto { display: contents; }
  .hero .google-chip-hero { align-self: flex-start; }
  .hero .acciones-hero { order: 2; margin-top: 18px; }
  .hero-persona { order: 1; }
  .hero-persona { margin: 26px 0 0; }
  .hero-persona::after { display: none; }
  .marco { aspect-ratio: 16 / 10; border-radius: 22px; }
  .marco img { object-position: 50% 40%; }
  .marco::after { inset: 30% 0 0; }
  .interpreta .en { font-size: 0.8rem; }
  .interpreta .es { font-size: 0.98rem; margin-top: 4px; }
  .marco .interpreta { padding: 0 16px 14px; }
  .hero-card-wrap { margin-top: 0; }
  .hero-wrap { padding-bottom: 76px; }
  .hero-card-wrap { margin-top: -44px; }
  .barra .btn { white-space: nowrap; padding: 0 18px; }
  .barra .btn-ghost { width: auto; }
}

@media (min-width: 900px) {
  .hero h1 { font-size: clamp(3.4rem, 5.2vw, 4.6rem); line-height: 1.02; letter-spacing: -0.035em; }
  .hero { align-items: center; }
  .hero-texto { padding-bottom: 0; }
  .hero .acciones-hero { align-items: center; gap: 18px; }
  .hero .acciones-hero .btn-texto { padding: 0 6px; min-height: 56px; }
  .hero-persona { position: relative; margin: 0 0 0 auto; width: min(100%, 440px); }
  /* El chevron del logotipo asoma por detrás del marco, a la derecha. */
  .hero-persona::after { left: auto; right: -22%; bottom: 14%; width: 62%; transform: none; opacity: 0.10; }
  .hero-wrap { padding-bottom: 170px; }
  .marco { border-radius: 32px; }
  .marco .interpreta { padding: 0 28px 28px; }
  .interpreta .en { font-size: 1rem; }
  .interpreta .es { font-size: 1.3rem; }
  .interpreta .chev-marca { width: 11px; height: 17px; margin-top: 7px; }
  .top nav { gap: 26px; white-space: nowrap; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .top nav { gap: 20px; font-size: 0.95rem; }
  .top .acciones .tel-corto { display: inline-flex; background: rgba(255,255,255,0.12); color: #FFFFFF; box-shadow: none; }
  .top .acciones .tel-largo.btn-ghost { display: none; }
  .hero { gap: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .interpreta p { transition: opacity .4s ease; }
  .interpreta.sale p, .interpreta.entra p { transform: none; filter: none; }
}

/* Confianza: el sello propio con los arcos del logotipo animados, y debajo
   los logos de siempre con el de USCIS al centro. */
.confianza { display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; }
.sello { width: 168px; height: 168px; color: var(--midnight); flex-shrink: 0; }
/* Los dos arcos del logotipo giran sin parar, despacio. */
.arcos { transform-box: fill-box; transform-origin: center; animation: arcos-gira 16s linear infinite; }
@keyframes arcos-gira { to { transform: rotate(360deg); } }
.confianza-texto h2 { margin-bottom: 10px; text-wrap: balance; }
.confianza-texto p { text-wrap: pretty; }
.credenciales { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.credenciales img { width: 44px; height: 44px; object-fit: contain; }
.credenciales .uscis { width: 66px; height: 66px; }

.oferta-wrap { max-width: 820px; }
.oferta-wrap .hero-card { margin: 0; }
@media (max-width: 899px) {
  .hero-wrap { padding-bottom: 48px; }
}
@media (min-width: 900px) {
  .confianza { flex-direction: row; align-items: center; gap: 64px; max-width: 1000px; text-align: left; }
  .sello { width: 220px; height: 220px; }
  .confianza-texto h2 { font-size: 2.1rem; }
  .confianza-texto p { font-size: 1.08rem; max-width: 620px; }
  .credenciales { justify-content: flex-start; gap: 30px; }
  .credenciales img { width: 58px; height: 58px; }
  .credenciales .uscis { width: 86px; height: 86px; }
  .hero-wrap { padding-bottom: 110px; }
  .oferta-wrap { padding: 0 40px; }
}

/* Nuestros servicios: filas ligeras separadas por una línea fina. El icono es
   el formulario de cada entrevista, el número que la persona ve en su carta.
   Al abrir la fila, la hoja se llena de azul. */
.servicios-wrap { max-width: 900px; }
.servicios-wrap h2 { margin-bottom: 14px; }
.servicios { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.servicio { border-bottom: 1px solid var(--line); }
.servicio-cab { display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px 2px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.formulario { position: relative; width: 46px; height: 58px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 8px 7px; border-radius: 8px; background: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--line); clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%); transition: background .3s ease, box-shadow .3s ease; }
.formulario::before { content: ""; position: absolute; right: 0; top: 0; width: 13px; height: 13px; border-bottom-left-radius: 4px; background: var(--lavender); transition: background .3s ease; }
.formulario i { display: block; width: 22px; height: 2px; margin-bottom: 4px; border-radius: 2px; background: var(--line); transition: background .3s ease; }
.formulario i + i { width: 14px; margin-bottom: 6px; }
.formulario b { font-size: 11px; font-weight: 700; letter-spacing: -0.01em; line-height: 1; color: var(--royal); transition: color .3s ease; }
.servicio.abierto .formulario { background: var(--royal); box-shadow: none; }
.servicio.abierto .formulario::before { background: #3D63C9; }
.servicio.abierto .formulario i { background: rgba(255,255,255,0.3); }
.servicio.abierto .formulario b { color: #FFFFFF; }
.servicio-nombre { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.servicio-nombre b { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; color: var(--midnight); }
.servicio-nombre span { font-size: 0.9rem; color: var(--muted); }
.servicio-precio { font-weight: 700; font-size: 1.1rem; color: var(--royal); letter-spacing: -0.01em; }
.servicio-cab .mas { width: 20px; height: 20px; flex-shrink: 0; color: #9AA5C2; transition: transform .35s cubic-bezier(.2,.7,.2,1), color .2s ease; }
.servicio-cab .mas .v { transition: opacity .2s ease; }
.servicio.abierto .mas { transform: rotate(180deg); color: var(--royal); }
.servicio.abierto .mas .v { opacity: 0; }
.servicio-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.2,.7,.2,1); }
.servicio.abierto .servicio-panel { grid-template-rows: 1fr; }
.servicio-cuerpo { overflow: hidden; min-height: 0; display: grid; grid-template-columns: 1fr; gap: 18px; padding: 0 2px 0 64px; opacity: 0; transition: opacity .3s ease, padding .4s cubic-bezier(.2,.7,.2,1); }
.servicio.abierto .servicio-cuerpo { padding: 0 2px 24px 64px; opacity: 1; transition-delay: .08s, 0s; }
.servicio-info p { color: var(--charcoal); }
.cifra-servicio { margin-top: 14px; color: var(--muted) !important; }
.cifra-servicio b { display: block; font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; color: var(--midnight); }
.servicio-incluye .incluye { margin: 0 0 18px; }
.servicio-incluye .btn { width: 100%; box-shadow: none; }
@media (max-width: 899px) {
  .servicio-cuerpo, .servicio.abierto .servicio-cuerpo { padding-left: 2px; }
}
@media (min-width: 900px) {
  .servicios-wrap h2 { font-size: 2.1rem; margin-bottom: 24px; }
  .servicio-cab { padding: 22px 4px; gap: 22px; }
  .formulario { width: 52px; height: 66px; padding: 0 0 9px 8px; }
  .formulario b { font-size: 12.5px; }
  .servicio-nombre b { font-size: 1.45rem; }
  .servicio-precio { font-size: 1.3rem; }
  .servicio-cuerpo { grid-template-columns: 1.1fr 1fr; gap: 48px; padding: 0 4px 0 78px; }
  .servicio.abierto .servicio-cuerpo { padding: 0 4px 30px 78px; }
}
@media (prefers-reduced-motion: reduce) {
  .servicio-panel, .servicio-cuerpo, .servicio-cab .mas, .formulario { transition: none; }
}

/* Hero: la ubicación junto a la nota de Google. Mucha visita llega de fuera
   de Florida; así se ve desde el primer vistazo que el servicio es en Miami. */
.chips-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; }
.hero .chips-hero .google-chip-hero { margin-bottom: 0; }
.chip-lugar { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 11px; border-radius: 999px; background: rgba(255,255,255,0.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); color: #FFFFFF; font-weight: 600; font-size: 0.95rem; }
.chip-lugar .lu { width: 16px; height: 16px; color: #5AAEFF; }
@media (max-width: 899px) { .chips-hero { align-self: flex-start; } }
@media (min-width: 900px) { .chip-lugar { height: 40px; } }

/* Cómo funciona: el video del explicador y debajo los cinco pasos por escrito. */
.funciona h2 { margin-bottom: 22px; }
.funciona-cuerpo { display: grid; grid-template-columns: 1fr; gap: 28px; }
.funciona-video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 26px; background: var(--ghost); box-shadow: 0 24px 50px -24px rgba(9,48,149,0.35); }
.pasos-lista { list-style: none; margin: 0; padding: 0; }
.pasos-lista li { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid rgba(9,48,149,0.14); }
.pasos-lista li:first-child { border-top: 0; padding-top: 0; }
.paso-n { width: 34px; height: 34px; flex-shrink: 0; border-radius: 999px; background: var(--midnight); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95rem; }
.pasos-lista h3 { margin-top: 4px; }
.pasos-lista p { margin-top: 4px; }
@media (min-width: 900px) {
  .funciona h2 { font-size: 2.1rem; margin-bottom: 34px; }
  .funciona-cuerpo { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 64px; align-items: center; }
}

/* Reproductor del explicador: un botón chico con el avance en un anillo fino.
   Arranca solo al verse, una vez; al terminar queda el botón de volver a ver. */
.reproductor { position: relative; }
.reproductor .funciona-video { cursor: pointer; }
.rep-boton { position: absolute; right: 14px; bottom: 14px; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 999px; background: rgba(5,27,84,0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #FFFFFF; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; transition: transform .15s ease, background .2s ease; }
.rep-boton:active { transform: scale(0.94); }
.rep-anillo { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rep-anillo circle { fill: none; stroke-width: 2; }
.rep-anillo .pista { stroke: rgba(255,255,255,0.22); }
.rep-anillo .avance { stroke: #FFFFFF; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.rep-ic { position: relative; width: 18px; height: 18px; fill: currentColor; display: none; }
.ic-otra { fill: none; }
.reproductor[data-estado="pausa"] .ic-play, .reproductor[data-estado="fin"] .ic-otra, .reproductor[data-estado="play"] .ic-pausa { display: block; }
.reproductor[data-estado="pausa"] .ic-play { margin-left: 2px; }
@media (min-width: 900px) { .rep-boton { right: 18px; bottom: 18px; } }

/* Desplegables: el chevron del logotipo en lugar de más/menos o la flecha.
   Cerrado apunta a la derecha; al abrir gira hacia abajo y toma el azul. */
.chev-logo { width: 11px; height: 17px; flex-shrink: 0; color: #9AA5C2; transition: transform .35s cubic-bezier(.2,.7,.2,1), color .2s ease; }
.servicio-cab .chev-logo { margin: 0 4px 0 6px; }
.servicio.abierto .chev-logo, .faq details[open] summary .chev-logo { transform: rotate(90deg); color: #0085FF; }
.faq summary svg.chev-logo { width: 11px; height: 17px; }
.faq details[open] summary svg.chev-logo { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .chev-logo { transition: none; } }

/* A dónde vamos: la oficina real de USCIS en video y las cinco oficinas, cada
   una abre Google Maps. Al pasar el cursor la fila solo cambia de color. */
.donde { display: grid; grid-template-columns: 1fr; gap: 26px; }
.donde-media { border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--lavender); box-shadow: 0 24px 50px -24px rgba(9,48,149,0.35); }
.donde-media video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
.donde-texto h2 { margin-bottom: 10px; }
.ofi-lista { margin-top: 22px; border-top: 1px solid var(--line); }
.ofi-fila { display: flex; align-items: center; gap: 14px; padding: 14px 10px 14px 4px; border-bottom: 1px solid var(--line); color: inherit; transition: background .25s ease, transform .25s cubic-bezier(.2,.7,.2,1); }
.ofi-pin { width: 42px; height: 42px; flex-shrink: 0; border-radius: 13px; background: var(--lavender-soft); color: var(--royal); display: flex; align-items: center; justify-content: center; transition: background .25s ease, color .25s ease; }
.ofi-pin svg { width: 20px; height: 20px; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.ofi-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ofi-txt b { font-weight: 600; color: var(--midnight); }
.ofi-txt span { font-size: 0.9rem; color: var(--muted); }
.ofi-fila .chev-logo { transition: transform .3s cubic-bezier(.2,.7,.2,1), color .2s ease; }
.ofi-fila:active { background: var(--ghost); }
@media (hover: hover) {
  .ofi-fila:hover { background: var(--ghost); color: inherit; }
  .ofi-fila:hover .ofi-pin { background: var(--royal); color: #FFFFFF; }
  .ofi-fila:hover .chev-logo { color: #0085FF; }
}
@media (min-width: 900px) {
  .donde { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 64px; align-items: center; }
  .donde-media { aspect-ratio: 4 / 5; }
  .donde-texto h2 { font-size: 2.1rem; }
  .donde-texto p { font-size: 1.08rem; }
}
@media (prefers-reduced-motion: reduce) { .ofi-fila, .ofi-pin svg, .ofi-fila .chev-logo { transition: none; } }

/* Conoce a nuestro equipo: retratos 4:5 (por ahora la inicial sobre lavanda
   con el chevron del logotipo, hasta tener fotos). En el teléfono, carrusel
   con la siguiente tarjeta asomando; en escritorio, texto a la izquierda. */
.equipo-v2 { display: grid; grid-template-columns: 1fr; gap: 24px; }
.equipo-cab h2 { margin-bottom: 10px; text-wrap: balance; }
.miembros { display: grid; grid-auto-flow: column; grid-auto-columns: 70%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -20px; padding: 4px 20px 8px; scroll-padding: 0 20px; }
.miembros::-webkit-scrollbar { display: none; }
.miembro { scroll-snap-align: start; }
.retrato { position: relative; aspect-ratio: 4 / 5; border-radius: 26px; overflow: hidden; background: linear-gradient(160deg, #E6ECFA 0%, var(--lavender) 100%); }
.retrato .inicial { position: absolute; left: 22px; bottom: 6px; font-size: 7.5rem; font-weight: 600; line-height: 1; letter-spacing: -0.05em; color: var(--midnight); opacity: 0.12; }
.retrato-chev { position: absolute; right: -8%; top: 12%; width: 46%; color: #FFFFFF; opacity: 0.55; }
.retrato.con-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.retrato.con-foto { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.retrato.con-foto::after { content: ""; position: absolute; inset: 0; }
.miembro h3 { margin-top: 16px; font-size: 1.3rem; letter-spacing: -0.02em; }
.rol-txt { margin-top: 2px; font-size: 0.92rem; font-weight: 600; color: var(--royal); }
.miembro .muted { margin-top: 8px; font-size: 0.95rem; }
.miembro-red { display: inline-flex; margin-top: 12px; color: var(--muted); opacity: 0.7; transition: color .2s, opacity .2s; }
.miembro-red svg { width: 18px; height: 18px; }
.miembro-red:hover, .miembro-red:focus-visible { color: #0A66C2; opacity: 1; }
@media (min-width: 900px) {
  .equipo-v2 { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 64px; align-items: start; }
  .equipo-cab { padding-bottom: 8px; }
  .equipo-cab h2 { font-size: 2.4rem; line-height: 1.08; }
  .equipo-cab p { font-size: 1.08rem; }
  .miembros { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; gap: 24px; overflow: visible; margin: 0; padding: 0; }
  .retrato .inicial { font-size: 9rem; }
}

/* Reseñas: fondo azul noche. A la izquierda la nota de Google en grande; a la
   derecha una reseña destacada a tamaño de titular; debajo, el resto en tarjetas
   (carrusel en el teléfono, rejilla en escritorio). La frase clave de cada reseña
   va resaltada, sin tocar sus palabras. */
.resenas-v2 { background: radial-gradient(120% 80% at 85% 0%, #0B3AA8 0%, rgba(11,58,168,0) 60%), linear-gradient(170deg, #051B54 0%, #072A7A 100%); color: #FFFFFF; overflow: hidden; }
.resenas-v2 h2 { color: #FFFFFF; text-wrap: balance; }
.res-top { display: grid; grid-template-columns: 1fr; gap: 30px; }
.nota-google { display: inline-flex; align-items: center; gap: 16px; margin-top: 20px; color: #FFFFFF; }
.nota-google:hover { color: #FFFFFF; }
.nota-num { font-size: 4.6rem; font-weight: 700; letter-spacing: -0.05em; line-height: 0.9; }
.nota-lado { display: flex; flex-direction: column; gap: 8px; }
.nota-lado .g { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: rgba(255,255,255,0.85); }
.nota-lado .g img { width: 20px; height: 20px; background: #FFFFFF; border-radius: 999px; padding: 2px; }
.est5 { display: inline-flex; gap: 2px; color: #F5B829; }
.est5 svg { width: 16px; height: 16px; fill: currentColor; }
.nota-lado .est5 svg { width: 20px; height: 20px; }
.resenas-v2 mark { background: none; color: #FFFFFF; font-weight: 600; box-shadow: inset 0 -0.42em 0 rgba(0,133,255,0.45); padding: 0 1px; }
.res-destacada { margin: 0; }
.res-destacada blockquote { margin: 0; font-size: 1.32rem; line-height: 1.45; font-weight: 400; color: rgba(255,255,255,0.88); letter-spacing: -0.01em; }
.res-destacada blockquote::before { content: "“"; display: block; font-size: 4.2rem; line-height: 0.6; height: 30px; font-weight: 600; color: #0085FF; }
.res-destacada figcaption, .res-card figcaption { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.res-destacada figcaption img { width: 48px; height: 48px; border-radius: 999px; object-fit: cover; }
.res-destacada figcaption > span { display: flex; flex-direction: column; gap: 4px; }
.res-carrusel { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; margin: 34px -20px 0; padding: 0 20px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; scrollbar-width: none; }
.res-carrusel::-webkit-scrollbar { display: none; }
.res-card { scroll-snap-align: start; margin: 0; padding: 22px; border-radius: 22px; background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); display: flex; flex-direction: column; }
.res-card blockquote { margin: 14px 0 0; flex: 1; font-size: 0.98rem; line-height: 1.55; color: rgba(255,255,255,0.8); }
.res-card figcaption img { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; }
.res-card figcaption b, .res-destacada figcaption b { font-weight: 600; color: #FFFFFF; }
.ver-todas { display: block; width: max-content; margin: 22px 0 0 auto; font-weight: 600; color: #5AAEFF; }
.ver-todas:hover { color: #8FC7FF; }
@media (min-width: 900px) {
  .res-top { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
  .resenas-v2 h2 { font-size: 2.4rem; line-height: 1.08; }
  .nota-num { font-size: 6.5rem; }
  .res-destacada blockquote { font-size: 1.85rem; line-height: 1.38; }
  .res-carrusel { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; margin: 56px 0 0; padding: 0; gap: 16px; }
  .res-card { padding: 26px; transition: background .25s ease; }
  .res-card:hover { background: rgba(255,255,255,0.09); }
  .res-card:nth-child(4), .res-card:nth-child(5) { grid-column: span 1; }
}

/* Reseña destacada: rota entre las tres mejores. Las tres viven en la misma
   celda y se funden; debajo, tres barras finas marcan cuál va y cuánto falta. */
.res-destacada { display: grid; }
.dest-item { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.dest-item.activa { opacity: 1; transform: none; pointer-events: auto; }
.dest-item blockquote { margin: 0; font-size: 1.32rem; line-height: 1.45; color: rgba(255,255,255,0.88); letter-spacing: -0.01em; }
.dest-item blockquote::before { content: "“"; display: block; font-size: 4.2rem; line-height: 0.6; height: 30px; font-weight: 600; color: #0085FF; }
.dest-item figcaption { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.dest-item figcaption img { width: 48px; height: 48px; border-radius: 999px; object-fit: cover; }
.dest-item figcaption > span { display: flex; flex-direction: column; gap: 4px; }
.dest-item figcaption b { font-weight: 600; color: #FFFFFF; }
.dest-barras { grid-area: 2 / 1; display: flex; gap: 8px; margin-top: 24px; }
.dest-barra { flex: 1; max-width: 72px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.dest-barra i { position: relative; display: block; width: 100%; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.2); overflow: hidden; }
.dest-barra i::after { content: ""; position: absolute; inset: 0; background: #FFFFFF; transform: scaleX(var(--p, 0)); transform-origin: left; }
@media (min-width: 900px) { .dest-item blockquote { font-size: 1.85rem; line-height: 1.38; } }
@media (prefers-reduced-motion: reduce) { .dest-item { transition: opacity .4s ease; transform: none; } }

/* Las demás reseñas, en escritorio como mosaico de columnas: cada tarjeta mide lo que su texto. */
@media (min-width: 900px) {
  .res-carrusel { display: block; columns: 3; column-gap: 16px; }
  .res-card { break-inside: avoid; margin-bottom: 16px; }
}

/* Carrusel del teléfono: alterna reseñas largas y cortas para que el final no
   quede flojo; Daleidy (la más larga) pasa hacia el final. El escritorio
   mantiene el orden del HTML. */
@media (max-width: 899px) {
  .res-carrusel .res-card:nth-child(1) { order: 1; }
  .res-carrusel .res-card:nth-child(4) { order: 2; }
  .res-carrusel .res-card:nth-child(2) { order: 3; }
  .res-carrusel .res-card:nth-child(5) { order: 4; }
  .res-carrusel .res-card:nth-child(6) { order: 5; }
  .res-carrusel .res-card:nth-child(3) { order: 6; }
  .res-carrusel .res-card:nth-child(7) { order: 7; }
}

/* ── Hero claro ─────────────────────────────────────────────
   Fondo claro como el resto de la página. A la derecha, la entrevista
   interpretada como interfaz: la pregunta del oficial en inglés y la
   interpretación en español, en dos burbujas que rotan. */
.hero-wrap.hero-claro { background: radial-gradient(90% 70% at 85% 10%, #E4EBFB 0%, rgba(228,235,251,0) 60%), var(--ghost); color: var(--charcoal); padding-bottom: 72px; }
.hero-claro::after { display: none; }
.hero-claro::before { filter: brightness(0) saturate(100%) invert(14%) sepia(77%) saturate(3200%) hue-rotate(221deg); opacity: 0.06 !important; }
.hero-claro .hero h1 { color: var(--midnight); }
.hero-claro .hero .sub { color: var(--muted); }
.hero-claro .top nav a { color: var(--charcoal); }
.hero-claro .top nav a:hover { color: var(--royal); }
.hero-claro .top .acciones .btn-ghost { background: #FFFFFF; color: var(--royal); box-shadow: var(--shadow); }
.hero-claro .btn-texto { color: var(--royal); }
.hero-claro .btn-texto:hover { color: var(--midnight); opacity: 1; }
.hero-claro .btn-texto .lu { color: var(--royal); }
.hero-claro .hero .acciones-hero .btn-primary { border-radius: 999px; }
.hero-claro .google-chip-hero { box-shadow: var(--shadow); }
.hero-claro .chip-lugar { background: #FFFFFF; box-shadow: var(--shadow); color: var(--midnight); }
.hero-claro .chip-lugar .lu { color: var(--royal); }
.hero-claro .hero-persona::after { display: none; }

.dialogo { display: flex; flex-direction: column; gap: 14px; padding: 26px 22px; border-radius: 28px; background: #FFFFFF; box-shadow: 0 30px 60px -28px rgba(9,48,149,0.35), 0 0 0 1px var(--line); }
.dialogo p { margin: 0; max-width: 88%; padding: 16px 20px; line-height: 1.35; transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1), filter .45s ease; }
.dialogo .en { align-self: flex-start; border-radius: 22px 22px 22px 6px; background: var(--ghost); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: 1rem; }
.dialogo .es { align-self: flex-end; display: flex; align-items: flex-start; gap: 10px; border-radius: 22px 22px 6px 22px; background: var(--royal); color: #FFFFFF; font-weight: 600; font-size: 1.12rem; letter-spacing: -0.01em; margin-top: 0; transition-delay: .35s; }
.dialogo .es .chev-marca { width: 10px; height: 15px; margin-top: 5px; flex-shrink: 0; color: #5AAEFF; }
.dialogo.sale p { opacity: 0; transform: translateY(-6px); filter: blur(3px); transition-delay: 0s; }
.dialogo.entra p { opacity: 0; transform: translateY(8px); filter: blur(3px); transition: none; }
@media (prefers-reduced-motion: reduce) { .dialogo p { transition: opacity .4s ease; } .dialogo.sale p, .dialogo.entra p { transform: none; filter: none; } }
@media (max-width: 899px) {
  .hero-claro .hero-persona { margin: 26px 0 0; }
  .hero-wrap.hero-claro { padding-bottom: 48px; }
}
@media (min-width: 900px) {
  .hero-claro .top .acciones .btn-ghost { background: #FFFFFF; color: var(--royal); box-shadow: var(--shadow); }
  .hero-claro .top .acciones .tel-corto { background: #FFFFFF; color: var(--royal); box-shadow: var(--shadow); }
  .hero-claro .hero { align-items: center; padding-bottom: 24px; }
  .hero-claro .hero-texto { padding-bottom: 0; }
  .hero-claro .hero-persona { margin: 0 0 0 auto; width: min(100%, 470px); }
  .dialogo { padding: 34px 30px; gap: 18px; }
  .dialogo .en { font-size: 1.1rem; }
  .dialogo .es { font-size: 1.35rem; }
  .dialogo .es .chev-marca { width: 11px; height: 17px; margin-top: 7px; }
  .hero-wrap.hero-claro { padding-bottom: 96px; }
}

/* Historia de William: sus dos fotos en una pila, con un leve giro cada una
   (la sala de espera con su intérprete atrás, la ceremonia adelante), y su reseña. */
.historia { display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: 44px; padding: 26px 20px; border-radius: 28px; background: rgba(255,255,255,0.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
.pila { position: relative; aspect-ratio: 5 / 4; }
.foto { position: absolute; display: block; padding: 7px; border-radius: 18px; background: #FFFFFF; box-shadow: 0 24px 40px -18px rgba(0,0,0,0.55); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.foto img { display: block; width: 100%; height: auto; border-radius: 12px; }
.foto-a { left: 0; top: 4%; width: 74%; transform: rotate(-4deg); }
.foto-b { right: 0; bottom: 0; width: 48%; transform: rotate(3.5deg); }
.historia-texto { margin: 0; align-self: center; }
.historia-texto blockquote { margin: 14px 0 0; font-size: 1.25rem; line-height: 1.45; color: rgba(255,255,255,0.9); letter-spacing: -0.01em; }
.historia-texto figcaption { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.ini-g { width: 40px; height: 40px; border-radius: 999px; background: #C2410C; color: #FFFFFF; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.historia-texto b { font-weight: 600; color: #FFFFFF; }
@media (hover: hover) {
  .historia:hover .foto-a { transform: rotate(-6deg) translate(-6px, -4px); }
  .historia:hover .foto-b { transform: rotate(5deg) translate(6px, 4px); }
}
@media (min-width: 900px) {
  .historia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; padding: 40px 44px; margin-top: 56px; }
  .historia-texto blockquote { font-size: 1.6rem; line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) { .foto { transition: none; } }


/* Hero: diálogo más ligero (contenedor translúcido, bordes suaves) y detrás
   un chevron grande del logotipo mirando a la izquierda, en el azul oscuro
   del logotipo. Arriba sigue el chico mirando a la derecha. */
.hero-claro .hero-persona { position: relative; }
.hero-claro .hero-persona::after { content: ""; display: block; position: absolute; z-index: 0; top: 50%; right: -16%; left: auto; bottom: auto; width: 60%; aspect-ratio: 70 / 106; transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22137%20123%2070%20106%22%3E%3Cpath%20d%3D%22M%20192%20138%20L%20152%20176%20L%20192%20214%22%20fill%3D%22none%22%20stroke%3D%22%23003366%22%20stroke-width%3D%2230%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; opacity: 0.12; pointer-events: none; }
.hero-claro .dialogo { position: relative; z-index: 1; background: rgba(255,255,255,0.55); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 24px 60px -34px rgba(9,48,149,0.28), inset 0 0 0 1px rgba(209,218,243,0.7); }
.hero-claro .dialogo .en { background: rgba(255,255,255,0.8); box-shadow: inset 0 0 0 1px rgba(209,218,243,0.8); }
.hero-claro .dialogo .es { background: linear-gradient(135deg, #1A45B5 0%, #0B3399 100%); box-shadow: 0 10px 24px -14px rgba(9,48,149,0.55); }
@media (max-width: 899px) { .hero-claro .hero-persona::after { width: 50%; right: -12%; } }
/* ajuste: el chevron grande más a la izquierda y en azul oscuro; en el teléfono
   el de arriba es el chevron chico (no el icono entero), así quedan dos como en el logo */
.hero-claro .hero-persona::after { right: auto; left: -14%; opacity: 0.2; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22137%20123%2070%20106%22%3E%3Cpath%20d%3D%22M%20192%20138%20L%20152%20176%20L%20192%20214%22%20fill%3D%22none%22%20stroke%3D%22%23051B54%22%20stroke-width%3D%2230%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
@media (max-width: 899px) {
  .hero-claro .hero-persona::after { left: -10%; right: auto; width: 46%; }
  .hero-wrap.hero-claro::before { right: 22px; top: 150px; width: 46px; height: 70px; opacity: 0.07 !important; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2293%2071%2070%20106%22%3E%3Cpath%20d%3D%22M%20108%2086%20L%20148%20124%20L%20108%20162%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%2230%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; }
}

/* Icono de teléfono relleno, más actual que el de trazo. En el teléfono, el
   botón de la cabecera va en azul con el icono blanco. */
.ic-tel { fill: currentColor; stroke: none; }
.btn .ic-tel { width: 17px; height: 17px; }
@media (max-width: 899px) {
  .hero-claro .top .acciones .tel-corto { width: 46px; height: 46px; background: var(--royal); color: #FFFFFF; box-shadow: 0 8px 18px -8px rgba(9,48,149,0.55); }
  .hero-claro .top .acciones .tel-corto .ic-tel { width: 19px; height: 19px; }
}

/* ajustes: el chevron grande centrado detrás del diálogo; la historia de William
   va debajo de las reseñas, sin animación y con un borde blanco fino */
.hero-claro .hero-persona::after { left: 50%; right: auto; transform: translate(-50%, -50%); }
@media (max-width: 899px) { .hero-claro .hero-persona::after { left: 50%; right: auto; width: 44%; } }
.foto { padding: 3px; border-radius: 14px; transition: none; }
.foto img { border-radius: 11px; }
.historia { margin-top: 28px; }
@media (hover: hover) { .historia:hover .foto-a { transform: rotate(-4deg); } .historia:hover .foto-b { transform: rotate(3.5deg); } }

/* Reserva en vivo: al final, sobre azul noche. Se elige la entrevista y salen
   las próximas fechas con horarios libres, leídas de Calendly. Al tocar una
   fecha se entra a la reserva con la entrevista y el día ya elegidos. */
.reserva-vivo { display: grid; grid-template-columns: 1fr; gap: 26px; }
.rv-texto h2 { color: #FFFFFF; text-wrap: balance; }
.pagos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.pago { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,0.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16); color: #FFFFFF; font-weight: 500; font-size: 0.92rem; }
.pago .lu { width: 18px; height: 18px; color: #8FB4FF; }
.pago-klarna { background: #FFB3C7; box-shadow: none; color: #17120F; gap: 7px; }
.pago-klarna b { font-weight: 800; letter-spacing: -0.02em; }
.rv-card { padding: 18px; border-radius: 26px; background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
.rv-tipos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rv-tipo { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 6px 12px; border: 0; border-radius: 18px; background: rgba(255,255,255,0.06); color: #FFFFFF; font: inherit; cursor: pointer; transition: background .2s ease, box-shadow .2s ease; -webkit-tap-highlight-color: transparent; }
.rv-tipo > span:last-child { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.rv-tipo b { font-weight: 600; font-size: 0.95rem; }
.rv-tipo em { font-style: normal; font-size: 0.85rem; color: rgba(255,255,255,0.7); }
.rv-tipo .formulario { width: 40px; height: 50px; padding: 0 0 7px 6px; }
.rv-tipo .formulario b { font-size: 9.5px; }
.rv-tipo[aria-checked="true"] { background: #FFFFFF; color: var(--midnight); box-shadow: 0 12px 28px -14px rgba(0,0,0,0.5); }
.rv-tipo[aria-checked="true"] em { color: var(--royal); }
.rv-tipo[aria-checked="true"] .formulario { background: var(--royal); box-shadow: none; }
.rv-tipo[aria-checked="true"] .formulario::before { background: #3D63C9; }
.rv-tipo[aria-checked="true"] .formulario i { background: rgba(255,255,255,0.3); }
.rv-tipo[aria-checked="true"] .formulario b { color: #FFFFFF; }
.rv-etq { margin: 20px 0 10px; font-weight: 600; color: #FFFFFF; }
.rv-fechas { display: grid; grid-auto-flow: column; grid-auto-columns: 84px; gap: 8px; overflow-x: auto; scrollbar-width: none; min-height: 92px; margin: 0 -18px; padding: 0 18px 2px; scroll-padding: 0 18px; scroll-snap-type: x mandatory; }
.rv-fechas::-webkit-scrollbar { display: none; }
.rv-fecha { scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 92px; border-radius: 18px; background: rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); color: #FFFFFF; transition: background .2s ease, transform .2s ease; }
.rv-fecha:hover { background: #FFFFFF; color: var(--midnight); }
.rv-fecha .dsem { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75; }
.rv-fecha .dnum { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.rv-fecha .dmes { font-size: 0.8rem; opacity: 0.75; }
.rv-fecha.sombra { background: rgba(255,255,255,0.05); box-shadow: none; animation: rv-pulso 1.2s ease-in-out infinite; }
@keyframes rv-pulso { 50% { opacity: 0.5; } }
.rv-cta { width: 100%; margin-top: 18px; }
@media (min-width: 900px) {
  .reserva-vivo { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
  .rv-texto h2 { font-size: 2.4rem; line-height: 1.08; }
  .rv-card { padding: 26px; }
  .rv-fechas { margin: 0; padding: 0 0 2px; grid-auto-columns: minmax(84px, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .rv-fecha.sombra { animation: none; } }
/* el carrusel de fechas no debe ensanchar la rejilla en el teléfono */
.reserva-vivo > * { min-width: 0; }
.rv-card { min-width: 0; overflow: hidden; }

/* Pagos: chip de tarjeta y el badge real de Klarna con "Financiamiento". */
.pagos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.pago { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 999px; font-weight: 500; font-size: 0.85rem; }
.pago .lu { width: 17px; height: 17px; }
.pago-klarna { background: none !important; box-shadow: none !important; padding: 0; gap: 8px; }
.pago-klarna img { height: 26px; width: auto; display: block; }
.pagos-oscuro .pago { background: rgba(255,255,255,0.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16); color: #FFFFFF; }
.pagos-oscuro .pago .lu { color: #8FB4FF; }
.pagos-oscuro .pago-klarna { color: rgba(255,255,255,0.85); }
.pagos-claro .pago { background: var(--ghost); box-shadow: inset 0 0 0 1px var(--line); color: var(--charcoal); }
.pagos-claro .pago .lu { color: var(--royal); }
.pagos-claro .pago-klarna { color: var(--muted); }
.pago-after { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: #B2FCE4; color: #000; font-weight: 800; letter-spacing: -0.02em; font-size: 0.76rem; }
.servicio-incluye .pagos { justify-content: center; }

/* Hero en el teléfono: sin el botón (ya está en la barra fija), diálogo más
   compacto, sin desenfoque de fondo ni blur en la transición (en iOS parpadea
   y deja un recuadro blanco); solo opacidad y desplazamiento. */
@media (max-width: 899px) {
  .hero-claro .hero .acciones-hero { display: none; }
  .hero-claro .dialogo { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,0.82); padding: 16px 14px; gap: 10px; border-radius: 22px; }
  .hero-claro .dialogo p { padding: 11px 14px; max-width: 90%; filter: none; will-change: opacity, transform; }
  .hero-claro .dialogo .en { font-size: 0.9rem; border-radius: 16px 16px 16px 5px; }
  .hero-claro .dialogo .es { font-size: 1rem; border-radius: 16px 16px 5px 16px; }
  .hero-claro .dialogo .es .chev-marca { width: 9px; height: 13px; margin-top: 4px; }
  .hero-claro .dialogo.sale p, .hero-claro .dialogo.entra p { filter: none; }
  .hero-claro .hero h1 { font-size: 2.15rem; }
  .hero-claro .hero .sub { font-size: 1rem; }
  .hero-claro .hero-persona { margin: 22px 0 0; }
  .hero-wrap.hero-claro { padding-bottom: 36px; }
}
/* chips de pago compactos: caben en una fila en el teléfono */
.pago { height: 30px; padding: 0 11px; font-size: 0.8rem; gap: 6px; }
.pago .lu { width: 15px; height: 15px; }
.pago-klarna img { height: 22px; }
.pagos { gap: 10px; }

/* Reserva en vivo, versión ligera: control segmentado de texto, fechas y pagos.
   Sin tarjeta interna; el botón solo aparece si no hay fechas que mostrar. */
.rv-card { padding: 0; background: none; box-shadow: none; overflow: visible; }
.rv-tipos { gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,0.08); }
.rv-tipo { flex-direction: row; justify-content: center; gap: 6px; padding: 10px 6px; border-radius: 999px; background: none; font-size: 0.92rem; font-weight: 600; }
.rv-tipo em { font-size: 0.85rem; font-weight: 500; }
.rv-tipo[aria-checked="true"] { box-shadow: 0 6px 16px -8px rgba(0,0,0,0.5); }
.rv-etq { margin: 22px 0 10px; color: rgba(255,255,255,0.75); font-weight: 500; font-size: 0.92rem; }
.rv-fechas { margin: 0; padding: 0 0 2px; }
.rv-fechas:not([hidden]) ~ .rv-cta { display: none; }
.rv-fechas[hidden] + .rv-cta, .rv-sin + .rv-cta { display: inline-flex; }
.rv-cta { margin-top: 4px; }
@media (max-width: 899px) {
  .rv-tipo { flex-direction: column; gap: 0; padding: 8px 4px; font-size: 0.88rem; }
  .rv-fechas { margin: 0 -20px; padding: 0 20px 2px; scroll-padding: 0 20px; }
}
@media (min-width: 900px) { .rv-card { padding: 0; } }

/* Hero en el teléfono: el diálogo tiene altura fija, así las preguntas
   largas y cortas no estiran ni encogen el hero al rotar. */
@media (max-width: 899px) {
  .hero-claro .dialogo .en { min-height: calc(2 * 1.35 * 0.9rem + 22px); display: flex; align-items: center; }
  .hero-claro .dialogo .es { min-height: calc(2 * 1.35 * 1rem + 22px); align-items: center; }
  .hero-claro .dialogo .es .chev-marca { margin-top: 0; }
}

/* ── Diálogo del hero, versión solo para el teléfono ──
   Las tres preguntas están siempre en la página, apiladas en la misma celda;
   solo cambia cuál se ve. La caja mide lo que la pregunta más larga, así que
   el hero nunca cambia de alto. */
.dialogo-movil { display: none; }
@media (max-width: 899px) {
  .hero-claro .dialogo-escritorio { display: none; }
  .hero-claro .dialogo-movil { display: grid; position: relative; z-index: 1; padding: 16px 14px; border-radius: 22px; background: rgba(255,255,255,0.86); box-shadow: 0 24px 60px -34px rgba(9,48,149,0.28), inset 0 0 0 1px rgba(209,218,243,0.7); }
  .dm-par { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px; opacity: 0; transition: opacity .5s ease; }
  .dm-par.activa { opacity: 1; }
  .dm-par p { margin: 0; max-width: 90%; padding: 11px 14px; line-height: 1.35; transform: translateY(6px); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
  .dm-par.activa p { transform: none; }
  .dm-par.activa .es { transition-delay: .12s; }
  .dm-par .en { align-self: flex-start; border-radius: 16px 16px 16px 5px; background: rgba(255,255,255,0.9); box-shadow: inset 0 0 0 1px rgba(209,218,243,0.8); color: var(--muted); font-size: 0.9rem; }
  .dm-par .es { align-self: flex-end; display: flex; align-items: flex-start; gap: 9px; border-radius: 16px 16px 5px 16px; background: linear-gradient(135deg, #1A45B5 0%, #0B3399 100%); color: #FFFFFF; font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
  .dm-par .es .chev-marca { width: 9px; height: 13px; margin-top: 4px; flex-shrink: 0; color: #5AAEFF; }
}
@media (prefers-reduced-motion: reduce) { .dm-par, .dm-par p { transition: opacity .3s ease; transform: none; } }

/* Más fechas: un chip al final abre el calendario del mes, con los días
   libres marcados; se navega hasta donde Calendly tiene agenda abierta. */
.rv-mas { scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 92px; border: 0; border-radius: 18px; background: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22); color: #FFFFFF; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.rv-mas svg { width: 22px; height: 22px; color: #8FB4FF; }
.rv-mas[aria-expanded="true"] { background: rgba(255,255,255,0.12); }
.rv-cal { margin-top: 14px; padding: 16px; border-radius: 20px; background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
.rv-cal-cab { display: flex; align-items: center; justify-content: space-between; color: #FFFFFF; }
.rv-cal-cab b { font-weight: 600; text-transform: capitalize; }
.rv-nav { width: 36px; height: 36px; border: 0; border-radius: 999px; background: rgba(255,255,255,0.08); color: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.rv-nav svg { width: 9px; height: 14px; }
.rv-nav:disabled { opacity: 0.3; cursor: default; }
.rv-sem, .rv-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.rv-sem { margin: 12px 0 6px; font-size: 0.75rem; color: rgba(255,255,255,0.55); }
.rv-dias span, .rv-dias a { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; max-height: 44px; border-radius: 12px; font-size: 0.9rem; }
.rv-dias span { color: rgba(255,255,255,0.28); }
.rv-dias a { color: #FFFFFF; font-weight: 600; background: rgba(255,255,255,0.1); }
.rv-dias a:hover { background: #FFFFFF; color: var(--midnight); }
.rv-dias.cargando { opacity: 0.4; }

/* Diálogo móvil subordinado al titular: es un detalle de interfaz, no un
   segundo titular. Texto de burbuja a escala de mensaje (14–15 px), caja más
   estrecha y alineada a la derecha. */
@media (max-width: 899px) {
  .hero-claro .dialogo-movil { width: 88%; margin-left: auto; padding: 12px 11px; gap: 0; border-radius: 20px; }
  .dm-par { gap: 7px; }
  .dm-par p { padding: 8px 12px; }
  .dm-par .en { font-size: 0.82rem; border-radius: 14px 14px 14px 4px; }
  .dm-par .es { font-size: 0.9rem; gap: 7px; border-radius: 14px 14px 4px 14px; }
  .dm-par .es .chev-marca { width: 8px; height: 12px; margin-top: 4px; }
}

/* Reserva en vivo en escritorio: los seis días y "Más fechas" caben en una fila. */
@media (min-width: 900px) {
  .rv-fechas { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow: visible; }
  .rv-fecha, .rv-mas { height: 84px; }
}

/* Video en bucle: iOS muestra su botón de play cuando bloquea el arranque
   (Modo de bajo consumo). Se oculta; queda el póster y arranca al primer toque. */
video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
video::-webkit-media-controls { display: none !important; }

/* Teléfono: logo un poco mayor y menú en lugar del botón de llamar
   (la barra fija ya ofrece llamar). El menú lleva a cada sección y
   cierra con Reservar como acción principal. */
.menu-btn, .menu-movil { display: none; }
@media (max-width: 899px) {
  .top .logo, .hero-claro .top .logo { width: 150px; }
  .hero-claro .top .acciones .tel-corto { display: none; }
  .menu-btn { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 46px; height: 46px; padding: 0 13px; border: 0; border-radius: 999px; background: #FFFFFF; box-shadow: var(--shadow); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .menu-btn span { display: block; height: 2px; border-radius: 2px; background: var(--midnight); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
  .menu-btn[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .menu-movil:not([hidden]) { display: block; position: absolute; z-index: 30; left: 16px; right: 16px; top: 76px; padding: 10px 10px 14px; border-radius: 24px; background: #FFFFFF; box-shadow: 0 30px 60px -20px rgba(5,27,84,0.35), 0 0 0 1px var(--line); animation: menu-entra .25s cubic-bezier(.2,.7,.2,1); }
  @keyframes menu-entra { from { opacity: 0; transform: translateY(-8px); } }
  .menu-movil nav { display: flex; flex-direction: column; }
  .menu-movil nav a { padding: 14px 12px; border-radius: 14px; color: var(--midnight); font-weight: 600; font-size: 1.05rem; }
  .menu-movil nav a:active { background: var(--ghost); }
  .menu-acciones { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
  .menu-acciones .btn { width: 100%; min-height: 52px; border-radius: 999px; }
  .menu-acciones .btn-ghost { box-shadow: inset 0 0 0 1px var(--line); }
  /* que el chevron grande no se corte al final del hero */
  .hero-wrap.hero-claro { padding-bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) { .menu-movil:not([hidden]) { animation: none; } }
@media (max-width: 899px) {
  .menu-btn { align-items: center; padding: 0; }
  .menu-btn span { width: 20px; height: 2px; flex: none; }
}

/* ── Cabecera fija y menú suave (estilo de la app de Claude) ──
   Transparente arriba; al bajar, vidrio claro. Botón de menú redondo y
   translúcido con tres líneas de largo decreciente que se vuelven una X. */
.hero-claro .top { position: fixed; z-index: 50; top: 0; left: 0; right: 0; transition: padding .25s ease; }
.hero-claro .top::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: rgba(248,249,255,0); -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); box-shadow: 0 1px 0 rgba(209,218,243,0); transition: background .25s ease, -webkit-backdrop-filter .25s ease, backdrop-filter .25s ease, box-shadow .25s ease; pointer-events: none; }
.hero-claro .top.con-fondo::before, body.menu-abierto .hero-claro .top::before { background: rgba(248,249,255,0.82); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); box-shadow: 0 1px 0 rgba(209,218,243,0.7); }
.hero-wrap.hero-claro { padding-top: 76px; }
@media (min-width: 900px) { .hero-wrap.hero-claro { padding-top: 92px; } .hero-claro .top.con-fondo { padding-top: 14px; padding-bottom: 14px; } }
@media (max-width: 899px) {
  .hero-claro .top { padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-bottom: 10px; }
  .menu-btn { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; width: 48px; height: 48px; padding: 0 0 0 14px; border-radius: 999px; background: rgba(255,255,255,0.78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 4px 16px -6px rgba(5,27,84,0.18), inset 0 0 0 1px rgba(209,218,243,0.6); }
  .menu-btn span { width: 20px; height: 2px; border-radius: 2px; background: var(--midnight); transform-origin: center; transition: transform .35s cubic-bezier(.2,.8,.2,1), width .35s cubic-bezier(.2,.8,.2,1), opacity .2s ease; }
  .menu-btn span:nth-child(2) { width: 15px; }
  .menu-btn span:nth-child(3) { width: 9px; }
  .menu-btn[aria-expanded="true"] span:nth-child(1) { width: 20px; transform: translateY(7px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] span:nth-child(3) { width: 20px; transform: translateY(-7px) rotate(-45deg); }
  .menu-movil:not([hidden]) { position: fixed; z-index: 49; top: calc(78px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; padding: 8px 8px 12px; border-radius: 28px; background: rgba(255,255,255,0.9); -webkit-backdrop-filter: saturate(160%) blur(22px); backdrop-filter: saturate(160%) blur(22px); box-shadow: 0 24px 60px -24px rgba(5,27,84,0.3), inset 0 0 0 1px rgba(209,218,243,0.6); transform-origin: top right; animation: menu-suave .32s cubic-bezier(.2,.8,.2,1); }
  @keyframes menu-suave { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }
  .menu-movil nav a { padding: 15px 16px; border-radius: 18px; font-weight: 500; font-size: 1.1rem; transition: background .15s ease; }
  .menu-acciones { margin-top: 6px; padding: 12px 6px 0; border-top: 1px solid rgba(209,218,243,0.7); }
  .menu-velo { position: fixed; inset: 0; z-index: 48; background: rgba(5,27,84,0.12); animation: velo .3s ease; }
  @keyframes velo { from { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .menu-movil:not([hidden]), .menu-velo { animation: none; } }
section[id] { scroll-margin-top: 80px; }
/* más opaco: que el contenido de atrás no se lea a través */
.hero-claro .top.con-fondo::before, body.menu-abierto .hero-claro .top::before { background: rgba(248,249,255,0.95); }
@media (max-width: 899px) { .menu-movil:not([hidden]) { background: rgba(255,255,255,0.98); } }
/* Icono del menú, versión robusta: las tres líneas en posición absoluta.
   Al abrir, la del medio se encoge a cero (no solo se vuelve transparente)
   y las otras dos se juntan en el centro y giran. */
@media (max-width: 899px) {
  .menu-btn { display: block; padding: 0; }
  .menu-btn span, .menu-btn[aria-expanded="true"] span { position: absolute; left: 14px; height: 2px; margin: 0; transform: none; opacity: 1; transition: top .3s cubic-bezier(.2,.8,.2,1), transform .3s cubic-bezier(.2,.8,.2,1) .05s, width .3s cubic-bezier(.2,.8,.2,1), opacity .15s ease; }
  .menu-btn span:nth-child(1) { top: 17px; width: 20px; }
  .menu-btn span:nth-child(2) { top: 23px; width: 15px; }
  .menu-btn span:nth-child(3) { top: 29px; width: 9px; }
  .menu-btn[aria-expanded="true"] span:nth-child(1) { top: 23px; width: 20px; transform: rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:nth-child(2) { width: 0; opacity: 0; }
  .menu-btn[aria-expanded="true"] span:nth-child(3) { top: 23px; width: 20px; transform: rotate(-45deg); }
}

/* Pie, ordenado como el de migrative.us/interpretes: marca con dirección y
   teléfono; Servicios, Empresa y Legal; abajo copyright y redes. */
.pie-v2 { padding: 48px 0 calc(120px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, var(--ghost) 0%, #EEF1FA 100%); border-top: 1px solid var(--line); }
.pie-grid { display: grid; grid-template-columns: 1fr; gap: 34px; }
.pie-marca { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.pie-marca .logo { width: 170px; height: auto; }
.pie-dir { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--muted); }
.pie-tel { font-size: 0.9rem; line-height: 1.6; color: var(--muted); }
.pie-tel:hover { color: var(--royal); }
.pie-v2 .pie-col { display: flex; flex-direction: column; gap: 11px; }
.pie-v2 .pie-col b { margin-bottom: 4px; font-size: 0.85rem; letter-spacing: 0.02em; color: var(--midnight); }
.pie-v2 .pie-col a { font-size: 0.9rem; color: var(--muted); }
.pie-v2 .pie-col a:hover { color: var(--royal); }
.pie-base { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 0.8rem; color: #8A93AB; }
.pie-fin { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.pie-redes { display: flex; gap: 14px; }
.pie-redes a { color: #8A93AB; transition: color .2s ease; }
.pie-redes a:hover { color: var(--royal); }
.pie-redes svg { width: 20px; height: 20px; display: block; }
@media (min-width: 900px) {
  .pie-v2 { padding: 72px 0 36px; }
  .pie-grid { grid-template-columns: 2fr 1.2fr 1fr; gap: 40px; }
  .pie-marca { grid-column: auto; }
  .pie-base { flex-direction: row; justify-content: space-between; align-items: center; margin-top: 56px; }
}
.pie-aviso { max-width: 800px; margin: 24px 0 0; font-size: 0.72rem; line-height: 1.55; color: #8A93AB; }

/* Formas de pago en cada servicio, sutil (7-oct-2026, idea de Max a partir de Ray-Ban).
   Solo métodos activos en el Checkout de TuInterprete: Apple Pay, Klarna, Cash App Pay. */
.pagos-fila { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin-top: 14px; }
.pf-rot { font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 4px; white-space: nowrap; }
.pf { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px; border-radius: 6px; font-size: .72rem; line-height: 1; white-space: nowrap; }
.pf img { height: 11px; width: auto; display: block; }
.pf b { font-weight: 600; }
.pf-apple { background: #000; color: #fff; }
.pf-apple img { filter: invert(1); height: 12px; margin-top: -2px; }
.pf-klarna { background: #FFB3C7; padding: 0; overflow: hidden; }
.pf-klarna img { height: 22px; }
.pf-cash { background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: #111; }
.pf-cash img { filter: invert(55%) sepia(90%) saturate(600%) hue-rotate(80deg) brightness(95%); }
.pf-after{background:#B2FCE4;color:#000;font-weight:800;letter-spacing:-.02em}