/* ==========================================================================
   A7 Sparkle Solutions — variante oficinas/edificios (logotipo original)
   Fork de assets/css/estilos.css del sitio principal. Mismo sistema de layout,
   tipografia y utilidades — solo cambia la paleta de color de marca.
   ========================================================================== */

/* --- Variables ---------------------------------------------------------- */
:root {
  --verde-900: #06320D;
  --verde-800: #094E14;
  --verde-700: #0C7D1F;   /* color de marca, tomado del verde del logotipo original */
  --verde-600: #0F8322;
  --verde-400: #29D646;
  --verde-100: #D4F2D9;
  --verde-50:  #EEF9F0;
  --rojo:      #E31E24;   /* mismo rojo del monograma A7 original, acento muy escaso */

  --grafito:  #14181C;
  --gris-700: #333C45;
  --gris-500: #667380;
  --gris-400: #93A0AB;
  --gris-200: #DFE5E9;
  --gris-100: #F1F4F6;
  --blanco:   #FFFFFF;

  --display: 'Barlow', system-ui, sans-serif;
  --texto: 'Inter', system-ui, -apple-system, sans-serif;

  --ancho: 1180px;
  --radio: 14px;
  --radio-sm: 9px;

  --sombra-sm: 0 1px 2px rgba(6, 50, 13, .05), 0 2px 8px rgba(6, 50, 13, .04);
  --sombra: 0 2px 4px rgba(6, 50, 13, .05), 0 12px 32px rgba(6, 50, 13, .07);
  --sombra-lg: 0 4px 8px rgba(6, 50, 13, .06), 0 24px 60px rgba(6, 50, 13, .11);

  --transicion: .28s cubic-bezier(.4, 0, .2, 1);
}

/* --- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* El desplazamiento reserva la altura de la barra fija: sin esto, un enlace de
   ancla deja el título de la sección debajo del encabezado. */
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.72;
  color: var(--gris-700);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--grafito);
  line-height: 1.14;
  letter-spacing: -.018em;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 5.2vw, 3.85rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.65rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.42rem); line-height: 1.28; }
h4 { font-size: 1.03rem; line-height: 1.35; }

