/* Ama Bardera · web «Díptico» (producción; nace del prototipo v2 aprobado)
   La pareja como estructura: cada sección son dos mitades enfrentadas a un lomo central.
   Un único acento granate para todo lo que se pulsa. */

/* Letras alojadas en la propia web (latín): nada sale hacia Google antes del consentimiento.
   El logotipo no usa letra: va en trazados SVG (Black Mango es de pago). */
@font-face {
  font-family: "Gilda Display"; font-weight: 400; font-display: swap;
  src: url("/assets/fuentes/gilda-display-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk"; font-weight: 400 600; font-display: swap;
  src: url("/assets/fuentes/hanken-grotesk-latin.woff2") format("woff2");
}

:root {
  --hueso: #f4efe8;
  --papel: #e9e0d4;
  --arena: #d8c9b7;
  --tinta: #2f2226;
  --tinta-2: #5d4d48;
  --granate: #6d2935;
  --granate-osc: #4f1c26;
  --lomo: rgb(122 102 92 / .42);
  --crema: #f6efe6;

  --display: "Gilda Display", Georgia, serif;
  --texto: "Hanken Grotesk", system-ui, sans-serif;

  --ancho: 82rem;
  --margen: clamp(1.25rem, 4vw, 3rem);
  --hueco: clamp(2rem, 4.5vw, 4.5rem);
  --seccion: clamp(3.75rem, 7vw, 6.25rem);  /* 06-11, JD: menos aire entre secciones */
  --curva: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--granate) var(--hueso); }
