/* Esquivel & Asociados: estilos del sitio público.
   Una sola paleta: neutros fríos + el rojo de la balanza del logo como único acento.
   Formas: tarjetas e imágenes con radio 14px, botones en píldora, campos con radio 10px.
   Tema claro y oscuro según el sistema del visitante. */

@font-face{font-family:'Geist';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/geist-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/geist-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Respaldo con métricas medidas sobre este sitio (canvas, Geist contra Arial): el texto no se mueve cuando llega la fuente */
@font-face{font-family:'Geist Fallback';src:local('Arial');size-adjust:100.29%;ascent-override:100.71%;descent-override:29.91%;line-gap-override:0%}

:root {
  --bg: #f6f7f9;
  --surface: #fdfdfe;
  --surface-2: #eef1f4;
  --ink: #121922;
  --muted: #4c5866;
  --line: #dbe1e7;
  --accent: #b32431;
  --accent-invertido: #f0636e; /* acento sobre fondos invertidos (tinta) */
  --accent-hover: #941b27;
  --on-accent: #fff8f8;
  --accent-soft: #f8e7e9;
  --radius: 14px;
  --radius-campo: 10px;
  --sans: 'Geist', 'Geist Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Noto Sans KR', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  --alto-cabecera: 68px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1319;
    --surface: #151c24;
    --surface-2: #1a232d;
    --ink: #e6ebf0;
    --muted: #a3afbb;
    --line: #273240;
    --accent: #f0636e;
    --accent-invertido: #b32431;
    --accent-hover: #ff7d87;
    --on-accent: #23070a;
    --accent-soft: #3a1a20;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); background: var(--bg); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { line-height: 1.15; text-wrap: balance; margin: 0; }
p { margin: 0; }
[id] { scroll-margin-top: calc(var(--alto-cabecera) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.marco { width: min(100% - 2rem, 76rem); margin-inline: auto; }
.saltar { position: absolute; left: -999px; top: 0.5rem; z-index: 30; background: var(--surface); padding: 0.5rem 1rem; border-radius: var(--radius-campo); }
.saltar:focus { left: 1rem; }
.icono { width: 1.15em; height: 1.15em; flex: none; }
.icono-chico { width: 0.85em; height: 0.85em; }

/* Botones (píldora) */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8rem 1.45rem; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; }
.boton:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.boton:active { transform: translateY(1px); }
.boton-secundario { background: transparent; color: var(--ink); border-color: var(--line); }
.boton-secundario:hover { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.boton-chico { padding: 0.55rem 1.05rem; font-size: 0.92rem; }
.enlace-flecha { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; text-decoration: none; }
@media (prefers-reduced-motion: no-preference) {
  .boton, .boton-secundario { transition: background-color .2s ease, border-color .2s ease, transform .1s ease; }
  .enlace-flecha .icono, .guia-flecha { transition: transform .2s cubic-bezier(.16,1,.3,1); }
}
.enlace-flecha:hover .icono { transform: translateX(3px); }

/* Encabezado */
.cabecera { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.cabecera-fila { display: flex; align-items: center; gap: 1.5rem; min-height: var(--alto-cabecera); }
.marca { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ink); text-decoration: none; margin-right: auto; }
.marca:hover { color: var(--ink); }
.marca-icono { width: 28px; height: 28px; color: var(--accent); flex: none; }
.marca-nombre { font-weight: 650; font-size: 1.08rem; letter-spacing: -0.015em; white-space: nowrap; }
.marca-y { font-weight: 400; color: var(--muted); }
.menu { display: none; gap: 1.6rem; }
.menu a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.97rem; white-space: nowrap; }
.menu a:hover { color: var(--accent); }
.cabecera-acciones { display: flex; align-items: center; gap: 0.6rem; }
.cabecera-acciones > .boton { display: none; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.idioma, .menu-movil { position: relative; }
.idioma summary { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.idioma-lista, .menu-movil-lista { position: absolute; right: 0; top: calc(100% + 8px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.4rem; display: grid; min-width: 11rem; box-shadow: 0 12px 32px rgb(18 25 34 / 0.14); }
.idioma-lista a, .menu-movil-lista a { padding: 0.55rem 0.8rem; border-radius: var(--radius-campo); color: var(--ink); text-decoration: none; }
.idioma-lista a:hover, .menu-movil-lista a:hover { background: var(--surface-2); }
.idioma-lista a[aria-current="true"] { color: var(--accent); font-weight: 600; }
.menu-movil summary { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); }
.menu-movil summary .icono { width: 22px; height: 22px; }
.menu-movil-lista { min-width: 15rem; }
@media (max-width: 420px) {
  .cabecera-fila { gap: 0.75rem; }
  .cabecera-acciones { gap: 0.4rem; }
  .marca { min-width: 0; }
  .marca-icono { width: 24px; height: 24px; }
  .marca-nombre { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; }
  .idioma summary > .icono:first-child { display: none; }
  .idioma summary { padding-inline: 0.6rem; }
}
@media (min-width: 640px) { .cabecera-acciones > .boton { display: inline-flex; } }
@media (min-width: 1100px) { .menu { display: flex; } .menu-movil { display: none; } }

/* Portada: hero */
.hero { padding-block: 2.5rem 3.5rem; }
.hero-rejilla { display: grid; gap: 2.25rem; align-items: center; }
.ceja { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.hero h1 { font-size: clamp(2.25rem, 1.45rem + 3.1vw, 3.6rem); font-weight: 650; letter-spacing: -0.035em; line-height: 1.04; max-width: 13em; }
.hero-bajada { margin-top: 1.25rem; font-size: 1.16rem; color: var(--muted); max-width: 34rem; }
.hero-botones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.hero-foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 62% center; border-radius: var(--radius); }
@media (min-width: 960px) {
  .hero { padding-block: 4rem 5rem; }
  .hero-rejilla { grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; }
  .hero-foto img { aspect-ratio: 5 / 4; }
}

/* Hechos: franja con datos de la firma */
.hechos { border-block: 1px solid var(--line); background: var(--surface); }
.hechos-fila { display: grid; gap: 1.25rem; padding-block: 1.75rem; }
.hecho { display: grid; gap: 0.15rem; }
.hecho strong { font-size: 1.45rem; font-weight: 650; letter-spacing: -0.02em; }
.hecho span { color: var(--muted); font-size: 0.97rem; }
@media (min-width: 768px) {
  .hechos-fila { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .hecho + .hecho { border-left: 1px solid var(--line); padding-left: 2rem; }
}

/* Secciones */
.servicios, .proceso, .guias, .areas, .contacto { padding-block: 3.5rem; }
.seccion-titulo { font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.35rem); font-weight: 650; letter-spacing: -0.025em; }
.seccion-texto { color: var(--muted); margin-top: 0.75rem; max-width: 40rem; }
@media (min-width: 960px) { .servicios, .proceso, .guias, .areas, .contacto { padding-block: 5rem; } }

/* Servicios: rejilla asimétrica (residencia grande, sociedades y bancos apilados) */
.servicios-rejilla { display: grid; gap: 1.25rem; margin-top: 2rem; }
.servicio { display: grid; grid-template-rows: auto 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.servicio-foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.servicio-texto { display: grid; gap: 0.6rem; align-content: start; padding: 1.4rem 1.5rem 1.6rem; }
.servicio h3 { font-size: 1.35rem; font-weight: 650; letter-spacing: -0.015em; }
.servicio p { color: var(--muted); }
.servicio .enlace-flecha { margin-top: 0.35rem; }
@media (min-width: 960px) {
  .servicios-rejilla { grid-template-columns: 1.4fr 1fr; }
  .servicio-residencia { grid-row: span 2; }
  .servicio-residencia .servicio-foto img { aspect-ratio: 4 / 3; height: 100%; }
  .servicio-residencia h3 { font-size: 1.6rem; }
  .servicio-sociedades, .servicio-bancos { grid-template-columns: 0.9fr 1.1fr; grid-template-rows: none; }
  .servicio-sociedades .servicio-foto img, .servicio-bancos .servicio-foto img { aspect-ratio: auto; height: 100%; }
}

/* Proceso: secuencia real de cuatro pasos */
.proceso { background: var(--surface); border-block: 1px solid var(--line); }
.proceso-lista { list-style: none; counter-reset: paso; margin: 2.25rem 0 0; padding: 0; display: grid; gap: 1.75rem; }
.proceso-lista li { counter-increment: paso; display: grid; gap: 0.5rem; padding-left: 3.4rem; position: relative; }
.proceso-lista li::before { content: counter(paso); position: absolute; left: 0; top: -0.2rem; width: 2.4rem; height: 2.4rem; border-radius: 999px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.proceso-lista h3 { font-size: 1.15rem; font-weight: 650; }
.proceso-lista p { color: var(--muted); }
@media (min-width: 900px) {
  .proceso-lista { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .proceso-lista li { padding-left: 0; padding-top: 3.6rem; }
  .proceso-lista li::after { content: ""; position: absolute; top: 1.2rem; left: 3.2rem; right: -1rem; border-top: 1px dashed var(--line); }
  .proceso-lista li:last-child::after { display: none; }
}

/* Guías de residencia: enlaces a los artículos */
.guias-lista { list-style: none; margin: 2rem 0 1.75rem; padding: 0; display: grid; column-gap: 2.5rem; }
.guia { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.guia-titulo { font-weight: 600; line-height: 1.35; }
.guia-resumen { grid-column: 1; color: var(--muted); font-size: 0.95rem; }
.guia-flecha { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--accent); width: 1.25em; height: 1.25em; }
.guia:hover { color: var(--ink); }
.guia:hover .guia-titulo { color: var(--accent); }
.guia:hover .guia-flecha { transform: translateX(3px); }
@media (min-width: 900px) { .guias-lista { grid-template-columns: 1fr 1fr; } }

/* Otras áreas de práctica, agrupadas */
.areas { background: var(--surface-2); }
.areas-rejilla { display: grid; gap: 2rem; margin-top: 2rem; }
.area h3 { font-size: 1.05rem; font-weight: 650; padding-bottom: 0.75rem; margin-bottom: 0.75rem; border-bottom: 2px solid var(--accent); width: fit-content; }
.area ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; color: var(--muted); }
.area a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.2em; }
.area a:hover { color: var(--accent); text-decoration-color: currentColor; }
@media (min-width: 768px) { .areas-rejilla { grid-template-columns: 1.4fr 1fr 1fr; } }

/* Contacto: datos y formulario */
.contacto-rejilla { display: grid; gap: 2.5rem; }
.datos { margin: 2rem 0 0; display: grid; gap: 1.25rem; }
.datos dt { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; color: var(--muted); }
.datos dt .icono { color: var(--accent); }
.datos dd { margin: 0.25rem 0 0; padding-left: 1.65rem; }
.formulario { display: grid; gap: 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.campo { display: grid; gap: 0.4rem; }
.campo label { font-weight: 600; font-size: 0.95rem; }
.campo input, .campo select, .campo textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-campo); padding: 0.7rem 0.85rem; }
.campo textarea { resize: vertical; min-height: 8rem; }
.campo input, .campo select { min-height: 3.15rem; } /* el select y los campos de texto, del mismo alto */
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.formulario-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.nota { font-size: 0.88rem; color: var(--muted); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Turnstile: se reserva el alto de la casilla para que el formulario no salte al aparecer
   (65 px a lo ancho; 140 px en la versión compacta, cuando no caben 300 px) */
.verificacion { container-type: inline-size; display: grid; gap: 0.5rem; }
.verificacion-widget { min-height: 65px; }
@container (max-width: 299px) { .verificacion-widget { min-height: 140px; } }
.verificacion-aviso { margin: 0; font-size: 0.92rem; color: var(--accent); }
@media (min-width: 640px) {
  .formulario { grid-template-columns: 1fr 1fr; padding: 2rem; }
  .campo-ancho { grid-column: 1 / -1; }
}
@media (min-width: 960px) { .contacto-rejilla { grid-template-columns: 0.85fr 1.15fr; gap: 4rem; align-items: start; } }

/* Pie */
.pie { background: var(--surface-2); border-top: 1px solid var(--line); font-size: 0.95rem; }
.pie-rejilla { display: grid; gap: 2rem; padding-block: 3rem 2rem; }
.pie-marca p { color: var(--muted); margin-top: 0.85rem; max-width: 26rem; }
.pie-titulo { font-size: 0.95rem; font-weight: 650; margin-bottom: 0.75rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.pie a { color: var(--ink); text-decoration: none; }
.pie a:hover { color: var(--accent); }
.pie-contacto li { color: var(--muted); }
.pie-base { border-top: 1px solid var(--line); padding-block: 1.25rem; color: var(--muted); font-size: 0.88rem; }
/* La marca es la columna ancha; las demás se reparten (4 o 5 columnas según el idioma) */
@media (min-width: 900px) { .pie-rejilla { grid-template-columns: 1.6fr; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }

/* Artículos */
.articulo { max-width: calc(46rem + 2rem); padding-block: 2rem 4rem; }
.migas { font-size: 0.88rem; color: var(--muted); margin-bottom: 1rem; }
.migas a { color: var(--muted); }
.articulo h1 { font-size: clamp(1.85rem, 1.25rem + 2.4vw, 2.75rem); font-weight: 650; letter-spacing: -0.03em; line-height: 1.12; overflow-wrap: anywhere; }
.fecha, .traducciones { font-size: 0.92rem; color: var(--muted); margin-top: 0.6rem; }
.contenido { margin-top: 2rem; overflow-wrap: break-word; }
.contenido > * + * { margin-top: 1.1rem; }
.contenido h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.8rem); font-weight: 650; letter-spacing: -0.02em; margin-top: 2.5rem; }
.contenido h3 { font-size: 1.22rem; font-weight: 650; margin-top: 2rem; }
.contenido h4 { font-size: 1.05rem; font-weight: 650; margin-top: 1.5rem; }
.contenido hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.25rem; }
.contenido blockquote { margin-inline: 0; padding: 1rem 1.25rem; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 var(--radius-campo) var(--radius-campo) 0; }
.contenido figure { margin-inline: 0; }
.contenido figure img { margin-inline: auto; border-radius: var(--radius); }
.contenido audio { display: block; width: 100%; }
.contenido ul, .contenido ol { padding-left: 1.4rem; }
.contenido li + li { margin-top: 0.35rem; }
.portada { border-radius: var(--radius); margin-top: 1.5rem; }

/* Tablas: en computadora, tabla con desplazamiento si no cabe; en el celular, cada fila es
   una tarjeta con el nombre de la columna junto a cada dato (data-label). */
.tabla { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.tabla table { width: 100%; border-collapse: collapse; font-size: 0.95rem; line-height: 1.5; }
.tabla th, .tabla td { padding: 0.75rem 0.95rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tabla thead th { background: var(--ink); color: var(--bg); font-weight: 600; }
.tabla tbody tr:nth-child(even) { background: var(--surface-2); }
.tabla tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) {
  .tabla { border: 0; background: transparent; overflow: visible; }
  .tabla table, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla tbody tr { margin-bottom: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .tabla tbody tr:nth-child(even) { background: var(--surface); }
  .tabla td:first-child { background: var(--surface-2); font-weight: 600; }
  .tabla td[data-label]::before { content: attr(data-label); display: block; font-size: 0.76rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 0.2rem; }
}

/* Llamado a la acción en artículos */
.cta { margin-top: 3rem; padding: 1.75rem; border-radius: var(--radius); background: var(--accent-soft); display: grid; gap: 0.75rem; justify-items: start; }
.cta-titulo { font-size: 1.3rem; font-weight: 650; letter-spacing: -0.015em; }
.cta p { color: var(--ink); }

/* Lista del blog */
.lista-blog { padding-block: 2.5rem 4rem; }
.lista-blog h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem); font-weight: 650; letter-spacing: -0.03em; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1.25rem; margin-top: 2rem; }
.tarjeta { display: grid; gap: 0.5rem; align-content: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; }
.tarjeta h2 { font-size: 1.15rem; font-weight: 650; line-height: 1.35; }
.tarjeta h2 a { color: var(--ink); text-decoration: none; }
.tarjeta h2 a:hover { color: var(--accent); }
.tarjeta p { color: var(--muted); }
.tarjeta .fecha { margin: 0; }
.paginas { margin-top: 2rem; display: flex; gap: 1rem; }

/* Avisos (404, gracias) */
.aviso { padding-block: 5rem; display: grid; gap: 1.25rem; justify-items: start; }
.aviso h1 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.5rem); font-weight: 650; letter-spacing: -0.025em; }

/* Portadas: miniaturas 3:2 en tarjetas y en la lista de guías; sin portada, un recuadro con ícono */
.mini { display: block; aspect-ratio: 3 / 2; border-radius: var(--radius-campo); overflow: hidden; background: var(--surface-2); }
.mini img, img.mini { width: 100%; height: 100%; object-fit: cover; }
.mini-icono img { object-fit: contain; }
.mini-vacia { container-type: inline-size; display: flex; flex-direction: column; justify-content: space-between; padding: 7% 8%; background: var(--ink); color: var(--bg); }
.mini-vacia .icono { width: 2rem; height: 2rem; color: var(--accent-invertido); }
.mini-tema { font-size: clamp(1.15rem, 8cqi, 1.75rem); font-weight: 650; letter-spacing: -0.025em; line-height: 1.12; text-wrap: balance; border-top: 2px solid var(--accent-invertido); padding-top: 0.6rem; max-width: 15ch; }
@container (max-width: 9rem) { .mini-vacia { justify-content: center; align-items: center; } .mini-tema { display: none; } }
.tarjeta { position: relative; padding: 0.75rem 0.75rem 1.4rem; }
.tarjeta > :not(.mini) { padding-inline: 0.65rem; }
.tarjeta > .mini { margin-bottom: 0.5rem; }
.tarjeta h2 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.tarjeta:hover h2 a { color: var(--accent); }
.tarjeta:has(a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.guia { grid-template-columns: 5.5rem 1fr auto; align-items: center; }
.guia > .mini { grid-row: 1 / span 2; width: 5.5rem; align-self: start; margin-top: 0.2rem; }
.guia-titulo, .guia-resumen { grid-column: 2; }
.guia-flecha { grid-column: 3; }
picture.portada { display: block; margin-top: 1.5rem; }
picture.portada img { border-radius: var(--radius); width: 100%; height: auto; }
.portada-icono img { max-width: 16rem; margin-inline: auto; }
/* Celular: la guía pasa a dos filas (miniatura y título arriba, resumen debajo a todo el ancho),
   sin la flecha, que le quitaba espacio al texto */
@media (max-width: 640px) {
  .guia { grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-areas: "mini titulo" "resumen resumen"; gap: 0.7rem 1rem; padding-block: 1.25rem; }
  .guia > .mini { grid-area: mini; width: 6.5rem; margin-top: 0; align-self: center; }
  .guia-titulo { grid-area: titulo; align-self: center; font-size: 1.02rem; }
  .guia-resumen { grid-area: resumen; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .guia-flecha { display: none; }
}

/* Preguntas frecuentes al final del artículo (también van en el JSON-LD FAQPage) */
.faq { margin-top: 3rem; padding-top: 0.5rem; border-top: 1px solid var(--line); }
.faq h3 { font-size: 1.08rem; margin-top: 1.5rem; }
.faq h3 + p { margin-top: 0.4rem; color: var(--muted); }

/* Índice de los artículos largos (3 subtítulos o más) */
.indice { margin-top: 2rem; padding: 1.1rem 1.35rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.indice-titulo { font-size: 0.82rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.indice ol { margin: 0.6rem 0 0; padding-left: 1.25rem; display: grid; gap: 0.4rem; }
.indice a { color: var(--ink); text-decoration: none; }
.indice a:hover { color: var(--accent); text-decoration: underline; }
.contenido h2[id] { scroll-margin-top: calc(var(--alto-cabecera) + 1rem); }

/* Videos subidos desde el panel (por ejemplo, animaciones de HyperFrames o Remotion) */
.contenido video { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--surface-2); }

/* WhatsApp: botón flotante en todas las páginas. Verde oscuro para que el texto blanco se lea (contraste 5.2:1). */
.boton-whatsapp { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 40; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 3.25rem; padding: 0 1.1rem 0 0.95rem; border-radius: 999px; background: #0f7d42; color: #fff; font-weight: 650; text-decoration: none; box-shadow: 0 10px 28px rgba(18, 25, 34, 0.28); transition: transform 0.15s ease, background-color 0.15s ease; }
.boton-whatsapp:hover { background: #0b6634; transform: translateY(-2px); }
.boton-whatsapp:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.boton-whatsapp .icono { width: 1.6rem; height: 1.6rem; }
@media (max-width: 640px) {
  .boton-whatsapp { width: 3.4rem; height: 3.4rem; padding: 0; justify-content: center; }
  .boton-whatsapp-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media print { .boton-whatsapp { display: none; } }

/* Celular: la casilla de Turnstile usa también el margen interno del formulario, así cabe
   a lo ancho (300 px) en vez de quedar como un cuadro compacto de 150 × 140 */
@media (max-width: 640px) {
  .formulario .verificacion { margin-inline: -0.75rem; }
  .pie-base { padding-bottom: 5.5rem; } /* que el botón flotante no tape la última línea */
  /* Botones principales a todo el ancho: mismo tamaño y fáciles de tocar */
  .hero-botones .boton, .formulario-pie .boton { flex: 1 1 100%; width: 100%; }
  .hero { padding-block: 2rem 3rem; }
  .hero-bajada { font-size: 1.08rem; }
}
/* Pie en celular y tableta: las listas de enlaces en dos columnas; la marca y el contacto, a lo ancho */
@media (max-width: 899px) {
  .pie-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 2rem 1.5rem; }
  .pie-marca, .pie-rejilla > div:has(.pie-contacto) { grid-column: 1 / -1; }
}
/* Mientras se escribe en un campo, el botón flotante se aparta para no tapar el texto ni el teclado */
body:has(input:focus, textarea:focus, select:focus) .boton-whatsapp { opacity: 0; pointer-events: none; }