/* ============================================================
   SIN MIEDO · estilos del tema
   Todo sale de los tokens: ni un hex, ni un tamaño suelto.
   BRAND.md §3 y §4 · DESIGN.md §3, §5 y §9.
   ============================================================ */

@import url('./fonts.css');

/* --- Cabecera: barra de 72 px con el isotipo solo -----------
   El lockup apilado es más alto que ancho (0,807), así que a
   120 px de ancho mide 149 de alto y no cabe en 72. El lockup
   completo aparece grande en el hero, una vez. DESIGN.md §6. */

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  background-color: var(--bg-base);
  background-image: url('../img/textura-papel.png');
  background-repeat: repeat;
  background-size: 200px 200px;
  color: var(--ink);
}

.wp-site-blocks {
  overflow-x: hidden;
}

.sm-cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Opaca y sin desenfoque: BRAND.md §4 prohíbe el glassmorfismo. La barra
     se separa del contenido con el filete de abajo, que basta. */
  background: var(--bg-base);
  border-bottom: var(--borde-hairline) solid color-mix(in srgb, var(--borde-color) 80%, transparent);
}

.sm-cabecera__barra {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 64px;
  max-width: calc(var(--max-contenido) + var(--margen) * 2);
  margin-inline: auto;
  padding-inline: var(--margen);
}

@media (min-width: 900px) {
  .sm-cabecera__barra { min-height: 76px; }
}

/* Marca de cabecera: Isotipo + SIN MIEDO (versalitas) + a amarse (itálica) */
.sm-cabecera__marca,
.sm-cabecera__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
  transition: opacity var(--dur-normal) var(--ease);
}

.sm-cabecera__marca:hover,
.sm-cabecera__logo:hover {
  opacity: .88;
}

.sm-cabecera__iso,
.sm-cabecera__logo img,
.sm-cabecera__logo .custom-logo {
  display: block;
  height: 38px;
  width: auto;
  flex-shrink: 0;
  transition: transform var(--dur-normal) var(--ease);
}

@media (min-width: 900px) {
  .sm-cabecera__iso,
  .sm-cabecera__logo img,
  .sm-cabecera__logo .custom-logo {
    height: 44px;
  }
}

.sm-cabecera__marca:hover .sm-cabecera__iso,
.sm-cabecera__logo:hover img {
  transform: scale(1.04);
}

.sm-cabecera__textos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.05;
  gap: 1px;
}

.sm-cabecera__nombre {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.sm-cabecera__lema {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  color: var(--accent-action);
  white-space: nowrap;
}

.sm-cabecera__menu {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
}

/* --- Prosa -------------------------------------------------
   62 caracteres por línea. Es la regla que más se incumple y
   la más importante: el contenido es denso. DESIGN.md §3. */

/* La medida de la prosa la fija `contentSize` en theme.json: 680 px, que
   NO son los 62 caracteres de DESIGN.md §3. Medido contando saltos de
   línea reales sobre PT Sans a 17 px, una columna de 680 da 91 caracteres
   por línea. Son dos reglas distintas y la que manda es la de caracteres:
   §3 la llama «la que más se incumple y la más importante».

   Así que la columna sigue midiendo 680 y centrada —de ahí cuelgan el
   título, los recuadros y las bandas—, pero el texto corrido se corta
   antes y se ancla al borde izquierdo de esa columna. Anclarlo es lo que
   evita que WordPress lo centre dentro de la columna y deje el párrafo
   sangrado respecto al título, que es el fallo de «se ve de costado». */
/* --- Prosa y Ritmo de Párrafos (DESIGN.md §3) --------------- */

p,
.wp-block-paragraph {
  margin-block: 0;
  max-width: var(--measure-prosa);
  line-height: var(--lh-prosa);
  overflow-wrap: break-word;
}

p + p,
.wp-block-paragraph + .wp-block-paragraph {
  margin-top: var(--space-5); /* 20px - token prosa-entre-parrafos */
}

/* Espaciado tras titulares hacia párrafos o entradillas */
h1 + p, h2 + p, h3 + p, h4 + p,
.wp-block-heading + .wp-block-paragraph,
.wp-block-heading + .sm-entradilla,
.wp-block-heading + .entradilla {
  margin-top: var(--space-4);
}

.sm-entradilla + p,
.entradilla + p {
  margin-top: var(--space-5);
}

/* Espaciado previo a nuevos encabezados dentro de contenido */
p + h2, p + h3,
.wp-block-paragraph + h2,
.wp-block-paragraph + h3,
.wp-block-paragraph + .wp-block-heading {
  margin-top: var(--space-12);
}

.sm-prosa p { max-width: var(--measure-prosa); }

.sm-prosa-pagina .wp-block-post-content > p,
.sm-prosa-pagina .wp-block-post-content > ul,
.sm-prosa-pagina .wp-block-post-content > ol,
.sm-recuadro > p,
.sm-recuadro > ul {
  max-width: var(--measure-prosa);
  /* WordPress centra a cada hijo de una columna constreñida con
     `margin-left/right: auto !important`. Sin ganarle, un párrafo más
     estrecho que la columna se queda sangrado respecto al título. El
     !important va acotado a estos hijos directos: en cuanto se aplica a
     todos, lo que se descuadra es la columna entera. */
  margin-inline: 0 auto !important;
}

/* Dentro de la columna de lectura hay UNA sola medida.

   `.sm-entradilla` mide 48 caracteres y `.sm-destacado` 34, pero esas
   medidas son para cuando viven dentro de una columna de un patrón, con
   una caja que ya las encuadra. Como hijos directos del contenido, la
   caja es toda la página: WordPress las centraría —y una entradilla
   centrada arranca sangrada respecto al párrafo de debajo—, o, si se le
   fuerza el margen a cero, se van al borde de la página. Aquí valen lo
   mismo que la columna y quedan alineadas con el resto. */
.wp-block-post-content > .sm-entradilla,
.wp-block-post-content > .sm-destacado { max-width: var(--max-prosa); }

.sm-entradilla {
  font-size: var(--text-lg);
  line-height: 1.6;
  max-width: var(--measure-entradilla);
  color: var(--texto-soft);
}

.sm-antetitulo {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-action);
}

/* Itálica display: presenta una etapa o una frase del manifiesto (BRAND.md §3). */
.sm-manifiesto,
.is-manifiesto {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: 1.4;
  max-width: var(--measure-titular);
}