body {
  margin: 0; background: var(--hueso); color: var(--tinta);
  font: 400 1.0625rem/1.65 var(--texto);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
/* El lomo: una línea que recorre la página entera por el centro */
body::before {
  content: ""; position: fixed; top: 0; bottom: 0; left: 50%; z-index: 30;
  width: 1px; background: var(--lomo); pointer-events: none;
}
img { display: block; max-width: 100%; height: auto; position: relative; z-index: 31; }
figure { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
::selection { background: var(--granate); color: var(--crema); }
:focus-visible { outline: 2px solid var(--granate); outline-offset: 4px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.i { width: 1.1em; height: 1.1em; flex: none; }
.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 50; background: var(--granate); color: var(--crema); padding: .6rem 1rem; }
.saltar:focus { top: 1rem; }

/* Díptico: dos mitades exactas a cada lado del lomo */
.pagina { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
.diptico { display: grid; grid-template-columns: 1fr 1fr; }
.diptico > .izq { padding-right: var(--hueco); }
.diptico > .der { padding-left: var(--hueco); }
.hacia-lomo { text-align: right; }
.hacia-lomo > * { margin-left: auto; }
/* Rótulo sobre el lomo: interrumpe la línea */
.sobre-lomo { position: relative; z-index: 31; width: fit-content; margin: 0 auto; padding: .4rem 1.5rem; background: var(--fondo, var(--hueso)); text-align: center; }

/* ---------- Logotipo ---------- */
.logo { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; line-height: 1; color: var(--granate); }
.logo svg { display: block; height: 1em; fill: currentColor; }
.logo__nombre { font-size: clamp(1.6rem, 2.3vw, 2rem); width: 6.393em; }
/* El trazado ya lleva el espaciado de .52em tras cada letra; el margen lo compensa a la izquierda */
.logo__sub { font-size: .58rem; width: 11.636em; margin: .45em 0 0 .52em; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 3.1rem; padding: .8rem 1.5rem; border: 1px solid var(--granate); border-radius: 2px;
  background: var(--granate); color: var(--crema);
  font: 600 1rem/1.2 var(--texto); text-decoration: none;
  transition: background-color .3s var(--curva), color .3s var(--curva), gap .3s var(--curva);
}
.boton:hover { background: var(--granate-osc); gap: .85em; }
.boton--linea { background: transparent; color: var(--granate); }
.boton--linea:hover { background: var(--granate); color: var(--crema); }
.boton--claro { background: var(--crema); color: var(--granate); border-color: var(--crema); }
.boton--claro:hover { background: transparent; color: var(--crema); }
.enlace { display: inline-flex; align-items: center; gap: .5em; color: var(--granate); font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: .2em; transition: gap .3s var(--curva); }
.enlace:hover { gap: .8em; }

/* ---------- Cabecera: el logo sobre el lomo, la navegación repartida ---------- */
.cab { position: relative; z-index: 32; background: var(--hueso); border-bottom: 1px solid var(--lomo); }
.cab__fila { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-block: 1.1rem; }
.cab .logo { padding-inline: 2rem; background: var(--hueso); }
.nav-izq, .nav-der { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); font-size: .95rem; font-weight: 500; }
.nav-izq { justify-content: flex-end; padding-right: 1rem; }
.nav-der { justify-content: flex-start; padding-left: 1rem; }
.nav-der .boton { margin-left: auto; min-height: 2.6rem; padding: .5rem 1.1rem; font-size: .92rem; }
.cab nav a:not(.boton) { text-decoration: none; padding-block: .35rem; }
.cab nav a:not(.boton):hover, .cab nav a[aria-current="page"],
.nav__boton:hover, .nav__boton[aria-current], .nav__sub:focus-within .nav__boton { box-shadow: inset 0 -1px 0 var(--granate); color: var(--granate); }
/* Cursos no tiene página propia: el disparador del panel es un botón con aspecto de enlace */
.nav__boton { padding: .35rem 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.nav__sub { position: relative; }
.nav__panel {
  position: absolute; right: 0; top: calc(100% + .9rem);
  display: grid; gap: .15rem; min-width: 16rem; padding: 1rem 1.25rem; text-align: right;
  background: var(--hueso); border: 1px solid var(--lomo);
  box-shadow: 0 16px 34px -20px rgb(47 34 38 / .4);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .25s var(--curva), transform .25s var(--curva), visibility .25s;
}
.nav__sub:hover .nav__panel, .nav__sub:focus-within .nav__panel { opacity: 1; visibility: visible; transform: none; }
.nav__panel a { display: block; padding: .3rem 0; }
/* En la mitad derecha el panel arranca desde el lomo, como el texto */
.nav-der .nav__panel { left: 0; right: auto; text-align: left; min-width: 12rem; }
.cab__menu { display: none; }

/* ---------- Portada ---------- */
.heroe { padding-top: clamp(3rem, 7vw, 6rem); }
.heroe h1 { display: grid; grid-template-columns: 1fr 1fr; font-size: clamp(2.5rem, 5.4vw, 4.9rem); letter-spacing: -.01em; }
.heroe h1 .izq { padding-right: var(--hueco); text-align: right; animation: acercar-izq 1.2s var(--curva) both; }
.heroe h1 .der { padding-left: var(--hueco); color: var(--granate); animation: acercar-der 1.2s var(--curva) both; }
@keyframes acercar-izq { from { transform: translateX(-2.75rem); } }
@keyframes acercar-der { from { transform: translateX(2.75rem); } }
.heroe__fila { margin-top: clamp(2rem, 4vw, 3rem); align-items: start; }
.heroe__fila .izq p { font-size: 1.15rem; max-width: 30ch; margin-left: auto; }
.heroe__acciones { display: flex; flex-wrap: wrap; gap: .75rem; }
.datos { display: grid; gap: .3rem; margin-top: 1.6rem; font-size: .92rem; color: var(--tinta-2); }
.datos b { font-weight: 600; color: var(--tinta); margin-right: .5rem; }
.heroe__foto { margin-top: clamp(3rem, 6vw, 5rem); }
.heroe__foto img { width: 100%; height: clamp(22rem, 52vh, 36rem); object-fit: cover; object-position: 50% 55%; }

/* ---------- Pareja | Individual ---------- */
.servicios { padding: var(--seccion) 0; }
.servicio figure { margin-bottom: 2rem; }
.servicio img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.servicio .izq-foto { width: 82%; margin-left: auto; }
.servicio .der-foto { width: 82%; }
.servicio h2 { font-size: clamp(2.2rem, 4vw, 3.5rem); margin-bottom: 1.1rem; }
.servicio p { max-width: 40ch; }
.izq.servicio p, .izq.servicio .temas { margin-left: auto; }
.temas { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 1.75rem; font-size: .88rem; color: var(--tinta-2); max-width: 42ch; }
.izq .temas { justify-content: flex-end; }
/* Temas como píldoras sutiles (06-11, JD: sin viñetas): filete del lomo, sin relleno */
.temas li { padding: .28rem .85rem; border: 1px solid var(--lomo); border-radius: 999px; line-height: 1.4; }

/* ---------- Otros temas ---------- */
.temas-lista { padding: var(--seccion) 0; background: var(--papel); --fondo: var(--papel); }
.temas-lista .diptico { align-items: start; }
.temas-lista .izq { position: sticky; top: 2.5rem; }
.temas-lista h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
.temas-lista .izq p { color: var(--tinta-2); max-width: 26ch; margin: 1.25rem 0 0 auto; }
.fila { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1.5rem; padding: 1.5rem 0; border-top: 1px solid var(--lomo); text-decoration: none; }
.fila:last-child { border-bottom: 1px solid var(--lomo); }
.fila h3 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); }
.fila p { grid-column: 1; margin: 0; color: var(--tinta-2); max-width: 46ch; }
.fila > .i { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--granate); transition: transform .3s var(--curva); }
.fila:hover h3 { color: var(--granate); }
.fila:hover > .i { transform: translateX(5px); }

/* ---------- Pasos en zigzag: una conversación ---------- */
.pasos { padding: var(--seccion) 0; }
.pasos h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.paso { padding-block: 1.5rem; }
.paso b { display: block; font: 400 clamp(3rem, 5vw, 4.25rem)/1 var(--display); color: var(--granate); margin-bottom: .75rem; }
.paso h3 { font-size: 1.55rem; margin-bottom: .4rem; }
.paso p { margin: 0; color: var(--tinta-2); max-width: 34ch; }
.hacia-lomo.paso p { margin-left: auto; }

