/* ==========================================================================
   Páginas — FASE 1
   ========================================================================== */

.section-title { font-size: var(--fs-h2); color: var(--c-blue); letter-spacing: -.015em; }

/* Próximamente · hero -------------------------------------------------- */
.hero-soon {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #FBFDFF 0%, #F4F8FE 100%);
}
.hero-soon__inner {
  display: grid;
  grid-template-columns: minmax(0, 47%) 1fr;
  align-items: center;
  min-height: clamp(580px, 57vw, 820px);
  padding-block: clamp(2.5rem, 4.5vw, 4.25rem);
}
.hero-soon__content { max-width: 640px; }
.hero-soon__title {
  font-size: calc(var(--fs-display) - 5px);   /* −5 px (Lisa, 15/09) */
  line-height: 1.02;
  letter-spacing: -.025em;
  /* Azul Profundo #0C3C9C con la iluminación del círculo de la paleta */
  color: var(--c-deep);
  background: var(--deep-lit);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* la caja del recorte abarca también el acento de la «ó» sin mover nada */
  padding-block: .14em .1em;
  margin-block: -.14em -.1em;
}
.hero-soon__lead {
  margin-top: .85rem;
  font-size: calc(var(--fs-lead) - 3px);   /* −3 px (Lisa, 15/09) */
  line-height: 1.18;
  letter-spacing: -.012em;
  color: var(--c-navy);
}
.hero-soon__text { margin-top: 1.1rem; max-width: 34em; line-height: 1.45; }

.hero-soon__media {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -1;
  width: 52%;
}
/* la foto arranca un poco más abajo: arriba a la derecha queda libre para "Grandes ideas…".
   --hero-shift la desplaza a la izquierda la mitad del espacio negativo entre el texto y la
   silueta (queda centrada entre texto y borde). Si pasa bajo el contador, el contador va encima. */
.hero-soon { --hero-shift: 11.25vw; }
.hero-soon__picture {
  position: absolute;
  top: clamp(7rem, 13vw, 12rem);
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(calc(-1 * var(--hero-shift)));
}
.hero-soon__img { width: 100%; height: 100%; }
/* Recorte con fondo transparente (Hero-pronto-v1): se apoya en la base del hero */
.hero-soon__img {
  object-fit: contain;
  object-position: right bottom;
  -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
}
.hero-soon__aside {
  position: absolute;
  top: clamp(1.5rem, 4.6vw, 4.25rem);
  right: clamp(1rem, 2.2vw, 2rem);
  max-width: 6.2em;
  font-size: clamp(1.2rem, .85rem + 1vw, 1.95rem);
  line-height: 1.2;
  color: var(--c-navy);
}
.hero-soon__aside::after {
  content: "";
  display: block;
  width: 4.2rem;
  height: 3px;
  margin-top: .95rem;
  border-radius: 2px;
  background: var(--c-blue);
}
.hero-soon__social {
  position: absolute;
  right: clamp(1rem, 2.2vw, 2rem);
  top: clamp(12rem, 20vw, 16.5rem);
}
.hero-soon__social .social__link { width: 40px; height: 40px; }

/* Contador ---------------------------------------------------------------- */
.countdown {
  max-width: 34rem;
  margin-top: clamp(1.5rem, 2.8vw, 2.25rem);
  padding: clamp(1rem, 1.7vw, 1.35rem);
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
/* Entre 769 y 1365 px el cuadro tapaba la foto de Lisa (medido): se reduce solo su ancho
   para que termine antes de la silueta. Textos y números conservan su tamaño (Lisa, 15/09). */
@media (min-width: 769px) and (max-width: 1365px) {
  .countdown { max-width: min(34rem, calc(41vw - var(--gutter))); }
}
.countdown__head { display: flex; align-items: center; gap: 1rem; }
.countdown__label { font-size: var(--fs-small); color: var(--c-blue); }
.countdown__name { color: var(--c-ink); }
.countdown__date { margin-top: .15rem; font-size: clamp(1.2rem, 1rem + .6vw, 1.55rem); color: var(--c-blue); }
.countdown__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.5rem, 1.1vw, .9rem);
  margin-top: 1.1rem;
}
.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .95rem .25rem .8rem;
  background: var(--c-surface-2);
  border-radius: var(--radius);
}
.countdown__num {
  font-size: clamp(2rem, 1.25rem + 2.3vw, 3.25rem);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}
.countdown__txt { margin-top: .45rem; font-size: var(--fs-small); color: var(--c-deep); }

/* Próximamente · páginas que se habilitarán ------------------------------ */
.soon-pages {
  padding-block: clamp(2.5rem, 5vw, 4.25rem) clamp(3rem, 6vw, 5rem);
  background: linear-gradient(180deg, #F2F8FE 0%, #F8FBFF 100%);
}
.soon-pages__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.4rem);
  margin: clamp(1.5rem, 2.8vw, 2.4rem) 0 0;
  padding: 0;
}
.soon-card {
  position: relative;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.soon-card__body { margin-top: 1.1rem; }
.soon-card__title { font-size: calc(var(--fs-h3) - 2px); letter-spacing: -.01em; color: var(--c-deep); }   /* −2 px y Azul Profundo (Lisa, 15/09) */
.soon-card__text { margin-top: .6rem; line-height: 1.45; }

/* Próximamente · ajustes de Lisa (15/09) ----------------------------------- */
/* «Encontrarás» −3 px y con el color de «Sitio principal» */
.soon-pages .section-title { font-size: calc(var(--fs-h2) - 3px); color: var(--c-deep); }
/* Círculos de «Encontrarás» un 25 % más pequeños (en móvil, en responsive.css) */
.soon-card .icon-bubble--lg { width: clamp(3.375rem, 5.4vw, 5.0625rem); height: clamp(3.375rem, 5.4vw, 5.0625rem); }
/* Iconos con el azul metalizado del logo (degradado #lrsd-metal-logo definido en cada vista).
   Sobre mí, Contacto y las páginas legales llevan los mismos iconos que «Encontrarás» (Lisa, 15/09). */
.soon-card .icon-bubble .icon,
.sm-card__icon,
.sm-value__icon .icon,
.cp-canal__icon .icon,
.cp-canal__icon .icon [stroke],
.legal-cards .info-card__icon .icon { stroke: url(#lrsd-metal-logo); }
.cp-canal__icon .icon[fill="currentColor"] { fill: url(#lrsd-metal-logo); }   /* WhatsApp: glifo de relleno */
/* Sin fondo y con borde de 1 px azul metalizado del logo. Próximamente: círculo del calendario
   y cuadros del contador, círculos de «Encontrarás» y recuadro de «Estoy creando mi sitio web».
   Sobre mí (Lisa, 15/09): tarjetas, paneles, círculos de «Mis valores» y recuadro final.
   Contacto y legales (Lisa, 15/09): círculos de las tarjetas, «Disponible el…», la cita y el banner. */
.countdown .icon-bubble,
.countdown__unit,
.soon-card .icon-bubble,
.lower-banner--proximamente,
.sm-card,
.sm-panel,
.sm-value__icon,
.sm-final,
.cp-canal__icon,
.cp-launch,
.cp-quote,
.legal-cards .info-card__icon,
.legal-closing .lower-banner { position: relative; background: transparent; }
.lower-banner--proximamente,
.sm-card,
.sm-panel,
.sm-final,
.legal-closing .lower-banner { border-color: transparent; }
.countdown .icon-bubble::before,
.countdown__unit::before,
.soon-card .icon-bubble::before,
.lower-banner--proximamente::before,
.sm-card::before,
.sm-panel::before,
.sm-value__icon::before,
.sm-final::before,
.cp-canal__icon::before,
.cp-launch::before,
.cp-quote::before,
.legal-cards .info-card__icon::before,
.legal-closing .lower-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--grad-metal-logo);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* Páginas de estado (404, mantenimiento) --------------------------------- */
.status-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-block: clamp(3rem, 8vw, 6rem);
  text-align: center;
}
.status-page--maintenance { min-height: 100vh; min-height: 100dvh; justify-content: center; }
.status-page__code { font-size: clamp(4.5rem, 3rem + 6vw, 8rem); line-height: 1; color: var(--c-sky); letter-spacing: -.04em; }
.status-page__title { max-width: 18em; font-size: var(--fs-h2); color: var(--c-blue); }
.status-page__text { max-width: 34em; }
.status-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; margin-top: .75rem; }
/* 404 a 390 (decisión de Lisa, 13/09): título y texto alineados a la izquierda. El título
   gana 12 px por lado (sin tocar la letra ni el «404») para que «todavía no está
   disponible» (378 px) quepa entero en la segunda fila. */
@media (max-width: 429px) and (min-width: 361px) {
  .page-404 .status-page__title,
  .page-404 .status-page__text { align-self: stretch; text-align: left; }
  .page-404 .status-page__title { margin-inline: -12px; }
}

/* ==========================================================================
   Páginas interiores — hero (Legal-pronto, páginas legales)
   ========================================================================== */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #FBFDFF 0%, #F4F8FE 100%);
}
.page-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 50%) 1fr;
  align-items: center;
  min-height: clamp(545px, 42vw, 620px);   /* alto suficiente para la columna de redes */
  padding-block: clamp(2.25rem, 4vw, 3.5rem);
}
.page-hero__content { max-width: min(660px, 45vw); }
.page-hero__title {
  font-size: calc(var(--fs-display) - 5px);   /* igual que «Próximamente» (Lisa, 15/09) */
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--c-deep);
  background: var(--deep-lit);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-block: .14em .1em;
  margin-block: -.14em -.1em;
}
.page-hero__lead {
  margin-top: .7rem;
  font-size: calc(var(--fs-lead) - 3px);   /* igual que el subtítulo de Próximamente */
  line-height: 1.18;
  letter-spacing: -.012em;
  color: var(--c-navy);
}
.page-hero__text { margin-top: 1rem; max-width: 36em; line-height: 1.45; }