/* --- Tarjeta de caso ---------------------------------------
   Sin imágenes de personas, enlace de texto y no botón. §6. */

.sm-casos {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.sm-caso {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8);
  background: var(--surface);
  border: 1px solid var(--borde-color);
  border-radius: var(--radio-sm);
  transition: transform var(--dur-normal) var(--ease);
}

@media (hover: hover) {
  .sm-caso:hover {
    transform: translateY(-3px);
  }
}

.sm-caso h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: var(--lh-titular);
  margin: 0;
  color: var(--ink);
}

.sm-caso p {
  font-family: var(--font-body);
  margin: 0;
  color: var(--texto-soft);
  line-height: 1.6;
  flex: 1 1 auto;
}

.sm-caso a {
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--accent-action);
}

/* --- Foco visible en todo lo interactivo (DESIGN.md §9) ---- */

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-action);
  outline-offset: 2px;
}

/* --- Pie ---------------------------------------------------- */

.sm-pie__aviso,
.sm-pie__firma {
  max-width: var(--measure-prosa);
  color: color-mix(in srgb, var(--bg-base) 70%, transparent);
}

.sm-pie a { color: var(--bg-base); }

/* --- Enlace en prosa: nunca solo color (DESIGN.md §5) ------ */

:where(.wp-block-post-content) a:where(:not(.wp-element-button)) {
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

:where(.wp-block-post-content) a:where(:not(.wp-element-button)):hover {
  text-decoration-thickness: 2px;
}

/* --- Botones y Contenedor de Llamadas a la Acción (CTA) ---- */

.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-block: var(--space-6) var(--space-4);
}

.sm-hero .wp-block-buttons,
.sm-entradilla + .wp-block-buttons,
.entradilla + .wp-block-buttons,
p + .wp-block-buttons {
  margin-top: var(--space-6);
  margin-bottom: var(--space-4);
}

.wp-block-buttons + p,
.wp-block-buttons + .has-sm-font-size,
.wp-block-buttons + p.text-sm {
  margin-top: var(--space-3) !important;
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  color: var(--texto-soft);
  line-height: 1.5;
  max-width: var(--measure-entradilla);
}

.wp-block-buttons ~ .sm-datos,
.wp-block-buttons + p + .sm-datos,
.wp-block-buttons + p + .trust-badges {
  margin-top: var(--space-6) !important;
}

.sm-tarjeta .wp-block-buttons,
.sm-caso .wp-block-buttons,
.sm-canal .wp-block-buttons {
  margin-top: auto;
  margin-bottom: 0;
}

.sm-banda--calma .wp-block-buttons,
.bg-calm .wp-block-buttons {
  margin-block: var(--space-2) var(--space-3);
}

.sm-banda--ink .wp-block-buttons,
.sobre-ink .wp-block-buttons {
  margin-block: var(--space-6) var(--space-4);
}

.sm-banda--ink .wp-block-buttons + p,
.sobre-ink .wp-block-buttons + p {
  color: color-mix(in srgb, var(--bg-base) 80%, transparent);
}

.sm-banda--calma .wp-block-buttons + p,
.bg-calm .wp-block-buttons + p {
  color: var(--ink);
}

.wp-element-button,
.wp-block-button__link,
.cta {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 24px;
  border-radius: var(--radio-sm);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: transform var(--dur-rapida) var(--ease),
              background-color var(--dur-normal) var(--ease),
              border-color var(--dur-normal) var(--ease),
              color var(--dur-normal) var(--ease);
}

@media (hover: hover) {
  .wp-element-button:hover,
  .wp-block-button__link:hover,
  .cta:hover {
    transform: translateY(-2px);
    text-decoration: none;
  }
}

.wp-element-button:active,
.wp-block-button__link:active,
.cta:active {
  transform: translateY(1px);
}

.wp-element-button[disabled] {
  opacity: .4;
  cursor: not-allowed;
}

@media (max-width: 599px) {
  .wp-element-button,
  .wp-block-button__link,
  .cta {
    min-height: 52px;
    width: 100%;
  }
  .wp-block-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .wp-block-button {
    width: 100%;
  }
}

/* --- Enlace de salto (WCAG 2.4.1) --------------------------
   Invisible hasta que recibe el foco. Quien navega con teclado
   no tiene que recorrer el menú en cada página. */

.sm-salto {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: var(--space-3) var(--space-6);
  background: var(--ink);
  color: var(--bg-base);
  text-decoration: none;
}

.sm-salto:focus {
  left: var(--space-4);
  top: var(--space-4);
}

/* --- Menú móvil: desplegable a pantalla completa ------------
   Sin hamburguesa animada (DESIGN.md §6). */

/* --- Menú de Navegación y Botones --------------------------- */

.sm-menu-boton {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-height: 42px;
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--borde-color);
  border-radius: var(--radio-sm);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-normal) var(--ease), border-color var(--dur-normal) var(--ease);
}

.sm-menu-boton:hover {
  background: var(--surface);
  border-color: var(--accent-decor);
}

.sm-menu {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sm-menu li {
  position: relative;
  margin: 0;
}

.sm-menu a {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radio-sm);
  position: relative;
  transition: color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}

.sm-menu a:hover,
.sm-menu a:focus-visible {
  color: var(--accent-action);
  background-color: color-mix(in srgb, var(--surface) 75%, transparent);
}

/* Indicador de página activa */
.sm-menu a[aria-current="page"],
.sm-menu .current-menu-item > a,
.sm-menu .current_page_item > a,
.sm-menu .current-page-ancestor > a {
  color: var(--accent-action);
  font-weight: 700;
  background-color: color-mix(in srgb, var(--surface) 90%, transparent);
}

.sm-menu a[aria-current="page"]::after,
.sm-menu .current-menu-item > a::after,
.sm-menu .current_page_item > a::after,
.sm-menu .current-page-ancestor > a::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: var(--space-3);
  right: var(--space-3);
  height: 2px;
  background-color: var(--accent-action);
  border-radius: 1px;
}

/* Botón de acción en la cabecera */
.sm-cabecera__accion {
  flex-shrink: 0;
  margin-left: var(--space-3);
}

.sm-cabecera__accion .wp-block-button__link {
  min-height: 40px;
  padding: 8px var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radio-sm);
  background-color: var(--accent-action);
  color: var(--bg-base) !important;
  border: none;
  transition: background-color var(--dur-normal) var(--ease),
              transform var(--dur-normal) var(--ease);
}