p { text-wrap: pretty; }
a { color: var(--verde-600); text-decoration: none; transition: color var(--transicion); }
a:hover { color: var(--verde-700); }
img, svg { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
strong, b { font-weight: 600; color: var(--grafito); }

:focus-visible {
  outline: 3px solid var(--verde-400);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Utilidades de estructura ------------------------------------------- */
.env { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 24px; }

section { padding: clamp(64px, 8.5vw, 112px) 0; }
section.compacta { padding: clamp(48px, 6vw, 76px) 0; }
.fondo-claro { background: var(--gris-100); }
.fondo-verde { background: var(--verde-50); }

.fondo-oscuro {
  background:
    radial-gradient(115% 90% at 88% 8%, rgba(41, 214, 70, .17), transparent 58%),
    linear-gradient(168deg, var(--verde-900) 0%, #041A0D 100%);
  color: rgba(255, 255, 255, .8);
}
.fondo-oscuro h2, .fondo-oscuro h3, .fondo-oscuro h4 { color: var(--blanco); }
.fondo-oscuro strong { color: var(--blanco); }

.medida { max-width: 66ch; }
.centro { text-align: center; }
.centro .medida { margin-inline: auto; }

/* Disponible para lectores de pantalla, fuera del flujo visual. */
.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Etiqueta de sección ------------------------------------------------ */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-size: .755rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--verde-600);
  margin-bottom: 15px;
}
.etiqueta::before {
  content: '';
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.fondo-oscuro .etiqueta { color: var(--verde-400); }

.entrada { font-size: clamp(1.03rem, 1.5vw, 1.14rem); color: var(--gris-500); margin-top: 17px; }
.fondo-oscuro .entrada { color: rgba(255, 255, 255, .72); }

/* --- Botones ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .008em;
  padding: 14px 27px;
  border-radius: 100px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--transicion);
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; flex: none; transition: transform var(--transicion); }
.btn:hover svg { transform: translateX(3px); }

.btn-primario {
  background: var(--verde-700);
  color: var(--blanco);
  box-shadow: 0 2px 5px rgba(12, 125, 31, .22);
}
.btn-primario:hover {
  background: var(--verde-600);
  color: var(--blanco);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(12, 125, 31, .28);
}

.btn-linea {
  background: transparent;
  color: var(--grafito);
  border-color: var(--gris-200);
}
.btn-linea:hover { border-color: var(--verde-700); color: var(--verde-700); background: var(--verde-50); }

.fondo-oscuro .btn-linea,
.portada .btn-linea,
.cabecera-pagina .btn-linea {
  color: var(--blanco);
  border-color: rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(6px);
}
.fondo-oscuro .btn-linea:hover,
.portada .btn-linea:hover,
.cabecera-pagina .btn-linea:hover {
  background: rgba(255, 255, 255, .16);
  color: var(--blanco);
  border-color: rgba(255, 255, 255, .6);
}

.btn-claro { background: var(--blanco); color: var(--verde-800); }
.btn-claro:hover { background: var(--verde-50); color: var(--verde-800); transform: translateY(-2px); }

.acciones { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 32px; }
.centro .acciones { justify-content: center; }

/* --- Cabecera ----------------------------------------------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.cabecera.desplazada { border-bottom-color: var(--gris-200); box-shadow: var(--sombra-sm); }

.cabecera .env {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  height: 74px;
}

.marca { display: flex; align-items: center; gap: 11px; flex: none; }
.marca img { height: 40px; width: auto; }
.marca-txt { display: flex; flex-direction: column; line-height: 1.08; }
.marca-txt b {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--verde-700);
}
.marca-txt span {
  font-size: .625rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--gris-400);
  font-weight: 500;
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  font-family: var(--display);
  font-size: .93rem;
  font-weight: 500;
  color: var(--gris-700);
  padding: 9px 14px;
  border-radius: 8px;
  transition: all var(--transicion);
}
.nav a:hover { color: var(--verde-700); background: var(--verde-50); }
.nav a[aria-current='page'] { color: var(--verde-700); font-weight: 600; }

.cabecera .btn { padding: 11px 21px; font-size: .89rem; }

.hamburguesa {
  display: none;
  background: none;
  border: 1px solid var(--gris-200);
  border-radius: 9px;
  padding: 9px;
  cursor: pointer;
  color: var(--grafito);
}
.hamburguesa svg { width: 21px; height: 21px; }

/* --- Portada ------------------------------------------------------------ */
.portada { position: relative; overflow: hidden; background: var(--verde-900); }

.portada-fondo { position: absolute; inset: 0; z-index: 0; }
.portada-fondo img { width: 100%; height: 100%; object-fit: cover; }
.portada-fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg, rgba(6, 50, 13, .95) 4%, rgba(6, 50, 13, .82) 40%, rgba(6, 50, 13, .3) 78%),
    linear-gradient(to top, rgba(6, 50, 13, .72), transparent 46%);
}

.portada .env { position: relative; z-index: 1; }

.portada-cuerpo {
  padding: clamp(92px, 13vw, 168px) 0 clamp(80px, 11vw, 140px);
  max-width: 700px;
}
.portada h1 { color: var(--blanco); }
.portada h1 em { font-style: normal; color: var(--verde-400); }
.portada .entrada { color: rgba(255, 255, 255, .84); max-width: 56ch; }

.sello-portada {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 100px;
  padding: 7px 16px 7px 8px;
  font-size: .8rem;
  color: rgba(255, 255, 255, .9);
  margin-bottom: 26px;
  backdrop-filter: blur(8px);
}
.sello-portada i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--verde-400);
  box-shadow: 0 0 0 3px rgba(41, 214, 70, .26);
  flex: none;
  margin-left: 5px;
}

/* Franja de datos bajo la portada */
.franja {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, .14);
  background: rgba(4, 26, 13, .55);
  backdrop-filter: blur(10px);
}
.franja ul { display: grid; grid-template-columns: repeat(4, 1fr); }
.franja li { padding: 26px 22px; }
.franja li + li { border-left: 1px solid rgba(255, 255, 255, .12); }
.franja b {
  display: block;
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--blanco);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.franja span { font-size: .795rem; color: rgba(255, 255, 255, .62); line-height: 1.45; display: block; margin-top: 5px; }

/* --- Cabecera de páginas interiores ------------------------------------- */
.cabecera-pagina {
  background:
    radial-gradient(100% 100% at 100% 0%, rgba(41, 214, 70, .1), transparent 62%),
    linear-gradient(165deg, var(--verde-900), #04200F);
  padding: clamp(58px, 8vw, 92px) 0 clamp(52px, 7vw, 76px);
  position: relative;
  overflow: hidden;
}
.cabecera-pagina::after {
  content: '';
  position: absolute;
  right: -110px;
  top: -110px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .07);
}
.cabecera-pagina .env { position: relative; z-index: 1; }
.cabecera-pagina h1 { color: var(--blanco); max-width: 19ch; }
.cabecera-pagina .entrada { color: rgba(255, 255, 255, .76); max-width: 62ch; }
.cabecera-pagina .etiqueta { color: var(--verde-400); }

