:root {
  --color-navy: #1c2a3f;
  --color-dorado: #a8875a;
  --color-crema: #f3f1ec;
  --color-blanco: #ffffff;
  --color-carbon: #333333;
  --shadow-soft: 0 18px 50px rgba(28, 42, 63, 0.12);
  --radius-lg: 2rem;
  /* Ritmo vertical entre secciones. Se aplica una sola vez (padding-top), para
     que dos secciones contiguas no sumen sus paddings y dejen un hueco doble. */
  --space-section: clamp(3.5rem, 7vw, 7rem);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  /* Margen exterior del marco. En móvil se reduce y, en pantallas con muesca,
     lo sustituye el safe-area cuando este es mayor. */
  --frame-gap: 14px;
  /* Alto real de la barra fija en móvil; lo consumen scroll-margin y el hero. */
  --nav-h: 0px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  padding: var(--frame-gap);
  /* Con viewport-fit=cover el contenido puede meterse bajo la muesca y el
     indicador de inicio: se toma el mayor entre el margen del marco y el inset. */
  padding-top: max(var(--frame-gap), env(safe-area-inset-top));
  padding-right: max(var(--frame-gap), env(safe-area-inset-right));
  padding-bottom: max(var(--frame-gap), env(safe-area-inset-bottom));
  padding-left: max(var(--frame-gap), env(safe-area-inset-left));
  font-family: "Inter", sans-serif;
  background: #1c2a3f;
  color: var(--color-carbon);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-wrap: break-word;
}

section[id] {
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}

img {
  display: block;
  width: 100%;
  /* Sin esto, el atributo height="…" del HTML actúa como presentational hint y
     fija la altura, anulando en silencio cualquier aspect-ratio del CSS. */
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

/* Elimina el retardo de ~300ms que algunos navegadores móviles esperan para
   distinguir un toque de un doble toque de zoom. */
a,
button,
[role="button"],
.audience-tab,
.card-front {
  touch-action: manipulation;
}

.site-frame {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 28px);
  min-height: calc(100svh - 28px);
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-crema);
}

/* clip recorta igual que hidden pero no crea un contenedor de scroll: sin esto
   el position:sticky del nav móvil no se agarra al viewport. */
@supports (overflow: clip) {
  .site-frame {
    overflow: clip;
  }
}

.nav {
  position: absolute;
  top: 2rem;
  left: 2rem;
  right: 2rem;
  z-index: 10;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* El selector de idioma era texto navy al 40% sobre crema (2.6:1, por debajo del
   mínimo AA) y en escritorio flotaba sobre la foto oscura del hero, donde
   desaparecía del todo. Pasa a control segmentado: el idioma activo va relleno,
   el otro queda legible, y la base crema translúcida lo despega de cualquier
   imagen que quede debajo. */
.locale-toggle {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 2px;
  border: 1px solid rgba(28, 42, 63, 0.28);
  border-radius: 999px;
  /* Casi opaco a propósito: el hero va a cambiar de fotografía y el control
     tiene que seguir legible sea cual sea la imagen que quede debajo. */
  background: rgba(243, 241, 236, 0.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  font-weight: 700;
}

.locale-toggle button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0 0.45rem;
  min-width: 44px;
  min-height: 44px;
  color: rgba(28, 42, 63, 0.72);
  cursor: pointer;
  transition: color 200ms var(--ease-out-quart), background-color 200ms var(--ease-out-quart);
}

/* Relleno navy: la opción activa se lee de un vistazo, sin depender del color
   del texto para distinguirse de la otra. */
.locale-toggle button.is-active {
  background: var(--color-navy);
  color: var(--color-crema);
}

@media (hover: hover) {
  .locale-toggle button:not(.is-active):hover {
    color: var(--color-navy);
    background: rgba(28, 42, 63, 0.08);
  }
}

.locale-toggle button:not(.is-active):active {
  color: var(--color-navy);
  background: rgba(28, 42, 63, 0.12);
}

.locale-toggle button:focus-visible {
  outline: 2px solid var(--color-dorado);
  outline-offset: 2px;
}

.nav-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
}

.nav-pills a {
  padding: 0.8rem 1.15rem;
  border-radius: 999px;
  background: var(--color-navy);
  color: var(--color-blanco);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: transform 250ms var(--ease-out-quart), background-color 250ms var(--ease-out-quart);
}

@media (hover: hover) {
  .nav-pills a:hover {
    transform: translateY(-2px);
    background: var(--color-dorado);
  }
}