.sm-cabecera__accion .wp-block-button__link:hover {
  background-color: color-mix(in srgb, var(--accent-action) 88%, var(--ink));
  transform: translateY(-1px);
}

@media (max-width: 899px) {
  .sm-menu-boton { display: inline-flex; }

  .sm-cabecera__menu {
    display: none;
    position: fixed;
    inset: 64px 0 0;
    background: var(--bg-base);
    background-image: url('../img/textura-papel.png');
    background-repeat: repeat;
    background-size: 200px 200px;
    padding: var(--space-8) var(--space-6) var(--space-16);
    overflow-y: auto;
    border-top: 1px solid var(--borde-color);
  }

  .sm-menu-abierto .sm-cabecera__menu { display: flex; flex-direction: column; }
  .sm-menu-abierto { overflow: hidden; }

  .sm-menu { flex-direction: column; gap: 0; }

  .sm-menu li { border-bottom: var(--borde-hairline) solid var(--borde-color); }

  .sm-menu a {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    padding-block: var(--space-4);
    padding-inline: 0;
    border-radius: 0;
    background: none !important;
  }

  .sm-menu a[aria-current="page"],
  .sm-menu .current-menu-item > a,
  .sm-menu .current_page_item > a,
  .sm-menu .current-page-ancestor > a {
    color: var(--accent-action);
  }

  .sm-menu a[aria-current="page"]::after,
  .sm-menu .current-menu-item > a::after,
  .sm-menu .current_page_item > a::after,
  .sm-menu .current-page-ancestor > a::after {
    display: none;
  }
}

/* --- Prosa larga: frases destacadas del propio texto --------
   En serif itálica, sin comillas decorativas gigantes (§6). */

.sm-destacado {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--ink);
  max-width: 14.5em;   /* 34 caracteres en PT Sans */
  margin-block: var(--space-12);
  padding-left: var(--space-6);
  border-left: 2px solid var(--accent-decor);
}

/* El titular de una página de prosa no lleva medida propia: comparte
   la columna con el cuerpo y la fija `contentSize`. Con un tope de 20
   caracteres arrancaba 18 px a la izquierda del primer párrafo, y un H1
   desalineado con su propio texto se nota más que una línea larga. */

/* Hueco de contenido marcado: visible, no disimulado. */
.sm-pendiente {
  font-size: var(--text-sm);
  color: var(--texto-soft);
  font-style: italic;
}

/* --- Rejilla de los cuatro casos ---------------------------- */

.sm-casos {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.sm-casos .sm-caso { margin: 0; }

/* --- Formulario (Contact Form 7 con nuestro marcado) -------
   Etiqueta encima del campo, nunca el placeholder como
   etiqueta. Alto 52, área táctil 44×44. DESIGN.md §6. */

.wpcf7 { max-width: var(--max-prosa); }

.smc__campo { display: flex; flex-direction: column; gap: var(--space-2); margin-block: 0 var(--space-6); }
.smc__campo > label { font-size: var(--text-sm); }
.smc__ayuda { font-size: var(--text-sm); color: var(--texto-soft); }

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--text-base);
  line-height: var(--lh-prosa);
  color: var(--ink);
  background: var(--bg-base);
  border: var(--borde-hairline) solid var(--borde-color);
  border-radius: var(--radio-sm);
  padding: var(--space-3) var(--space-4);
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"] { min-height: 52px; }

.wpcf7 :is(input, textarea):focus-visible {
  outline: 2px solid var(--accent-action);
  outline-offset: 2px;
  border-color: var(--accent-action);
}

.wpcf7 :is(input, textarea)[aria-invalid="true"],
.wpcf7 .wpcf7-not-valid { border-color: var(--accent-action); }

/* El aviso de error va debajo del campo y explica cómo se arregla. */
.wpcf7-not-valid-tip {
  font-size: var(--text-sm);
  color: var(--accent-action);
  margin-top: var(--space-2);
}

.smc__campo--consent { flex-direction: row; align-items: flex-start; gap: var(--space-3); }
.smc__campo--consent .wpcf7-list-item { margin: 0; }
.smc__campo--consent label { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); line-height: 1.6; }
.smc__campo--consent input[type="checkbox"] { min-width: 24px; min-height: 24px; margin-top: 2px; }

/* Respuesta del envío: bloque visible, no un texto suelto en rojo. */
.wpcf7-response-output {
  margin: 0 0 var(--space-8);
  padding: var(--space-4) var(--space-6);
  border: 0;
  border-left: 3px solid var(--accent-action);
  background: var(--surface);
  font-size: var(--text-sm);
  line-height: var(--lh-prosa);
}

.wpcf7 form.sent .wpcf7-response-output { border-left-color: var(--calm); }

.wpcf7-spinner { display: none; }   /* Un spinner que gira contradice §8. */

.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"] {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  min-height: 48px;
  padding: 12px 28px;
  border-radius: var(--radio-sm);
  background-color: var(--accent-action);
  color: var(--bg-base);
  border: 1.5px solid var(--accent-action);
  cursor: pointer;
  margin-top: var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-rapida) var(--ease),
              background-color var(--dur-normal) var(--ease),
              border-color var(--dur-normal) var(--ease);
}

@media (hover: hover) {
  .wpcf7 input[type="submit"]:hover,
  .wpcf7 button[type="submit"]:hover {
    background-color: color-mix(in srgb, var(--accent-action) 88%, var(--ink));
    border-color: color-mix(in srgb, var(--accent-action) 88%, var(--ink));
    transform: translateY(-2px);
  }
}

/* El logotipo apilado en el pie: en negativo sobre --ink. Es el único
   sitio de la web donde cabe a los 120 px que pide BRAND.md §2. */
.sm-pie__logo img { filter: brightness(0) invert(1); opacity: .92; }
.sm-pie__logo { margin-block: 0; }

/* ============================================================
   SECCIONES DE LA HOME
   Traducción de la maqueta a bloques nativos. Cada regla aquí
   existe porque el bloque del núcleo no la trae; todo lo que
   WordPress ya sabe hacer (columnas, botones, encabezados) se
   deja en manos de theme.json.
   ============================================================ */

/* Ritmo vertical: 64 / 96 / 128 según banda (DESIGN.md §3).
   El alias --margen y --section los resuelve tokens-puente.css. */
.sm-seccion { padding-block: var(--section); }