.migas { display: flex; gap: 8px; align-items: center; font-size: .8rem; color: rgba(255, 255, 255, .5); margin-bottom: 20px; }
.migas a { color: rgba(255, 255, 255, .74); }
.migas a:hover { color: var(--blanco); }

/* --- Rejillas ----------------------------------------------------------- */
.rejilla { display: grid; gap: 22px; }
.rejilla-2 { grid-template-columns: repeat(2, 1fr); }
.rejilla-3 { grid-template-columns: repeat(3, 1fr); }

.dos-columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 5.5vw, 68px);
  align-items: center;
}
.dos-columnas.texto-derecha > *:first-child { order: 2; }

.cabecera-seccion { margin-bottom: 42px; }
.cabecera-seccion.centro { margin-inline: auto; max-width: 700px; }

/* --- Tarjetas ----------------------------------------------------------- */
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  padding: 30px 28px;
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
  height: 100%;
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: var(--verde-100); }
/* Cuando la tarjeta entera es un enlace conserva la tipografía del texto. */
a.tarjeta { display: block; color: inherit; }
a.tarjeta:hover h3 { color: var(--verde-700); }
.tarjeta h3 { margin-bottom: 10px; transition: color var(--transicion); }
.tarjeta p { font-size: .955rem; color: var(--gris-500); }

/* Chip que cita el fundamento legal encima del título de una tarjeta. */
.ficha {
  display: inline-block;
  font-family: var(--display);
  font-size: .715rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--verde-700);
  background: var(--verde-50);
  border-radius: 999px;
  padding: 6px 12px;
  margin-bottom: 16px;
}
.fondo-oscuro .ficha { background: rgba(41, 214, 70, .16); color: var(--verde-400); }

.icono {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--verde-50);
  color: var(--verde-700);
  display: grid;
  place-items: center;
  margin-bottom: 19px;
}
.icono svg { width: 22px; height: 22px; }

.fondo-oscuro .tarjeta {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .12);
}
.fondo-oscuro .tarjeta:hover { background: rgba(255, 255, 255, .085); border-color: rgba(41, 214, 70, .34); }
.fondo-oscuro .tarjeta p { color: rgba(255, 255, 255, .7); }
.fondo-oscuro .icono { background: rgba(41, 214, 70, .15); color: var(--verde-400); }

/* Tarjeta de servicio con estado */
.estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--display);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 100px;
  margin-bottom: 14px;
}
.estado-activo { background: var(--verde-50); color: var(--verde-700); }
.estado-desarrollo { background: #FEF3C7; color: #92400E; }

/* --- Lista de comprobación ---------------------------------------------- */
.lista-check { display: grid; gap: 13px; margin-top: 22px; }
.lista-check li { display: flex; gap: 13px; align-items: flex-start; font-size: .96rem; }
.lista-check svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 3px;
  color: var(--verde-600);
}
.fondo-oscuro .lista-check svg { color: var(--verde-400); }

/* --- Pasos numerados ---------------------------------------------------- */
.pasos { display: grid; gap: 2px; counter-reset: paso; }
.paso {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid var(--gris-200);
  align-items: start;
}
.paso:last-child { border-bottom: 1px solid var(--gris-200); }
.paso .n {
  font-family: var(--display);
  font-size: 2.15rem;
  font-weight: 700;
  color: var(--verde-100);
  line-height: 1;
  letter-spacing: -.03em;
}
.paso h4 { margin-bottom: 6px; }
.paso p { font-size: .955rem; color: var(--gris-500); }

/* --- Imagen enmarcada --------------------------------------------------- */
.marco-img {
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-lg);
  position: relative;
  background: var(--gris-100);
}
.marco-img img { width: 100%; }
.marco-img.alto img { aspect-ratio: 4 / 3; object-fit: cover; }

.pie-img {
  font-size: .8rem;
  color: var(--gris-400);
  margin-top: 11px;
  display: flex;
  gap: 7px;
  align-items: center;
}
.pie-img svg { width: 14px; height: 14px; flex: none; }