/* ---------- Dónde ---------- */
.donde { padding: var(--seccion) 0; background: var(--papel); --fondo: var(--papel); }
.donde h2 { font-size: clamp(2.2rem, 4.4vw, 3.8rem); display: grid; grid-template-columns: 1fr 1fr; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.donde h2 .izq { text-align: right; padding-right: var(--hueco); }
.donde h2 .der { padding-left: var(--hueco); color: var(--granate); }
.donde img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 1.5rem; }
.donde h3 { font-size: 1.6rem; margin-bottom: .6rem; }
.donde p { color: var(--tinta-2); max-width: 40ch; }
.donde .izq p { margin-left: auto; }
.donde__online { display: grid; align-content: start; gap: 1.25rem; }
.donde__online .grande { font: 400 clamp(1.6rem, 2.6vw, 2.2rem)/1.25 var(--display); color: var(--tinta); max-width: 18ch; }
.donde__online img { aspect-ratio: 4 / 3; width: 78%; }

/* ---------- Sobre mí ---------- */
.sobre { padding: var(--seccion) 0; align-items: center; }
.sobre .marcador, .sobre .retrato { width: 72%; margin-left: auto; }
.sobre h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); margin-bottom: 1.4rem; }
.sobre p { max-width: 44ch; }
.equipo { display: grid; gap: 1rem; margin: 1.75rem 0 2rem; padding: 1.25rem 0; border-block: 1px solid var(--lomo); }
.equipo b { font: 400 1.3rem/1.2 var(--display); color: var(--granate); margin-right: .5rem; }
.equipo span { color: var(--tinta-2); font-size: .93rem; }

.retrato { aspect-ratio: 4 / 5; object-fit: cover; }
.marcador {
  display: grid; place-items: center; text-align: center; aspect-ratio: 4 / 5; padding: 1.5rem;
  background: #b9b9b9; color: #222; border: 3px dashed #6b6b6b;
  font: 700 .85rem/1.45 ui-monospace, Menlo, monospace; text-transform: uppercase; letter-spacing: .04em;
}

/* ---------- Tarifas ---------- */
.tarifas { padding: var(--seccion) 0; background: var(--papel); --fondo: var(--papel); }
.tarifas h2 { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.tarifa { font-variant-numeric: lining-nums tabular-nums; }
.tarifa h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.tarifa__precio { display: block; margin: .75rem 0 .5rem; font: 400 clamp(3.4rem, 7vw, 6rem)/1 var(--display); color: var(--granate); }
.tarifa p { color: var(--tinta-2); margin: 0; }
.tarifas__pie { margin-top: clamp(2.5rem, 4vw, 3.5rem); text-align: center; }
.tarifas__pie p { color: var(--tinta-2); margin-bottom: 1rem; }

/* ---------- Cierre ---------- */
.cierre { padding: var(--seccion) 0; background: var(--granate); color: var(--crema); --fondo: var(--granate); --lomo: rgb(246 239 230 / .3); }
.cierre h2 { font-size: clamp(2.4rem, 5vw, 4.4rem); max-width: 14ch; }
.cierre .sobre-lomo p { color: rgb(246 239 230 / .78); margin: 1rem auto 0; max-width: 34ch; }
.cierre__acciones { margin-top: clamp(2rem, 4vw, 3rem); }
.cierre__acciones .izq { display: flex; justify-content: flex-end; }

/* ---------- Pie ---------- */
.pie { position: relative; z-index: 31; background: var(--granate-osc); color: rgb(246 239 230 / .78); padding: clamp(3.5rem, 7vw, 5rem) 0 2rem; font-size: .95rem; }
.pie .logo { color: var(--crema); }
.pie__izq { display: grid; justify-items: end; text-align: right; gap: 1.25rem; }
.pie address { font-style: normal; line-height: 1.7; }
.pie__der { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 2.5rem; }
.pie h2 { font: 600 .78rem/1 var(--texto); letter-spacing: .14em; text-transform: uppercase; color: var(--arena); margin-bottom: 1rem; }
.pie li { padding: .18rem 0; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--crema); text-decoration: underline; }
.pie__base { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgb(246 239 230 / .15); font-size: .85rem; }
.pie__base .izq { text-align: right; }

.barra-cita { display: none; }