/* El bloque del método trae su propio ritmo para cuando va suelto en
   una página. Dentro de una sección que ya lo pone, se le quita: si no,
   sobran 128 px arriba y otros 128 abajo. */
.sm-seccion > .sm-metodo,
.sm-seccion .wp-block-group > .sm-metodo { padding-block: 0; }
.sm-seccion--corta { padding-block: calc(var(--section) * .75); }

/* --- Antetítulo + titular: el par que abre cada sección ----- */

.sm-antetitulo,
.antetitulo,
.overline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-action);
  margin-block: 0 var(--space-3);
  line-height: 1.3;
}

.sm-titular,
.wp-block-heading {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  max-width: var(--measure-titular);
  margin-block: 0 var(--space-4);
  line-height: var(--lh-titular);
}

/* --- Hero --------------------------------------------------- */

.sm-hero {
  position: relative;
  padding-block: var(--space-16) var(--section);
  background: var(--bg-base);
  overflow: hidden;
}

.sm-hero::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -40px;
  width: 440px;
  height: 530px;
  background-image: url('../img/isotipo-marca-agua.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .04;
  color: var(--ink);
  pointer-events: none;
  z-index: 0;
}

.sm-hero__logo {
  margin-block: 0 var(--space-8);
}

.sm-hero h1,
.h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  max-width: var(--measure-titular);
  margin-block: 0 var(--space-6);
  color: var(--ink);
}

.sm-hero h1 em,
.sm-hero h1 .is-manifiesto,
.wp-block-heading em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--accent-action);
}

/* Tira de datos del hero (Trust Badges): filete suave y puntos en el acento */
.sm-datos,
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-block: var(--space-8) 0;
  padding-top: var(--space-5);
  border-top: var(--borde-hairline) solid color-mix(in srgb, var(--accent-decor) 50%, transparent);
  font-size: var(--text-sm);
  color: var(--texto-soft);
  list-style: none;
  padding-inline: 0;
}

.sm-datos li,
.trust-badges li {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.sm-datos li:not(:last-child)::after,
.trust-badges li:not(:last-child)::after {
  content: "·";
  margin-left: var(--space-4);
  color: var(--accent-decor);
  font-weight: 700;
  font-size: 1.2em;
  line-height: 1;
}

/* --- Placa de marca y marcos de fotografía (Figma 4:5) ------ */

.marco-wrapper,
.sm-marco-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.sm-placa,
.sm-marco,
.marco {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background-color: var(--surface);
  border-radius: var(--radio-sm);
  border: var(--borde-hairline) solid var(--borde-color);
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  transition: transform var(--dur-normal) var(--ease);
}

.sm-placa,
.marco-4-5,
.sm-marco--retrato {
  aspect-ratio: 4 / 5;
  width: 100%;
}

.sm-marco,
.marco-16-10 {
  aspect-ratio: 16 / 10;
  width: 100%;
}

.sm-placa img.foto,
.sm-marco img.foto,
.marco img.foto,
.foto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transition: transform 0.6s cubic-bezier(0.22, 0.68, 0.32, 1);
}

.sm-placa img:not(.foto),
.sm-placa__marca img {
  width: 50%;
  max-width: 220px;
  height: auto;
  opacity: .85;
}

.sm-marco img:not(.foto) {
  width: 64px;
  height: auto;
  opacity: .5;
}

.sm-marco figcaption,
.sm-marco p { margin: 0; }

.floating-badge {
  position: absolute;
  bottom: -16px;
  left: 20px;
  max-width: calc(100% - 40px);
  /* Opaca y sin desenfoque: BRAND.md §4 prohíbe el glassmorfismo. La barra
     se separa del contenido con el filete de abajo, que basta. */
  background: var(--bg-base);
  border: var(--borde-hairline) solid var(--borde-color);
  padding: 10px 16px;
  border-radius: var(--radio-sm);
  z-index: 2;
}

.floating-badge p,
.floating-badge span {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
  line-height: 1.3;
}

@media (hover: hover) {
  .marco-wrapper:hover .marco,
  .sm-marco-wrapper:hover .sm-placa {
    transform: translateY(-3px);
  }
  .marco-wrapper:hover .foto,
  .sm-marco-wrapper:hover .foto {
    transform: scale(1.02);
  }
}

/* --- Valores / Pilares: cuatro columnas con filete superior --- */

.sm-valor {
  border-top: var(--borde-hairline) solid var(--accent-decor);
  padding-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sm-valor h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}

.sm-valor p {
  font-family: var(--font-body);
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--texto-soft);
}

/* --- Tarjeta de sesión (Figma UI Kit) ----------------------- */

.sm-tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  padding: var(--space-8);
  border-radius: var(--radio-sm);
  background: var(--bg-base);
  border: 1px solid var(--borde-color);
  border-top: 3px solid var(--accent-action);
  transition: transform var(--dur-normal) var(--ease);
}

.sm-tarjeta--calma {
  background: var(--calm-claro);
  border-color: color-mix(in srgb, var(--ink) 15%, transparent);
  border-top-color: var(--ink);
}

@media (hover: hover) {
  .sm-tarjeta:hover {
    transform: translateY(-3px);
  }
}

.sm-tarjeta h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}

.sm-tarjeta p {
  font-family: var(--font-body);
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--texto-soft);
}

.sm-tarjeta p strong {
  color: var(--ink);
  font-weight: 700;
}

.sm-tarjeta--calma p {
  color: var(--ink);
}

.sm-tarjeta .sm-tarjeta__enlace {
  margin-top: auto;
  align-self: flex-start;
}

.sm-tarjeta .sm-tarjeta__enlace a,
.link-card {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent-action);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.sm-tarjeta .sm-tarjeta__enlace a::after,
.link-card::after {
  content: "→";
  transition: transform var(--dur-normal) var(--ease);
}

@media (hover: hover) {
  .sm-tarjeta .sm-tarjeta__enlace a:hover::after,
  .link-card:hover::after {
    transform: translateX(4px);
  }
}

.sm-tarjeta--calma .sm-tarjeta__enlace a {
  color: var(--ink);
  text-decoration: underline;
}

/* --- Preguntas frecuentes ----------------------------------
   Bloque «Detalles» del núcleo: <details>/<summary> nativos.
   Abre y cierra sin una línea de JavaScript, funciona con el
   buscador del navegador y es accesible de fábrica. */

.sm-faq { border-top: var(--borde-hairline) solid var(--accent-decor); }

.sm-faq .wp-block-details {
  border-bottom: var(--borde-hairline) solid var(--borde-color);
}