.nav-pills a:focus-visible {
  transform: translateY(-2px);
  background: var(--color-dorado);
}

.nav-pills a:active {
  transform: translateY(0) scale(0.97);
}

.hero {
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: 42% 58%;
  position: relative;
  overflow: hidden;
  background: var(--color-crema);
}

/* El bloque sigue centrado, pero el relleno inferior lo empuja hacia arriba:
   el logotipo sube sin que se abra un hueco entre la marca y el titular. */
.hero-left {
  padding: 3.5rem 3.5rem 9rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}

/* El logotipo es la marca completa (ISTMO / regla / GROUP), no un icono junto a
   un texto: el bloque solo lo dimensiona y lo alinea a la izquierda. */
.brand-block {
  display: flex;
  align-items: center;
  margin-bottom: 2.5rem;
}

.brand-block img {
  width: clamp(10rem, 14vw, 12.5rem);
  height: auto;
  /* Las letras ya traen su propio aire; se recorta el sobrante del lienzo para
     que el logotipo se alinee ópticamente con el texto que lleva debajo. */
  margin-left: -0.35rem;
}

/* En la barra legal el logotipo comparte fila con la navegación. */
.brand-block-nav {
  margin-bottom: 0;
  /* Es un enlace a la portada: mínimo táctil en cualquier tamaño. */
  min-height: 44px;
}

.brand-block-nav img {
  width: clamp(6.5rem, 9vw, 7.75rem);
}

.hero-copy {
  max-width: 34rem;
}

.eyebrow {
  margin: 0 0 1.1rem;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: #8a6a3c;
}

/* Regla dorada distintiva sobre cada eyebrow */
.eyebrow::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--color-dorado);
  margin-bottom: 0.8rem;
}

.contact .eyebrow {
  color: var(--color-dorado);
}

.hero h1,
.section h2,
.contact h2 {
  font-family: "Fraunces", serif;
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.02em;
}

.hero h1 {
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 500;
  margin: 0 0 1.3rem;
  color: var(--color-navy);
  max-width: 14ch;
}

.hero-description {
  margin: 0 0 1.8rem;
  max-width: 30rem;
  font-size: 1.05rem;
  color: var(--color-carbon);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.35rem;
  border-radius: 999px;
  transition: transform 250ms var(--ease-out-quart), background-color 250ms var(--ease-out-quart), color 250ms var(--ease-out-quart), box-shadow 250ms var(--ease-out-quart);
  min-height: 44px;
}

@media (hover: hover) {
  .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(28, 42, 63, 0.18);
  }
}

.button:focus-visible {
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0) scale(0.97);
  box-shadow: none;
}

.button-dark {
  background: var(--color-navy);
  color: var(--color-blanco);
}

.button-outline {
  border: 1px solid var(--color-navy);
  color: var(--color-navy);
}

.hero-right {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.hero-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── Coreografía de entrada del hero (solo con JS; sin JS todo queda visible) ── */
@media (prefers-reduced-motion: no-preference) {
  html.js .brand-block,
  html.js .hero-copy .eyebrow,
  html.js .hero h1,
  html.js .hero-description,
  html.js .hero-actions {
    opacity: 0;
    transform: translateY(24px);
    animation: hero-rise 800ms var(--ease-out-expo) forwards;
  }

  html.js .hero-copy .eyebrow { animation-delay: 120ms; }
  html.js .hero h1 { animation-delay: 220ms; }
  html.js .hero-description { animation-delay: 340ms; }
  html.js .hero-actions { animation-delay: 460ms; }

  html.js .hero-right img {
    opacity: 0;
    transform: scale(1.06);
    animation: hero-image-settle 1200ms var(--ease-out-quart) forwards;
  }

  html.js .hero-overlay {
    opacity: 0;
    animation: hero-rise 700ms var(--ease-out-quart) 700ms forwards;
  }
}

@keyframes hero-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-image-settle {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.hero-overlay {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  color: var(--color-blanco);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.75rem 1rem;
  background: rgba(28, 42, 63, 0.4);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

main {
  position: relative;
  z-index: 2;
  background: var(--color-crema);
}

.section {
  padding: var(--space-section) 3.5rem 0;
}

.section-heading {
  max-width: 47rem;
  margin-bottom: 2.5rem;
}

.section-heading h2,
.contact h2 {
  font-size: clamp(2rem, 3.3vw, 2.9rem);
  margin: 0;
  color: var(--color-navy);
}

.about-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem;
  /* Centrado en vez de start: la diferencia de alto que quede entre columnas se
     reparte arriba y abajo en lugar de acumularse como un hueco bajo el texto. */
  align-items: center;
}

/* Al ensancharse la pantalla la columna de texto se aplana y la imagen crece,
   que es justo lo que abría el hueco. Limitar la medida mantiene la columna
   alta y, de paso, deja la línea en ~70 caracteres en vez de ~110. */
.about-copy {
  max-width: 34rem;
}

.about-copy p {
  font-size: 1.05rem;
  margin: 0 0 1.2rem;
  color: var(--color-carbon);
}

/* Lede editorial: la primera frase como cita destacada */
.about-copy .about-lede {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-navy);
  margin-bottom: 1.5rem;
}

.about-visual img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.practice-areas-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
  gap: 1.5rem;
  /* Chrome y Firefox recolocan el scroll cuando un elemento crece (scroll
     anchoring); Safari no lo implementa. Al desplegar una ficha eso producía
     dos comportamientos distintos en Android y en iOS, así que se desactiva y
     el desplazamiento lo decide keepCardInView(). */
  overflow-anchor: none;
}