/* --- Cita / declaración ------------------------------------------------- */
.declaracion {
  border-left: 3px solid var(--verde-600);
  padding: 4px 0 4px 26px;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.1vw, 1.45rem);
  line-height: 1.44;
  color: var(--grafito);
  font-weight: 500;
  letter-spacing: -.01em;
}
.fondo-oscuro .declaracion { color: var(--blanco); border-left-color: var(--verde-400); }

/* --- Tabla -------------------------------------------------------------- */
.tabla-marco {
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  overflow: hidden;
  overflow-x: auto;
  background: var(--blanco);
}
table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 620px; }
thead th {
  background: var(--gris-100);
  font-family: var(--display);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris-500);
  text-align: left;
  padding: 15px 20px;
  white-space: nowrap;
}
tbody td { padding: 15px 20px; border-top: 1px solid var(--gris-200); vertical-align: top; }
tbody tr:hover { background: var(--verde-50); }
tbody td:first-child { font-weight: 500; color: var(--grafito); }

/* Tabla de dos columnas donde el encabezado va en la fila, no arriba. */
tbody th {
  text-align: left;
  padding: 15px 20px;
  border-top: 1px solid var(--gris-200);
  vertical-align: top;
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris-500);
  width: 34%;
  white-space: nowrap;
}
.tabla-marco.datos table { min-width: 0; }
@media (max-width: 560px) {
  tbody th { white-space: normal; width: 40%; }
}

.marca-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 500;
  white-space: nowrap;
}
.marca-estado::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ok { color: var(--verde-700); }
.ok::before { background: var(--verde-600); }
.proceso { color: #B45309; }
.proceso::before { background: #D97706; }

/* --- Acordeón ----------------------------------------------------------- */
details {
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-sm);
  background: var(--blanco);
  transition: border-color var(--transicion);
}
details + details { margin-top: 11px; }
details[open] { border-color: var(--verde-100); box-shadow: var(--sombra-sm); }
summary {
  cursor: pointer;
  padding: 19px 22px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.01rem;
  color: var(--grafito);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: '';
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--gris-400);
  border-bottom: 2px solid var(--gris-400);
  transform: rotate(45deg);
  flex: none;
  margin-top: -4px;
  transition: transform var(--transicion);
}
details[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
details p { padding: 0 22px 21px; font-size: .955rem; color: var(--gris-500); }
details p + p { padding-top: 0; margin-top: -8px; }

/* --- Formulario --------------------------------------------------------- */
.formulario { display: grid; gap: 17px; }
.campo { display: grid; gap: 7px; }
.campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
label {
  font-family: var(--display);
  font-size: .855rem;
  font-weight: 600;
  color: var(--grafito);
}
label .opc { font-weight: 400; color: var(--gris-400); font-size: .8rem; }
input, textarea, select {
  font-family: var(--texto);
  font-size: .96rem;
  color: var(--grafito);
  padding: 13px 15px;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-sm);
  background: var(--blanco);
  width: 100%;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--verde-600);
  box-shadow: 0 0 0 3px rgba(15, 131, 34, .13);
}
textarea { resize: vertical; min-height: 132px; line-height: 1.6; }

.consentimiento { display: flex; gap: 11px; align-items: flex-start; font-size: .87rem; color: var(--gris-500); }
.consentimiento input { width: 17px; height: 17px; flex: none; margin-top: 3px; accent-color: var(--verde-700); }

.aviso-form {
  font-size: .82rem;
  color: var(--gris-400);
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 4px;
}
.aviso-form svg { width: 15px; height: 15px; flex: none; margin-top: 3px; }

/* El honeypot se saca del flujo sin display:none, que algunos robots detectan. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.respuesta-form {
  font-size: .93rem;
  padding: 14px 16px;
  border-radius: var(--radio-sm);
  border: 1px solid transparent;
}
.respuesta-form.ok { background: var(--verde-50); border-color: var(--verde-100); color: var(--verde-800); }
.respuesta-form.error { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }

/* --- Bloque de contacto directo ----------------------------------------- */
.contacto-directo { display: grid; gap: 2px; }
.contacto-directo li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 16px;
  padding: 19px 0;
  border-bottom: 1px solid var(--gris-200);
  align-items: center;
}
.contacto-directo li:first-child { border-top: 1px solid var(--gris-200); }
.contacto-directo .ic {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--verde-50);
  color: var(--verde-700);
  display: grid;
  place-items: center;
}
.contacto-directo .ic svg { width: 19px; height: 19px; }
.contacto-directo b { display: block; font-family: var(--display); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-400); font-weight: 700; }
.contacto-directo span, .contacto-directo a { font-size: 1.01rem; color: var(--grafito); }
.contacto-directo a:hover { color: var(--verde-700); }