.sm-faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.2;
  cursor: pointer;
  list-style: none;
}

.sm-faq summary::-webkit-details-marker { display: none; }

.sm-faq summary::after {
  content: "+";
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--accent-action);
  flex-shrink: 0;
}

.sm-faq .wp-block-details[open] summary::after { content: "–"; }
.sm-faq .wp-block-details > :not(summary) { padding-bottom: var(--space-8); }

/* --- Barra de acción en móvil -------------------------------
   Una sola acción, sin animación de entrada. Aparece solo donde
   la cabecera ya no muestra el botón. */

.sm-cta-movil { display: none; }
.sm-pie__enlaces { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }

@media (max-width: 599px) {
  .sm-cta-movil {
    position: fixed;
    inset: auto 0 0;
    z-index: 40;
    display: block;
    padding: var(--space-3) var(--margen);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    background: var(--bg-base);
    border-top: var(--borde-hairline) solid var(--borde-color);
  }

  .sm-cta-movil .wp-block-button__link {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .sm-pie { padding-bottom: calc(var(--section) + var(--space-16)); }
}

/* --- Cabecera: menú y acción en la misma barra --------------- */

.sm-cabecera__accion { flex-shrink: 0; }
.sm-cabecera__accion .wp-block-button__link { min-height: 44px; }

@media (max-width: 599px) {
  .sm-cabecera__accion { display: none; }   /* La lleva la barra inferior. */
}

/* --- Bandas de color y Secciones Full-Bleed ----------------
   Sobre --ink el texto va en --bg-base; sobre --calm siempre en
   --ink, nunca en otro color (DESIGN.md §5). */

.alignfull,
.sm-banda,
.sm-banda--ink,
.sm-banda--calma,
.sobre-ink,
.bg-surface,
.bg-calm,
.site-footer,
.sm-pie {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.sm-banda--ink,
.sobre-ink {
  position: relative;
  background: var(--ink-banda) !important;
  color: var(--bg-base);
  overflow: hidden;
}

.sm-banda--ink::before {
  content: "";
  position: absolute;
  left: -40px;
  bottom: -40px;
  width: 340px;
  height: 410px;
  background-image: url('../img/isotipo-marca-agua.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .03;
  color: var(--bg-base);
  pointer-events: none;
}

.sm-banda--ink .sm-antetitulo,
.sobre-ink .sm-antetitulo,
.sm-banda--ink .overline,
.sobre-ink .overline {
  /* El decorativo sobre tinta se queda en 3,5:1 y esto es texto de 12 px.
     El verde medio llega a 4,86:1 y sigue leyéndose como acento. */
  color: var(--calm);
}

.sm-banda--ink h1, .sm-banda--ink h2, .sm-banda--ink h3, .sm-banda--ink h4,
.sobre-ink h1, .sobre-ink h2, .sobre-ink h3, .sobre-ink h4 {
  color: var(--bg-base);
}

.sm-banda--ink p,
.sobre-ink p {
  color: var(--bg-base);
}

.sm-banda--calma,
.bg-calm {
  position: relative;
  background: var(--calm) !important;
  color: var(--ink);
}

.sm-banda--calma h1, .sm-banda--calma h2, .sm-banda--calma h3, .sm-banda--calma h4,
.bg-calm h1, .bg-calm h2, .bg-calm h3, .bg-calm h4 {
  color: var(--ink);
}

/* Sobre --calm el texto va SIEMPRE en --ink, enlaces incluidos: el color
   de acción sobre verde salvia da 2,2:1 y no pasa (DESIGN.md §5). El
   subrayado es lo que distingue el enlace, no el color. */
.sm-banda--calma a:not(.wp-element-button),
.bg-calm a:not(.wp-element-button),
.sm-tarjeta--calma a:not(.wp-element-button) {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Pie de página homogéneo y continuo con el cierre de contacto */
.site-footer,
.sm-pie {
  /* El fondo lo pone el preset del bloque (has-ink-banda-background-color),
     que es lo que deja el color editable desde el editor de sitio. */
  background-color: var(--ink-banda);
  color: var(--bg-base) !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-block: var(--space-16) var(--space-12);
  margin-top: 0 !important;
  border-top: var(--borde-hairline) solid color-mix(in srgb, var(--bg-base) 12%, transparent);
}

.sm-banda--ink + .sm-pie,
.sobre-ink + .sm-pie,
.wp-block-group.sm-banda--ink + footer.sm-pie {
  border-top: none;
  margin-top: 0 !important;
}

.sm-pie .wp-block-columns {
  max-width: 1200px;
  margin-inline: auto;
}

/* Un párrafo del manifiesto centrado puede pasar de dos líneas;
   es la única excepción del §3 y va acotado a 22 caracteres. */
.sm-lema {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-3xl);
  line-height: var(--lh-titular);
  max-width: 9.5em;    /* 22 caracteres en PT Serif */
  margin-inline: auto;
}

/* ============================================================
   PÁGINAS INTERIORES (maqueta v2)
   ============================================================ */

/* Texto solo para lectores de pantalla. El nombre de cada etapa de
   la rueda vive aquí: en pantalla lo dice el panel, pero el botón
   no puede anunciarse como una letra suelta. */
.sm-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Método: las ocho etapas en fila ------------------------ */

.sm-etapa-fila {
  display: grid;
  gap: var(--space-4) var(--space-12);
  align-items: start;
  padding-block: var(--space-12);
  border-top: var(--borde-hairline) solid var(--borde-color);
}

@media (min-width: 900px) {
  .sm-etapa-fila { grid-template-columns: 120px 1fr; }
}

.sm-etapa-fila:first-of-type { border-top-color: var(--accent-decor); }
.sm-etapa-fila:last-of-type { border-bottom: var(--borde-hairline) solid var(--borde-color); }

.sm-etapa-fila__inicial {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: 1;
  color: var(--accent-action);
}

.sm-etapa-fila h2 { margin: 0; }
.sm-etapa-fila p { margin: var(--space-4) 0 0; max-width: var(--measure-prosa); }

/* --- Lista de pasos: Antes · Durante · Después -------------- */

.sm-pasos {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* --- Migas de pan (Breadcrumbs accesibles) ------------------ */

.sm-migas {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--texto-soft);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.sm-migas a {
  color: var(--texto-soft);
  text-decoration: none;
  transition: color var(--dur-normal) var(--ease);
}

.sm-migas a:hover {
  color: var(--accent-action);
  text-decoration: underline;
}

.sm-migas__sep {
  color: color-mix(in srgb, var(--ink) 30%, transparent);
  font-size: 0.9em;
}

.sm-migas span[aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
}

/* --- Enlace entre especialidades hermanas ------------------- */

.sm-enlace-otra-especialidad {
  background: var(--surface);
  border: 1px solid var(--borde-color);
  border-left: 3px solid var(--accent-decor);
  border-radius: var(--radio-sm);
  padding: var(--space-6);
}

.sm-enlace-otra-especialidad p {
  margin: 0;
}

.sm-enlace-otra-especialidad p + p {
  margin-top: var(--space-2);
}

/* --- Especialidades: rótulo pegajoso + prosa ---------------- */

.sm-especialidad {
  display: grid;
  gap: var(--space-8) var(--space-24);
  align-items: start;
  padding-block: var(--space-16);
}

@media (min-width: 900px) {
  .sm-especialidad { grid-template-columns: 280px 1fr; }
  .sm-especialidad__rotulo { position: sticky; top: calc(72px + var(--space-8)); }
}

/* La inicial del rótulo conserva su tamaño de display: si la regla
   alcanzara a todo <p> del rótulo, se quedaría en 15 px. */
.sm-especialidad__rotulo p:not(.sm-etapa-fila__inicial) {
  font-size: var(--text-sm);
  letter-spacing: .1em;
  text-transform: uppercase;
  max-width: 9.5em;    /* 22 caracteres en PT Sans, rótulo corto */
  margin: var(--space-4) 0 0;
}

/* Un recuadro sobre --surface para la idea que sostiene el texto. */
.sm-recuadro {
  background: var(--surface);
  border-radius: var(--radio-sm);
  padding: var(--space-8);
}

.sm-recuadro p { max-width: var(--measure-prosa); }

/* En las páginas legales el recuadro es primera capa informativa o exención
   sanitaria: cosas que hay que leer, no notas al margen. Por eso conserva el
   cuerpo de texto y no encoge, al contrario que una tarjeta. */
/* El verde claro y no el medio: aquí hay párrafos que hay que leer enteros
   —la exención sanitaria, la primera capa informativa— y sobre el medio la
   tinta se queda en 4,86:1, justo en el filo. Sobre el claro, 8,28:1. */
.sm-recuadro--calma { background: var(--calm-claro); }
.sm-recuadro > :first-child { margin-block-start: 0; }
.sm-recuadro > :last-child { margin-block-end: 0; }

.sm-legal-fecha { color: var(--texto-soft); }

/* Los legales van en su propia línea bajo la navegación del pie. */
.sm-pie__enlaces--legal { margin-block-start: var(--space-3); }

/* --- Contacto: los canales --------------------------------- */

.sm-canal {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  padding: var(--space-8);
  border-radius: var(--radio-sm);
  background: var(--surface);
}

.sm-canal h2, .sm-canal h3 { margin: 0; font-size: var(--text-xl); }

/* Va después de .sm-canal a propósito: con la misma especificidad, gana la
   última, y la tarjeta del proceso completo es la que va sobre --calm. */
.sm-canal.sm-tarjeta--calma { background: var(--calm); }
.sm-canal p { margin: 0; font-size: var(--text-sm); line-height: 1.6; }
.sm-canal .wp-block-buttons { margin-top: auto; }

/* --- Aviso enmarcado (urgencias) --------------------------- */

.sm-aviso {
  max-width: var(--max-prosa);
  padding: var(--space-12);
  border: var(--borde-hairline) solid var(--borde-color);
  border-radius: var(--radio-sm);
}

.sm-aviso h2 { margin: 0 0 var(--space-4); font-size: var(--text-xl); }

/* Sobre --ink, los huecos marcados siguen siendo legibles. */
.sm-banda--ink .sm-pendiente { color: color-mix(in srgb, var(--bg-base) 80%, var(--ink)); }

/* Tira de cierre del método: frase larga y una acción, en la misma línea. */
.sm-cierre {
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: var(--borde-hairline) solid var(--accent-decor);
}

.sm-cierre p { max-width: 14.5em; margin: 0; }   /* 34 caracteres */

/* ============================================================
   UI KIT & ESTILOS DE BLOQUE GUTENBERG (FSE)
   ============================================================ */

/* --- Componentes del UI Kit (elementos.html) ---------------- */

.sm-soul-card,
.soul-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--borde-color);
  border-top: 3px solid var(--accent-action);
  border-radius: var(--radio-sm);
  padding: var(--space-12) var(--space-8);
  box-sizing: border-box;
  overflow: hidden;
}

.sm-soul-card::after,
.soul-card::after {
  content: "";
  position: absolute;
  right: -25px;
  top: -25px;
  width: 200px;
  height: 240px;
  background-image: url('../img/isotipo-marca-agua.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .055;
  color: var(--accent-decor);
  pointer-events: none;
}

@media (min-width: 768px) {
  .sm-soul-card,
  .soul-card {
    padding: var(--space-16) var(--space-12);
  }
}

.sm-soul-card .quote,
.soul-card .quote,
.quote {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem) !important;
  line-height: 1.35 !important;
  margin: var(--space-2) 0 !important;
  color: var(--ink) !important;
}

.sm-soul-card .rule-soft,
.soul-card .rule-soft {
  height: 1px;
  background: var(--borde-color);
  border: none;
  margin-block: var(--space-6);
  width: 100%;
}

.sm-pillars,
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.sm-pillar-item,
.pillar-item {
  background: var(--bg-base);
  border: 1px solid var(--borde-color);
  border-top: 3px solid var(--accent-decor);
  border-radius: var(--radio-sm);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform var(--dur-normal) var(--ease);
}

@media (hover: hover) {
  .sm-pillar-item:hover,
  .pillar-item:hover {
    transform: translateY(-2px);
  }
}

.sm-pillar-title,
.pillar-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}

.sm-pillar-desc,
.pillar-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--texto-soft);
  margin: 0;
}

