/* ==========================================================================
   Port Royal Services — estilos
   Dirección: atención personal, sobria y cercana. Azul noche + el azul exacto del
   logo del cliente (#163a6b) + dorado. Cormorant Garamond en títulos, Jost en
   texto. Ancho completo, mucho aire, fotos a sangre.
   ========================================================================== */

:root {
  --noche: #0a1a33;          /* azul noche: cabecera, testimonios, pie */
  --noche-2: #0d2244;
  --marca: #163a6b;          /* azul REAL del logo del cliente */
  --marca-oscuro: #10294d;
  --oro: #c9a24a;
  --oro-claro: #e3c777;
  --oro-suave: rgba(201, 162, 74, 0.35);
  --marfil: #f5f1e8;
  --marfil-2: #ece6d8;
  --blanco: #ffffff;
  --tinta: #13203a;
  --texto: #2a3550;
  --texto-medio: #56617a;
  --texto-tenue: #7c869c;
  --linea: rgba(19, 32, 58, 0.12);
  --linea-clara: rgba(255, 255, 255, 0.16);
  --wa: #25d366;

  --titulos: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --texto-fuente: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  --lado: clamp(20px, 5vw, 88px);
  --cabecera-alto: 122px;
  --sombra-suave: 0 20px 60px rgba(10, 26, 51, 0.16);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--texto-fuente);
  font-size: 17px;
  line-height: 1.7;
  color: var(--texto);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video, iframe { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--titulos); color: var(--tinta); font-weight: 600; line-height: 1.05; }
p { margin: 0 0 1.2em; }
ul { margin: 0; padding: 0; list-style: none; }
section { scroll-margin-top: 90px; }
button { font-family: inherit; }
::selection { background: var(--oro); color: var(--noche); }

.contenedor {
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 var(--lado);
}

/* ---------- tipografía ---------- */
h1 {
  font-size: clamp(46px, 6.4vw, 100px);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: -0.01em;
  color: var(--blanco);
}
h1 em { display: block; font-style: italic; color: var(--oro-claro); font-weight: 500; }
h2 {
  font-size: clamp(38px, 4.4vw, 66px);
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}
h3 { font-size: clamp(26px, 2.2vw, 34px); }
.entrada {
  font-size: clamp(18px, 1.35vw, 21px);
  line-height: 1.65;
  color: var(--texto);
  font-weight: 400;
}
.rotulo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 20px;
}
.rotulo::before { content: ''; width: 38px; height: 1px; background: var(--oro); }
.rotulo-claro { color: var(--oro-claro); }
.rotulo-claro::before { background: var(--oro-claro); }

.cabeza-seccion { max-width: 900px; margin-bottom: clamp(40px, 5vw, 72px); }
.cabeza-seccion h2 { margin-bottom: 0; }
.cabeza-ancha {
  max-width: none;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: end;
}
.cabeza-ancha .entrada { margin: 0; padding-bottom: 8px; }

/* ---------- botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 19px 36px;
  font-family: var(--texto-fuente);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
  white-space: nowrap;
}
.boton:hover { transform: translateY(-2px); }
.boton svg { width: 18px; height: 18px; }
.boton-oro { background: var(--oro); color: var(--noche); border-color: var(--oro); }
.boton-oro:hover { background: var(--oro-claro); border-color: var(--oro-claro); }
.boton-linea { background: transparent; color: var(--blanco); border-color: rgba(255, 255, 255, 0.55); }
.boton-linea:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--blanco); }
.boton-tinta { background: var(--marca); color: var(--blanco); border-color: var(--marca); }
.boton-tinta:hover { background: var(--noche); border-color: var(--noche); }
.boton-wa { background: var(--wa); color: var(--noche); border-color: var(--wa); }
.boton-wa:hover { background: #1fc65b; }
.boton-ancho { width: 100%; }
.botonera { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marca);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--oro);
  transition: gap 0.25s, color 0.25s;
}
.enlace-flecha svg { width: 18px; height: 18px; }
.enlace-flecha:hover { gap: 16px; color: var(--noche); }

/* ---------- cinta superior ---------- */
.cinta {
  background: var(--noche);
  color: rgba(255, 255, 255, 0.82);
  font-size: 13.5px;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--linea-clara);
}
.cinta .contenedor { display: flex; justify-content: space-between; align-items: center; height: 42px; }
.cinta-izq { display: flex; gap: 28px; }
.cinta-izq a { display: inline-flex; align-items: center; gap: 8px; }
.cinta-izq a:hover { color: var(--oro-claro); }
.cinta-izq svg { width: 15px; height: 15px; color: var(--oro); }
.cinta-der { display: flex; gap: 6px; }
.cinta-der a { width: 30px; height: 30px; display: grid; place-items: center; color: rgba(255, 255, 255, 0.75); }
.cinta-der a:hover { color: var(--oro-claro); }
.cinta-der svg { width: 15px; height: 15px; }