.page-hero__media { position: absolute; inset: 0 0 0 auto; z-index: -1; width: 54%; }
.page-hero__picture,
.page-hero__img { width: 100%; height: 100%; }
.page-hero__img {
  object-fit: cover;
  object-position: right center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(180deg, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(180deg, #000 86%, transparent 100%);
  mask-composite: intersect;
}
/* Misma posición que en Próximamente (decisión de Lisa) */
.page-hero__social { position: absolute; right: clamp(1rem, 2.2vw, 2rem); top: clamp(12rem, 20vw, 16.5rem); }
.page-hero__social .social__link { width: 40px; height: 40px; }
/* Escenas legales: la imagen deja libre una franja a la derecha (con borde fundido)
   para que la columna de redes quede sobre fondo liso y no tape los rótulos de la escena. */
/* Su altura se limita (apoyada abajo): en heroes altos (título de 3 líneas) la escena
   no crece hacia el texto. */
.page-hero:not(.page-hero--tall) .page-hero__picture {
  position: absolute;
  right: clamp(3.75rem, 5.6vw, 5.4rem);
  bottom: 0;
  width: calc(100% - clamp(3.75rem, 5.6vw, 5.4rem));
  height: min(100%, 28vw);
}
.page-hero:not(.page-hero--tall) .page-hero__img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

/* Hero alto (Legal-pronto, foto LRSD-legal-hero). Los heroes no llevan mensaje lateral
   (decisión de Lisa, 13/09). */
.page-hero--tall .page-hero__inner { grid-template-columns: minmax(0, 44%) 1fr; min-height: clamp(540px, 50vw, 720px); }
.page-hero--tall .page-hero__title { font-size: calc(var(--fs-display) - 5px); line-height: 1.02; }
.page-hero--tall .page-hero__lead { max-width: 10.5em; font-size: calc(var(--fs-lead) - 3px); }
.page-hero--tall .page-hero__media { width: 60%; }

/* Tarjetas informativas ------------------------------------------------- */
.legal-index,
.legal-cards {
  padding-block: clamp(2rem, 4vw, 3.25rem) clamp(2.5rem, 5vw, 4rem);
  background: linear-gradient(180deg, #F2F8FE 0%, #F8FBFF 100%);
}
.legal-cards__title { margin-bottom: clamp(1.25rem, 2.2vw, 1.75rem); }
.info-grid { display: grid; gap: clamp(1rem, 1.5vw, 1.25rem); margin: 0; padding: 0; list-style: none; }
.info-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.info-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.info-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 1.1rem;
  padding: clamp(1.1rem, 1.7vw, 1.5rem);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.info-card__icon { width: clamp(3.6rem, 5vw, 4.9rem); height: clamp(3.6rem, 5vw, 4.9rem); }
.info-card__title { font-size: clamp(1.15rem, 1rem + .4vw, 1.4rem); line-height: 1.22; letter-spacing: -.01em; color: var(--c-blue); }
.info-card__text { margin-top: .45rem; font-size: 1rem; line-height: 1.45; }
.info-card__arrow { align-self: center; width: 1.3rem; height: 1.3rem; color: var(--c-blue); transition: transform .25s var(--ease); }
.info-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.info-card__link:focus-visible { outline: none; }
.info-card--link { transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.info-card--link:hover { transform: translateY(-3px); border-color: #BFD6F5; box-shadow: 0 18px 36px -22px rgba(12, 60, 156, .45); }
.info-card--link:hover .info-card__arrow { transform: translateX(3px); }
.info-card--link:focus-within { outline: 3px solid var(--c-blue); outline-offset: 3px; }

/* Legal-pronto: tarjetas 2 × 2 más grandes */
.info-grid--2 .info-card { gap: 1.4rem; align-items: center; min-height: clamp(170px, 15vw, 220px); padding: clamp(1.4rem, 2.4vw, 2.1rem); }
.info-grid--2 .info-card__icon { width: clamp(4.5rem, 7.2vw, 6.75rem); height: clamp(4.5rem, 7.2vw, 6.75rem); }
.info-grid--2 .info-card__title { font-size: var(--fs-h3); }
.info-grid--2 .info-card__text { font-size: var(--fs-body); }

/* Texto legal (HTML real, ancho de lectura cómodo) ---------------------- */
.legal-doc { padding-block: clamp(2.5rem, 5vw, 4.5rem); background: var(--c-white); }
.legal-doc__body { max-width: 48rem; }
.legal-doc__body > section { scroll-margin-top: 1.25rem; }
.legal-doc__body > section + section {
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
  padding-top: clamp(2rem, 3.5vw, 2.75rem);
  border-top: 1px solid #EEF3FA;
}
.legal-doc h2 { font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.05rem); line-height: 1.2; letter-spacing: -.012em; color: var(--c-blue); }
.legal-doc h3 { margin-top: 1.6rem; font-size: clamp(1.15rem, 1.05rem + .35vw, 1.35rem); line-height: 1.3; color: var(--c-navy); }
.legal-doc p,
.legal-doc li { font-size: 1.0625rem; line-height: 1.7; }
.legal-doc p { margin-top: .9rem; }
.legal-doc ul { margin: .9rem 0 0; padding-left: 1.25rem; }
.legal-doc li + li { margin-top: .45rem; }
.legal-doc li::marker { color: var(--c-blue); }
.legal-doc a { color: var(--c-blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal-doc a:hover { color: var(--c-deep); }
.legal-doc code {
  padding: .1em .35em;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: .9em;
  color: var(--c-navy);
  background: var(--c-surface-2);
  border-radius: 4px;
}
.legal-doc__table { margin-top: 1.1rem; overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--radius); }
.legal-doc table { width: 100%; min-width: 640px; border-collapse: collapse; }
.legal-doc th,
.legal-doc td { padding: .8rem .9rem; font-size: .95rem; line-height: 1.5; text-align: left; vertical-align: top; border-bottom: 1px solid #EEF3FA; }
.legal-doc th { font-weight: 400; color: var(--c-navy); background: var(--c-surface); }
.legal-doc tbody tr:last-child td { border-bottom: 0; }
.legal-doc__updated { margin-top: 1.5rem; font-size: .9rem; color: var(--c-muted); }

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

.legal-closing { padding-block: 0 clamp(3rem, 6vw, 5rem); background: var(--c-white); }
.legal-closing .lower-banner { margin-top: 0; }

/* ==========================================================================
   Sobre mí — TODO con prefijo .sm- : no toca ningún componente global
   Arquitectura de LRSD-sobremi-v2. Foto completa, sin recortes ni obstrucciones.
   ========================================================================== */
.sm-hero { position: relative; background: linear-gradient(180deg, #FBFDFF 0%, #F4F8FE 100%); }
.sm-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
  align-items: center;
  gap: clamp(1.5rem, 3.4vw, 3.25rem);
  padding-block: clamp(2rem, 3.6vw, 3.25rem);
}
/* Título y subtítulo con el mismo tamaño, peso y color que Próximamente (Lisa, 15/09) */
.sm-hero__title {
  font-size: calc(var(--fs-display) - 5px);
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--c-deep);
  background: var(--deep-lit);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-block: .14em .1em;
  margin-block: -.14em -.1em;
}
.sm-hero__lead { margin-top: .7rem; font-size: calc(var(--fs-lead) - 3px); line-height: 1.18; letter-spacing: -.012em; color: var(--c-navy); }
.sm-hero__text { margin-top: 1rem; max-width: 36em; line-height: 1.45; }

/* La foto va como elemento normal: se ve entera, nunca recortada. */
.sm-hero__media { display: flex; align-items: center; justify-content: center; gap: clamp(.5rem, 1vw, 1rem); }
.sm-hero__picture { display: block; }
.sm-hero__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(380px, 38vw, 540px);
  /* Bordes fundidos para que se integre con el contenido, sin marco ni sombra (Lisa, 15/09) */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-composite: intersect;
}
/* Columna de redes en la misma posición que en Próximamente (decisión de Lisa) */
.sm-hero__social {
  position: absolute;
  right: clamp(1rem, 2.2vw, 2rem);
  top: clamp(12rem, 20vw, 16.5rem);
}
.sm-hero__social .social__link { width: 40px; height: 40px; }
/* Escritorio (Lisa, 15/09):
   · El hero mide lo mismo que el de Contacto. Ambos usan la misma rejilla, así que su altura es
     el relleno de arriba y abajo más la foto de Contacto (561 × 669 como máximo, al 44 % del
     ancho). Si el texto de Sobre mí es más alto (769–900 px), manda el texto y queda como estaba.
   · La foto ocupa todo el hueco libre entre el texto (a 24 px) y la columna de redes (a 12 px),
     centrada en ese hueco y sin nada encima. La columna de redes conserva su posición aprobada. */
@media (min-width: 769px) {
  .sm-hero { container-type: inline-size; }
  .sm-hero__inner { min-height: calc(2 * clamp(2rem, 3.6vw, 3.25rem) + min(561px, .44 * min(100cqw - 2 * var(--gutter), var(--container))) * 669 / 561); }
  .sm-hero__media {
    margin-inline: calc(24px - clamp(1.5rem, 3.4vw, 3.25rem)) calc(clamp(1rem, 2.2vw, 2rem) + 52px - max(var(--gutter), (100cqw - var(--container)) / 2));
  }
  .sm-hero__img { max-height: calc(min(561px, .44 * min(100cqw - 2 * var(--gutter), var(--container))) * 669 / 561); }
}
@media (max-width: 768px) {
  .sm-hero__media { min-height: 270px; padding-inline: 50px; }
}

/* Cuatro claves ---------------------------------------------------------- */
.sm-keys { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.sm-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.85rem, 1.5vw, 1.4rem); }
.sm-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  padding: clamp(1.15rem, 1.9vw, 1.7rem) clamp(.8rem, 1.3vw, 1.2rem);
  text-align: center;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.sm-card__icon { width: clamp(2.1rem, 2.8vw, 2.75rem); height: clamp(2.1rem, 2.8vw, 2.75rem); color: var(--c-blue); stroke-width: 1.6; }
.sm-card__text { line-height: 1.3; color: var(--c-ink); text-wrap: balance; }

/* Mi enfoque · Mis valores ----------------------------------------------- */
.sm-panels {
  display: grid;
  grid-template-columns: minmax(0, 47%) minmax(0, 53%);
  gap: clamp(.9rem, 1.8vw, 1.5rem);
  margin-top: clamp(1.4rem, 2.8vw, 2.4rem);
}
.sm-panel {
  display: flex;
  flex-direction: column;
  padding: clamp(1.3rem, 2.4vw, 2.1rem) clamp(1.2rem, 2.2vw, 2rem);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.sm-panel__title { font-size: var(--fs-h3); line-height: 1.15; color: var(--c-blue); }
.sm-panel p { margin-top: .85rem; line-height: 1.5; }
.sm-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.6rem, 1.2vw, 1rem);
  margin-top: clamp(1.1rem, 2vw, 1.6rem);
}
.sm-value { display: flex; flex-direction: column; align-items: center; gap: .55rem; text-align: center; }
.sm-value__icon { width: clamp(2.9rem, 4.4vw, 3.9rem); height: clamp(2.9rem, 4.4vw, 3.9rem); }
.sm-value__name { color: var(--c-navy); }
/* Descripción debajo y el retrato ocupando el espacio libre de la composición */
.sm-panel__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  padding-top: clamp(.6rem, 1.2vw, 1rem);
}
/* Reparto del espacio libre del panel: 1 sobre los iconos, 1 bajo los iconos, 2 bajo el texto */
.sm-gap { display: block; flex: 1 0 0; }
.sm-gap--doble { flex: 2 0 0; }
.sm-panel__note { color: var(--c-muted); }
.sm-panel__avatar { display: block; justify-self: center; align-self: center; }
.sm-panel__avatar-img {
  display: block;
  width: clamp(10.5rem, 16.5vw, 16.5rem);   /* 50 % más que la versión anterior */
  height: auto;
  border-radius: 50%;
  border: 4px solid var(--c-white);
  box-shadow: var(--shadow-soft);
}

/* Cita y CTA final (composición de LRSD-sobremi-v2) ----------------------- */
.sm-final {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 3.4vw, 3.5rem);
  margin-block: clamp(1.6rem, 3vw, 2.6rem) clamp(2.5rem, 5vw, 4rem);
  padding: clamp(.8rem, 1.5vw, 1.3rem) clamp(1.5rem, 3vw, 2.75rem);
  background: linear-gradient(100deg, #EAF3FE 0%, #F5F9FF 55%, #EDF4FE 100%);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
}
/* Sin fondo y con el borde metalizado de arriba (Lisa, 15/09): va aquí para ganar a las reglas base */
.sm-card,
.sm-panel,
.sm-final { background: transparent; border-color: transparent; }
.sm-quote { position: relative; }
.sm-quote__mark {
  margin-right: .12em;
  font-size: 1.7em;
  line-height: 0;
  vertical-align: -.28em;
  color: var(--c-sky);
}
.sm-quote__text {
  font-size: clamp(1.1rem, .95rem + .6vw, 1.5rem);
  line-height: 1.4;
  color: var(--c-navy);
  text-wrap: pretty;
}
/* Firma tomada del propio diseño aprobado (LRSD-sobremi-v2): su tipografía no existe
   entre las fuentes del proyecto, así que se usa la imagen, no una fuente parecida. */
.sm-quote__sign { display: flex; align-items: center; justify-content: flex-end; gap: .8rem; margin-top: .7rem; }
.sm-quote__dash { display: block; width: clamp(2rem, 3vw, 3rem); height: 2px; background: var(--c-blue); }
.sm-quote__firma { display: block; width: clamp(8.5rem, 13vw, 11.5rem); height: auto; }
.sm-final__cta { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; max-width: 21rem; }
.sm-final__note { font-size: var(--fs-small); line-height: 1.45; color: var(--c-muted); }

/* ==========================================================================
   Contacto-pronto (LRSD-contactopronto-v1)
   Aislamiento: todo con prefijo `cp-`, responsive incluido. El hero reutiliza
   page_hero() sin cambios (mismo sistema que las páginas legales).
   ========================================================================== */
.cp-canales { padding-block: clamp(2.25rem, 4.5vw, 3.75rem) 0; scroll-margin-top: 1rem; }
.cp-canales__lead { margin-top: .35rem; font-size: clamp(1.1rem, .95rem + .55vw, 1.5rem); line-height: 1.3; color: var(--c-navy); }
/* La lista lleva role="list": el reset global (ul[role="list"]) le quita el margen,
   por eso el aire va en la sección y no en la lista. */
.cp-canales__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.85rem, 1.5vw, 1.25rem);
}
.cp-canales__lead { margin-bottom: clamp(1.25rem, 2.4vw, 1.9rem); }
.cp-canal__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  height: 100%;
  min-height: clamp(10.5rem, 15vw, 12.75rem);
  padding: clamp(1.1rem, 2vw, 1.6rem) 1rem;
  text-align: center;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 30px -26px rgba(12, 60, 156, .5);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