.badge-tag {
  /* Mismo rótulo que .sm-antetitulo y .overline: era una pastilla con relleno
     y borde, y en una página que quiere estar quieta cantaba como un chip de
     panel de control. Se queda la tipografía, que es lo que rotula. */
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-action);
  line-height: 1.3;
}

.card-number {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--accent-action);
  font-weight: 700;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.feature-list li {
  position: relative;
  padding-left: var(--space-5);
}

.feature-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent-decor);
}

.link-card,
.link-card-ink {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .03em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.link-card {
  color: var(--accent-action);
}

.link-card-ink {
  color: var(--ink);
}

.link-card::after,
.link-card-ink::after {
  content: "→";
  transition: transform var(--dur-normal) var(--ease);
}

@media (hover: hover) {
  .link-card:hover::after,
  .link-card-ink:hover::after {
    transform: translateX(4px);
  }
}

.cta-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  border: var(--borde-hairline) solid var(--accent-action);
  color: var(--accent-action);
  background: transparent;
  padding: 12px 20px;
  border-radius: var(--radio-sm);
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .1em;
  transition: all var(--dur-normal) var(--ease);
}

.cta-whatsapp:hover,
.cta-whatsapp:focus-visible {
  background: var(--accent-action);
  color: var(--bg-base);
}