.card-flip-container {
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}

.card-flip-container {
  grid-column: span 2;
  perspective: 1600px;
}

.card-flip-container:nth-child(4) {
  grid-column: 2 / span 2;
}

.card-flip-container:nth-child(5) {
  grid-column: 4 / span 2;
}

.card-flip {
  position: relative;
  width: 100%;
  height: 16rem;
  transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1), height 450ms cubic-bezier(0.65, 0, 0.35, 1);
}

.card-flip-container.is-flipped .card-flip {
  transform: rotateY(180deg);
  height: 26rem;
}

.card-front,
.card-back {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 1.5rem;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  box-shadow: 0 10px 25px rgba(28, 42, 63, 0.05);
}

.card-front {
  background: var(--color-navy);
  color: var(--color-crema);
  cursor: pointer;
  transition: transform 280ms var(--ease-out-quart), box-shadow 280ms var(--ease-out-quart);
}

@media (hover: hover) {
  .card-flip-container:not(.is-flipped) .card-front:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 35px rgba(28, 42, 63, 0.12);
  }
}

.card-flip-container:not(.is-flipped) .card-front:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 16px 35px rgba(28, 42, 63, 0.12);
}

.card-flip-container:not(.is-flipped) .card-front:active {
  transform: translateY(-2px) scale(0.98);
}

.card-back {
  background: var(--color-navy);
  color: var(--color-crema);
  transform: rotateY(180deg);
  overflow-y: auto;
}

.card-number {
  font-family: "Fraunces", serif;
  color: rgba(168, 135, 90, 0.55);
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: 0.04em;
}

.card-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
}

.card-short-desc {
  margin: 0;
  color: rgba(243, 241, 236, 0.85);
}

.card-back h3 {
  margin: 0;
  font-family: "Fraunces", serif;
  font-size: 1.4rem;
  font-weight: 600;
}

.card-back > p {
  margin: 0;
  font-size: 0.95rem;
}

.card-services {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  font-size: 0.88rem;
}

.card-services li::before {
  content: "— ";
  color: var(--color-dorado);
}

.card-clients {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(243, 241, 236, 0.85);
}

.card-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px;
  margin-top: auto;
  color: var(--color-dorado);
  font-weight: 600;
}

.card-cta:active {
  color: var(--color-crema);
}

.card-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgba(243, 241, 236, 0.3);
  background: transparent;
  color: var(--color-crema);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: border-color 220ms var(--ease-out-quart), color 220ms var(--ease-out-quart), background-color 220ms var(--ease-out-quart), transform 220ms var(--ease-out-quart);
}

@media (hover: hover) {
  .card-close:hover {
    border-color: var(--color-dorado);
    color: var(--color-dorado);
    background: rgba(255, 255, 255, 0.06);
  }
}

.card-close:focus-visible {
  outline: none;
  border-color: var(--color-dorado);
  color: var(--color-dorado);
}

.card-close:active {
  transform: scale(0.92);
}

.card-flagship .card-front {
  border: 1px solid var(--color-dorado);
}

.card-flagship .card-front::after {
  content: attr(data-flagship-label);
  position: absolute;
  top: 1.75rem;
  right: 1.75rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-dorado);
  font-weight: 700;
}