/* ---------- cabecera — el logo, grande y completo ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--noche);
  border-bottom: 1px solid var(--linea-clara);
  transition: box-shadow 0.3s;
}
.cabecera[data-encogida="si"] { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); }
.cabecera .contenedor {
  display: flex;
  align-items: center;
  gap: 40px;
  height: var(--cabecera-alto);
  transition: height 0.3s;
}
.cabecera[data-encogida="si"] .contenedor { height: 92px; }
.marca { display: block; flex: 0 0 auto; }
.marca img {
  --logo-alto: 84px;
  height: var(--logo-alto);
  max-height: var(--logo-alto);
  width: calc(var(--logo-alto) * 2870 / 1620);
  object-fit: contain;
  transition: none;
}
.cabecera[data-encogida="si"] .marca img { --logo-alto: 62px; }

.menu {
  display: flex;
  align-items: center;
  gap: 38px;
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.menu > a, .menu .abre-sub {
  position: relative;
  padding: 8px 0;
  color: inherit;
  transition: color 0.2s;
}
.menu > a::after, .menu .abre-sub::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--oro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}
.menu > a:hover::after, .menu > a.activo::after, .desplegable[data-abierto="si"] .abre-sub::after,
.desplegable:hover .abre-sub::after { transform: scaleX(1); }
.menu > a:hover, .menu .abre-sub:hover { color: var(--blanco); }

.desplegable { position: relative; }
.abre-sub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.abre-sub svg { width: 14px; height: 14px; transition: transform 0.25s; }
.desplegable[data-abierto="si"] .abre-sub svg, .desplegable:hover .abre-sub svg { transform: rotate(180deg); }
.panel-sub {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 290px;
  background: var(--blanco);
  border-top: 3px solid var(--oro);
  box-shadow: var(--sombra-suave);
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s, transform 0.22s, visibility 0.22s;
}
.desplegable[data-abierto="si"] .panel-sub, .desplegable:hover .panel-sub {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.panel-sub::before { content: ''; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.panel-sub a {
  display: block;
  padding: 14px 26px;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  color: var(--tinta);
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, padding-left 0.2s;
}
.panel-sub a:hover { background: var(--marfil); color: var(--marca); padding-left: 32px; }

.cabecera-cta { flex: 0 0 auto; }

.boton-hamburguesa {
  display: none;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: var(--blanco);
  cursor: pointer;
  place-items: center;
  margin-left: auto;
}
.boton-hamburguesa svg { width: 26px; height: 26px; }

/* ---------- menú del teléfono ---------- */
.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--noche);
  color: var(--blanco);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.35s ease;
  visibility: hidden;
}
.menu-movil[data-abierto="si"] { transform: translateX(0); visibility: visible; }
.menu-movil .contenedor { padding-top: 22px; padding-bottom: 40px; }
.fila-cierre { display: flex; justify-content: space-between; align-items: center; margin-bottom: 36px; }
.logo-menu { height: 70px; width: auto; }
.menu-movil nav { display: flex; flex-direction: column; border-top: 1px solid var(--linea-clara); }
.menu-movil nav a {
  padding: 18px 0;
  border-bottom: 1px solid var(--linea-clara);
  font-family: var(--titulos);
  font-size: 30px;
  font-weight: 500;
  color: var(--blanco);
}
.menu-movil nav a.sub { font-family: var(--texto-fuente); font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; padding: 15px 0 15px 22px; color: rgba(255, 255, 255, 0.8); }
.menu-movil .boton { width: 100%; margin-top: 30px; }
.menu-movil-datos { margin-top: 26px; text-align: center; line-height: 2; color: rgba(255, 255, 255, 0.75); }

/* ---------- portada ---------- */
.portada {
  position: relative;
  min-height: calc(100svh - var(--cabecera-alto) - 42px);
  min-height: max(640px, calc(100svh - var(--cabecera-alto) - 42px));
  display: flex;
  align-items: center;
  background: var(--noche);
  color: var(--blanco);
  overflow: hidden;
  padding: clamp(80px, 10vh, 140px) 0 clamp(150px, 16vh, 200px);
}
.portada-foto { position: absolute; inset: 0; }
.portada-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% center;
  animation: acercar 14s ease-out forwards;
}
@keyframes acercar { from { transform: scale(1.06); } to { transform: scale(1); } }
.portada-velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 26, 51, 0.93) 0%, rgba(10, 26, 51, 0.78) 34%, rgba(10, 26, 51, 0.28) 62%, rgba(10, 26, 51, 0.12) 100%),
    linear-gradient(180deg, rgba(10, 26, 51, 0.25) 0%, rgba(10, 26, 51, 0) 40%, rgba(10, 26, 51, 0.55) 100%);
}
.portada .contenedor { position: relative; }
.portada-texto { max-width: 860px; }
.portada-texto h1 { margin-bottom: 30px; }
.portada-texto p {
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 400;
  line-height: 1.6;
  max-width: 620px;
  color: rgba(255, 255, 255, 0.9);
}

/* ---------- cifras ---------- */
.cifras {
  position: relative;
  z-index: 2;
  margin-top: -110px;
  background: var(--marca);
  color: var(--blanco);
}
.cifras .contenedor {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.cifra {
  padding: clamp(30px, 3.6vw, 56px) clamp(20px, 3vw, 48px);
  border-left: 1px solid var(--linea-clara);
  border-top: 2px solid var(--oro);
}
.cifra:first-child { border-left: 0; padding-left: 0; }
.cifra strong {
  display: block;
  font-family: var(--titulos);
  font-size: clamp(50px, 5vw, 78px);
  font-weight: 600;
  line-height: 1;
  color: var(--oro-claro);
  margin-bottom: 10px;
}
.cifra-texto strong { font-size: clamp(30px, 2.6vw, 42px); line-height: 1.1; }
.cifra span { font-size: 15px; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.85); }