/* ---------- Página de servicio ---------- */
.migas { font-size: .85rem; color: var(--tinta-2); padding-top: 1.75rem; }
.migas ol { display: flex; justify-content: center; gap: .4rem; flex-wrap: wrap; }
.migas li + li::before { content: "/"; margin-right: .4rem; opacity: .6; }
.migas a { text-decoration: none; }
.cab-servicio { padding-top: clamp(1.5rem, 4vw, 3rem); }
.cab-servicio h1 { display: grid; grid-template-columns: 1fr 1fr; font-size: clamp(2.5rem, 5.4vw, 4.8rem); }
.cab-servicio h1 .izq { text-align: right; padding-right: var(--hueco); animation: acercar-izq 1.2s var(--curva) both; }
.cab-servicio h1 .der { padding-left: var(--hueco); color: var(--granate); animation: acercar-der 1.2s var(--curva) both; }
.motivos { padding: var(--seccion) 0; background: var(--papel); --fondo: var(--papel); }
.motivos h2, .sesiones h2, .faq h2, .relacionadas h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
.motivos h2 { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.motivos li { padding: 1.4rem 0; border-top: 1px solid var(--lomo); }
.motivos h3 { font-size: 1.45rem; margin-bottom: .4rem; }
.motivos li p { margin: 0; color: var(--tinta-2); }
.motivos .izq li p { margin-left: auto; }
.motivos .izq li { text-align: right; }
.sesiones { padding: var(--seccion) 0; }
.sesiones .izq h2 { margin-bottom: 1.4rem; }
.sesiones .izq p { max-width: 42ch; margin-left: auto; }
.ficha { max-width: 24rem; padding: 2rem; border: 1px solid var(--granate); font-variant-numeric: tabular-nums; }
.ficha h3 { font-size: 1.5rem; margin-bottom: 1rem; }
.ficha dl { margin: 0 0 1.5rem; display: grid; grid-template-columns: auto 1fr; gap: .55rem 1rem; }
.ficha dt { color: var(--tinta-2); }
.ficha dd { margin: 0; font-weight: 600; text-align: right; }
.ficha .boton { width: 100%; }
.faq { padding: var(--seccion) 0; background: var(--papel); --fondo: var(--papel); }
.faq .izq h2 { position: sticky; top: 2.5rem; }
.faq details { border-top: 1px solid var(--lomo); }
.faq details:last-child { border-bottom: 1px solid var(--lomo); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.3rem 0; cursor: pointer; list-style: none; font: 400 clamp(1.2rem, 1.8vw, 1.4rem)/1.3 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: .65rem; height: .65rem; border-right: 1.5px solid var(--granate); border-bottom: 1.5px solid var(--granate); transform: translateY(-.2rem) rotate(45deg); transition: transform .3s var(--curva); }
.faq details[open] summary::after { transform: translateY(.1rem) rotate(225deg); }
.faq details p { margin: 0 0 1.4rem; color: var(--tinta-2); max-width: 56ch; }
.relacionadas { padding: var(--seccion) 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Tableta (≤1024) ---------- */
@media (max-width: 1024px) {
  .cab__fila { grid-template-columns: auto 1fr; }
  .cab .logo { padding-inline: 0; align-items: flex-start; }
  .cab .logo__sub { margin-left: 0; }
  .nav-izq, .nav-der { display: none; }
  .cab__acciones { display: flex; justify-content: flex-end; gap: .6rem; }
  .cab__menu { display: inline-flex; }
  .cab__acciones .boton { min-height: 2.6rem; padding: .5rem 1rem; font-size: .92rem; }
  .menu-movil { display: none; }
  .menu-movil.abierta { display: grid; gap: .2rem; padding: 1.25rem var(--margen) 2rem; border-top: 1px solid var(--lomo); font-size: 1.15rem; }
  .menu-movil a { text-decoration: none; padding: .3rem 0; }
  .menu-movil .sub { padding-left: 1rem; font-size: 1rem; color: var(--tinta-2); }
  .pie__der { grid-template-columns: 1fr; gap: 1.75rem; }
}
@media (min-width: 1025px) {
  .cab__acciones, .menu-movil { display: none; }
}

/* ---------- Móvil (≤767): el lomo se vuelve pliegue horizontal ---------- */
@media (max-width: 767px) {
  body { font-size: 1rem; padding-bottom: 4.75rem; }
  body::before { display: none; }
  .diptico, .heroe h1, .donde h2, .cab-servicio h1 { grid-template-columns: 1fr; }
  .diptico > .izq, .diptico > .der, .heroe h1 .izq, .heroe h1 .der, .donde h2 .izq, .donde h2 .der, .cab-servicio h1 .izq, .cab-servicio h1 .der { padding: 0; text-align: left; }
  .hacia-lomo { text-align: left; }
  .hacia-lomo > *, .heroe__fila .izq p, .izq.servicio p, .izq.servicio .temas, .donde .izq p, .sesiones .izq p, .motivos .izq li p, .hacia-lomo.paso p { margin-left: 0; }
  .izq .temas { justify-content: flex-start; }
  .motivos .izq li { text-align: left; }
  .diptico > .der { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--lomo); }
  .heroe__fila > .der, .cierre__acciones > .der, .pie__base > .der { margin-top: 1.5rem; padding-top: 0; border-top: 0; }
  .heroe h1 { font-size: clamp(2.4rem, 11vw, 3.2rem); }
  .heroe__foto img { height: auto; aspect-ratio: 4 / 3; }
  .servicio .izq-foto, .servicio .der-foto { width: 100%; }
  .servicio img { aspect-ratio: 4 / 3; }
  .temas-lista .izq, .faq .izq h2 { position: static; }
  .temas-lista .izq p { margin: 1rem 0 2rem; }
  .paso { padding-block: 1rem; }
  .pasos .diptico > .der, .pasos .diptico > .izq { border: 0; margin: 0; padding: 0; }
  .sobre .marcador, .sobre .retrato { width: 70%; margin: 0; }
  .donde__online img { width: 100%; }
  .cierre__acciones .izq { justify-content: flex-start; }
  .pie__izq { justify-items: start; text-align: left; }
  .pie__base .izq { text-align: left; }
  .ficha { max-width: none; }
  .barra-cita {
    position: fixed; inset: auto 0 0 0; z-index: 40;
    display: grid; grid-template-columns: 1.4fr 1fr; gap: .5rem;
    padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
    background: rgb(244 239 232 / .95); backdrop-filter: blur(10px); border-top: 1px solid var(--lomo);
  }
  .barra-cita .boton { min-height: 3rem; padding-inline: .75rem; font-size: .95rem; }
}

/* =========================================================
   Ronda 2: páginas interiores. Mismos tokens; nada de colores nuevos.
   ========================================================= */
.cab-servicio .migas + h1 { margin-top: 2rem; }
/* La mitad derecha del H1 entra desde fuera: sin esto, en móvil ensancha la página al cargar */
.heroe, .cab-servicio { overflow-x: clip; }
.pendiente {
  background: #b9b9b9; color: #222; border: 2px dashed #6b6b6b; padding: .05em .4em;
  font: 700 .78em/1.6 ui-monospace, Menlo, monospace; text-transform: uppercase; letter-spacing: .03em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.nota { margin-top: 1.25rem; font-size: .92rem; color: var(--tinta-2); }
.entrada { font-size: 1.15rem; }
.cita { font: 400 clamp(1.5rem, 2.6vw, 2.1rem)/1.3 var(--display); max-width: 22ch; }
.pie__zona { font-size: .92rem; max-width: 30ch; margin: 0; }

/* Texto corrido junto al lomo */
.prosa p { max-width: 58ch; }
.prosa h2 { font-size: clamp(2rem, 3.4vw, 3rem); margin-bottom: 1.25rem; }
.prosa ul:not(.temas) { margin: 0 0 1.2em; }
.prosa ul:not(.temas) li { position: relative; padding-left: 1.1rem; margin-bottom: .45rem; max-width: 58ch; }
.prosa ul:not(.temas) li::before { content: ""; position: absolute; left: 0; top: .7em; width: .35rem; height: .35rem; border-radius: 50%; background: var(--granate); }
.izq.prosa ul:not(.temas) li { padding: 0 1.1rem 0 0; margin-left: auto; }
.izq.prosa ul:not(.temas) li::before { left: auto; right: 0; }
.temas--lista { display: grid; gap: .5rem; max-width: 52ch; font-size: 1rem; color: var(--tinta); }

/* Bloque: titular fijo a un lado del lomo, texto al otro */
.bloque { padding: var(--seccion) 0; }
.bloque .diptico { align-items: start; }
.bloque .izq h2 { position: sticky; top: 2.5rem; font-size: clamp(2rem, 3.4vw, 3rem); }
.bloque--papel { background: var(--papel); --fondo: var(--papel); }
.bloque--foto .diptico { align-items: center; }
.bloque--foto .izq-foto { width: 72%; margin-left: auto; }
.bloque--foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.bloque .der .boton { margin-top: .75rem; }
/* Bloques de los cursos (06-11, JD: «más ordenado»): las dos mitades llevan contenido.
   A la izquierda, el titular con la entradilla en serif (o la presentación y el botón) y la columna fija;
   a la derecha, el resto del texto o los puntos como filas en serif con filetes, como la lista de temas. */
.bloque__lado { position: sticky; top: 2.5rem; align-self: start; }
.bloque .bloque__lado h2 { position: static; margin-bottom: 1.5rem; }
/* Párrafo largo: se lee mejor alineado a la izquierda; el bloque sigue pegado al lomo */
.bloque .bloque__entrada { font: 400 clamp(1.15rem, 1.6vw, 1.35rem)/1.45 var(--display); max-width: 32ch; text-align: left; }
.bloque__intro { color: var(--tinta-2); max-width: 30ch; }
.filas-texto { max-width: 34rem; border-bottom: 1px solid var(--lomo); }
.prosa ul.filas-texto li { margin: 0; padding: 1rem 0; max-width: none; border-top: 1px solid var(--lomo); font: 400 clamp(1.2rem, 1.7vw, 1.4rem)/1.3 var(--display); }
.prosa ul.filas-texto li::before { content: none; }

/* Mitades enfrentadas: infidelidad | celos, para ti | para la pareja */
.mitades { padding: var(--seccion) 0; }
.mitades .diptico { align-items: start; }
.mitades h2 { margin-bottom: 1.4rem; }
.mitades p { max-width: 44ch; }

/* Sobre mí */
.sobre-heroe { align-items: center; }
.sobre-heroe .marcador, .sobre-heroe .retrato { width: 72%; margin-left: auto; }
.sobre-heroe .entrada { font: 400 clamp(1.35rem, 2.2vw, 1.75rem)/1.35 var(--display); max-width: 26ch; }
.sobre-heroe .datos { margin-top: 2rem; }
.formacion li { display: grid; gap: .2rem; padding: 1.1rem 0; border-top: 1px solid var(--lomo); }
.formacion li:last-child { border-bottom: 1px solid var(--lomo); }
.formacion b { font: 400 1.5rem/1.25 var(--display); }
.formacion span { font-size: .95rem; color: var(--tinta-2); }
.historia { padding: var(--seccion) 0; background: var(--papel); --fondo: var(--papel); }
.historia h2, .equipo-pagina h2 { font-size: clamp(2rem, 3.4vw, 3rem); margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.historia .diptico { align-items: center; }
.historia p { max-width: 40ch; }
.historia img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.equipo-pagina { padding: var(--seccion) 0; }
.persona img { width: 62%; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 1.5rem; }
.persona h3 { font-size: 1.5rem; }
.persona__cargo { margin-block: .35rem 1rem; font-size: .92rem; color: var(--tinta-2); }
.persona p { max-width: 38ch; }
.equipo-pagina__nota { margin-top: clamp(2.5rem, 4vw, 3.5rem); max-width: 54ch; font-size: .92rem; color: var(--tinta-2); }

/* Tarifas */
.tarifa h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.tarifa .enlace { margin-top: 1.75rem; }
.faq--hueso { background: var(--hueso); --fondo: var(--hueso); }

/* Contacto */
.contacto { padding: clamp(3rem, 6vw, 5rem) 0 var(--seccion); }
.contacto__vias .entrada { max-width: 32ch; }
.contacto__vias .heroe__acciones { justify-content: flex-end; }
.contacto__vias .datos { justify-items: end; }
.formulario { display: grid; gap: .4rem; max-width: 30rem; }
.formulario h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
.formulario__ayuda { margin: 0 0 .6rem; font-size: .92rem; color: var(--tinta-2); }
.formulario label { margin-top: .7rem; font-size: .95rem; font-weight: 600; }
.formulario label span { font-weight: 400; color: var(--tinta-2); }
.formulario input:not([type="radio"]):not([type="checkbox"]), .formulario textarea {
  width: 100%; min-height: 3rem; padding: .7rem .9rem; border: 1px solid rgb(93 77 72 / .45); border-radius: 2px;
  background: var(--crema); color: var(--tinta); font: inherit;
}
.formulario textarea { resize: vertical; }
.formulario input:focus-visible, .formulario textarea:focus-visible { border-color: var(--granate); outline-offset: 2px; }
.formulario fieldset { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: .9rem 0 0; padding: 0; border: 0; }
.formulario legend { padding: 0; margin-bottom: .2rem; font-size: .95rem; font-weight: 600; }
.formulario .opcion { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; margin-top: 0; font-weight: 400; cursor: pointer; }
.formulario .opcion input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--granate); flex: none; }
.formulario .opcion--consentimiento { align-items: flex-start; margin-top: .8rem; font-size: .92rem; }
.formulario .opcion--consentimiento input { margin-top: .2rem; }
.formulario__rgpd summary { display: flex; align-items: center; gap: .6rem; padding: .3rem 0; list-style: none; font-size: .92rem; font-weight: 600; color: var(--granate); cursor: pointer; }
.formulario__rgpd summary::-webkit-details-marker { display: none; }
.formulario__rgpd summary::after { content: ""; width: .45rem; height: .45rem; border-right: 1.5px solid var(--granate); border-bottom: 1.5px solid var(--granate); transform: translateY(-.15rem) rotate(45deg); transition: transform .3s var(--curva); }
.formulario__rgpd[open] summary::after { transform: translateY(.05rem) rotate(225deg); }
.formulario__rgpd p { margin: .4rem 0 0; font-size: .92rem; color: var(--tinta-2); }
.formulario .boton { justify-self: start; min-width: 10rem; margin-top: 1rem; }
.formulario__aviso { margin: 0 0 .4rem; padding: .9rem 1rem; border: 1px solid var(--lomo); background: var(--papel); font-size: .92rem; }
.mapa { margin: 0; }
.mapa img { background: var(--papel); }
.mapa figcaption { margin-top: -.75rem; font-size: .92rem; color: var(--tinta-2); text-align: right; }

/* Blog */
.blog-lista { padding: clamp(2rem, 4vw, 3rem) 0 var(--seccion); }
.blog-lista .diptico { align-items: start; }
.blog-lista .izq { position: sticky; top: 2.5rem; }
.blog-lista .izq p { max-width: 30ch; color: var(--tinta-2); }
.entrada-fila__fecha { grid-column: 1; margin-top: .35rem; font-size: .92rem; color: var(--tinta-2); }
.entrada-fila h2 { font-size: 1.5rem; line-height: 1.2; }
.entrada-fila .i { grid-row: 1 / 4; }
.fila:hover h2 { color: var(--granate); }
.cab-entrada { padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem); }
.cab-entrada .migas + .diptico { margin-top: 2.5rem; align-items: end; }
.cab-entrada h1 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.12; }
.cab-entrada__meta { margin: 0; font-size: .92rem; color: var(--tinta-2); }
.articulo { padding: 0 0 var(--seccion); }
.articulo .diptico { align-items: start; }
.articulo__lado { position: sticky; top: 2.5rem; display: grid; gap: 2rem; }
.autora { display: grid; gap: .35rem; justify-items: end; }
.autora b { font: 400 1.3rem/1.2 var(--display); }
.autora span { font-size: .92rem; color: var(--tinta-2); }
.articulo__texto h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 2.75rem 0 1rem; }
.articulo__texto h2:first-child { margin-top: 0; }
.articulo__texto h3 { font-size: 1.4rem; margin: 2rem 0 .6rem; }
.articulo__texto p { max-width: 62ch; }
.legal__indice { display: grid; gap: .35rem; justify-items: end; font-size: .92rem; }
.legal__indice a { text-decoration: none; color: var(--tinta-2); }
.legal__indice a:hover { color: var(--granate); }
.legal { padding-top: clamp(2.5rem, 5vw, 4rem); }
.legal .articulo__texto h2 { scroll-margin-top: 1.5rem; }