.audience-selector {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.audience-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.audience-tab {
  border: 1px solid rgba(28, 42, 63, 0.15);
  background: transparent;
  color: var(--color-navy);
  padding: 0.8rem 1.15rem;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 250ms var(--ease-out-quart), background-color 250ms var(--ease-out-quart), color 250ms var(--ease-out-quart);
}

@media (hover: hover) {
  .audience-tab:hover {
    transform: translateY(-2px);
  }
}

.audience-tab:focus-visible {
  transform: translateY(-2px);
}

.audience-tab:active {
  transform: scale(0.97);
}

.audience-tab.is-active {
  background: var(--color-navy);
  color: var(--color-blanco);
  border-color: var(--color-navy);
}

.audience-ctas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 2rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.audience-ctas.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.audience-cta-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(28, 42, 63, 0.12);
  color: var(--color-navy);
  font-size: 1.05rem;
  transition: color 220ms var(--ease-out-quart), transform 220ms var(--ease-out-quart), border-color 220ms var(--ease-out-quart);
}

/* Sin hover que lo delate, en táctil el enlace parecía texto suelto: la flecha
   dorada es la señal de que la fila se puede tocar. */
.audience-cta-link::after {
  content: "→";
  flex: none;
  color: var(--color-dorado);
  opacity: 0.75;
  transition: transform 220ms var(--ease-out-quart);
}

.audience-cta-link:active {
  color: #8a6a3c;
  border-color: var(--color-dorado);
}

.audience-cta-link:active::after {
  transform: translateX(4px);
}

@media (hover: hover) {
  .audience-cta-link:hover {
    color: #8a6a3c;
    border-color: var(--color-dorado);
    transform: translateX(6px);
  }
}

.audience-cta-link:focus-visible {
  color: #8a6a3c;
  border-color: var(--color-dorado);
}

/* Última sección del flujo: sí necesita cerrar el espacio contra el footer. */
.contact {
  padding-bottom: var(--space-section);
}

.contact-card {
  position: relative;
  overflow: hidden;
  background: var(--color-navy);
  color: var(--color-crema);
  padding: 3rem;
  border-radius: 2rem;
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: 2rem;
  box-shadow: var(--shadow-soft);
}

/* Brillo dorado sutil en la esquina superior derecha */
.contact-card::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -15%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(168, 135, 90, 0.16), transparent 65%);
  pointer-events: none;
}

.contact-copy h2 {
  color: var(--color-blanco);
  margin-bottom: 1rem;
}

.contact-copy p {
  max-width: 36rem;
}

.contact-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0.9rem;
}

.contact-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(243, 241, 236, 0.2);
  padding-bottom: 0.6rem;
}

/* La dirección ocupa varias líneas; alinearla a la derecha conserva el patrón
   de "ficha técnica" de la lista en vez de dejar un bloque suelto en el medio. */
.contact-list li > :last-child {
  text-align: right;
  text-wrap: balance;
}

.contact-list span {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-dorado);
}

.contact-email {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: color 220ms var(--ease-out-quart), border-color 220ms var(--ease-out-quart);
}

.contact-email:active {
  color: var(--color-dorado);
  border-color: var(--color-dorado);
}

@media (hover: hover) {
  .contact-email:hover {
    color: var(--color-dorado);
    border-color: var(--color-dorado);
  }
}

.contact-email:focus-visible {
  color: var(--color-dorado);
  border-color: var(--color-dorado);
}

.contact-form {
  display: grid;
  gap: 1rem;
}

.contact-form label {
  display: grid;
  gap: 0.4rem;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-dorado);
}

.contact-form input,
.contact-form textarea {
  border: 1px solid rgba(243, 241, 236, 0.2);
  border-radius: 0.95rem;
  padding: 0.95rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-blanco);
  font-size: 1rem; /* ≥16px evita el zoom automático de iOS al enfocar */
  transition: border-color 220ms var(--ease-out-quart), background-color 220ms var(--ease-out-quart), box-shadow 220ms var(--ease-out-quart);
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: none;
  border-color: var(--color-dorado);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 0 3px rgba(168, 135, 90, 0.25);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.contact-form button {
  border: 0;
  border-radius: 999px;
  background: var(--color-dorado);
  color: var(--color-navy);
  padding: 1rem 1.2rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
  transition: transform 200ms var(--ease-out-quart), filter 200ms var(--ease-out-quart);
}

@media (hover: hover) {
  .contact-form button:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.06);
  }
}

.contact-form button:active:not(:disabled) {
  transform: scale(0.97);
}

.contact-form button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Honeypot anti-spam: fuera de pantalla, invisible para humanos. */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}

.form-status.is-error {
  color: #f2b8b5;
}

/* La animación de aparición solo se activa con JavaScript disponible
   (html.js la añade i18n.js); sin JS el contenido queda visible. */