/* ---------- nosotros ---------- */
.nosotros { padding: clamp(80px, 9vw, 140px) 0 clamp(70px, 8vw, 120px); background: var(--blanco); }
.nosotros-rejilla {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) 1.1fr;
  gap: clamp(40px, 6vw, 110px);
  align-items: center;
}
.logo-grande {
  box-shadow: var(--sombra-suave);
  position: relative;
}
.logo-grande::before {
  content: '';
  position: absolute;
  inset: -16px;
  border: 1px solid var(--oro-suave);
  pointer-events: none;
}
.logo-grande img { width: 100%; height: auto; }
.redes-titulo {
  margin: 44px 0 14px;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--texto-medio);
}
.redes { display: flex; gap: 12px; }
.redes a {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--linea);
  color: var(--marca);
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
}
.redes a:hover { background: var(--marca); color: var(--blanco); border-color: var(--marca); transform: translateY(-3px); }
.redes svg { width: 18px; height: 18px; }
.nosotros-texto p { color: var(--texto); }
.nosotros-texto .entrada { margin-bottom: 1.1em; }

.mision-vision {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-top: clamp(60px, 7vw, 110px);
  background: var(--linea);
}
.panel {
  position: relative;
  background: var(--noche);
  color: var(--blanco);
  padding: clamp(40px, 4.5vw, 70px) clamp(28px, 4vw, 64px);
  overflow: hidden;
}
.panel:nth-child(2) { background: var(--marca); }
.panel::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 3px;
  background: var(--oro);
}
.panel-numero {
  position: absolute;
  right: 28px;
  top: 14px;
  font-family: var(--titulos);
  font-size: 150px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.06);
  font-weight: 700;
}
.panel h3 { color: var(--oro-claro); margin-bottom: 18px; font-size: clamp(30px, 2.6vw, 40px); }
.panel p { margin: 0; font-size: 17.5px; font-weight: 400; line-height: 1.75; color: rgba(255, 255, 255, 0.9); max-width: 560px; position: relative; }

/* ---------- servicios ---------- */
.servicios { padding: clamp(80px, 9vw, 140px) 0; background: var(--marfil); }
.servicios-rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--linea);
}
.servicio {
  padding: clamp(36px, 3.6vw, 56px) clamp(24px, 3vw, 48px) clamp(36px, 3.6vw, 56px) 0;
  border-right: 1px solid var(--linea);
  position: relative;
}
.servicio:nth-child(n+2) { padding-left: clamp(24px, 3vw, 48px); }
.servicio:last-child { border-right: 0; padding-right: 0; }
.servicio-numero {
  display: block;
  font-family: var(--titulos);
  font-size: 54px;
  line-height: 1;
  color: var(--oro);
  margin-bottom: 26px;
  font-weight: 500;
}
.servicio h3 { margin-bottom: 16px; }
.servicio p { color: var(--texto); font-weight: 400; font-size: 17.5px; min-height: 6.2em; }
.servicio .enlace-flecha { margin-top: 6px; }

/* ---------- testimonios ---------- */
.satisfaccion {
  padding: clamp(80px, 9vw, 140px) 0;
  background: var(--noche);
  color: var(--blanco);
  position: relative;
  overflow: hidden;
}
.satisfaccion::before {
  content: '';
  position: absolute;
  right: -10%;
  top: -30%;
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 58, 107, 0.7) 0%, rgba(10, 26, 51, 0) 65%);
  pointer-events: none;
}
.satisfaccion .contenedor { position: relative; }
.satisfaccion-rejilla {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: center;
}
.satisfaccion h2 { color: var(--blanco); }
.satisfaccion .entrada { color: rgba(255, 255, 255, 0.86); max-width: 640px; }

.marco-telefono { margin: 0; justify-self: center; width: min(100%, 360px); }
.marco-telefono-pantalla {
  position: relative;
  aspect-ratio: 9 / 16;
  background: #000;
  border-radius: 34px;
  border: 8px solid #1b2a47;
  box-shadow: 0 0 0 1px var(--oro-suave), 0 40px 90px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.marco-telefono-pantalla iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.marco-telefono figcaption {
  margin-top: 20px;
  text-align: center;
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro-claro);
}