/* Curso */
.preguntas li { padding: .35rem 0; font: 400 clamp(1.2rem, 1.8vw, 1.4rem)/1.35 var(--display); }

@media (max-width: 1024px) {
  .menu-movil__grupo { padding: .6rem 0 .1rem; font-size: .92rem; color: var(--tinta-2); }
}
@media (max-width: 767px) {
  .bloque .izq h2, .blog-lista .izq, .articulo__lado { position: static; }
  .bloque__lado { position: static; }
  .bloque--foto .izq-foto, .sobre-heroe .marcador, .sobre-heroe .retrato { width: 70%; margin-left: 0; }
  .persona img { width: 70%; }
  .contacto__vias .heroe__acciones { justify-content: flex-start; }
  .contacto__vias .datos, .autora, .legal__indice { justify-items: start; }
  .izq.prosa ul:not(.temas) li { padding: 0 0 0 1.1rem; margin-left: 0; }
  .izq.prosa ul:not(.temas) li::before { left: 0; right: auto; }
  .legal__indice { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
  .cab-entrada h1 { order: -1; }
  .cab-entrada .diptico > .der { margin-top: 0; padding-top: 0; border-top: 0; }
  .cab-entrada__meta { margin-top: .9rem; }
  .mapa figcaption { text-align: left; }
}
@media (max-width: 767px) {
  /* Cuando la mitad izquierda es solo el titular, sin filete entre titular y contenido */
  .bloque .diptico > .der, .faq .diptico > .der, .relacionadas .diptico > .der, .blog-lista .diptico > .der, .articulo .diptico > .der { margin-top: 1.5rem; padding-top: 0; border-top: 0; }
}

/* =========================================================
   Producción: banner de cookies, avisos del formulario y pie.
   Mismos tokens; nada de colores nuevos.
   ========================================================= */
/* Banner: una banda hueso pegada abajo, por encima del lomo y de la barra de cita.
   Texto en la mitad izquierda, hacia el lomo; los botones arrancan desde él. */
.cookies {
  position: fixed; inset: auto 0 0 0; z-index: 45;
  padding: 1.25rem 0 calc(1.25rem + env(safe-area-inset-bottom));
  background: var(--hueso); border-top: 1px solid var(--lomo);
  /* Tapa contenido, como el panel del submenú: usa su misma sombra, hacia arriba */
  box-shadow: 0 -16px 34px -20px rgb(47 34 38 / .4);
}
.cookies .izq p { max-width: 40ch; margin: 0 0 0 auto; font-size: .95rem; color: var(--tinta-2); }
.cookies .izq a { color: var(--granate); font-weight: 600; }
.cookies .izq .cookies__titulo { font: 400 1.45rem/1.08 var(--display); color: var(--tinta); margin-bottom: .45rem; }
.cookies .der { display: grid; gap: .75rem; align-content: center; justify-items: start; }
.cookies__botones { display: flex; flex-wrap: wrap; gap: .6rem; }
.cookies__botones .boton { min-width: 8.5rem; }
.cookies__opciones { display: grid; gap: .1rem; }
.cookies__opciones label { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; font-size: .95rem; cursor: pointer; }
.cookies__opciones input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--granate); }
.cookies__opciones small { color: var(--tinta-2); font-size: .85rem; }
.cookies__opciones input:disabled + span { color: var(--tinta-2); }
.enlace-boton {
  padding: .3rem 0; border: 0; background: none; font: 600 .95rem/1.2 var(--texto); color: var(--granate);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; cursor: pointer;
}