html.js .reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 650ms var(--ease-out-quart), transform 650ms var(--ease-out-quart);
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Practice cards stagger in individually instead of rising as one flat block,
   extending the hero's staggered-entrance choreography into this section. */
html.js .practice-areas-grid.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

html.js .practice-areas-grid .card-flip-container {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 600ms var(--ease-out-quart), transform 600ms var(--ease-out-quart);
}

html.js .practice-areas-grid.is-visible .card-flip-container {
  opacity: 1;
  transform: translateY(0);
}

html.js .practice-areas-grid.is-visible .card-flip-container:nth-child(1) { transition-delay: 0ms; }
html.js .practice-areas-grid.is-visible .card-flip-container:nth-child(2) { transition-delay: 80ms; }
html.js .practice-areas-grid.is-visible .card-flip-container:nth-child(3) { transition-delay: 160ms; }
html.js .practice-areas-grid.is-visible .card-flip-container:nth-child(4) { transition-delay: 240ms; }
html.js .practice-areas-grid.is-visible .card-flip-container:nth-child(5) { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Las secciones bajo el pliegue no se pintan hasta acercarse al viewport. */
.practices,
.contact {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

/* ── Footer ── */
.footer {
  background: var(--color-navy);
  color: rgba(243, 241, 236, 0.78);
  padding: 4rem 3.5rem 2rem;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(243, 241, 236, 0.15);
}

.footer-brand-block {
  margin-bottom: 1rem;
}

.footer-brand-block img {
  width: clamp(7.5rem, 10vw, 9rem);
}

.footer-tagline {
  margin: 0;
  max-width: 22rem;
  font-size: 0.95rem;
}

.footer-heading {
  margin: 0 0 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-dorado);
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.95rem;
}

/* Los enlaces ya miden 44px por accesibilidad táctil: el gap se reduce para que
   la columna no se estire al sumar ambas cosas. */
.footer-col:has(a) {
  gap: 0.1rem;
}

.footer-col p {
  margin: 0;
}

.footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid transparent;
  transition: color 220ms var(--ease-out-quart), border-color 220ms var(--ease-out-quart);
}

.footer-col a:active {
  color: var(--color-crema);
  border-color: var(--color-dorado);
}

@media (hover: hover) {
  .footer-col a:hover {
    color: var(--color-crema);
    border-color: var(--color-dorado);
  }
}

.footer-col a:focus-visible {
  color: var(--color-crema);
  border-color: var(--color-dorado);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  font-size: 0.82rem;
  color: rgba(243, 241, 236, 0.55);
}

.footer-bottom p {
  margin: 0;
}

.footer-legal-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid transparent;
  transition: color 220ms var(--ease-out-quart), border-color 220ms var(--ease-out-quart);
}

.footer-legal-link:active {
  color: var(--color-crema);
  border-color: var(--color-dorado);
}

@media (hover: hover) {
  .footer-legal-link:hover {
    color: var(--color-crema);
    border-color: var(--color-dorado);
  }
}

.footer-legal-link:focus-visible {
  color: var(--color-crema);
  border-color: var(--color-dorado);
}

/* ── Páginas legales (privacy.html) ── */

/* Sin hero sobre el que flotar, el nav pasa a formar parte del flujo. */
.nav-legal {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 2rem 3.5rem 0;
  background: var(--color-crema);
}

.legal {
  padding: 3.5rem 3.5rem 5rem;
}

.legal-body {
  max-width: 44rem;
  color: var(--color-carbon);
}

.legal-header {
  margin-bottom: 2.5rem;
}

.legal-header h1 {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: clamp(2.2rem, 4vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-navy);
  margin: 0 0 0.75rem;
}

.legal-updated {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: rgba(51, 51, 51, 0.65);
}

/* Primer párrafo como lede editorial, igual que en la sección "About". */
.legal-lede {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(1.2rem, 1.7vw, 1.4rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--color-navy);
}

.legal-body h2 {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--color-navy);
  margin: 2.75rem 0 0.9rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(28, 42, 63, 0.12);
}

.legal-body p,
.legal-body li {
  font-size: 1rem;
  margin: 0 0 1.1rem;
}

.legal-body ul {
  margin: 0 0 1.1rem;
  padding-left: 1.1rem;
}

.legal-body li {
  margin-bottom: 0.7rem;
  padding-left: 0.3rem;
}

.legal-body li::marker {
  color: var(--color-dorado);
}