/* El formulario domina; la columna de datos acompaña sin competir por atención. */
.contacto-rejilla {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
.contacto-rejilla h3 { margin-bottom: 22px; }

.panel-nota {
  margin-top: 34px;
  background: var(--verde-50);
  border: 1px solid var(--verde-100);
  border-radius: var(--radio);
  padding: 26px 24px;
}
.panel-nota h4 { font-size: 1.02rem; margin-bottom: 9px; }
.panel-nota p { font-size: .935rem; color: var(--gris-500); }

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-family: var(--display);
  font-weight: 600;
  font-size: .92rem;
  color: var(--verde-700);
}
.enlace-flecha svg { width: 16px; height: 16px; transition: transform var(--transicion); }
.enlace-flecha:hover svg { transform: translateX(4px); }

.btn-ancho { width: 100%; justify-content: center; }

/* --- Documento legal ----------------------------------------------------- */
.env-angosto { max-width: 800px; }
.documento h2 {
  font-size: clamp(1.28rem, 2vw, 1.5rem);
  margin-top: 48px;
  padding-top: 30px;
  border-top: 1px solid var(--gris-200);
}
.documento h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.documento h3 { font-size: 1.05rem; margin-top: 30px; }
.documento p { margin-top: 15px; color: var(--gris-500); line-height: 1.78; }
.documento strong { color: var(--grafito); font-weight: 600; }
.documento ul, .documento ol { margin-top: 15px; padding-left: 22px; display: grid; gap: 9px; }
.documento ul { list-style: disc; }
.documento ol { list-style: decimal; }
.documento li { color: var(--gris-500); line-height: 1.7; padding-left: 4px; }
.documento a { color: var(--verde-700); text-decoration: underline; text-underline-offset: 3px; }

.meta-doc {
  font-family: var(--display);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris-400);
  margin-bottom: 40px;
}
.documento .meta-doc:last-child { margin: 48px 0 0; }

.destacado-legal {
  background: var(--verde-50);
  border: 1px solid var(--verde-100);
  border-radius: var(--radio);
  padding: 26px 26px 28px;
  margin-top: 30px;
}
.destacado-legal h3 { margin-top: 0; font-size: 1.02rem; }

/* --- Llamado final ------------------------------------------------------ */
.cierre { text-align: center; }
.cierre h2 { color: var(--blanco); max-width: 20ch; margin-inline: auto; }

/* --- Pie ---------------------------------------------------------------- */
.pie { background: var(--verde-900); color: rgba(255, 255, 255, .58); padding: 66px 0 0; font-size: .93rem; }
.pie-rejilla { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 44px; padding-bottom: 48px; }
.pie h4 {
  font-size: .755rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
  margin-bottom: 17px;
  font-weight: 700;
}
.pie a { color: rgba(255, 255, 255, .74); }
.pie a:hover { color: var(--verde-400); }
.pie ul { display: grid; gap: 10px; }
.pie-marca img { height: 58px; width: auto; margin-bottom: 20px; }
.pie-marca p { max-width: 34ch; font-size: .9rem; line-height: 1.66; }

.pie-base {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 22px 0 30px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: .845rem;
  color: rgba(255, 255, 255, .42);
}
.pie-base nav { display: flex; gap: 20px; flex-wrap: wrap; }

/* --- Documento legal ---------------------------------------------------- */
.legal { max-width: 76ch; }
.legal h2 { font-size: 1.42rem; margin: 42px 0 14px; }
.legal h3 { font-size: 1.08rem; margin: 26px 0 9px; }
.legal p { margin-bottom: 15px; font-size: .985rem; }
.legal ul { margin: 0 0 17px 3px; display: grid; gap: 9px; }
.legal ul li { display: flex; gap: 11px; font-size: .985rem; }
.legal ul li::before { content: '—'; color: var(--verde-600); flex: none; }
.legal .destacado {
  background: var(--verde-50);
  border: 1px solid var(--verde-100);
  border-radius: var(--radio-sm);
  padding: 20px 22px;
  margin: 22px 0;
}
.legal .destacado p:last-child { margin-bottom: 0; }
.legal .fecha { font-size: .87rem; color: var(--gris-400); }

.indice-legal {
  background: var(--gris-100);
  border-radius: var(--radio);
  padding: 24px 26px;
  margin-bottom: 34px;
}
.indice-legal h4 { margin-bottom: 13px; }
.indice-legal ol { margin-left: 19px; display: grid; gap: 7px; font-size: .93rem; }