.pie__cookies { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.pie__cookies:hover { color: var(--crema); text-decoration: underline; }

.formulario__trampa { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }
.formulario__aviso--error { border-color: var(--granate); color: var(--tinta); }
.formulario .boton[disabled] { opacity: .65; cursor: progress; }

@media (max-width: 767px) {
  .cookies { padding-top: 1rem; max-height: 85vh; overflow-y: auto; }
  .cookies .izq p { margin-left: 0; }
  .cookies .diptico > .der { margin-top: 1rem; padding-top: 0; border-top: 0; }
  .cookies__botones { justify-self: stretch; }
  .cookies__botones .boton { flex: 1 1 8rem; min-width: 0; }
}

/* =========================================================
   06-11-2026 · Ajustes de JD a partir de las referencias de la clienta:
   botones redondeados, menos huecos, fotos cálidas, iconos de línea
   y el dibujo de las flores del logotipo antiguo como elemento gráfico.
   ========================================================= */
.boton { border-radius: 999px; padding-inline: 1.6rem; }
.formulario input:not([type="radio"]):not([type="checkbox"]), .formulario textarea { border-radius: 6px; }

/* El dibujo de las flores: máscara teñida con la paleta (granate a media tinta) */
.flor {
  display: block; width: clamp(7rem, 11vw, 10rem); aspect-ratio: 480 / 502; margin: 2rem 0 0 auto;
  background: var(--granate); opacity: .75;
  -webkit-mask: url("/assets/grafico/flor.webp") center / contain no-repeat;
  mask: url("/assets/grafico/flor.webp") center / contain no-repeat;
}
/* En la banda granate del cierre, en crema, sobre el lomo */
.cierre .sobre-lomo::before {
  content: ""; display: block; width: 5.5rem; aspect-ratio: 480 / 502; margin: 0 auto 1.25rem;
  background: var(--crema); opacity: .55;
  -webkit-mask: url("/assets/grafico/flor.webp") center / contain no-repeat;
  mask: url("/assets/grafico/flor.webp") center / contain no-repeat;
}

/* Cursos · «Cómo te puede ayudar»: foto cálida pegada al lomo y los puntos con su icono */
/* Los puntos llegan desde la derecha: sin esto, en móvil ensanchan la página antes de entrar */
.ayuda { overflow-x: clip; }
.ayuda .diptico { align-items: center; }
.ayuda__foto img { width: 82%; margin-left: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.ayuda h2 { font-size: clamp(2rem, 3.4vw, 3rem); margin-bottom: 1rem; }
.ayuda__intro { color: var(--tinta-2); max-width: 44ch; margin-bottom: 1.5rem; }
.iconos { display: grid; gap: .9rem; max-width: 34rem; margin-bottom: 1.75rem; }
.iconos li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; }
/* Un solo tamaño de icono en toda la web (06-11, JD: «como estos», los de los motivos) */
.iconos__marco { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--lomo); border-radius: 50%; color: var(--granate); background: var(--hueso); }
.iconos__marco .i { width: 1.3rem; height: 1.3rem; }
.ayuda .nota { max-width: 34rem; margin-bottom: 1.25rem; }