a.cp-canal__link:hover { transform: translateY(-3px); border-color: #BFD6F5; box-shadow: 0 18px 36px -22px rgba(12, 60, 156, .45); }
.cp-canal__link.is-soon { cursor: default; }
.cp-canal__icon { width: clamp(3.6rem, 5.4vw, 4.9rem); height: clamp(3.6rem, 5.4vw, 4.9rem); }
.cp-canal__body { display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; }
.cp-canal__title { font-size: clamp(1.1rem, .95rem + .45vw, 1.4rem); line-height: 1.2; letter-spacing: -.01em; color: var(--c-blue); }
.cp-canal__data { font-size: var(--fs-small); color: var(--c-muted); }

.cp-formulario { padding-block: clamp(2.25rem, 4.5vw, 3.75rem) 0; scroll-margin-top: 1rem; }
.cp-formulario__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.cp-formulario__intro p { margin-top: .9rem; max-width: 30em; line-height: 1.5; }
.cp-formulario__intro .cp-formulario__legal { font-size: var(--fs-small); color: var(--c-muted); }
.cp-formulario__legal a { color: var(--c-blue); text-decoration: underline; text-underline-offset: 3px; }
.cp-formulario__card {
  padding: clamp(1.25rem, 2.6vw, 2.25rem);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
}
.cp-form { display: grid; gap: 1.15rem; }
.cp-form__hint { font-size: var(--fs-small); color: var(--c-muted); }
.cp-form__motivo { padding: .7rem .9rem; line-height: 1.45; color: var(--c-navy); background: var(--c-surface-2); border-left: 3px solid var(--c-blue); border-radius: var(--radius-sm); }
.cp-field { display: grid; gap: .4rem; }
.cp-field__label { font-size: 1rem; color: var(--c-navy); }
.cp-field__input {
  width: 100%;
  padding: .8rem .95rem;
  font: inherit;
  font-size: 1rem;              /* 16 px: iOS no hace zoom al enfocar */
  line-height: 1.4;
  color: var(--c-ink);
  background: var(--c-white);
  border: 1.5px solid #C4D6EE;
  border-radius: var(--radius-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
textarea.cp-field__input { min-height: 10.5rem; resize: vertical; line-height: 1.5; }
.cp-field__input:hover { border-color: var(--c-sky); }
.cp-field__input:focus-visible { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(47, 92, 235, .25); }
.cp-field.is-invalid .cp-field__input { border-color: #B42318; }
.cp-field__error { font-size: var(--fs-small); line-height: 1.4; color: #B42318; }
.cp-form__submit { justify-self: start; border: 0; cursor: pointer; }
.cp-form__submit[disabled] { opacity: .75; cursor: progress; }
.cp-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cp-alert {
  display: flex;
  gap: .8rem;
  margin-bottom: 1.25rem;
  padding: 1rem 1.1rem;
  line-height: 1.45;
  border-radius: var(--radius);
}
.cp-alert:focus { outline: 3px solid var(--c-blue); outline-offset: 2px; }
.cp-alert--ok { color: var(--c-navy); background: #EAF7EF; border: 1px solid #A6D8B8; }
.cp-alert--ok .cp-alert__icon { color: #1E7A45; }
.cp-alert--error { color: #7A1A12; background: #FDF0EE; border: 1px solid #F1B8B0; }
.cp-alert__icon { flex: none; width: 1.5rem; height: 1.5rem; margin-top: .1rem; }
.cp-alert__title { font-size: 1.1rem; }
.cp-alert p + p, .cp-alert ul { margin-top: .35rem; }
.cp-alert ul { margin-bottom: 0; padding-left: 1.1rem; }
.cp-alert a { text-decoration: underline; text-underline-offset: 3px; }
.cp-alert__dev { font-size: var(--fs-small); color: var(--c-muted); }

.cp-cierre { padding-block: clamp(2.25rem, 4.5vw, 3.75rem) clamp(3rem, 6vw, 5rem); }
.cp-launch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 2.6vw, 2.5rem);
  padding: clamp(1.1rem, 2.2vw, 1.75rem) clamp(1.1rem, 2.6vw, 2.25rem);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
}
.cp-launch__icon { width: clamp(4rem, 6.4vw, 6rem); height: clamp(4rem, 6.4vw, 6rem); background: #DCEAFD; }
.cp-launch__title { font-size: clamp(1.45rem, 1rem + 1.5vw, 2.4rem); line-height: 1.15; letter-spacing: -.015em; color: var(--c-blue); }
.cp-launch__text { margin-top: .45rem; max-width: 42em; line-height: 1.45; color: var(--c-muted); }
.cp-quote {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.9rem, 2.4vw, 2.25rem);
  margin: clamp(.9rem, 1.4vw, 1.1rem) 0 0;
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.1rem, 2.6vw, 2.25rem);
  background: linear-gradient(100deg, #EAF3FE 0%, #F5F9FF 55%, #EDF4FE 100%);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
}
.cp-quote__mark { height: .5em; font-size: clamp(4.5rem, 3rem + 3vw, 6.5rem); line-height: .85; color: var(--c-sky); }
.cp-quote__text { margin: 0; font-size: clamp(1.15rem, .95rem + .8vw, 1.75rem); line-height: 1.35; color: var(--c-navy); text-wrap: pretty; }
.cp-quote__sign { display: flex; align-items: center; justify-content: flex-end; gap: .8rem; }
.cp-quote__dash { display: block; width: clamp(2rem, 3vw, 3rem); height: 2px; background: var(--c-blue); }
.cp-quote__firma { display: block; width: clamp(8.5rem, 13vw, 11.5rem); height: auto; }

@media (max-width: 1024px) {
  .cp-canales__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-formulario__inner { grid-template-columns: minmax(0, 1fr); }
  .cp-formulario__intro p { max-width: 40em; }
}
@media (max-width: 768px) {
  .cp-launch { grid-template-columns: auto minmax(0, 1fr); }
  .cp-launch__cta { grid-column: 1 / -1; }
  .cp-quote { grid-template-columns: auto minmax(0, 1fr); }
  .cp-quote__sign { grid-column: 1 / -1; }
}
@media (max-width: 552px) {
  .cp-canales__grid { grid-template-columns: minmax(0, 1fr); }
  .cp-canal__link { flex-direction: row; justify-content: flex-start; gap: 1rem; min-height: 0; padding: .9rem 1.1rem; text-align: left; }
  .cp-canal__icon { width: 3.4rem; height: 3.4rem; }
  .cp-canal__body { align-items: flex-start; }
  .cp-launch { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .cp-launch__cta { grid-column: auto; }
  .cp-form__submit { justify-self: stretch; justify-content: center; }
}

/* Contacto-pronto · hero: foto de Lisa (LRSD-contacto-pronto-v1 al 50 %, sin retoques)
   centrada en vertical, con el gráfico de los canales como complemento sobre la esquina
   inferior izquierda (zona de la planta: no tapa a Lisa). */
.cp-hero { position: relative; background: linear-gradient(180deg, #FBFDFF 0%, #F4F8FE 100%); }
.cp-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
  align-items: center;
  gap: clamp(1.5rem, 3.4vw, 3.25rem);
  padding-block: clamp(2rem, 3.6vw, 3.25rem);
}
/* Título y subtítulo con el mismo tamaño, peso y color que Próximamente (Lisa, 15/09) */
.cp-hero__title {
  font-size: calc(var(--fs-display) - 5px);
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--c-deep);
  background: var(--deep-lit);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-block: .14em .1em;
  margin-block: -.14em -.1em;
}
.cp-hero__lead { margin-top: .7rem; font-size: calc(var(--fs-lead) - 3px); line-height: 1.18; letter-spacing: -.012em; color: var(--c-navy); }
.cp-hero__text { margin-top: 1rem; max-width: 30em; line-height: 1.45; }
.cp-hero__media { display: flex; align-items: center; justify-content: center; }
.cp-hero__photo { position: relative; width: min(561px, 100%); }
.cp-hero__picture { display: block; }
.cp-hero__img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.cp-hero__social { position: absolute; right: clamp(1rem, 2.2vw, 2rem); top: clamp(12rem, 20vw, 16.5rem); }
.cp-hero__social .social__link { width: 40px; height: 40px; }

/* OBSOLETO (Lisa, 16/09): la escena del hero ya trae dibujado el gráfico de los cuatro canales.
   Se conserva sin uso; no aplicar. */
.cp-orbit {
  position: absolute;
  left: calc(clamp(10rem, 16vw, 14rem) * -.62);
  bottom: 5%;
  width: clamp(10rem, 16vw, 14rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .66);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 24px 48px -26px rgba(12, 60, 156, .5), inset 0 0 0 6px rgba(234, 243, 254, .6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.cp-orbit__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.cp-orbit__node {
  position: absolute;
  width: 27%;
  height: 27%;
  transform: translate(-50%, -50%);
  box-shadow: 0 8px 16px -10px rgba(12, 60, 156, .45);
}
.cp-orbit__node--n { left: 50%; top: 19%; }
.cp-orbit__node--e { left: 81%; top: 50%; }
.cp-orbit__node--s { left: 50%; top: 81%; }
.cp-orbit__node--w { left: 19%; top: 50%; }
.cp-orbit__center { position: absolute; left: 50%; top: 50%; width: 22%; height: 22%; color: var(--c-sky); transform: translate(-50%, -50%); }
.cp-orbit__center .icon { width: 100%; height: 100%; stroke-width: 1.3; }

@media (max-width: 768px) {
  .cp-hero__inner { grid-template-columns: minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2rem); }
  .cp-hero__media { order: -1; position: relative; }
  .cp-hero__photo { width: min(561px, 80%); }
  .cp-hero__text { max-width: none; }
  .cp-hero__social { top: 15.7%; right: 0; }
  .cp-hero__social .social__link { width: 38px; height: 38px; }
  .cp-orbit { left: -6%; bottom: -4%; width: clamp(7rem, 30vw, 10rem); }
}

/* ==========================================================================
   Mantenimiento (LRSD-mantenimiento). Prefijo `mt-`. Con los componentes globales
   congelados alrededor (header, footer, redes, CTA, scroll to top y avatar).
   ========================================================================== */
.mt-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #FBFDFF 0%, #F4F8FE 100%); }
.mt-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  align-items: center;
  gap: clamp(1.5rem, 3.4vw, 3.25rem);
  min-height: clamp(545px, 42vw, 620px);
  padding-block: clamp(2rem, 3.6vw, 3.25rem);
}
.mt-hero__title { font-size: clamp(2.3rem, 1rem + 3.1vw, 3.65rem); line-height: 1.04; letter-spacing: -.025em; color: var(--c-blue); }
.mt-hero__lead { margin-top: .7rem; font-size: clamp(1.3rem, .95rem + 1.2vw, 2.05rem); line-height: 1.18; letter-spacing: -.012em; color: var(--c-navy); }
.mt-hero__text { margin-top: 1rem; max-width: 32em; line-height: 1.45; }
.mt-hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: clamp(1.25rem, 2.4vw, 1.9rem); }
.mt-hero__picture { display: block; }
.mt-hero__img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
}
.mt-hero__social { position: absolute; right: clamp(1rem, 2.2vw, 2rem); top: clamp(12rem, 20vw, 16.5rem); }
.mt-hero__social .social__link { width: 40px; height: 40px; }
.mt-cuerpo { padding-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem); }

@media (max-width: 1024px) {
  .mt-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 42%); }
  .mt-cuerpo .info-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .mt-cuerpo .info-grid--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .mt-hero__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .mt-hero__media { order: -1; position: relative; }
  .mt-hero__img {
    -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
  }
  .mt-hero__text { max-width: none; }
  .mt-hero__social { top: 15.7%; right: 0; }
  .mt-hero__social .social__link { width: 38px; height: 38px; }
}
@media (max-width: 552px) {
  .mt-hero__actions .btn { width: 100%; justify-content: center; }
}

/* Contacto-pronto · hero en escritorio y tablets (decisión de Lisa, 13/09): la foto se
   integra en el fondo (degradado a la izquierda y bordes fundidos, sin rectángulo) y el
   gráfico de los canales, al 50 %, va sobre los cuadernos de la zona inferior izquierda. */
@media (min-width: 768px) {
  .cp-hero__img {
    border-radius: 0;
    box-shadow: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
    mask-composite: intersect;
  }
  .cp-orbit { left: 21%; bottom: 7%; width: clamp(5rem, 8vw, 7rem); }
  .cp-orbit__center .icon { stroke-width: 1.6; }
}

/* ==========================================================================
   Ajustes de Lisa (15/09 · 3). Van al final para ganar a las reglas base.
   ========================================================================== */
/* Próximamente · hero con Hero-pronto-v2 (fondo blanco, 1672 × 941). Sustituye al recorte v1:
   ya no se desplaza bajo el texto. Centrada en horizontal y en vertical en el hueco libre entre
   el texto (a 24 px) y la columna de redes (a 12 px), sin nada encima y con los bordes fundidos. */
.hero-soon { --soon-col: .47; }   /* ancho de la columna de texto (54 % hasta 1024 px) */
.hero-soon .hero-soon__img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 8%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 8%, #000 88%, transparent 100%);
  mask-composite: intersect;
}
@media (min-width: 769px) {
  .hero-soon .hero-soon__media {
    left: calc(max(var(--gutter), (100% - var(--container)) / 2) + min(640px, var(--soon-col) * min(100% - 2 * var(--gutter), var(--container))) + 24px);
    right: 0;
    width: auto;
  }
  .hero-soon .hero-soon__picture {
    inset: 0 calc(clamp(1rem, 2.2vw, 2rem) + 52px) 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none;
  }
  .hero-soon .hero-soon__img { width: auto; height: auto; min-width: 0; max-width: 100%; max-height: 100%; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-soon { --soon-col: .54; }
}
/* Móvil: la foto va arriba, con el mismo margen a ambos lados que ocupa la columna de redes y
   una altura mínima para que la columna no llegue al título (mismo criterio que Sobre mí). */
@media (max-width: 768px) {
  .hero-soon .hero-soon__media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 270px;
    padding-inline: calc(var(--gutter) + 50px);
  }
  .hero-soon .hero-soon__picture { width: 100%; }
  .hero-soon .hero-soon__img { width: 100%; height: auto; }
}

/* Sobre mí · «Mis valores»: los 4 iconos y sus nombres, 3 px más abajo */
.sm-values { position: relative; top: 3px; }
/* Sobre mí · banner final alineado con el borde izquierdo de «Mi enfoque» y el derecho de «Mis valores» */
.sm-final { width: calc(100% - 2 * var(--gutter)); max-width: var(--container); }

/* Contacto · títulos con el color de «Sitio principal» */
.cp-canales .section-title,
.cp-formulario .section-title { color: var(--c-deep); }
/* Contacto · caja del formulario y Cookies · encabezado de la tabla: fondo de la marquesina */
.cp-formulario__card,
.legal-doc thead {
  background:
    radial-gradient(70% 260% at 62% -40%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, rgba(12, 60, 156, .08) 0%, rgba(12, 60, 156, .10) 55%, rgba(8, 47, 128, .13) 100%),
    var(--c-white);
}
.legal-doc th { background: transparent; }
/* Contacto · «Disponible el…» y la cita: sin fondo y con el borde metalizado (anillo de arriba) */
.cp-launch,
.cp-quote { background: transparent; border-color: transparent; }
/* Contacto · comillas iguales a las del banner de Sobre mí (mismo tamaño, color y posición) */
.cp-quote { grid-template-columns: minmax(0, 1fr) auto; }
.cp-quote__mark {
  height: auto;
  margin-right: .12em;
  font-size: calc(1.7 * clamp(1.1rem, .95rem + .6vw, 1.5rem));
  line-height: 0;
  vertical-align: -.28em;
  color: var(--c-sky);
}
@media (max-width: 768px) {
  .cp-quote { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Ajustes de Lisa (15/09 · 4)
   ========================================================================== */
/* Sobre mí · «Mi enfoque» y «Mis valores»: sin borde (conservan la sombra) y títulos con el
   color de «Formas de contactarme» */
.sm-panel::before { content: none; }
.sm-panel__title { color: var(--c-deep); }

/* Sobre mí · hero en móvil (501–768 px): espacio fijo por tramos, repartido arriba y abajo de la
   foto, para acercar su altura a la del hero de Contacto (medido píxel a píxel; error ≤ 3 px).
   Los tramos siguen los saltos de línea de los textos de ambas páginas. De 320 a 500 px el texto
   de Sobre mí ya es más alto que el hero de Contacto y queda como está (decisión de Lisa).
   Recalculado el 15/09 con la foto nueva de Contacto (LRSD-LisaR-Sobremi-v6, 561 × 669). */
@media (max-width: 768px) {
  .sm-hero { --sm-extra: 0px; }
  .sm-hero__media { margin-block: calc(var(--sm-extra) / 2); }
}
@media (min-width: 501px) and (max-width: 507.98px) { .sm-hero { --sm-extra: 19px; } }
@media (min-width: 508px) and (max-width: 514.98px) { .sm-hero { --sm-extra: 25px; } }
@media (min-width: 515px) and (max-width: 521.98px) { .sm-hero { --sm-extra: 31px; } }
@media (min-width: 522px) and (max-width: 525.98px) { .sm-hero { --sm-extra: 36px; } }
@media (min-width: 526px) and (max-width: 532.98px) { .sm-hero { --sm-extra: 17px; } }
@media (min-width: 533px) and (max-width: 539.98px) { .sm-hero { --sm-extra: 23px; } }
@media (min-width: 540px) and (max-width: 546.98px) { .sm-hero { --sm-extra: 28px; } }
@media (min-width: 547px) and (max-width: 568.98px) { .sm-hero { --sm-extra: 33px; } }
@media (min-width: 569px) and (max-width: 590.98px) { .sm-hero { --sm-extra: 62px; } }
@media (min-width: 591px) and (max-width: 612.98px) { .sm-hero { --sm-extra: 67px; } }
@media (min-width: 613px) and (max-width: 634.98px) { .sm-hero { --sm-extra: 72px; } }
@media (min-width: 635px) and (max-width: 649.98px) { .sm-hero { --sm-extra: 77px; } }
@media (min-width: 650px) and (max-width: 670.98px) { .sm-hero { --sm-extra: 105px; } }
@media (min-width: 671px) and (max-width: 692.98px) { .sm-hero { --sm-extra: 110px; } }
@media (min-width: 693px) and (max-width: 714.98px) { .sm-hero { --sm-extra: 116px; } }
@media (min-width: 715px) and (max-width: 736.98px) { .sm-hero { --sm-extra: 122px; } }
@media (min-width: 737px) and (max-width: 748.98px) { .sm-hero { --sm-extra: 126px; } }
@media (min-width: 749px) and (max-width: 762.98px) { .sm-hero { --sm-extra: 127px; } }
@media (min-width: 763px) and (max-width: 768px) { .sm-hero { --sm-extra: 123px; } }

/* Legales · títulos de las tarjetas con el color de «Formas de contactarme» y círculos del mismo
   tamaño que los de «Encontrarás» (en móvil, 3 rem como allí) */
.legal-cards .section-title { color: var(--c-deep); }
.legal-cards .info-card__icon { width: clamp(3.375rem, 5.4vw, 5.0625rem); height: clamp(3.375rem, 5.4vw, 5.0625rem); }
@media (max-width: 430px) {
  .legal-cards .info-card__icon { width: 3rem; height: 3rem; }
}

/* Contacto · banners fusionados: «Disponible el…» arriba, línea degradada semitransparente con
   los tonos de las líneas del header y la cita debajo, apilados y a todo el ancho */
.cp-launch__title { color: var(--c-deep); }
.cp-launch__sep {
  grid-column: 1 / -1;
  display: block;
  height: 1px;
  background: var(--grad-metal-line);
  opacity: .45;
}
.cp-launch .cp-quote { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; }
.cp-launch .cp-quote::before { content: none; }
/* Contacto · círculo del calendario idéntico al de WhatsApp: tamaño, sin fondo, borde e icono */
.cp-launch__icon { width: clamp(3.6rem, 5.4vw, 4.9rem); height: clamp(3.6rem, 5.4vw, 4.9rem); background: transparent; }
.cp-launch__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--grad-metal-logo);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.cp-launch__icon { position: relative; }
.cp-launch__icon .icon { stroke: url(#lrsd-metal-logo); }
@media (max-width: 552px) {
  .cp-launch__icon { width: 3.4rem; height: 3.4rem; }
}

/* ==========================================================================
   Ajustes de Lisa (15/09 · 5)
   ========================================================================== */
/* Títulos de todas las páginas: 5 px menos que el de «Próximamente» aprobado y con sus mismas
   características (tamaño, peso, interlineado, espaciado y Azul Profundo con iluminación).
   Incluye Legal-pronto, 404 y Mantenimiento (decisión de Lisa). */
.hero-soon__title,
.page-hero__title,
.page-hero--tall .page-hero__title,
.sm-hero__title,
.cp-hero__title,
.status-page__title,
.mt-hero__title {
  font-size: calc(var(--fs-display) - 10px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--c-deep);
  background: var(--deep-lit);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-block: .14em .1em;
  margin-block: -.14em -.1em;
}

/* Política de Cookies · cuadro de preferencias (mismo contenido que la imagen del hero).
   Informativo: el sitio solo usa cookies esenciales, así que las otras tres van apagadas y
   bloqueadas (decisión de Lisa). «Gestionar preferencias» lleva a este cuadro. */
.cookie-prefs {
  max-width: 34rem;
  margin-top: 1.1rem;
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2.4vw, 1.75rem);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  scroll-margin-top: 1.25rem;
}
.legal-doc .cookie-prefs__title { display: flex; align-items: center; gap: .7rem; margin-top: 0; font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); line-height: 1.3; color: var(--c-navy); }
.cookie-prefs__title .icon { width: 1.6rem; height: 1.6rem; }
.legal-doc .cookie-prefs__list { margin: .9rem 0 0; padding: 0; list-style: none; }
.legal-doc .cookie-prefs__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: .85rem;
  margin-top: 0;
  padding-block: .8rem;
  line-height: 1.4;
  border-top: 1px solid #EEF3FA;
}
.cookie-prefs__item > .icon { width: 1.35rem; height: 1.35rem; color: var(--c-muted); }
.cookie-prefs__name { min-width: 0; color: var(--c-ink); }
.cookie-prefs__switch {
  position: relative;
  display: block;
  width: 2.9rem;
  height: 1.6rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #D1D5DB;
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.cookie-prefs__switch::after {
  content: "";
  position: absolute;
  top: .2rem;
  left: .2rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--c-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition: left .2s var(--ease);
}
.cookie-prefs__switch[aria-checked="true"] { background: var(--c-blue); }
.cookie-prefs__switch[aria-checked="true"]::after { left: 1.5rem; }
.cookie-prefs__switch:disabled { cursor: not-allowed; }
.cookie-prefs__switch:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 2px; }
/* Contacto · explicación breve de la opción elegida en la lista */
.cp-field__help { font-size: var(--fs-small); line-height: 1.45; color: var(--c-muted); }

/* Contacto · imagen del hero: la escena LRSD-hero-contacto-v3 va dentro de su columna, como en los
   heroes de las demás páginas: entera, con su proporción intacta (1672 × 941, ni deformada ni
   recortada), centrada y con los bordes fundidos. El fondo del hero sigue siendo el degradado.
   El bloque conserva la altura que tenía la foto anterior (561 × 669 como máximo, al 44 % del
   ancho; al 80 % en móvil), así la columna de redes no se mueve, el hero no encoge y Sobre mí
   sigue midiendo lo mismo (Lisa, 16/09). */
.cp-hero { container-type: inline-size; }
.cp-hero__media {
  min-height: calc(min(561px, .44 * min(100cqw - 2 * var(--gutter), var(--container))) * 669 / 561);
}
/* Mismo formato que Próximamente y Sobre mí: la imagen ocupa todo el hueco libre entre el texto
   (a 24 px) y la columna de redes (a 12 px), centrada en ese hueco y sin nada encima. */
@media (min-width: 769px) {
  .cp-hero__media {
    margin-inline: calc(24px - clamp(1.5rem, 3.4vw, 3.25rem)) calc(clamp(1rem, 2.2vw, 2rem) + 52px - max(var(--gutter), (100cqw - var(--container)) / 2));
  }
}
.cp-hero__picture { display: block; max-width: 100%; }
.cp-hero__img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(min(561px, .44 * min(100cqw - 2 * var(--gutter), var(--container))) * 669 / 561);
  border-radius: 0;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-composite: intersect;
}
/* Móvil: la imagen va arriba, con el mismo margen a los lados que ocupa la columna de redes */
@media (max-width: 768px) {
  .cp-hero__media {
    min-height: calc(min(561px, .8 * min(100cqw - 2 * var(--gutter), var(--container))) * 669 / 561);
    padding-inline: 50px;
  }
  .cp-hero__img { max-height: calc(min(561px, .8 * min(100cqw - 2 * var(--gutter), var(--container))) * 669 / 561); }
}