.legal-body strong {
  color: var(--color-navy);
  font-weight: 600;
}

.legal-body a {
  color: var(--color-navy);
  font-weight: 500;
  border-bottom: 1px solid var(--color-dorado);
  transition: color 220ms var(--ease-out-quart), background-color 220ms var(--ease-out-quart);
}

@media (hover: hover) {
  .legal-body a:hover {
    color: #8a6a3c;
  }
}

.legal-body a:active {
  color: #8a6a3c;
}

.legal-body a:focus-visible {
  outline: 2px solid var(--color-dorado);
  outline-offset: 3px;
}

@media (max-height: 900px) {
  .hero-left {
    padding-top: 2.5rem;
  }

  .brand-block {
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 1024px) {
  .practice-areas-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .card-flip-container:nth-child(4) {
    grid-column: auto;
  }

  .card-flip-container:nth-child(5) {
    grid-column: 2 / span 2;
  }

  .about-grid,
  .contact-card {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Móvil y tabletas en vertical (≤768px)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --frame-gap: 6px;
    --nav-h: 52px;
  }

  .site-frame {
    min-height: calc(100svh - 12px);
    border-radius: 14px;
  }

  /* ── Navegación ──────────────────────────────────────────────────────────
     Antes: tres píldoras navy que envolvían en dos filas y se comían 182px —
     casi un tercio de la primera pantalla de un iPhone SE — y desaparecían al
     bajar. Ahora: una sola barra fija y discreta, de 52px, siempre disponible
     en una página que en móvil mide seis pantallas. */
  .nav {
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
    z-index: 30;
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 0 0.6rem;
    background: var(--color-crema);
    border-bottom: 1px solid transparent;
    transition: border-color 250ms var(--ease-out-quart), box-shadow 250ms var(--ease-out-quart);
  }

  /* La regla y la sombra solo aparecen cuando la barra ya flota sobre el
     contenido; en reposo la barra no debe leerse como un elemento aparte. */
  .nav.is-stuck {
    border-bottom-color: rgba(28, 42, 63, 0.1);
    box-shadow: 0 6px 20px rgba(28, 42, 63, 0.06);
  }

  .nav-right {
    width: 100%;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0.5rem;
  }

  .nav-pills {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0;
    min-width: 0;
  }

  /* En una barra de 52px las píldoras no caben: pasan a enlaces de texto, que
     además leen más sobrios (el registro "banca privada" del resto del sitio). */
  .nav-pills a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.42rem;
    border-radius: 0;
    background: transparent;
    color: var(--color-navy);
    font-size: 0.6rem;
    letter-spacing: 0.09em;
    white-space: nowrap;
  }

  .nav-pills a:hover,
  .nav-pills a:focus-visible {
    transform: none;
    background: transparent;
    color: #8a6a3c;
  }

  .nav-pills a:focus-visible {
    outline: 2px solid var(--color-dorado);
    outline-offset: 2px;
  }

  .nav-pills a:active {
    transform: none;
    color: #8a6a3c;
  }

  .locale-toggle {
    flex: none;
    font-size: 0.63rem;
  }

  .locale-toggle button {
    min-width: 44px;
    padding: 0 0.3rem;
  }

  /* ── Hero ────────────────────────────────────────────────────────────────
     El min-height de 100svh se sumaba al alto del nav, así que la primera
     pantalla nunca llegaba al titular ni al botón. Ahora el hero ocupa
     exactamente lo que queda bajo la barra. */
  .hero {
    grid-template-columns: 1fr;
    min-height: calc(100svh - var(--nav-h));
    height: auto;
  }

  .hero-left {
    padding: 1.6rem 1.25rem 2.25rem;
    min-height: 0;
  }

  .hero-right {
    order: -1;
    height: 30svh;
    min-height: 10rem;
    max-height: 17rem;
  }

  .brand-block {
    margin-bottom: 1.15rem;
  }

  .brand-block img {
    width: clamp(8.5rem, 34vw, 10.5rem);
  }

  .hero h1 {
    font-size: clamp(1.95rem, 8.4vw, 2.55rem);
    line-height: 0.98;
    margin-bottom: 0.9rem;
  }

  .hero .eyebrow {
    margin-bottom: 0.75rem;
    font-size: 0.72rem;
  }

  .hero .eyebrow::before {
    margin-bottom: 0.6rem;
  }

  .hero-description {
    font-size: 1rem;
    margin-bottom: 1.25rem;
  }

  .hero-actions {
    gap: 0.6rem;
  }

  .hero-actions .button {
    flex: 1 1 auto;
    padding-inline: 1rem;
  }

  /* Caption, no barra: pegada al borde y a la anchura de su texto. */
  .hero-overlay {
    bottom: 0.75rem;
    left: 0.75rem;
    right: auto;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    padding: 0.5rem 0.7rem;
  }

  /* ── Secciones ───────────────────────────────────────────────────────────*/
  .section {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .section-heading {
    margin-bottom: 2rem;
  }

  /* En móvil la sección mide bastante más que los 700px estimados; afinarlo
     evita que la barra de scroll salte al entrar en el viewport. */
  .practices,
  .contact {
    contain-intrinsic-size: auto 1500px;
  }

  /* Etiqueta y valor siempre apilados: con el valor a la derecha, "Dirección"
     envolvía y "Email" no, y el par dejaba de leerse como ficha. */
  .contact-list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }

  .contact-list li > :last-child {
    text-align: left;
  }

  /* ── Fichas de práctica ──────────────────────────────────────────────────
     El giro 3D obligaba a una altura fija y el reverso se recortaba: 722px de
     contenido en una caja de 480px, con scroll interno dentro de un elemento
     transformado en 3D — el CTA quedaba inalcanzable y en iOS el conjunto
     parpadea. En móvil la ficha se despliega en su sitio y la página hace el
     único scroll que hay. */
  .card-flip-container {
    perspective: none;
  }

  .card-flip,
  .card-flip-container.is-flipped .card-flip {
    height: auto;
    transform: none;
    transform-style: flat;
    transition: none;
  }

  .card-front,
  .card-back {
    position: relative;
    inset: auto;
    transform: none;
    overflow: visible;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
  }

  .card-back {
    display: none;
    padding-top: 1.75rem;
  }

  .card-flip-container.is-flipped .card-front {
    display: none;
  }

  .card-flip-container.is-flipped .card-back {
    display: flex;
  }

  @media (prefers-reduced-motion: no-preference) {
    .card-flip-container.is-flipped .card-back {
      animation: card-open 380ms var(--ease-out-quart) both;
    }
  }

  /* El título ya no pasa por debajo del botón de cierre. */
  .card-back h3 {
    padding-right: 3rem;
  }

  /* Señal de que la ficha se despliega: en táctil no hay hover que lo insinúe. */
  .card-front::before {
    content: "+";
    position: absolute;
    right: 1.5rem;
    bottom: 1.4rem;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--color-dorado);
    opacity: 0.8;
  }

  .practice-areas-grid {
    grid-template-columns: 1fr;
  }

  .card-flip-container,
  .card-flip-container:nth-child(4),
  .card-flip-container:nth-child(5) {
    grid-column: auto;
  }

  .audience-ctas {
    grid-template-columns: 1fr;
  }

  .contact-card {
    padding: 1.5rem;
  }

  /* ── Pie ─────────────────────────────────────────────────────────────────*/
  .footer {
    padding: 3rem 1.25rem 1.5rem;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 0.35rem;
  }

  /* ── Páginas legales ─────────────────────────────────────────────────────
     La barra legal lleva además el logotipo. El width:100% de .nav-right la
     partía en dos filas y, ya fija, se comía 125px de pantalla: aquí vuelve a
     una sola fila compacta con el logotipo a la izquierda. */
  .nav-legal {
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding: 0 0.6rem;
  }

  .nav-legal .nav-right {
    width: auto;
    flex: none;
    gap: 0.35rem;
  }

  .nav-legal .brand-block img {
    width: 5.5rem;
  }

  .legal {
    padding: 2rem 1.25rem 3.5rem;
  }

  .legal-body h2 {
    margin-top: 2.25rem;
  }

  .legal-body p,
  .legal-body li {
    line-height: 1.75;
  }
}