/* Movimiento: la foto se despliega desde el lomo y los puntos llegan hacia él, como las mitades del H1.
   Solo con animaciones ligadas al scroll y sin movimiento reducido; si no, todo se ve quieto y completo. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ayuda__foto img { animation: desde-lomo var(--curva) both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    .iconos li { animation: hacia-lomo var(--curva) both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  }
}
@keyframes desde-lomo { from { clip-path: inset(0 0 0 60%); } }
@keyframes hacia-lomo { from { transform: translateX(1.5rem); opacity: .6; } }

@media (max-width: 767px) {
  .ayuda__foto img { width: 100%; aspect-ratio: 4 / 3; }
  .flor { margin-left: 0; }
}

/* Páginas de terapia · motivos con icono: el círculo va del lado del lomo, a los dos lados */
.motivos--iconos li { display: grid; grid-template-columns: auto 1fr; gap: 0 1.1rem; align-items: start; }
.motivos--iconos .izq li { grid-template-columns: 1fr auto; }
.motivos--iconos .izq li .iconos__marco { order: 2; }
.motivos--iconos .iconos__marco { background: var(--papel); }
/* Mitades (posparto, infidelidad y celos): un icono sobre cada titular */
.mitades .iconos__marco { margin-bottom: 1rem; }
@media (max-width: 767px) {
  .motivos--iconos .izq li { grid-template-columns: auto 1fr; }
  .motivos--iconos .izq li .iconos__marco { order: 0; }
  /* En móvil las dos mitades son una sola lista: sin pliegue entre ellas */
  .motivos--iconos .diptico > .der { margin-top: 0; padding-top: 0; border-top: 0; }
}