/* ---------- preguntas frecuentes ---------- */
.faq { padding: clamp(80px, 9vw, 140px) 0; background: var(--blanco); }
.faq-rejilla {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}
.faq-intro { position: sticky; top: 130px; }
.faq-lista { border-top: 1px solid var(--linea); }
.faq-item { border-bottom: 1px solid var(--linea); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 26px 0;
  font-family: var(--titulos);
  font-size: clamp(22px, 1.9vw, 28px);
  font-weight: 600;
  color: var(--tinta);
  transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover, .faq-item[open] summary { color: var(--marca); }
.faq-mas {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--oro);
  border-radius: 50%;
  position: relative;
  transition: background 0.25s, transform 0.3s;
}
.faq-mas::before, .faq-mas::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  background: var(--marca);
  transform: translate(-50%, -50%);
}
.faq-mas::before { width: 14px; height: 1.5px; }
.faq-mas::after { width: 1.5px; height: 14px; transition: opacity 0.2s; }
.faq-item[open] .faq-mas { background: var(--marca); border-color: var(--marca); transform: rotate(180deg); }
.faq-item[open] .faq-mas::before { background: var(--blanco); }
.faq-item[open] .faq-mas::after { opacity: 0; }
.respuesta { padding: 0 60px 28px 0; }
.respuesta p { margin: 0; font-size: 17.5px; font-weight: 400; color: var(--texto); }

.faq-cierre {
  margin-top: clamp(60px, 7vw, 100px);
  padding: clamp(40px, 5vw, 70px);
  background: var(--marfil);
  text-align: center;
  border-top: 2px solid var(--oro);
}
.faq-cierre .entrada { margin-bottom: 6px; font-family: var(--titulos); font-size: clamp(26px, 2.4vw, 36px); font-weight: 500; color: var(--tinta); }
.faq-cierre-nota { color: var(--texto-medio); margin-bottom: 30px; }

/* ---------- contacto ---------- */
.contacto { padding: clamp(80px, 9vw, 140px) 0; background: var(--marfil); }
.contacto-rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
}
.datos { margin: 36px 0 40px; display: grid; gap: 20px; }
.datos li { display: flex; gap: 16px; align-items: flex-start; font-size: 17px; }
.datos svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--oro); margin-top: 3px; }
.datos a:hover { color: var(--marca); }

.formulario {
  background: var(--blanco);
  padding: clamp(30px, 3.6vw, 56px);
  box-shadow: var(--sombra-suave);
  border-top: 3px solid var(--oro);
}
.formulario h3 { margin-bottom: 6px; }
.formulario-nota { color: var(--texto-medio); margin-bottom: 30px; }
.campo { margin-bottom: 22px; }
.campo label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta);
  margin-bottom: 9px;
}
.campo input, .campo textarea {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--linea);
  background: var(--marfil);
  font: inherit;
  font-size: 16px;
  color: var(--tinta);
  transition: border-color 0.2s, background 0.2s;
}
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--marca); background: var(--blanco); }
.campo textarea { min-height: 150px; resize: vertical; }
.campo .error { display: none; margin-top: 7px; font-size: 13.5px; color: #b42318; }
.campo[data-error="si"] .error { display: block; }
.campo[data-error="si"] input, .campo[data-error="si"] textarea { border-color: #b42318; }
.nota-forma { margin: 14px 0 0; font-size: 13.5px; color: var(--texto-tenue); text-align: center; }

/* ---------- pie ---------- */
.pie {
  background: var(--noche);
  color: rgba(255, 255, 255, 0.8);
  padding: clamp(60px, 7vw, 100px) 0 36px;
  border-top: 3px solid var(--oro);
}
.pie-rejilla {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(36px, 5vw, 90px);
}
.logo-pie { height: 110px; width: auto; margin-bottom: 26px; }
.pie-marca p { max-width: 420px; font-weight: 400; font-size: 16px; }
.pie .redes { margin-top: 24px; }
.pie .redes a { border-color: var(--linea-clara); color: var(--blanco); }
.pie .redes a:hover { background: var(--oro); color: var(--noche); border-color: var(--oro); }
.pie h4 {
  font-family: var(--texto-fuente);
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--oro-claro);
  margin-bottom: 22px;
}
.pie ul li { margin-bottom: 12px; font-size: 15.5px; }
.pie ul a:hover { color: var(--oro-claro); }
.pie-abajo {
  margin-top: clamp(40px, 5vw, 70px);
  padding-top: 26px;
  border-top: 1px solid var(--linea-clara);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.6);
}
.credito a { color: var(--oro-claro); }

/* ---------- WhatsApp flotante ---------- */
.wa-flota {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--wa);
  color: var(--blanco);
  display: grid;
  place-items: center;
  box-shadow: 0 14px 34px rgba(37, 211, 102, 0.4);
  transition: transform 0.25s;
}
.wa-flota:hover { transform: scale(1.06); }
.wa-flota svg { width: 32px; height: 32px; }

