/* ==========================================================================
   FisioXperience — puente con Twenty Twenty-Five (tema de bloques)
   Neutraliza los anchos y el relleno que el tema de bloques impone al
   contenido, SIN romper el centrado propio de .fx-wrap.
   ========================================================================== */

body{
  padding:0 !important;
  margin:0 !important;
  background:var(--fx-fondo) !important;
  color:var(--fx-texto) !important;
  font-family:var(--fx-body) !important;
  line-height:1.6 !important;
}

/* 1. Contenedores del tema: sin ancho maximo, sin relleno, sin margen. */
.wp-site-blocks,
main.wp-block-group,
.wp-block-post-content{
  max-width:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* 2. Hijos directos del contenido: quitamos el corse de anchura del nucleo,
      pero NO tocamos sus margenes (ahi vive el centrado de .fx-wrap). */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.is-layout-flow > :where(:not(.alignleft):not(.alignright)){
  max-width:none !important;
}

:where(.wp-site-blocks) > *,
:where(.wp-block-post-content) > *{ margin-block-start:0 !important; }

.wp-block-html{ margin:0 !important; }

/* 3. Reafirmamos el contenedor propio: es lo unico que centra la pagina. */
.fx-wrap{
  width:min(100% - 2.4rem, var(--fx-ancho)) !important;
  margin-inline:auto !important;
}
.fx-wrap--ancho{ width:min(100% - 2.4rem, 1400px) !important; }

/* 4. Los carruseles son scrollers: sin min-width:0 su contenido ensancha la
      rejilla que los contiene y desborda la pagina entera a lo ancho. */
.fx-split > *,
.fx-grid > *,
.fx-carrusel,
.fx-rail{ min-width:0; }

/* 5. Medida de lectura: la del disenio, no la del tema. */
.wp-block-post-content p{ max-width:62ch; }
.fx-cinta p, .fx-footer p, .fx-hero p, .fx-topbar p{ max-width:none; }

/* 6. La barra de administracion no debe tapar la cabecera pegajosa. */
.admin-bar .fx-header{ top:32px; }
@media screen and (max-width:782px){ .admin-bar .fx-header{ top:46px; } }

/* 7. En las paginas el H1 va dentro del HTML de cada seccion, asi que la
      plantilla page.html no imprime el titulo. En las entradas del blog SI
      hace falta, por eso ya no se oculta de forma global. */

/* 8. Realce sobre fondo oscuro.
      La regla base `strong{color:var(--fx-negro)}` esta pensada para el fondo
      verde niebla. Dentro de las bandas, heroes, CTA y pie, ese negro cae
      encima de un verde muy oscuro y el texto desaparece. El autor solo lo
      habia parcheado en `.fx-checks--claro strong`.
      No se toca `.fx-cinta b`, que es verde vivo a proposito. */
.fx-hero strong,
.fx-hero2 strong,
.fx-banda strong,
.fx-cta strong,
.fx-footer strong,
.fx-cinta strong,
.fx-topbar strong,
.fx-puerta strong,
.fx-precio--destacado strong,
.fx-badge strong{
  color:#fff;
}

/* ==========================================================================
   9. REVISION AGOSTO 2026 — tipografia, formas y listas
   ========================================================================== */

/* 9.1 Tipografia: Archivo Black para titulares, Archivo para todo lo demas.
       Las tres familias estan autoalojadas via Biblioteca de fuentes. */
:root{
  --fx-display: "Archivo Black", "Arial Black", system-ui, sans-serif;
  --fx-body:    "Archivo", system-ui, -apple-system, sans-serif;
  --fx-mono:    "Archivo", system-ui, sans-serif;
}

/* Archivo Black solo existe en un grosor. Pedirle 700 u 800 obliga al
   navegador a engordarla artificialmente y el trazo sale sucio. */
h1, h2, h3, h4,
.fx-logo,
.fx-precio__cifra,
.fx-paso__marca{ font-weight:400 !important; }

h1, h2{ letter-spacing:-.03em; }

/* La mono desaparece: su papel de "dato medible" lo hace ahora Archivo en
   versalitas con mucho tracking. */
.fx-eyebrow,
.fx-badge,
.fx-ahorro,
.fx-cinta,
.fx-precio__titulo,
.fx-sub__tag{ font-weight:600 !important; }

/* 9.2 Formas: fuera el rectangulo. Todo lo que es contenedor pasa a ovalo
       generoso; el recuadro recto se reserva a los huecos de imagen. */
:root{
  --fx-radio:   20px;
  --fx-radio-l: 40px;
}

.fx-card,
.fx-precio,
.fx-puerta,
.fx-cta,
.fx-timeline,
.fx-banda .fx-card{ border-radius:var(--fx-radio-l) !important; overflow:hidden; }

.fx-faq details{ border-radius:30px !important; }
.fx-faq details[open]{ border-radius:30px !important; }

.fx-card__icono{ border-radius:50% !important; }

.fx-nav > li > a{ border-radius:100px !important; }
.fx-sub{ border-radius:26px !important; }
.fx-sub a{ border-radius:100px !important; }

.fx-movil{ border-radius:100px 100px 0 0; }

/* El hueco de imagen se queda recto: es la unica forma rectangular que
   sobrevive, y asi se distingue de un vistazo de lo que es contenido. */
.fx-ph{ border-radius:0 !important; }

/* 9.3 Listas: una sola linea, sin el bloque en negrita encima del resto. */
.fx-checks strong{
  display:inline !important;
  font-weight:inherit !important;
  color:inherit !important;
}
.fx-checks li{ color:var(--fx-texto); }
.fx-checks--claro li,
.fx-checks--claro strong{ color:rgba(255,255,255,.86) !important; }

/* 9.4 Blog: listado de entradas y entrada individual. */
.wp-block-post-template{
  list-style:none !important; padding:0 !important; margin:0 !important;
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem;
}
.wp-block-post-template > li{
  background:var(--fx-carta);
  border:1px solid var(--fx-linea);
  border-radius:var(--fx-radio-l);
  padding:1.9rem 1.8rem;
  transition:border-color .2s ease, transform .2s ease;
}
.wp-block-post-template > li:hover{ border-color:var(--fx-verde); transform:translateY(-3px); }
.wp-block-post-template .wp-block-post-title{
  font-family:var(--fx-display); font-weight:400 !important;
  font-size:clamp(1.15rem,1.9vw,1.45rem); line-height:1.12;
  letter-spacing:-.02em; margin:0 0 .6em;
}
.wp-block-post-template .wp-block-post-title a{ text-decoration:none; color:var(--fx-verde-osc); }
.wp-block-post-template .wp-block-post-title a:hover{ color:var(--fx-verde); }
.wp-block-post-excerpt__excerpt{ color:var(--fx-texto-suave); margin-bottom:.8rem; }
.wp-block-post-excerpt__more-link,
.wp-block-read-more{
  font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  font-size:.78rem; color:var(--fx-verde); text-decoration:none;
}
.wp-block-post-date{
  font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  font-size:.72rem; color:var(--fx-texto-suave); margin-bottom:.7rem;
}
.wp-block-query-pagination{ margin-top:2rem; display:flex; gap:.6rem; flex-wrap:wrap; }
.wp-block-query-pagination a, .wp-block-query-pagination span{
  border:2px solid var(--fx-linea); border-radius:100px; padding:.4em 1em;
  text-decoration:none; font-weight:600; font-size:.9rem;
}
.wp-block-query-pagination a:hover{ border-color:var(--fx-verde); color:var(--fx-verde); }

/* Entrada individual: el titulo manda, y el cuerpo respira. */
.single .wp-block-post-title,
body.single-post .wp-block-post-title{
  font-family:var(--fx-display); font-weight:400 !important;
  font-size:clamp(2rem,4.6vw,3.4rem); letter-spacing:-.03em;
  margin-bottom:.6em; max-width:20ch;
}

@media (max-width:760px){
  .wp-block-post-template{ grid-template-columns:1fr; }
}

/* 9.5 Peso del texto corrido.
      Twenty Twenty-Five deja el cuerpo en 300 y de Archivo solo estan
      instalados 400-700: el navegador acaba fingiendo un peso que no existe
      y el texto sale lavado. Lo fijamos en el grosor real. */
body,
p, li, td, dd,
.fx-lead, .fx-faq__body, .fx-precio__nota{ font-weight:400; }
.fx-lead{ font-weight:500; }

/* 9.6 Plantilla de entrada individual.
      La regla de contenedores (`main.wp-block-group`) tiene mas especificidad
      que `.fx-wrap`, asi que en las entradas del blog el contenido se pegaba
      al borde izquierdo. Aqui reafirmamos el contenedor con la misma
      especificidad para que gane el ancho de lectura. */
main.wp-block-group.fx-wrap{
  width:min(100% - 2.4rem, var(--fx-ancho)) !important;
  margin-inline:auto !important;
}
main.wp-block-group.fx-section{ padding-block:clamp(40px,5vw,72px) !important; }

/* La foto de cabecera de una entrada no necesita ocupar media pantalla. */
.wp-block-post-content > .fx-ph:first-child,
main.wp-block-group .fx-ph--16x9{ max-height:460px; }

/* 9.7 Ritmo vertical dentro de una entrada del blog.
      La regla `margin-block-start:0` que hace falta para que las secciones a
      sangre de las paginas encajen sin huecos aplasta el texto corrido de las
      entradas. Aqui se devuelve el aire, solo en las entradas. */
.single-post .wp-block-post-content > h2{ margin-top:2.6rem !important; margin-bottom:.7em !important; }
.single-post .wp-block-post-content > h3{ margin-top:1.9rem !important; margin-bottom:.5em !important; }
.single-post .wp-block-post-content > p{ margin-bottom:1.15em !important; }
.single-post .wp-block-post-content > ul,
.single-post .wp-block-post-content > ol{ margin-bottom:1.6rem !important; }
.single-post .wp-block-post-content > figure{ margin-bottom:1.8rem !important; }
.single-post .wp-block-post-content > .fx-timeline,
.single-post .wp-block-post-content > .fx-grid,
.single-post .wp-block-post-content > .fx-faq{ margin:1.6rem 0 2.4rem !important; }
.single-post .wp-block-post-content > section{ margin-top:2.4rem !important; }
.single-post .wp-block-post-content > .fx-lead{ font-size:1.14rem; margin-bottom:.6em !important; }
.single-post .wp-block-post-content > .fx-eyebrow{ margin-bottom:2rem !important; }
.single-post .wp-block-post-content .fx-checks{ gap:1rem; }

/* 9.8 Mas ovalo todavia.
      Segunda vuelta de radios: las tarjetas y los acordeones se acercan a la
      capsula. El hueco de imagen sigue siendo lo unico recto. */
:root{
  --fx-radio:   26px;
  --fx-radio-l: 56px;
}
.fx-card,
.fx-precio,
.fx-puerta,
.fx-cta,
.fx-timeline,
.fx-banda .fx-card,
.wp-block-post-template > li{ border-radius:var(--fx-radio-l) !important; }

.fx-faq details,
.fx-faq details[open]{ border-radius:42px !important; }
.fx-faq summary{ padding-inline:1.6rem; }
.fx-faq__body{ padding-inline:1.6rem; }

.fx-card__body{ padding-inline:1.7rem; }
.fx-sub{ border-radius:32px !important; }

/* La foto dentro de una tarjeta de servicio se recorta con la tarjeta, asi
   que aqui el recto se pierde a proposito: manda la forma de la tarjeta. */
.fx-card{ overflow:hidden; }

/* 9.9 Etiquetas dentro de tarjeta.
      El cuerpo de la tarjeta es un flex en columna, asi que la etiqueta se
      estiraba de lado a lado y dejaba de parecer una etiqueta. */
.fx-badge{
  display:inline-flex !important;
  align-self:flex-start;
  width:auto !important;
}

/* ==========================================================================
   10. REVISION · VERDES MAS CLAROS Y AJUSTES DE COMPOSICION
   ========================================================================== */

/* 10.1 Paleta: los tres verdes suben dos escalones. El principal se queda
        justo en el limite en el que el texto blanco encima sigue cumpliendo
        el contraste minimo de accesibilidad (4.5:1); mas claro que esto y los
        botones verdes dejarian de leerse bien. */
:root{
  --fx-verde:        #21875F;
  --fx-verde-osc:    #1A5741;
  --fx-verde-noche:  #143A2C;
  --fx-verde-vivo:   #5FCBA1;
  --fx-linea:        rgba(26,87,65,.16);
  --fx-sombra:       0 18px 44px -24px rgba(20,58,44,.45);
}

/* 10.2 Eyebrow sin guion: para las lineas que ya se separan con una barra. */
.fx-eyebrow--limpio::before{ display:none !important; }
.fx-eyebrow--limpio{ gap:0; }

/* 10.3 Cinta de cabecera mas corta en paginas de listado. */
.fx-hero2--corta{
  padding:clamp(40px,4.6vw,64px) 0 clamp(36px,4vw,56px) !important;
}
/* Y el contenido que va debajo se pega mas a ella. */
.fx-hero2--corta + .wp-block-group > .fx-section:first-child,
.fx-hero2--corta ~ section.fx-section:first-of-type{ padding-top:clamp(32px,3.6vw,52px); }

/* ==========================================================================
   11. REVISION · FUERA EL GUION, VERDE MAS CLARO Y BOTON INVERTIDO
   ========================================================================== */

/* 11.1 El eyebrow pierde el guion de 26 px en toda la web. */
.fx-eyebrow::before{ display:none !important; }
.fx-eyebrow{ gap:0 !important; }

/* 11.2 Verde un tono mas claro.
        Se parte en tres tokens porque un relleno y un texto de 11 px no
        necesitan el mismo contraste: aclarar el verde de las superficies sin
        aclarar el de la letra pequena es lo que permite subir el tono sin
        que nada deje de leerse. */
:root{
  --fx-verde:        #279C6F;   /* rellenos, trazos, texto grande */
  --fx-verde-texto:  #14624A;   /* texto pequeno sobre fondo claro */
  --fx-verde-bloque: #21875F;   /* superficies grandes con texto blanco */
}

.fx-eyebrow,
.fx-link,
.fx-sub__tag,
.fx-paso__marca,
.fx-precio__titulo,
.fx-faq summary:hover,
.fx-nav > li > a:hover{ color:var(--fx-verde-texto) !important; }

/* Sobre fondo oscuro manda el verde vivo, no el de texto. */
.fx-eyebrow--claro,
.fx-precio--destacado .fx-precio__titulo,
.fx-banda .fx-link,
.fx-cta .fx-link{ color:var(--fx-verde-vivo) !important; }

/* El bloque de llamada a la accion se queda en el verde con el que el blanco
   encima sigue cumpliendo contraste. */
.fx-cta{ background:var(--fx-verde-bloque) !important; }

/* 11.3 Boton principal invertido: fondo claro y verde oscuro.
        Es lo que permite que el verde de marca suba de tono sin que el texto
        del boton pierda legibilidad al sol o con poco brillo de pantalla. */
.fx-btn--verde{
  background:#fff !important;
  color:var(--fx-verde-osc) !important;
  border-color:var(--fx-verde) !important;
}
.fx-btn--verde:hover{
  background:var(--fx-verde-osc) !important;
  color:#fff !important;
  border-color:var(--fx-verde-osc) !important;
}

/* 11.4 El "/sesion" de los precios heredaba el interletraje negativo del
        numero grande y se montaba encima del simbolo del euro. */
.fx-precio__cifra small{
  letter-spacing:0 !important;
  margin-left:.18em;
  white-space:nowrap;
}

/* 12. El justificado se retiro a peticion del cliente: en columnas estrechas
      abria demasiados huecos aunque hubiera guionado. El texto vuelve a
      bandera, que es como estaba. */

/* ==========================================================================
   13. LINEA DE TIEMPO ALINEADA
   ========================================================================== */

/* Cada `.fx-paso` era una rejilla propia con `grid-template-columns:auto 1fr`,
   asi que la primera columna se ajustaba al ancho de SU etiqueta y el texto
   de cada fila arrancaba en un punto distinto. Con `subgrid` los tres pasos
   heredan las columnas del contenedor: la primera columna mide lo que mida la
   etiqueta mas larga y todos los textos quedan a la misma altura horizontal. */
@supports (grid-template-columns: subgrid){
  .fx-timeline{
    grid-template-columns:max-content 1fr;
    column-gap:1.4rem;
  }
  .fx-paso{
    grid-column:1 / -1;
    grid-template-columns:subgrid;
  }
}

/* En movil la etiqueta pasa arriba y no hay nada que alinear. */
@media (max-width:620px){
  @supports (grid-template-columns: subgrid){
    .fx-timeline{ grid-template-columns:1fr; }
    .fx-paso{ grid-template-columns:1fr; }
  }
}

/* ==========================================================================
   14. RITMO VERTICAL MAS COMPACTO
   ========================================================================== */

/* El prototipo se diseno con bandas muy aireadas: entre el final de un texto y
   el principio del siguiente habia hasta 232px de aire (116 abajo + 116 arriba).
   Con trece paginas encadenadas eso convierte la web en un scroll interminable.
   Se recorta aproximadamente un 30% de todos los respiros verticales,
   manteniendo la proporcion entre ellos para que la jerarquia siga leyendose:
   la banda oscura sigue siendo mas amplia que la seccion corta, y el hero
   sigue siendo el bloque mas alto de la pagina. */

.fx-section{        padding-block:clamp(42px,5.8vw,78px) !important; }
.fx-section--corta{ padding-block:clamp(28px,3.4vw,46px) !important; }
.fx-banda{          padding-block:clamp(44px,5.4vw,80px) !important; }

.fx-hero2{          padding-block:clamp(40px,4.8vw,72px) clamp(36px,4.2vw,64px) !important; }
.fx-hero__intro{    padding-block:clamp(34px,4.2vw,58px) clamp(20px,2.2vw,30px) !important; }

.fx-footer{         padding-block:clamp(36px,4.4vw,58px) 1.5rem !important; }

/* El bloque de llamada final tambien respiraba de mas por dentro. */
.fx-cta{ padding:clamp(1.8rem,3.8vw,2.8rem) !important; }

/* ==========================================================================
   15. ACORDEON DE PREGUNTAS
   ========================================================================== */

/* Dos molestias que venian del navegador, no del diseno:

   1) La linea rara al abrir. Chrome dibuja su anillo de foco alrededor del
      `<summary>` cuando lo pulsas con el raton. Como la ficha lleva
      `overflow:hidden`, el anillo se recorta y solo sobrevive su borde
      inferior: una raya suelta justo debajo de la pregunta. Se apaga el
      anillo por defecto y se sustituye por un recuadro interior que solo
      aparece con el teclado (`:focus-visible`), asi no se pierde la
      accesibilidad de quien navega con tabulador.

   2) El texto que se selecciona solo. `<summary>` es texto normal: al
      pulsarlo (y sobre todo al pulsarlo dos veces seguidas para abrir y
      cerrar) el navegador selecciona la frase. Con `user-select:none` el
      titulo se comporta como un boton y deja de seleccionarse. */

.fx-faq summary{
  -webkit-user-select:none;
  user-select:none;
  outline:none !important;
}
.fx-faq summary:focus-visible{
  box-shadow:inset 0 0 0 2px var(--fx-verde);
  border-radius:inherit;
}

/* ==========================================================================
   16. TARJETAS SOBRE BANDA OSCURA
   ========================================================================== */

/* Hasta ahora, cuando una seccion de fichas se convertia en banda oscura,
   habia que repintar cada tarjeta a mano con estilos en linea. Con esto la
   conversion es automatica: basta con poner `fx-banda` a la seccion. Los
   estilos en linea que ya existen en portada siguen mandando, asi que no
   cambia nada de lo que ya estaba montado. */

/* Se probo primero con tarjetas semitransparentes, como las de portada, y
   sobre el verde no funcionaba: alli cada tarjeta tiene un titulo en blanco
   que la ancla, pero en urgencia son seis frases sueltas y el recuadro casi
   no se distinguia del fondo. Es la diferencia entre un cuadro colgado en la
   pared y un cuadro pintado directamente sobre ella. Asi que la ficha vuelve
   a ser opaca y clara: se despega del verde y el texto recupera contraste. */
.fx-banda .fx-card{
  background:var(--fx-carta);
  border-color:transparent;
}
.fx-banda .fx-card h3,
.fx-banda .fx-card strong{ color:var(--fx-negro); }
.fx-banda .fx-card p,
.fx-banda .fx-card li{ color:var(--fx-texto-suave); }

/* ==========================================================================
   17. LAS DOS PUERTAS DE PORTADA
   ========================================================================== */

/* Antes eran una franja continua partida por una costura de 2 px, pegada a
   los bordes de la pantalla. El problema no era el color: era que leia como
   UN bloque dividido, no como DOS opciones. Y la portada esta pidiendo lo
   segundo, porque el visitante tiene que elegir entre ir a la clinica o que
   vayamos a su casa.

   Un menu de dos platos se entiende mejor en dos platos separados que en una
   bandeja con una raya pintada en medio. Asi que se separan, se meten dentro
   del ancho de lectura y se les da la forma ovalada del resto de fichas.

   El enlace, la foto de fondo y el texto encima ya estaban en el diseno
   original: cada puerta es un `<a>` con la foto en `::before` y un degradado
   en `::after` que oscurece la parte baja para que el texto se lea. No hace
   falta montar la imagen con el texto incrustado en un editor: cuando llegue
   la foto real solo hay que apuntarla en `--fx-puerta-img`. */

.fx-puertas{
  width:min(100% - 2.4rem, var(--fx-ancho));
  margin-inline:auto;
  gap:clamp(1rem,1.8vw,1.6rem);
  background:transparent;
  padding-bottom:clamp(24px,3.4vw,48px);
}

.fx-puerta{
  border-radius:var(--fx-radio-l);
  min-height:clamp(280px,30vw,380px);
}

/* Mientras no haya foto, el hueco tiene que verse. Rayas diagonales sobre el
   verde, el mismo codigo visual que los demas huecos de imagen. */
.fx-puerta::before{
  background:
    var(--fx-puerta-img, none),
    repeating-linear-gradient(45deg, rgba(255,255,255,.075) 0 14px, rgba(255,255,255,.02) 14px 28px),
    linear-gradient(150deg, #1E6B4F, #10382A);
  background-size:cover;
  background-position:center;
}

/* Rotulo del hueco, arriba a la derecha. Desaparece solo el dia que se
   rellene `--fx-puerta-img`: basta con borrar el span del contenido. */
.fx-puerta__hueco{
  position:absolute; top:1rem; right:1.2rem; left:auto;
  max-width:20ch; text-align:right;
  font-family:var(--fx-mono); font-size:.66rem; letter-spacing:.06em;
  color:rgba(255,255,255,.55); line-height:1.5;
  border:1px dashed rgba(255,255,255,.3);
  border-radius:14px; padding:.45rem .7rem;
}

@media (max-width:760px){
  .fx-puertas{ grid-template-columns:1fr; }
  .fx-puerta__hueco{ display:none; }
}

/* ==========================================================================
   18. MIGAS DE PAN
   ==========================================================================
   Van entre la cabecera y el hero, sobre el fondo claro de la pagina. Ahi no
   compiten con nada: el hero es la primera pieza de color y el H1 vive dentro
   de el, asi que la miga se lee como lo que es, un rotulo de pasillo, y no
   como el principio del contenido.

   El separador es la barra vertical, no el guion ni el punto medio, para
   seguir la norma de composicion del resto de la web.

   12 px de suelo tipografico en movil, como el resto de rotulos tras la
   auditoria de agosto. */

.fx-migas{
  background:var(--fx-fondo);
  border-bottom:1px solid var(--fx-linea);
}
.fx-migas ol{
  list-style:none;
  margin:0;
  padding:.7rem 0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.15rem .55rem;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.04em;
  line-height:1.5;
}
.fx-migas li{ display:flex; align-items:center; gap:.55rem; }
.fx-migas li + li::before{ content:"|"; opacity:.4; font-weight:400; }
.fx-migas a{ color:var(--fx-verde-texto); text-decoration:none; }
.fx-migas a:hover{ text-decoration:underline; }
.fx-migas [aria-current]{ color:var(--fx-texto-suave); font-weight:400; }

/* El bloque de shortcode de WordPress puede envolver la salida en un parrafo.
   Que no empuje la miga hacia abajo. */
.fx-migas p{ margin:0; }

@media (max-width:900px){
  .fx-migas ol{ font-size:.75rem; padding:.55rem 0; gap:.1rem .45rem; }
}

/* ==========================================================================
   19. MAPA EMBEBIDO
   ==========================================================================
   El iframe de Google no trae proporcion propia: si no se le da una caja, en
   moviles colapsa a unos pocos pixeles de alto. Se le pone la misma forma
   ovalada que a las tarjetas para que no cante dentro de la banda, y se
   posiciona absoluto dentro de un contenedor con aspect-ratio, que es lo que
   le da altura sin fijarla en pixeles.

   Va en 4:3 en escritorio, donde comparte fila con el texto, y se achata en
   movil, donde pasa debajo y no compite por el alto de la pantalla. */

.fx-mapa{
  position:relative;
  aspect-ratio:4/3;
  border-radius:var(--fx-radio-l);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:var(--fx-sombra);
}
.fx-mapa iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

@media (max-width:900px){
  .fx-mapa{ aspect-ratio:16/11; }
}