/* Portada · otros temas con icono a la izquierda de cada fila */
.fila--icono { grid-template-columns: auto 1fr auto; column-gap: 1.25rem; }
.fila--icono > .iconos__marco { grid-row: 1 / 3; align-self: center; }
.fila--icono p { grid-column: 2; }
.fila--icono > .i { grid-column: 3; }

/* Portada · pasos en horizontal (06-11, JD): tres columnas con su icono.
   La franja lleva fondo propio y tapa el lomo, para que no tache la columna del medio. */
.pasos__fila {
  --g: clamp(1.5rem, 4vw, 3.5rem);
  position: relative; z-index: 31; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g);
  margin: 0; padding: 0; list-style: none; background: var(--hueso);
}
/* Sin línea horizontal entre los pasos: choca con el lomo (JD, 06-11). En móvil, sin lomo, sí hay una vertical */
.pasos__fila .paso { padding: 0; }
.pasos__fila .iconos__marco { position: relative; }
.pasos__fila h3 { font-size: 1.45rem; margin: 1.1rem 0 .4rem; }
.pasos__fila p { margin: 0; color: var(--tinta-2); max-width: 32ch; }
@media (max-width: 767px) {
  .pasos__fila { grid-template-columns: 1fr; }
  .pasos__fila::before { content: ""; position: absolute; top: 1.375rem; bottom: 1.375rem; left: 1.375rem; width: 1px; background: var(--lomo); }
  .pasos__fila .paso { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; }
  .pasos__fila .iconos__marco { grid-row: 1 / 3; }
  .pasos__fila h3 { margin-top: .6rem; }
}

/* Contacto · el mapa sube a la mitad izquierda, bajo los datos, con su texto y el enlace (06-11, JD) */
.contacto__llegar { display: grid; justify-items: end; gap: 1rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--lomo); }
.contacto__llegar h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); }
.contacto__llegar .mapa { width: 100%; max-width: 32rem; }
.contacto__llegar .mapa figcaption { margin-top: .5rem; }
.contacto__llegar p { max-width: 40ch; margin: 0; color: var(--tinta-2); }
@media (max-width: 767px) { .contacto__llegar { justify-items: start; } }