/* ---------- aparición suave (solo con JS; sin JS todo se ve) ---------- */
html.con-js .aparece {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
html.con-js .aparece[data-demora="1"] { transition-delay: 0.12s; }
html.con-js .aparece[data-demora="2"] { transition-delay: 0.24s; }
html.con-js .aparece.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.con-js .aparece { opacity: 1; transform: none; transition: none; }
  .portada-foto img { animation: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Pantallas medianas
   ========================================================================== */
@media (max-width: 1180px) {
  .menu { gap: 26px; font-size: 12px; }
  .cabecera .contenedor { gap: 26px; }
  .marca img { --logo-alto: 72px; }
  .cabeza-ancha { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 980px) {
  :root { --cabecera-alto: 96px; }
  .menu, .cabecera-cta { display: none; }
  .boton-hamburguesa { display: grid; }
  .marca img { --logo-alto: 64px; }
  .cabecera[data-encogida="si"] .contenedor { height: 80px; }
  .cabecera[data-encogida="si"] .marca img { --logo-alto: 54px; }
  .cinta-der { display: none; }

  .cifras { margin-top: -70px; }
  .cifras .contenedor { grid-template-columns: 1fr; padding: 0; }
  .cifra { border-left: 0; padding-left: var(--lado); padding-right: var(--lado); border-top: 1px solid var(--linea-clara); }
  .cifra:first-child { border-top: 2px solid var(--oro); padding-left: var(--lado); }

  .nosotros-rejilla, .mision-vision, .servicios-rejilla, .satisfaccion-rejilla, .faq-rejilla, .contacto-rejilla { grid-template-columns: 1fr; }
  .nosotros-logo { max-width: 520px; }
  .servicio { border-right: 0; border-bottom: 1px solid var(--linea); padding-left: 0 !important; padding-right: 0 !important; }
  .servicio:last-child { border-bottom: 0; }
  .servicio p { min-height: 0; }
  .faq-intro { position: static; }
  .pie-rejilla { grid-template-columns: 1fr 1fr; }
  .pie-marca { grid-column: 1 / -1; }
  .marco-telefono { width: min(100%, 320px); }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  :root { --cabecera-alto: 84px; }
  .marca img { --logo-alto: 56px; }
  .cinta .contenedor { height: auto; padding-top: 8px; padding-bottom: 8px; }
  .cinta-izq { gap: 16px; flex-wrap: wrap; font-size: 12.5px; }
  .boton { padding: 17px 26px; font-size: 12px; }
  .botonera .boton { flex: 1 1 auto; }
  .portada { padding: 60px 0 120px; min-height: 0; }
  .portada-foto img { object-position: 55% center; }
  .portada-velo {
    background:
      linear-gradient(180deg, rgba(10, 26, 51, 0.35) 0%, rgba(10, 26, 51, 0.55) 45%, rgba(10, 26, 51, 0.92) 100%);
  }
  .portada-texto { padding-top: 34vh; }
  .respuesta { padding-right: 0; }
  .pie-rejilla { grid-template-columns: 1fr; }
  .pie-abajo { justify-content: center; text-align: center; }
  .wa-flota { width: 56px; height: 56px; right: 16px; bottom: 16px; }
  .panel-numero { font-size: 110px; }
}

/* ==========================================================================
   Páginas interiores: Servicios, Inmigración, Empresas, Taxes
   ========================================================================== */
.interior-portada {
  position: relative;
  background: var(--noche);
  color: var(--blanco);
  padding: clamp(70px, 9vw, 130px) 0 clamp(60px, 7vw, 100px);
  overflow: hidden;
}
.interior-portada::before {
  content: '';
  position: absolute;
  right: -12%;
  top: -50%;
  width: 55vw;
  height: 55vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 58, 107, 0.75) 0%, rgba(10, 26, 51, 0) 65%);
  pointer-events: none;
}
.interior-portada::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--oro);
}
.interior-portada .contenedor { position: relative; max-width: 1800px; }
.interior-portada h1 { font-size: clamp(42px, 5.4vw, 84px); max-width: 1000px; margin-bottom: 20px; }
.interior-subtitulo { color: var(--oro-claro); font-size: clamp(26px, 2.4vw, 36px); font-weight: 500; font-style: italic; margin-bottom: 18px; }
.interior-portada p {
  font-size: clamp(18px, 1.4vw, 21px);
  font-weight: 400;
  line-height: 1.6;
  max-width: 760px;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
}
.interior-cuerpo { padding: clamp(70px, 8vw, 120px) 0 clamp(80px, 9vw, 140px); background: var(--marfil); }
.tramites {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--linea);
  border-left: 1px solid var(--linea);
}
.tramites-1 { grid-template-columns: 1fr; max-width: 640px; }
.tramites-2 { grid-template-columns: repeat(2, 1fr); }
.tramite {
  background: var(--blanco);
  padding: clamp(32px, 3.4vw, 52px) clamp(24px, 2.8vw, 44px);
  position: relative;
  border-right: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  transition: background 0.3s;
}
.tramite::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 0;
  height: 3px;
  background: var(--oro);
  transition: width 0.4s;
}
.tramite:hover::before { width: 100%; }
.tramite .servicio-numero { font-size: 40px; margin-bottom: 18px; }
.tramite h3 { margin-bottom: 14px; font-size: clamp(24px, 2vw, 30px); }
.tramite p { margin: 0; font-size: 17px; font-weight: 400; color: var(--texto); }
.tramite .enlace-flecha { margin-top: 22px; }
.interior-cierre {
  margin-top: clamp(50px, 6vw, 90px);
  text-align: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.interior-cierre .entrada { color: var(--tinta); margin-bottom: 30px; }
.servicios-cierre { margin-top: clamp(50px, 6vw, 80px); text-align: center; max-width: 900px; margin-left: auto; margin-right: auto; }
.servicios-cierre .entrada { color: var(--tinta); margin-bottom: 30px; }
body.interior .cabecera { position: sticky; }

@media (max-width: 980px) {
  .tramites, .tramites-2 { grid-template-columns: 1fr; }
}

/* Testimonios reales: mosaico y fotografías ampliadas. */
.testimonios-historias { margin-top: clamp(64px, 8vw, 120px); }
.testimonios-cabecera { margin-bottom: 36px; }
.testimonios-cabecera h3 { color: var(--marfil); font-size: clamp(34px, 4vw, 56px); }
.testimonios-mosaico { columns: 3; column-gap: 24px; }
.testimonio-foto {
  display: block;
  break-inside: avoid;
  margin-bottom: 24px;
  border: 1px solid var(--oro);
  padding: 5px;
  border-radius: 12px;
  background: var(--noche);
  cursor: zoom-in;
}
.testimonio-foto img { display: block; width: 100%; height: auto; border-radius: 7px; }
.testimonio-foto:focus-visible, .testimonios-cerrar:focus-visible { outline: 3px solid var(--oro-claro); outline-offset: 4px; }
.testimonios-citas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; align-items: start; }
.testimonio-cita { margin: 0; min-width: 0; padding: clamp(24px, 3vw, 40px); background: var(--marfil); color: var(--noche); border: 1px solid var(--oro); border-radius: 12px; }
.testimonio-cita-foto > .testimonio-foto { width: min(100%, 220px); margin: 0 auto 24px; }
.testimonio-cita blockquote { margin: 0 0 24px; }
.testimonio-cita blockquote::before { content: '“'; display: block; height: 56px; font-family: var(--titulos); font-size: 88px; line-height: 1; color: var(--oro); }
.testimonio-cita blockquote p { margin: 0; font-family: var(--titulos); font-size: clamp(24px, 2.2vw, 30px); font-weight: 500; line-height: 1.4; }
.testimonio-cita figcaption { font-size: 18px; line-height: 1.5; }
.testimonio-origen { display: block; }
.testimonios-cierre { text-align: center; margin-top: 40px; }
.testimonios-lightbox { padding: 56px 12px 12px; margin: auto; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border: 1px solid var(--oro); border-radius: 12px; background: var(--noche); color: var(--marfil); }
.testimonios-lightbox::backdrop { background: rgba(4, 12, 25, 0.92); }
.testimonios-ampliada img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 108px); object-fit: contain; margin: auto; }
.testimonios-cerrar { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border: 1px solid var(--oro); border-radius: 50%; color: var(--marfil); background: var(--noche); font-size: 32px; line-height: 1; cursor: pointer; }
body:has(.testimonios-lightbox[open]) { overflow: hidden; }
@media (max-width: 980px) {
  .testimonios-mosaico { columns: 2; column-gap: 16px; }
  .testimonio-foto { margin-bottom: 16px; }
  .testimonios-citas { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .testimonios-mosaico { column-gap: 10px; }
  .testimonio-foto { margin-bottom: 10px; padding: 3px; }
}

/* Cambios de Mónica: una sola escala de lectura y retratos reales. */
:root { --cuerpo: 19px; }
body { font-size: var(--cuerpo); }
p, .entrada, .redes-titulo, .nota-forma, .portada-texto p, .panel p, .servicio p, .respuesta p,
.faq-cierre .entrada, .pie-marca p, .interior-portada p, .tramite p,
.testimonio-cita blockquote p {
  font-family: var(--texto-fuente); font-size: var(--cuerpo); font-weight: 400; line-height: 1.7;
}
.boton { min-height: 52px; font-size: 17px; letter-spacing: .02em; text-transform: none; white-space: normal; text-align: center; padding: 17px 24px; }
.enlace-flecha, .datos li, .pie ul li, .campo label, .campo input, .campo textarea, .campo .error { font-size: 17px; }
.menu { gap: 24px; letter-spacing: .06em; font-size: 17px; }
.cabecera .contenedor { gap: 24px; }
.cabecera-cta { max-width: 250px; }
.portada { min-height: 780px; padding: 80px 0 160px; }
.portada-foto { left: 52%; }
.portada-foto img { object-position: center top; animation: none; }
.portada-velo { pointer-events: none; background: linear-gradient(90deg, #0a1a33 45%, rgba(10,26,51,.18) 65%, transparent); }
.portada-texto { max-width: 53%; }
.portada-texto h1 { font-size: clamp(46px, 5vw, 78px); }
.nosotros-retrato { border: 1px solid var(--oro); box-shadow: var(--sombra-suave); }
.nosotros-retrato img { width: 100%; height: auto; }
.redes, .cinta-der { position: relative; z-index: 1; }
.redes a, .cinta-der a { position: relative; min-width: 44px; min-height: 44px; }
.cinta .contenedor { min-height: 46px; height: auto; }
.contacto .redes { margin-top: 24px; }
.aviso-documental { margin-top: 40px; }
.clientes-videos { margin-top: 64px; }
.videos-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.videos-rejilla video { width: 100%; aspect-ratio: 9 / 16; object-fit: contain; background: #000; border: 2px solid var(--oro); border-radius: 14px; }
.fichas { display: grid; gap: 16px; }
.ficha { background: var(--blanco); border: 1px solid var(--linea); border-top: 2px solid var(--oro); scroll-margin-top: 130px; }
.ficha summary { cursor: pointer; padding: 24px; font-family: var(--titulos); font-weight: 600; font-size: clamp(26px, 2.2vw, 34px); color: var(--marca); }
.ficha-contenido { padding: 0 24px 24px; }
.ficha h3 { font-size: 26px; margin: 24px 0 12px; }
.ficha-contenido p:last-child { margin-bottom: 0; }
.fuentes a { color: var(--marca); text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.lista-documentos { list-style: disc; padding-left: 24px; margin: 24px 0; }
.lista-documentos li { margin-bottom: 12px; }
.guia-servicios { margin: 32px 0; }
.guia-servicios ul { display: flex; flex-wrap: wrap; gap: 10px; }
.guia-servicios a { display: block; padding: 10px 14px; min-height: 44px; border: 1px solid var(--oro); color: var(--marca); font-size: 17px; }
.detalle-servicio { margin-top: 48px; }
.detalle-servicio h2 { margin-top: 40px; }
@media (max-width: 1180px) and (min-width: 981px) {
  .menu { gap: 16px; font-size: 17px; }
  .cabecera .contenedor { gap: 18px; }
  .cabecera-cta { max-width: 210px; padding: 15px; }
}
@media (max-width: 760px) {
  :root { --cuerpo: 18px; }
  .portada { display: block; padding: 0 0 110px; min-height: 0; }
  .portada-foto { display: block; position: relative; inset: auto; width: 100%; height: 480px; }
  .portada-foto img { object-fit: cover; object-position: center 15%; }
  .portada-velo { display: none; }
  .portada-texto { max-width: none; padding-top: 32px; }
  .portada-texto h1 { font-size: 46px; }
  .videos-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cinta-der { display: flex; }
  .cinta .contenedor { flex-wrap: wrap; gap: 8px; }
  .cinta-izq { gap: 4px; flex-direction: column; }
  .boton { font-size: 17px; }
  .menu-movil nav a.sub { font-size: 17px; letter-spacing: .03em; }
  .datos a { overflow-wrap: anywhere; }
}

/* Testimonios: galería editorial clara y tarjetas uniformes. */
.satisfaccion, .testimonios-pagina { background: var(--marfil); color: var(--noche); }
.satisfaccion::before { display: none; }
.satisfaccion h2, .satisfaccion .entrada { color: var(--noche); }
.testimonios-intro { max-width: 960px; margin-bottom: 48px; }
.satisfaccion .entrada { max-width: 900px; }
.testimonios-seccion { padding: 72px 0; border-bottom: 1px solid var(--linea); }
.testimonios-seccion h2 { margin-bottom: 36px; }
.testimonios-pagina { padding-bottom: 80px; }
.testimonios-resumen { display: grid; grid-template-columns: minmax(220px, .8fr) 1.2fr 1fr; gap: 24px; align-items: stretch; }
.video-tarjeta { position: relative; min-width: 0; overflow: hidden; border-radius: 18px; background: var(--noche); box-shadow: 0 12px 32px #0a1a3314; aspect-ratio: 9 / 16; }
.video-tarjeta video { display: block; width: 100%; height: 100%; aspect-ratio: 9 / 16; object-fit: cover; border: 0; border-radius: 18px; }
.video-tarjeta::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, #0a1a33d9); pointer-events: none; }
.video-play { position: absolute; z-index: 2; inset: 0; margin: auto; width: 76px; height: 76px; border: 0; border-radius: 50%; background: var(--oro); color: var(--noche); font-size: 30px; cursor: pointer; box-shadow: 0 8px 30px #0003; }
.video-play span { display: block; padding-left: 4px; }
.video-etiqueta { position: absolute; z-index: 1; bottom: 24px; left: 16px; right: 16px; color: white; font-size: 17px; text-align: center; pointer-events: none; }
.video-tarjeta.reproduciendo::after, .video-tarjeta.reproduciendo .video-etiqueta { display: none; }
.video-error { position: absolute; z-index: 3; inset: auto 8px 8px; padding: 8px; background: white; color: var(--noche); }
.historia-destacada { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.historia-destacada-texto .entrada { margin-bottom: 32px; }
.youtube-historia { margin: 0; min-width: 0; }
.youtube-pantalla { aspect-ratio: 9 / 16; overflow: hidden; border-radius: 18px; background: var(--noche); box-shadow: 0 12px 32px #0a1a3314; }
.youtube-pantalla iframe { width: 100%; height: 100%; border: 0; display: block; }
.youtube-historia figcaption { font-size: 17px; margin-top: 14px; }
.testimonios-mosaico { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; columns: auto; }
.testimonio-foto { padding: 0; margin: 0; border: 0; border-radius: 14px; overflow: hidden; background: white; box-shadow: 0 8px 28px #0a1a3312; }
.testimonios-mosaico .testimonio-foto { aspect-ratio: 4 / 5; }
.testimonios-mosaico img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; border-radius: 0; transition: transform .3s; }
.testimonios-mosaico a:hover img { transform: scale(1.035); }
.testimonios-mosaico img[src*="cliente-03"] { object-position: 65% center; }
.testimonios-mosaico img[src*="cliente-07"] { object-position: center 12%; }
.testimonios-mosaico img[src*="cliente-06"] { object-position: center 15%; }
.testimonios-mosaico img[src*="flyer-"] { object-position: center top; }
.testimonios-citas { align-items: stretch; gap: 28px; }
.testimonio-cita { padding: clamp(24px, 3vw, 40px); border: 0; background: white; border-radius: 18px; box-shadow: 0 8px 30px #0a1a330a; }
.testimonio-cita-foto { display: flex; align-items: flex-start; gap: 24px; }
.testimonio-cita-foto > .testimonio-foto { flex: 0 0 100px; width: 100px; margin: 0; }
.testimonio-cita-foto > .testimonio-foto img { width: 100%; height: 130px; object-fit: cover; object-position: center 20%; }
.testimonio-cita blockquote p { font-family: var(--titulos); font-style: italic; font-size: clamp(26px, 2.1vw, 30px); line-height: 1.35; font-weight: 400; }
.testimonio-cita figcaption::before { content: ''; display: block; width: 36px; height: 2px; background: var(--oro); margin-bottom: 16px; }
.testimonios-resumen .testimonio-cita { display: flex; flex-direction: column; justify-content: center; }
.testimonios-resumen .video-tarjeta { aspect-ratio: auto; min-height: 480px; }
.testimonios-resumen .video-tarjeta video { position: absolute; inset: 0; object-fit: contain; }
.testimonios-resumen .testimonio-cita-foto > .testimonio-foto { flex: none; margin-bottom: 20px; }
.testimonios-cierre .botonera { justify-content: center; }
[aria-current="page"] { text-decoration: underline; text-underline-offset: 8px; }
:where(button, a, summary):focus-visible { outline: 3px solid var(--oro); outline-offset: 4px; }
[hidden] { display: none !important; }

/* Trámites originales numerados; los details conservan acceso sin JavaScript. */
.aviso-guia { background: var(--marfil); border-left: 3px solid var(--oro); padding: 20px 24px; margin-bottom: 36px; }
.aviso-guia p, .aviso-guia .aviso-documental { margin: 0; }
.aviso-guia p + p { margin-top: 12px; }
.tramites-detalle { align-items: stretch; }
.tramite-detalle { min-width: 0; display: flex; flex-direction: column; }
.tramite-detalle .servicio-numero { color: var(--oro); }
.tramite-detalle .tramite-resumen { margin-bottom: 24px; }
.tramite-detalle .ficha { border: 0; margin-top: auto; background: transparent; }
.tramite-detalle .ficha summary { padding: 12px 0; font-family: var(--texto-fuente); font-size: 18px; min-height: 48px; color: var(--marca); }
.tramite-detalle .ficha summary { list-style: none; }
.tramite-detalle .ficha summary::-webkit-details-marker { display: none; }
.solo-lector { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.tramite-detalle .ficha-contenido { padding: 16px 0; }
.tramite-panel { margin: auto; padding: 36px; width: min(1040px, calc(100% - 40px)); max-height: calc(100dvh - 48px); border: 0; border-radius: 18px; background: var(--marfil); color: var(--noche); overflow-y: auto; }
.tramite-panel::backdrop { background: #0a1a33cc; }
.panel-cabecera { position: relative; padding-right: 55px; margin-bottom: 32px; }
.panel-cabecera h2 { font-size: clamp(36px, 4vw, 54px); }
.panel-cerrar { position: absolute; right: 0; top: 0; width: 48px; height: 48px; border: 1px solid var(--linea); border-radius: 50%; font-size: 32px; background: white; color: var(--noche); cursor: pointer; }
.panel-detalle .ficha-contenido { padding: 0; }
.panel-apartados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.panel-apartado { padding: 24px; background: white; border-radius: 12px; }
.panel-apartado h3 { color: #81631f; font-size: 28px; margin-bottom: 14px; }
.panel-detalle .fuentes { margin: 28px 0; }
body:has(.tramite-panel[open]) { overflow: hidden; }
@media (max-width: 1250px) and (min-width: 981px) { .cabecera-cta { display: none; } }
@media (max-width: 980px) {
 .testimonios-resumen { grid-template-columns: 1fr 1fr; }
 .testimonios-resumen > :last-child { grid-column: 1 / -1; }
 .testimonio-cita-foto { display: block; }
 .testimonio-cita-foto > .testimonio-foto { margin: 0 0 24px; }
}
@media (max-width: 640px) {
 .historia-destacada { grid-template-columns: 1fr; }
 .historia-destacada .youtube-historia { width: min(100%, 320px); justify-self: center; }
 .testimonios-resumen { grid-template-columns: 1fr; }
 .testimonios-resumen .video-tarjeta { width: min(100%, 320px); aspect-ratio: 9 / 16; min-height: 0; justify-self: center; }
 .testimonios-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
 .testimonios-seccion { padding: 48px 0; }
 .video-play { width: 60px; height: 60px; font-size: 25px; }
 .video-etiqueta { font-size: 17px; bottom: 16px; }
 .tramite-panel { width: 100%; height: 100dvh; max-width: 100%; max-height: 100dvh; padding: 24px 20px; border-radius: 0; }
 .panel-apartados { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .testimonios-mosaico img { transition: none; } }