/* Términos de Uso · «Haz clic aquí si tienes dudas» abre una ventana con 2 opciones */
.lower-banner__cta button.btn { border: 0; font-family: inherit; cursor: pointer; }
.lr-dialog {
  width: min(26rem, calc(100vw - 2rem));
  padding: clamp(2.75rem, 7vw, 3rem) clamp(1.25rem, 4vw, 1.75rem) clamp(1.25rem, 3.5vw, 1.75rem);
  color: var(--c-ink);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -30px rgba(12, 60, 156, .55);
}
.lr-dialog::backdrop { background: rgba(8, 47, 128, .35); }
.lr-dialog__close {
  position: absolute;
  top: .6rem;
  right: .6rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  color: var(--c-navy);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.lr-dialog__close:hover { background: var(--c-surface-2); }
.lr-dialog__close:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 2px; }
.lr-dialog__close .icon { width: 1.35rem; height: 1.35rem; }
.lr-dialog__list { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.lr-dialog__list .btn { width: 100%; justify-content: center; }

/* ==========================================================================
   Ajustes de Lisa (21/09) · títulos, subtítulos y títulos de tarjeta del estado Próximamente
   Próximamente, Contacto, Sobre mí, Legal, las 4 legales, 404 y Mantenimiento. Van al final (y con
   `main` delante) para ganar a las reglas anteriores sin modificarlas.
   ========================================================================== */
/* Títulos: 5 px menos que antes (fs-display − 15 px: 73 px en escritorio, 33 px en móvil), todos
   iguales y con el degradado del azul metalizado del logo. */
main .hero-soon__title,
main .page-hero__title,
main .page-hero--tall .page-hero__title,
main .sm-hero__title,
main .cp-hero__title,
main .mt-hero__title {
  font-size: calc(var(--fs-display) - 15px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--c-deep);
  background: var(--grad-metal-logo);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-block: .14em .1em;
  margin-block: -.14em -.1em;
}
/* 404: el número es el título de la página: 5 px menos sobre su propio tamaño y el mismo degradado */
main .status-page__code {
  font-size: calc(clamp(4.5rem, 3rem + 6vw, 8rem) - 5px);
  color: var(--c-deep);
  background: var(--grad-metal-logo);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Subtítulos: todos al tamaño de la frase bajo el título menos 3 px (fs-lead − 6 px: 32 px en
   escritorio, 17 px en móvil), con su mismo color (azul marino), tipografía y peso. */
main .hero-soon__lead,
main .soon-pages .section-title,
main .lower-banner--proximamente .lower-banner__title,
main .cp-hero__lead,
main .cp-canales .section-title,
main .cp-formulario .section-title,
main .cp-launch__title,
main .sm-hero__lead,
main .page-hero__lead,
main .page-hero--tall .page-hero__lead,
main .legal-cards .section-title,
main .legal-closing .lower-banner__title,
main .lower-banner--legal-pronto .lower-banner__title,
main .mt-hero__lead,
main .lower-banner--mantenimiento .lower-banner__title,
main .status-page__title {
  font-size: calc(var(--fs-lead) - 6px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.012em;
  color: var(--c-navy);
  background: none;
  -webkit-text-fill-color: currentColor;
}
/* «Esta página no existe…» deja de ser título: sin el margen compensado del degradado */
main .status-page__title { padding-block: 0; margin-block: 0; }
/* Títulos de tarjeta: 2 px menos que «Sitio principal» (fs-h3 − 4 px) y todos iguales, con su color */
main .soon-card__title,
main .cp-canal__title,
main .info-card__title,
main .info-grid--2 .info-card__title,
main .legal-cards .info-card__title {
  font-size: calc(var(--fs-h3) - 4px);
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--c-deep);
}

/* ==========================================================================
   Ajustes de Lisa (21/09 · 2) · estado Próximamente
   ========================================================================== */
/* Próximamente · hero: el espacio vacío entre la línea inferior del header y el título, un 50 %
   más alto. Antes el texto iba centrado en vertical, así que ese espacio variaba con el ancho;
   ahora va arriba con un relleno calculado para que sea 1,5 veces el que había en cada ancho
   (medido de 769 a 1920 px). En móvil entre el header y el título está la foto: no cambia. */
@media (min-width: 769px) {
  .hero-soon__inner { align-items: start; }
  .hero-soon__content { padding-top: 20px; }
}
@media (min-width: 830px) and (max-width: 929.98px) {
  .hero-soon__content { padding-top: 34px; }
}
@media (min-width: 930px) and (max-width: 1024.98px) {
  .hero-soon__content { padding-top: 22px; }
}
@media (min-width: 1025px) and (max-width: 1199.98px) {
  .hero-soon__content { padding-top: calc(23.9vw - 217.6px); }
}
@media (min-width: 1200px) and (max-width: 1279.98px) {
  .hero-soon__content { padding-top: calc(43vw - 446.7px); }
}
@media (min-width: 1280px) {
  .hero-soon__content { padding-top: clamp(26px, 30vw - 280px, 152px); }
}
@media (min-width: 1441px) {
  .hero-soon__content { padding-top: 145px; }
}
/* Próximamente · espacio entre la descripción y la caja del contador, un 50 % más alto */
main .countdown { margin-top: clamp(2.25rem, 4.2vw, 3.375rem); }
/* Próximamente · números del contador, 2 px menos */
main .countdown__num { font-size: calc(clamp(2rem, 1.25rem + 2.3vw, 3.25rem) - 2px); }
@media (max-width: 360px) {
  main .countdown__num { font-size: calc(1.85rem - 2px); }
}

/* Contacto · «Formas de contactarme»: WhatsApp, Correo electrónico, Formulario de contacto y
   Consúltame, 2 px menos */
.page-contacto-pronto main .cp-canal__title { font-size: calc(var(--fs-h3) - 6px); }
/* Contacto · «Disponible el…» y la cita, 2 px menos */
.page-contacto-pronto main .cp-launch__title { font-size: calc(var(--fs-lead) - 8px); }
.page-contacto-pronto main .cp-quote__text { font-size: calc(clamp(1.15rem, .95rem + .8vw, 1.75rem) - 2px); }

/* Legal · «Puedes revisar aquí con confianza» en una sola línea (sin el ancho máximo que la partía) */
.page-legal-pronto main .page-hero--tall .page-hero__lead { max-width: none; }
/* Legal · «Disponible el 30/09/26 · 8:30 p. m.» en una sola línea y del mismo tamaño y color que
   la misma frase en Contacto */
.page-legal-pronto main .lower-banner--legal-pronto .lower-banner__eyebrow,
.page-legal-pronto main .lower-banner--legal-pronto .lower-banner__title {
  display: inline;
  margin: 0;
  font-size: calc(var(--fs-lead) - 8px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.012em;
  color: var(--c-navy);
  white-space: nowrap;
}
.page-legal-pronto main .lower-banner--legal-pronto .lower-banner__eyebrow { margin-right: .28em; }

/* Política de Cookies · títulos de las 6 tarjetas, 2 px menos */
.page-cookies main .legal-cards .info-card__title { font-size: calc(var(--fs-h3) - 6px); }
/* Exoneración IA · títulos de las 6 tarjetas de «Aspectos importantes», 3 px menos */
.page-exoneracion-ia main .legal-cards .info-card__title { font-size: calc(var(--fs-h3) - 7px); }
/* Mantenimiento · títulos de las 3 tarjetas, 2 px menos */
.page-mantenimiento main .info-card__title { font-size: calc(var(--fs-h3) - 6px); }

/* 404 · título y texto en una sola línea cuando caben (sin el ancho máximo que los partía) */
.page-404 main .status-page__title,
.page-404 main .status-page__text { max-width: none; }