.cta-whatsapp svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* --- Variaciones de Bloques de Gutenberg (is-style-*) ------- */

.is-style-sm-entradilla {
  font-size: var(--text-lg);
  line-height: var(--lh-entradilla);
  color: var(--texto-soft);
  max-width: var(--measure-entradilla);
}

.is-style-sm-antetitulo {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-action);
  margin-bottom: var(--space-2);
}

.is-style-sm-manifiesto {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--lh-titular);
}

.is-style-sm-destacado {
  border-left: 2px solid var(--accent-decor);
  padding-left: var(--space-6);
  font-style: italic;
  max-width: var(--measure-destacado);
}

.is-style-sm-lema {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-3xl);
  line-height: var(--lh-titular);
  max-width: 9.5em;
  margin-inline: auto;
}

.is-style-sm-pendiente {
  color: var(--accent-action);
  background: color-mix(in srgb, var(--accent-action) 10%, transparent);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radio-sm);
  font-size: var(--text-sm);
}

.is-style-sm-recuadro {
  background: var(--surface);
  border-radius: var(--radio-sm);
  padding: var(--space-8);
}

.is-style-sm-recuadro--calma {
  background: var(--calm);
  border-radius: var(--radio-sm);
  padding: var(--space-8);
}

.is-style-sm-aviso {
  max-width: var(--max-prosa);
  padding: var(--space-12);
  border: var(--borde-hairline) solid var(--borde-color);
  border-radius: var(--radio-sm);
}

.is-style-sm-soul-card {
  background: var(--surface);
  border-radius: var(--radio-sm);
  padding: var(--space-12);
  border-top: 3px solid var(--accent-decor);
}

.is-style-sm-tarjeta {
  background: var(--surface);
  border-radius: var(--radio-sm);
  padding: var(--space-8);
}

.is-style-sm-tarjeta--calma {
  background: var(--calm);
  border-radius: var(--radio-sm);
  padding: var(--space-8);
}

.is-style-sm-marco {
  aspect-ratio: 4 / 3;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio-sm);
}

.is-style-sm-banda--ink {
  background: var(--ink-banda);
  color: var(--bg-base);
}

.is-style-sm-banda--calma {
  background: var(--calm);
  color: var(--ink);
}

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-sm-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--accent-action) !important;
  border: 1.5px solid var(--accent-action) !important;
}

@media (hover: hover) {
  .wp-block-button.is-style-outline .wp-block-button__link:hover,
  .wp-block-button.is-style-sm-outline .wp-block-button__link:hover,
  .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
  .wp-block-button.is-style-sm-outline .wp-block-button__link:focus-visible {
    background: var(--accent-action) !important;
    color: var(--bg-base) !important;
    border-color: var(--accent-action) !important;
    transform: translateY(-2px);
  }
}

.wp-block-button.is-style-sm-solid .wp-block-button__link,
.wp-block-button:not(.is-style-outline):not(.is-style-sm-outline) .wp-block-button__link {
  background: var(--accent-action) !important;
  color: var(--bg-base) !important;
  border: 1.5px solid var(--accent-action) !important;
}

@media (hover: hover) {
  .wp-block-button.is-style-sm-solid .wp-block-button__link:hover,
  .wp-block-button:not(.is-style-outline):not(.is-style-sm-outline) .wp-block-button__link:hover {
    background: color-mix(in srgb, var(--accent-action) 88%, var(--ink)) !important;
    border-color: color-mix(in srgb, var(--accent-action) 88%, var(--ink)) !important;
    transform: translateY(-2px);
  }
}

/* Variaciones de botones sobre fondos oscuros (tinta) */
.sobre-ink .wp-block-button.is-style-outline .wp-block-button__link,
.sm-banda--ink .wp-block-button.is-style-outline .wp-block-button__link,
.sobre-ink .wp-block-button.is-style-sm-outline .wp-block-button__link,
.sm-banda--ink .wp-block-button.is-style-sm-outline .wp-block-button__link {
  border-color: var(--bg-base) !important;
  color: var(--bg-base) !important;
}

@media (hover: hover) {
  .sobre-ink .wp-block-button.is-style-outline .wp-block-button__link:hover,
  .sm-banda--ink .wp-block-button.is-style-outline .wp-block-button__link:hover,
  .sobre-ink .wp-block-button.is-style-sm-outline .wp-block-button__link:hover,
  .sm-banda--ink .wp-block-button.is-style-sm-outline .wp-block-button__link:hover {
    background: var(--bg-base) !important;
    color: var(--ink) !important;
    border-color: var(--bg-base) !important;
  }
}


/* --- La tarjeta de la misión, sobre el verde claro -------------------------
   Es el centro emocional de la portada y estaba en superficie, a 1,14:1 del
   lienzo: se perdía. Con el verde de la marca se separa sin levantar la voz,
   que es lo que pidió la profesional cuando dijo que el marrón le parecía
   deprimente y que quería «un poco más de viveza».

   8,28:1 con la tinta encima, mejor que la superficie que tenía. */
.sm-soul-card,
.soul-card {
  background: var(--calm-claro);
  border-color: color-mix(in srgb, var(--ink) 12%, transparent);
}

/* --- Marcos que todavía no tienen foto -------------------------------------
   Mientras faltan las fotografías, un marco de 16/10 deja un hueco de 345 px
   por tarjeta y cuatro seguidos convierten la sección en un agujero. Aquí el
   marco vacío se comporta como lo que es: un panel de color, más bajo y con
   la marca de agua. Cuando entre la foto, `:has(img)` deja de cumplirse y el
   marco recupera su proporción sin tocar una línea.

   Se usa el verde claro de la marca —Pantone 12-6205 TCX, elegido por la
   profesional— que sobre tinta da 8,28:1. El texto va en tinta y no en el
   secundario: sobre este verde el secundario se queda en 3,95:1. */