@keyframes card-open {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pantallas muy estrechas (Galaxy Fold cerrado, 280px): la barra deja de caber
   en una fila y los enlaces se aprietan un punto más. */
@media (max-width: 360px) {
  .nav-pills a {
    font-size: 0.55rem;
    letter-spacing: 0.05em;
    padding: 0 0.3rem;
  }

  .locale-toggle button {
    min-width: 36px;
    padding: 0 0.15rem;
  }

  .nav-legal .brand-block img {
    width: 4.75rem;
  }

  .hero-actions .button {
    flex: 1 1 100%;
  }

  .hero-left {
    padding: 1.35rem 1rem 2rem;
  }

  .hero-right {
    max-height: 13rem;
  }

  .brand-block {
    margin-bottom: 0.9rem;
  }

  .hero h1 {
    font-size: clamp(1.55rem, 7.4vw, 2rem);
  }

  .hero-description {
    font-size: 0.94rem;
    margin-bottom: 1rem;
  }

  .section,
  .footer,
  .legal {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .contact-card {
    padding: 1.25rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Teléfono en horizontal
   El hero medía 100vh con overflow:hidden, así que a 390px de alto el titular
   se cortaba a media palabra y los botones quedaban fuera, inalcanzables. Aquí
   el hero deja de imponer altura y la barra pasa a fija, como en vertical.
   ══════════════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 540px) and (min-width: 769px) {
  :root {
    --nav-h: 48px;
  }

  .nav {
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
    z-index: 30;
    padding: 0 1rem;
    background: var(--color-crema);
    border-bottom: 1px solid transparent;
    transition: border-color 250ms var(--ease-out-quart), box-shadow 250ms var(--ease-out-quart);
  }

  .nav.is-stuck {
    border-bottom-color: rgba(28, 42, 63, 0.1);
    box-shadow: 0 6px 20px rgba(28, 42, 63, 0.06);
  }

  /* Sobre la foto, el navy del selector de idioma era ilegible; en la barra
     crema recupera contraste. */
  .nav-right {
    width: 100%;
    justify-content: flex-end;
  }

  .nav-pills a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.55rem 0.9rem;
    font-size: 0.62rem;
  }

  /* La clave: altura automática. Nada que recortar. */
  .hero {
    height: auto;
    min-height: 0;
  }

  .hero-left {
    padding: 1.25rem 1.75rem 1.5rem;
  }

  .hero-right {
    height: auto;
    min-height: 13rem;
  }

  .hero-right img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
  }

  .brand-block {
    margin-bottom: 0.7rem;
  }

  .brand-block img {
    width: clamp(6rem, 11vw, 7.5rem);
  }

  .hero h1 {
    font-size: clamp(1.45rem, 2.9vw, 1.95rem);
    line-height: 1.02;
    margin-bottom: 0.55rem;
    max-width: none;
  }

  .hero .eyebrow {
    margin-bottom: 0.5rem;
    font-size: 0.64rem;
  }

  .hero .eyebrow::before {
    margin-bottom: 0.45rem;
  }

  .hero-description {
    font-size: 0.87rem;
    margin-bottom: 0.85rem;
  }

  .hero-actions .button {
    padding: 0.7rem 1.1rem;
    font-size: 0.92rem;
  }

  .hero-overlay {
    bottom: 0.75rem;
    left: 0.75rem;
    font-size: 0.65rem;
    padding: 0.45rem 0.65rem;
  }

  /* Con tan poca altura, el reverso de la ficha no puede vivir en una caja
     fija: se despliega en su sitio, igual que en vertical. */
  .card-flip-container {
    perspective: none;
  }

  .card-flip,
  .card-flip-container.is-flipped .card-flip {
    height: auto;
    transform: none;
    transform-style: flat;
    transition: none;
  }

  .card-front,
  .card-back {
    position: relative;
    inset: auto;
    transform: none;
    overflow: visible;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
  }

  .card-back {
    display: none;
    padding-top: 1.75rem;
  }

  .card-back h3 {
    padding-right: 3rem;
  }

  .card-flip-container.is-flipped .card-front {
    display: none;
  }

  .card-flip-container.is-flipped .card-back {
    display: flex;
  }
}

/* Teléfono pequeño en horizontal (p. ej. iPhone SE, 667×375): mantiene el hero
   apilado del bloque de móvil, pero la foto no puede llevarse casi la mitad de
   los 375px de alto disponibles. */
@media (orientation: landscape) and (max-height: 540px) and (max-width: 768px) {
  .hero {
    min-height: 0;
  }

  .hero-right {
    height: 26svh;
    min-height: 6rem;
    max-height: 7.5rem;
  }

  .hero-left {
    padding: 1rem 1.25rem 1.4rem;
  }

  .brand-block {
    margin-bottom: 0.55rem;
  }

  .brand-block img {
    width: 7rem;
  }

  .hero .eyebrow {
    margin-bottom: 0.45rem;
    font-size: 0.62rem;
  }

  .hero .eyebrow::before {
    margin-bottom: 0.4rem;
  }

  .hero h1 {
    font-size: clamp(1.4rem, 4.6vw, 1.75rem);
    line-height: 1.02;
    margin-bottom: 0.5rem;
  }

  .hero-description {
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
  }

  .hero-actions .button {
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
  }
}