/* ==========================================================================
   Animación
   El estado inicial oculto solo se aplica cuando hay JavaScript: sin él, todo
   el contenido queda visible desde el primer pintado.
   ========================================================================== */
.js .revelar { opacity: 0; transform: translateY(26px); }
.js .revelar.dentro {
  opacity: 1;
  transform: none;
  transition: opacity .75s cubic-bezier(.16, 1, .3, 1), transform .75s cubic-bezier(.16, 1, .3, 1);
}
.js .revelar.d1.dentro { transition-delay: .09s; }
.js .revelar.d2.dentro { transition-delay: .18s; }
.js .revelar.d3.dentro { transition-delay: .27s; }

/* Animaciones dirigidas por scroll, nativas del navegador. Cuando existen,
   sustituyen al observador de intersección: no hay trabajo en el hilo principal. */
@supports (animation-timeline: view()) {
  .sd .revelar {
    opacity: 0;
    transform: none;
    animation: revelar linear both;
    animation-timeline: view();
    animation-range: entry 4% cover 26%;
    transition: none;
  }
  .sd .revelar.d1 { animation-range: entry 1% cover 30%; }
  .sd .revelar.d2 { animation-range: entry -2% cover 34%; }
  .sd .revelar.d3 { animation-range: entry -5% cover 38%; }

  /* Desplazamiento lento del fondo de portada, ligado al scroll de la página. */
  .sd .portada-fondo img {
    animation: deriva linear both;
    animation-timeline: scroll(root);
    animation-range: 0 92vh;
  }
}

@keyframes revelar {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes deriva {
  from { transform: scale(1.1) translateY(0); }
  to { transform: scale(1.1) translateY(7%); }
}

/* Quien pidió menos movimiento no recibe ninguno. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .revelar { opacity: 1 !important; transform: none !important; }
  .sd .revelar { opacity: 1 !important; animation: none !important; }
  .sd .portada-fondo img { animation: none !important; transform: none !important; }
}

/* ==========================================================================
   Adaptación a pantallas menores
   ========================================================================== */
@media (max-width: 980px) {
  .rejilla-3 { grid-template-columns: repeat(2, 1fr); }
  .pie-rejilla { grid-template-columns: 1fr 1fr; gap: 36px; }
  .franja ul { grid-template-columns: repeat(2, 1fr); }
  .franja li:nth-child(3) { border-left: none; }
  .franja li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .12); }
}

@media (max-width: 860px) {
  body { font-size: 16.5px; }

  .nav {
    position: fixed;
    inset: 74px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--blanco);
    border-bottom: 1px solid var(--gris-200);
    padding: 12px 20px 22px;
    box-shadow: var(--sombra);
    transform: translateY(-16px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
    max-height: calc(100dvh - 74px);
    overflow-y: auto;
  }
  .nav.abierto { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { padding: 13px 12px; border-radius: 9px; font-size: 1rem; }
  .nav a + a { border-top: 1px solid var(--gris-100); border-radius: 0; }

  .hamburguesa { display: block; }
  .cabecera .btn { display: none; }

  .dos-columnas { grid-template-columns: 1fr; gap: 30px; }
  .dos-columnas.texto-derecha > *:first-child { order: 0; }
  .rejilla-2 { grid-template-columns: 1fr; }
  .contacto-rejilla { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 640px) {
  .env { padding-inline: 19px; }
  .rejilla-3 { grid-template-columns: 1fr; }
  .pie-rejilla { grid-template-columns: 1fr; gap: 32px; }
  .franja ul { grid-template-columns: 1fr; }
  .franja li + li { border-left: none; border-top: 1px solid rgba(255, 255, 255, .12); }
  .franja li { padding: 20px 4px; }
  .campo-doble { grid-template-columns: 1fr; }
  .paso { grid-template-columns: 44px 1fr; gap: 16px; }
  .paso .n { font-size: 1.7rem; }
  .acciones { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
  .marca-txt span { display: none; }
  .pie-base { flex-direction: column; gap: 14px; }
}

/* --- Impresión ---------------------------------------------------------- */
@media print {
  .cabecera, .pie, .acciones, .hamburguesa { display: none; }
  body { font-size: 11pt; color: #000; }
  .fondo-oscuro, .cabecera-pagina, .portada { background: #fff !important; color: #000; }
  .fondo-oscuro h2, .cabecera-pagina h1 { color: #000; }
  .revelar { opacity: 1 !important; transform: none !important; }
}