.sm-marco:has(.sm-pendiente),
.sm-placa:has(.sm-pendiente),
.marco:has(.sm-pendiente) {
  aspect-ratio: 16 / 7;
  background-color: var(--calm-claro);
  border-color: color-mix(in srgb, var(--ink) 12%, transparent);
}

.sm-marco--retrato:has(.sm-pendiente),
.marco-4-5:has(.sm-pendiente) {
  aspect-ratio: 4 / 3;
}

.sm-marco:has(.sm-pendiente) .sm-pendiente,
.sm-placa:has(.sm-pendiente) .sm-pendiente,
.marco:has(.sm-pendiente) .sm-pendiente {
  color: var(--ink);
  max-width: 26em;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* --- Botón sobre banda oscura ---------------------------------------------
   El botón de acción es verde y la banda oscura también: uno sobre otro dan
   1,96:1, o sea que el botón desaparece. Sobre fondo oscuro se invierte, que
   además es lo que espera cualquiera: mancha clara, texto oscuro.

   Hoy la única banda oscura es el pie, pero la regla queda por si vuelve a
   usarse el bloque de énfasis que define DESIGN.md §5. */
.sm-banda--ink .wp-block-button__link,
.sobre-ink .wp-block-button__link,
.sm-pie .wp-block-button__link {
  background-color: var(--calm-claro);
  color: var(--ink-banda);
  border-color: transparent;
}

.sm-banda--ink .wp-block-button__link:hover,
.sobre-ink .wp-block-button__link:hover,
.sm-pie .wp-block-button__link:hover {
  background-color: var(--bg-base);
  color: var(--ink-banda);
}

.sm-banda--ink .wp-block-button__link:focus-visible,
.sobre-ink .wp-block-button__link:focus-visible,
.sm-pie .wp-block-button__link:focus-visible {
  outline-color: var(--calm-claro);
}

/* ---------------------------------------------------------------------------
   Fotografía
   Cinco personas leyeron la web y las cinco dijeron lo mismo: bonita, pero
   demasiado uniforme y con demasiada letra. Entra fotografía de verdad, y
   entra grande: los marcos de 16/10 que había antes eran huecos de muestra,
   no un tamaño pensado para mirar.
--------------------------------------------------------------------------- */

.sm-foto {
  margin-block: var(--space-8) 0;
}

.sm-foto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radio-sm);
  /* Filete del mismo gris que el resto de superficies: sin él, una foto de
     borde claro se derrama sobre el fondo cálido y pierde el canto. */
  border: var(--borde-hairline) solid var(--borde-color);
  box-sizing: border-box;
}

/* Banda ancha: la foto corta la prosa larga por la mitad y le da respiro.
   La proporción se fija aquí para que el hueco no salte mientras carga. */
.sm-foto--banda {
  margin-block: var(--space-12);
}

.sm-foto--banda img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Dentro de un marco, la imagen lo rellena y el marco manda en la proporción. */
.sm-marco .sm-foto,
.sm-marco--retrato .sm-foto {
  margin: 0;
  width: 100%;
  height: 100%;
}

.sm-marco .sm-foto img,
.sm-marco--retrato .sm-foto img {
  height: 100%;
  border: 0;
  border-radius: 0;
}

/* Las tarjetas de «Te puedo acompañar si…» pasaron de cuatro columnas
   estrechas a dos filas de dos. A dos por fila el texto respira y el titular
   deja de partirse en cuatro líneas. */
.sm-caso {
  height: 100%;
}

.sm-caso h3 {
  margin-top: 0;
}

.sm-caso .link-card {
  margin-top: auto;
}

/* El retrato llevaba las dos clases, `sm-marco` y `sm-marco--retrato`, y la
   regla de 16/10 estaba escrita después: ganaba ella y la foto salía apaisada.
   Con las dos clases juntas la especificidad ya es mayor y no depende del
   orden del archivo. */
.sm-marco.sm-marco--retrato {
  aspect-ratio: 4 / 5;
}

/* La banda se sale de la columna de lectura. La prosa mide 680 y una foto de
   680 pasa desapercibida: era justo lo que señalaban los cinco lectores, que
   la página se lee toda igual. A partir de 900 px la foto se ensancha hasta
   1040 y rompe la mancha de texto.
   El ancho se topa contra el viewport para que la página nunca coja scroll
   horizontal (DESIGN.md §9). */
@media (min-width: 900px) {
  /* Dos clases, para pasar por encima del `max-width` que WordPress pone a
     todo hijo de un contenedor «constrained»: con una sola no basta. */
  .sm-prosa-pagina .sm-foto--banda,
  .wp-block-group .sm-foto--banda {
    position: relative;
    left: 50%;
    width: min(1040px, calc(100vw - var(--space-16)));
    max-width: min(1040px, calc(100vw - var(--space-16)));
    transform: translateX(-50%);
  }
}

/* El isotipo dentro de un marco, cuando es la imagen a propósito y no un
   hueco de muestra. La regla de arriba lo dejaba en 64 px y medio
   transparente, que era el aspecto correcto para un marco vacío y el
   equivocado para «Quién te acompaña», donde el texto habla justamente de
   ese símbolo. */
.sm-marco .sm-hero__foto {
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.sm-marco .sm-hero__foto img {
  width: 52%;
  max-width: 240px;
  height: auto;
  opacity: .9;
}

/* En móvil el retrato sube por delante del titular: es el primer bloque y la
   petición era justamente que se viera imagen al abrir. Se le recorta la
   altura a 4/3 para que el titular siga entrando en la primera pantalla; a
   4/5 se comía 467 px él solo. */
@media (max-width: 781px) {
  .split-hero {
    display: flex;
    flex-direction: column;
  }

  .split-hero > .wp-block-column:last-child {
    order: -1;
    margin-bottom: var(--space-8);
  }

  .split-hero .marco-4-5,
  .split-hero .sm-placa {
    aspect-ratio: 4 / 3;
  }

  /* El recorte tira hacia arriba: centrado, un 4/3 sobre una foto vertical
     corta la coronilla. */
  .split-hero .sm-hero__foto img {
    object-position: center 18%;
  }
}