/* Fuentes alojadas en el propio servidor (Fraunces y Figtree, licencia OFL).
   Antes venían de Google Fonts: cada visita mandaba la IP del paciente a Google
   y la página esperaba a dos conexiones más. Solo alfabeto latino. */
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/figtree-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/figtree-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url(../fonts/fraunces-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url(../fonts/fraunces-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(../fonts/fraunces-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(../fonts/fraunces-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Psicogabinete Retiro — sistema visual
   Colores tierra de la identidad de 2025: terracota del sello, crema
   melocotón, rosa arena y papel, con el azul marino del logo como
   color secundario. Tipografía de titulares en serif suave.
   ============================================================ */

/* ---------------------------------------------------------- tokens */
:root{
  /* superficies */
  --fondo:      #fdf8f3;
  --crema:      #f9ebdb;
  --crema-2:    #f1ddcf;
  --rosa:       #f5e2d7;
  --papel:      #ffffff;

  /* tinta */
  --tinta:      #3b2624;
  --tinta-2:    #735853;   /* texto del cuerpo: más claro, sigue por encima de 5:1 */
  --tinta-3:    #8a6c63;

  /* marca */
  --marca:      #b05d5c;   /* terracota del sello */
  --marca-osc:  #9c4d4c;   /* para texto pequeño y botones: cumple contraste */
  --marca-cla:  #d4958d;
  --melocoton:  #f2c9a0;   /* las manchas que acompañan a los titulares */
  --acento:     #c27a45;   /* caramelo: estrellas y detalles */
  --taupe:      #8c6a60;
  --azul:       #3d5a86;
  --azul-osc:   #003870;   /* azul marino del logo */
  --sello:      #bd5759;

  /* superficies de marca que se mantienen oscuras en los dos modos */
  --bloque-marca: #a95655;
  --bloque-tinta: #3a2322;
  --sobre-oscuro: #fcf4ec;

  /* trazos y sombras */
  --linea:      #ecdacd;
  --linea-2:    #dfc6b7;
  --sombra-s:   0 1px 2px rgba(59,38,36,.05), 0 4px 14px -6px rgba(59,38,36,.10);
  --sombra-m:   0 2px 6px rgba(59,38,36,.06), 0 18px 40px -20px rgba(59,38,36,.22);
  --sombra-g:   0 4px 12px rgba(59,38,36,.07), 0 40px 80px -32px rgba(59,38,36,.30);

  /* medidas */
  --env:        1200px;
  --env-ancho:  1400px;
  --env-estr:   740px;
  --radio-s:    10px;
  --radio:      18px;
  --radio-g:    28px;
  --hueco:      clamp(2.2rem, 4vw, 3.4rem);
  --seccion:    clamp(4.5rem, 9vw, 8rem);
  --cabecera:   76px;

  /* tipografía */
  --display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --texto:   "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;

  --tr: 260ms cubic-bezier(.22,.61,.36,1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --fondo:     #1c1413;
    --crema:     #251a18;
    --crema-2:   #2e201e;
    --rosa:      #2a1d1b;
    --papel:     #241917;
    --tinta:     #f3e6dd;
    --tinta-2:   #e0cfc6;
    --tinta-3:   #a88b80;
    --marca:     #e09a8f;
    --marca-osc: #efb3a8;
    --marca-cla: #9b5a52;
    --melocoton: #6e4a33;
    --acento:    #e0a36f;
    --taupe:     #b7988c;
    --azul:      #8fb0dd;
    --azul-osc:  #a9c4ea;
    --linea:     #3b2a27;
    --linea-2:   #4d3733;
    --sombra-s:  0 1px 2px rgba(0,0,0,.30), 0 4px 14px -6px rgba(0,0,0,.45);
    --sombra-m:  0 2px 6px rgba(0,0,0,.35), 0 18px 40px -20px rgba(0,0,0,.60);
    --sombra-g:  0 4px 12px rgba(0,0,0,.40), 0 40px 80px -32px rgba(0,0,0,.70);
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"]{
  --fondo:#1c1413; --crema:#251a18; --crema-2:#2e201e; --rosa:#2a1d1b; --papel:#241917;
  --tinta:#f3e6dd; --tinta-2:#e0cfc6; --tinta-3:#a88b80;
  --marca:#e09a8f; --marca-osc:#efb3a8; --marca-cla:#9b5a52; --melocoton:#6e4a33; --acento:#e0a36f;
  --taupe:#b7988c; --azul:#8fb0dd; --azul-osc:#a9c4ea;
  --linea:#3b2a27; --linea-2:#4d3733;
  color-scheme: dark;
}

/* ---------------------------------------------------------- base */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--cabecera) + 18px); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--fondo);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:clamp(1rem, .96rem + .2vw, 1.08rem);
  line-height:1.72;
  font-weight:360;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
/* <picture> no debe interferir en la maquetación: la <img> hereda el sitio del contenedor */
picture{ display:contents; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
fieldset{ min-width:0; }
::selection{ background:var(--marca); color:#fff; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.015em;
  margin:0 0 .5em;
  font-variation-settings:"SOFT" 20, "WONK" 0;
  text-wrap:balance;
}
h1{ font-size:clamp(2.4rem, 1.5rem + 3.9vw, 4.6rem); }
h2{ font-size:clamp(1.9rem, 1.3rem + 2.5vw, 3.1rem); }
h3{ font-size:clamp(1.3rem, 1.1rem + .9vw, 1.7rem); }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

/* ---------------------------------------------------------- utilidades */
.env{ width:min(100% - 2.6rem, var(--env)); margin-inline:auto; }
.env-ancho{ width:min(100% - 2.6rem, var(--env-ancho)); margin-inline:auto; }
.env-estr{ width:min(100% - 2.6rem, var(--env-estr)); margin-inline:auto; }
@media (max-width:640px){ .env,.env-ancho,.env-estr{ width:calc(100% - 2rem); } }

.seccion{ padding-block:var(--seccion); position:relative; }
.seccion--crema{ background:var(--crema); }
.seccion--rosa{ background:var(--rosa); }
.seccion--marca{ background:var(--bloque-marca); color:var(--sobre-oscuro); }
.seccion--marca h2,.seccion--marca h3{ color:#fff; }

.solo-lectores{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.antetitulo{
  font-family:var(--display);
  font-size:clamp(1rem, .96rem + .2vw, 1.12rem); font-weight:400; font-style:italic;
  letter-spacing:0; text-transform:none;
  color:var(--marca); margin:0 0 .55rem; display:block;
}
.antetitulo--centro{ text-align:center; }
.seccion--marca .antetitulo{ color:#fde8d6; }

.entradilla{ font-size:clamp(1.05rem,1rem + .45vw,1.28rem); color:var(--tinta-2); max-width:60ch; line-height:1.68; }
.centro{ text-align:center; }
.centro .antetitulo{ text-align:center; }
.centro .entradilla{ margin-inline:auto; }

.cabecera-seccion{ max-width:64ch; margin-bottom:clamp(2.4rem,4vw,3.6rem); }
.cabecera-seccion.centro{ margin-inline:auto; }

/* ---------------------------------------------------------- botones */
.btn{
  --btn-fondo:var(--marca-osc); --btn-texto:#fff;
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  padding:.92rem 1.65rem; border-radius:100px; border:1px solid transparent;
  background:var(--btn-fondo); color:var(--btn-texto);
  font-size:.97rem; font-weight:600; letter-spacing:-.005em; text-decoration:none;
  cursor:pointer; overflow:hidden; isolation:isolate;
  transition:transform var(--tr), box-shadow var(--tr), background var(--tr), color var(--tr), border-color var(--tr);
}
/* barrido: una hoja de color cruza el botón al pasar el ratón */
.btn::before{
  content:""; position:absolute; inset:-1px; z-index:-1;
  background:linear-gradient(100deg, var(--acento) 0%, var(--marca) 55%, var(--sello) 100%);
  transform:translateX(-101%); transition:transform 520ms cubic-bezier(.22,.61,.36,1);
}
.btn:hover::before,.btn:focus-visible::before{ transform:translateX(0); }
.btn:hover,.btn:focus-visible{ transform:translateY(-2px); box-shadow:var(--sombra-m); color:#fff; }
.btn:active{ transform:translateY(0); }

.btn-linea{ --btn-fondo:transparent; --btn-texto:var(--tinta); border-color:var(--linea-2); }
.btn-linea:hover,.btn-linea:focus-visible{ border-color:transparent; }
.btn-claro{ --btn-fondo:rgba(255,255,255,.94); --btn-texto:var(--tinta); backdrop-filter:blur(6px); }
.btn-azul{ --btn-fondo:var(--azul-osc); }
.btn-sm{ padding:.62rem 1.15rem; font-size:.88rem; }
.btn-gr{ padding:1.05rem 2rem; font-size:1.03rem; }

.flecha{ width:1.05em; height:1.05em; flex:none; position:relative; transition:transform var(--tr); }
.flecha::before{
  content:""; position:absolute; inset:0;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.btn:hover .flecha{ transform:translateX(4px); }

.enlace-flecha{
  display:inline-flex; align-items:center; gap:.45rem; text-decoration:none;
  font-weight:600; font-size:.95rem; color:var(--marca);
  padding-bottom:2px; transition:gap var(--tr), color var(--tr);
}
.enlace-flecha:hover{ gap:.75rem; color:var(--marca-osc); }

/* ---------------------------------------------------------- cabecera */
.hdr{
  position:fixed; inset:0 0 auto; z-index:90;
  height:var(--cabecera);
  display:flex; align-items:center;
  background:color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--linea);
  transition:background var(--tr), border-color var(--tr), height var(--tr);
}
/* con el menú abierto la cabecera es opaca: si no, se transparentaba el texto de detrás */
.hdr[data-menu-abierto]{ background:var(--fondo); z-index:100; }   /* por encima del aviso de cookies y la barra de abajo */
.hdr--transparente{ background:transparent; border-color:transparent; }
.hdr--transparente .hdr-nav > li > a,
.hdr--transparente .hdr-tel,
.hdr--transparente .hdr-menu{ color:#fff; }
/* el sello va en terracota sobre fondo claro y en crema sobre la foto o en modo oscuro */
.logo-img--claro{ display:none; }
.hdr--transparente .logo-img--color{ display:none; }
.hdr--transparente .logo-img--claro{ display:block; filter:drop-shadow(0 1px 3px rgba(0,0,0,.45)); }
.hdr--transparente .btn-linea{ --btn-texto:#fff; border-color:rgba(255,255,255,.5); }

.hdr-caja{ display:flex; align-items:center; gap:1.6rem; width:min(100% - 2.6rem, var(--env-ancho)); margin-inline:auto; }
.logo{ display:flex; align-items:center; flex:none; text-decoration:none; }
.logo-img{ height:64px; width:auto; }
@media (max-width:520px){ .logo-img{ height:50px; } }

.hdr-nav{ display:flex; align-items:center; gap:.15rem; margin-inline:auto; }
.hdr-nav > li{ list-style:none; position:relative; }
.hdr-nav a{
  display:block; padding:.55rem .82rem; border-radius:99px; text-decoration:none;
  font-size:.94rem; font-weight:500; color:var(--tinta-2);
  transition:color var(--tr), background var(--tr);
}
.hdr-nav > li > a:hover,.hdr-nav > li > a:focus-visible{ color:var(--tinta); background:color-mix(in srgb, var(--marca) 16%, transparent); }
.hdr--transparente .hdr-nav > li > a:hover,
.hdr--transparente .hdr-nav > li > a:focus-visible{ color:#fff; background:rgba(255,255,255,.20); }
.hdr-nav a.activo{ color:var(--marca); font-weight:600; }
.hdr--transparente .hdr-nav > li > a.activo{ color:#fff; text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1.5px; }

.hdr-acciones{ display:flex; align-items:center; gap:.7rem; flex:none; }
/* el menú se centra en el hueco entre el sello y los botones; en el móvil,
   donde la lista va en un panel aparte, el mismo margen empuja los botones
   al borde derecho */
.hdr-caja > nav{ margin-inline:auto; }
.hdr-tel{ display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; font-weight:600; font-size:.94rem; color:var(--tinta-2); }
.hdr-tel:hover{ color:var(--marca); }
@media (max-width:1080px){ .hdr-tel{ display:none; } }

/* submenú */
.tiene-sub > a::after{
  content:""; display:inline-block; width:.5em; height:.5em; margin-left:.35em;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg); opacity:.55;
}
.sub{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translate(-50%,8px);
  min-width:290px; padding:.6rem; margin:0; list-style:none;
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio);
  box-shadow:var(--sombra-g);
  opacity:0; visibility:hidden; transition:opacity var(--tr), transform var(--tr), visibility var(--tr);
}
.sub::before{ content:""; position:absolute; inset:-12px 0 100%; }
.tiene-sub:hover .sub,.tiene-sub:focus-within .sub,.sub.abierto{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.sub a{ display:block; padding:.6rem .8rem; border-radius:10px; font-size:.93rem; color:var(--tinta-2); }
.hdr--transparente .sub a{ color:var(--tinta-2); }            /* nunca blanco sobre el panel claro */
.sub a:hover,.sub a:focus-visible,
.hdr--transparente .sub a:hover,
.hdr--transparente .sub a:focus-visible{ background:var(--crema); color:var(--marca-osc); }
.sub a:hover small,.sub a:focus-visible small{ color:var(--tinta-2); }
.sub small{ display:block; font-size:.78rem; color:var(--tinta-3); line-height:1.4; margin-top:.1rem; }

/* menú móvil */
.hdr-menu{
  display:none; width:44px; height:44px; border:0; background:transparent; color:var(--tinta);
  border-radius:12px; cursor:pointer; align-items:center; justify-content:center; flex:none;
}
.hdr-menu span{ display:block; width:21px; height:1.6px; background:currentColor; position:relative; transition:transform var(--tr), background var(--tr); }
.hdr-menu span::before,.hdr-menu span::after{ content:""; position:absolute; left:0; width:21px; height:1.6px; background:currentColor; transition:transform var(--tr), top var(--tr); }
.hdr-menu span::before{ top:-7px; } .hdr-menu span::after{ top:7px; }
.hdr-menu[aria-expanded="true"] span{ background:transparent; }
.hdr-menu[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.hdr-menu[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

@media (max-width:1000px){
  .hdr-menu{ display:flex; }
  .hdr-nav{
    position:fixed; inset:var(--cabecera) 0 auto; flex-direction:column; align-items:stretch;
    gap:0; padding:1rem 1.3rem 2rem; margin:0;
    background:var(--fondo);
    /* ocupa toda la pantalla bajo la cabecera: si midiera solo lo que sus
       enlaces, debajo asomaba la página y parecía que el menú se rompía */
    height:calc(100vh - var(--cabecera)); height:calc(100dvh - var(--cabecera));
    overflow-y:auto; overscroll-behavior:contain;
    padding-bottom:calc(2rem + env(safe-area-inset-bottom, 0px));
    transform:translateY(-12px); opacity:0; visibility:hidden;
    transition:opacity var(--tr), transform var(--tr), visibility var(--tr);
  }
  .hdr-nav.abierto{ opacity:1; visibility:visible; transform:translateY(0); }
  .hdr-nav a{ padding:.85rem .4rem; font-size:1.05rem; border-radius:0; border-bottom:1px solid var(--linea); color:var(--tinta); }
  .hdr--transparente .hdr-nav a{ color:var(--tinta); }
  /* En el móvil el desplegable es una lista dentro del menú, no un panel
     flotante: se quita el centrado con transform, que era lo que lo sacaba
     media pantalla a la izquierda, y arranca cerrado. */
  .sub{
    position:static; transform:none; opacity:1; visibility:visible;
    box-shadow:none; border:0; background:transparent; min-width:0; width:auto;
    padding:0 0 0 .8rem; display:none;
  }
  .sub.abierto{ display:block; padding-bottom:.5rem; }
  /* En el iPhone el toque deja el elemento en :hover, y la regla de escritorio
     «.tiene-sub:hover .sub» (más específica) volvía a meter el translate(-50%):
     el desplegable salía cortado por la izquierda. */
  .tiene-sub:hover .sub,.tiene-sub:focus-within .sub,.sub.abierto{ transform:none; }
  .hdr-nav > li > a:hover{ background:none; }
  .hdr-nav > li > a[aria-expanded="true"]{ color:var(--marca-osc); }
  .sub a{ border-bottom:1px solid color-mix(in srgb, var(--linea) 70%, transparent); font-size:.95rem; }
  .sub--equipo{ min-width:0; }
  .sub--equipo a{ padding:.6rem .2rem; }
  .tiene-sub > a::after{ float:right; margin-top:.45em; transition:transform var(--tr); }
  .tiene-sub > a[aria-expanded="true"]::after{ transform:translateY(2px) rotate(-135deg); }
}

/* ---------------------------------------------------------- portada */
.portada{
  position:relative; min-height:min(94svh, 860px);
  display:flex; align-items:flex-end;
  padding-top:calc(var(--cabecera) + 3rem); padding-bottom:clamp(3rem,7vw,5.5rem);
  color:#fff; overflow:hidden; isolation:isolate;
}
.portada-fondo{ position:absolute; inset:0; z-index:-2; }
.portada-fondo img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.portada::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, rgba(46,26,24,.86) 0%, rgba(46,26,24,.52) 42%, rgba(46,26,24,.30) 72%, rgba(46,26,24,.42) 100%),
    radial-gradient(120% 80% at 15% 100%, rgba(169,86,85,.55), transparent 60%);
}
/* en la portada el texto va a la izquierda: refuerzo el velo por ese lado */
.portada--home::after{
  background:
    linear-gradient(100deg, rgba(42,24,22,.88) 0%, rgba(42,24,22,.72) 34%, rgba(42,24,22,.34) 58%, rgba(42,24,22,.24) 100%),
    linear-gradient(to top, rgba(42,24,22,.55), transparent 45%);
}
@media (max-width:1000px){
  .portada--home::after{ background:linear-gradient(to top, rgba(42,24,22,.9) 0%, rgba(42,24,22,.6) 55%, rgba(42,24,22,.45) 100%); }
}
.portada-txt{ max-width:min(100%, 44ch); }
.portada h1{ color:#fff; margin-bottom:1.1rem; font-weight:300; }
.portada h1 em{ font-style:italic; color:#f9ddc1; font-variation-settings:"WONK" 1; }
.portada .entradilla{ color:rgba(255,255,255,.96); font-size:clamp(1.08rem,1rem + .55vw,1.32rem); }
.portada-antetitulo{
  display:inline-flex; align-items:center; gap:.55rem; margin-bottom:1.4rem;
  padding:.42rem .95rem .42rem .55rem; border-radius:99px;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(8px);
  font-size:.82rem; letter-spacing:.03em; color:#fff;
}
.portada-antetitulo .punto{ width:7px; height:7px; border-radius:50%; background:#f2c9a0; box-shadow:0 0 0 4px rgba(242,201,160,.3); }
.portada-botones{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }

/* datos rápidos al pie de la portada */
.portada-datos{
  display:flex; flex-wrap:wrap; gap:.4rem 2.2rem; margin-top:2.6rem;
  padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.2);
  font-size:.9rem; color:rgba(255,255,255,.92);
}
.portada-datos strong{ color:#fff; font-weight:600; }

/* hoja de ginkgo decorativa */
.ginkgo{ position:absolute; pointer-events:none; opacity:.07; z-index:0; color:var(--marca); }
.ginkgo svg{ width:100%; height:auto; display:block; }

/* ---------------------------------------------------------- cabeceras internas */
.cabecera-pag{
  position:relative; padding-top:calc(var(--cabecera) + clamp(3.2rem,6vw,5rem));
  padding-bottom:clamp(2.6rem,5vw,4rem);
  background:var(--crema); overflow:hidden;
}
.cabecera-pag h1{ margin-bottom:.35rem; }
.cabecera-pag .entradilla{ margin-top:1rem; }
.cabecera-pag--foto{ color:#fff; background:var(--tinta); }
.cabecera-pag--foto h1{ color:#fff; }
.cabecera-pag--foto .entradilla{ color:rgba(255,255,255,.95); }
.cabecera-pag--foto .miga a,.cabecera-pag--foto .miga{ color:rgba(255,255,255,.72); }
.cabecera-pag-fondo{ position:absolute; inset:0; z-index:0; }
.cabecera-pag-fondo img{ width:100%; height:100%; object-fit:cover; }
.cabecera-pag-fondo::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(46,26,24,.88), rgba(46,26,24,.55)); }
.cabecera-pag > .env,.cabecera-pag > .env-estr{ position:relative; z-index:1; }

.miga{ font-size:.85rem; color:var(--tinta-3); margin-bottom:1rem; display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; }
.miga a{ text-decoration:none; }
.miga a:hover{ text-decoration:underline; }
.miga span[aria-hidden]{ opacity:.5; }

/* ---------------------------------------------------------- rejillas y tarjetas */
.rejilla{ display:grid; gap:clamp(1.2rem,2.2vw,1.9rem); }
.rejilla-2{ grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); }
.rejilla-3{ grid-template-columns:repeat(auto-fit,minmax(min(276px,100%),1fr)); }
.rejilla-4{ grid-template-columns:repeat(auto-fit,minmax(min(212px,100%),1fr)); }
/* página de equipo: las fundadoras arriba, centradas, y el resto debajo,
   todas las tarjetas del mismo ancho (seis columnas, dos por tarjeta) */
@media (min-width:761px){
  .rejilla-equipo{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .rejilla-equipo > *{ grid-column:span 2; }
  .rejilla-equipo > :nth-child(1){ grid-column:2 / span 2; }
  .rejilla-equipo > :nth-child(2){ grid-column:4 / span 2; }
  /* en la portada, algo más estrecha para que las tarjetas no crezcan tanto */
  .rejilla-equipo--compacta{ max-width:940px; margin-inline:auto; }
}
/* columna estrecha de texto + columna ancha de contenido; en móvil, una sola */
.rejilla-lado{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; }
@media (max-width:860px){ .rejilla-lado{ grid-template-columns:minmax(0,1fr); gap:1.8rem; } }

.tarjeta{
  position:relative; display:flex; flex-direction:column;
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio);
  overflow:hidden; text-decoration:none; color:inherit;
  transition:transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
a.tarjeta:hover,a.tarjeta:focus-visible{ transform:translateY(-4px); box-shadow:var(--sombra-m); border-color:var(--linea-2); }
.tarjeta-foto{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--crema-2); }
.tarjeta-foto img{ width:100%; height:100%; object-fit:cover; transition:transform 700ms cubic-bezier(.22,.61,.36,1); }
a.tarjeta:hover .tarjeta-foto img{ transform:scale(1.05); }
.tarjeta-cuerpo{ padding:clamp(1.2rem,2vw,1.7rem); display:flex; flex-direction:column; gap:.6rem; flex:1; }
.tarjeta-cuerpo h2, .tarjeta-cuerpo h3{ margin:0; font-size:1.24rem; }
.tarjeta-cuerpo p{ color:var(--tinta-2); font-size:.96rem; line-height:1.6; margin:0; }
.tarjeta-pie{ margin-top:auto; padding-top:.4rem; }

/* especialidades: tarjeta con foto de fondo y velo */
.espec{
  position:relative; min-height:288px; display:flex; align-items:flex-end;
  border-radius:var(--radio); overflow:hidden; text-decoration:none; color:#fff;
  isolation:isolate; transition:transform var(--tr), box-shadow var(--tr);
}
.espec img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 800ms cubic-bezier(.22,.61,.36,1); }
.espec::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(46,26,24,.9) 0%, rgba(46,26,24,.5) 48%, rgba(46,26,24,.18) 100%);
  transition:background var(--tr);
}
.espec:hover{ transform:translateY(-4px); box-shadow:var(--sombra-m); }
.espec:hover img{ transform:scale(1.06); }
.espec:hover::after{ background:linear-gradient(to top, rgba(66,34,32,.94) 0%, rgba(120,56,52,.62) 55%, rgba(46,26,24,.25) 100%); }
.espec-cuerpo{ padding:1.5rem; width:100%; }
.espec-cuerpo h2, .espec-cuerpo h3{ color:#fff; font-size:1.3rem; margin:0 0 .4rem; }
.espec-cuerpo p{
  margin:0; font-size:.92rem; line-height:1.55; color:rgba(255,255,255,.94);
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height 420ms cubic-bezier(.22,.61,.36,1), opacity var(--tr), margin var(--tr);
}
.espec:hover p,.espec:focus-visible p{ max-height:9rem; opacity:1; margin-top:.4rem; }
@media (hover:none){ .espec-cuerpo p{ max-height:9rem; opacity:1; } }

/* ---------------------------------------------------------- equipo */
.persona{ text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.persona-foto{
  position:relative; aspect-ratio:3/4; border-radius:var(--radio); overflow:hidden;
  background:var(--crema-2); box-shadow:var(--sombra-s);
  transition:transform var(--tr), box-shadow var(--tr);
}
.persona-foto img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; transition:transform 700ms cubic-bezier(.22,.61,.36,1); }
.persona:hover .persona-foto{ transform:translateY(-4px); box-shadow:var(--sombra-m); }
.persona:hover .persona-foto img{ transform:scale(1.04); }
.persona-rol{
  position:absolute; left:.75rem; bottom:.75rem; right:.75rem;
  font-family:var(--display); font-size:.86rem; letter-spacing:0; text-transform:none; font-weight:400;
  color:#fff; background:rgba(46,26,24,.5); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18); border-radius:99px; padding:.34rem .8rem;
  text-align:center;
}
.persona-nombre{ font-family:var(--display); font-size:1.34rem; margin:1rem 0 .1rem; line-height:1.2; }
.persona-cargo{ font-size:.9rem; color:var(--tinta-3); margin:0; }
/* En el ordenador el título va sobre la foto; en el móvil la foto es tan
   pequeña que la etiqueta tapaba la cara, así que pasa a ir como texto. */
.persona-titulo{ display:none; }
@media (max-width:760px){
  .persona-rol{ display:none; }
  .persona-titulo{ display:block; font-size:.8rem; color:var(--marca-osc); font-weight:600; margin:0 0 .15rem; line-height:1.35; }
}

.etiquetas{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0; list-style:none; }
.etiquetas li{
  font-size:.79rem; padding:.3rem .72rem; border-radius:99px;
  background:color-mix(in srgb, var(--marca) 12%, transparent);
  color:var(--marca-osc); border:1px solid color-mix(in srgb, var(--marca) 22%, transparent);
}

/* ficha de persona */
.ficha{ display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:clamp(1.8rem,4vw,3.6rem); align-items:start; }
@media (max-width:860px){ .ficha{ grid-template-columns:1fr; } }
.ficha-foto{ border-radius:var(--radio-g); overflow:hidden; box-shadow:var(--sombra-m); position:sticky; top:calc(var(--cabecera) + 1.5rem); }
@media (max-width:860px){ .ficha-foto{ position:static; max-width:340px; } }
.ficha-dato{ display:flex; gap:.55rem; align-items:baseline; font-size:.92rem; color:var(--tinta-2); margin-top:.35rem; }
.ficha-dato b{ color:var(--tinta); font-weight:600; }

/* ---------------------------------------------------------- método (pasos) */
.pasos{ display:grid; gap:0; counter-reset:paso; }
.paso{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(1.2rem,3vw,2.4rem);
  padding-block:clamp(1.6rem,3vw,2.3rem); border-top:1px solid var(--linea);
}
.paso:last-child{ border-bottom:1px solid var(--linea); }
.paso-num{
  counter-increment:paso; font-family:var(--display); font-size:clamp(1.5rem,3vw,2.3rem);
  color:var(--marca); opacity:.65; line-height:1; min-width:2.4ch;
}
.paso-num::before{ content:counter(paso,decimal-leading-zero); }
.paso h3{ margin:0 0 .5rem; }
.paso p{ margin:0; color:var(--tinta-2); max-width:68ch; }

/* ---------------------------------------------------------- valores */
.valor{ padding:1.5rem 0 0; border-top:2px solid var(--marca); }
.valor .n{ font-family:var(--display); font-size:.95rem; color:var(--marca); letter-spacing:.06em; }
.valor h3{ font-size:1.18rem; margin:.5rem 0 .45rem; }
.valor p{ font-size:.94rem; color:var(--tinta-2); margin:0; line-height:1.62; }
.seccion--marca .valor{ border-color:rgba(255,255,255,.35); }
.seccion--marca .valor .n{ color:#fde8d6; }
.seccion--marca .valor p{ color:rgba(255,250,245,.95); }

/* ---------------------------------------------------------- tarifas */
.tarifa{
  display:flex; flex-direction:column; gap:.4rem;
  padding:clamp(1.4rem,2.6vw,2rem);
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio);
  transition:border-color var(--tr), transform var(--tr), box-shadow var(--tr);
}
.tarifa:hover{ border-color:var(--marca); transform:translateY(-3px); box-shadow:var(--sombra-s); }
.tarifa-nombre{ font-size:.98rem; font-weight:600; color:var(--tinta-2); }
.tarifa-precio{ font-family:var(--display); font-size:clamp(2.1rem,4vw,2.9rem); line-height:1; color:var(--marca-osc); }
.tarifa-nota{ font-size:.88rem; color:var(--tinta-3); margin:0; }
.tarifa--destacada{ background:var(--rosa); border-color:color-mix(in srgb, var(--marca) 35%, transparent); }
.tarifa--destacada .tarifa-precio{ color:var(--marca-osc); }

/* ---------------------------------------------------------- acordeón */
.acordeon{ border-top:1px solid var(--linea); }
.acordeon details{ border-bottom:1px solid var(--linea); }
.acordeon summary{
  list-style:none; cursor:pointer; padding:1.25rem 3rem 1.25rem 0; position:relative;
  font-family:var(--display); font-size:clamp(1.06rem,1rem + .35vw,1.24rem); line-height:1.35;
  transition:color var(--tr);
}
.acordeon summary::-webkit-details-marker{ display:none; }
.acordeon summary:hover{ color:var(--marca); }
.acordeon summary::after{
  content:""; position:absolute; right:.35rem; top:1.5rem;
  width:15px; height:15px;
  background:currentColor; opacity:.55;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform var(--tr), opacity var(--tr);
}
.acordeon details[open] summary{ color:var(--marca); }
.acordeon details[open] summary::after{ transform:rotate(135deg); opacity:.9; }
.acordeon-cuerpo{ padding:0 clamp(0px,3vw,3rem) 1.5rem 0; color:var(--tinta-2); max-width:78ch; }
.acordeon-cuerpo p{ margin:0 0 .9rem; }

/* ---------------------------------------------------------- reseñas */
.resenas{ display:flex; gap:1.2rem; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; padding-bottom:1rem; scrollbar-width:none; }
.resenas::-webkit-scrollbar{ display:none; }
.resena{
  flex:0 0 min(88vw, 380px); scroll-snap-align:start;
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio);
  padding:clamp(1.4rem,2.4vw,1.9rem); display:flex; flex-direction:column; gap:.9rem;
}
.estrellas{ display:flex; gap:.15rem; color:var(--acento); }
.estrellas svg{ width:16px; height:16px; }
.resena p{ margin:0; font-size:.96rem; line-height:1.65; color:var(--tinta-2); }
.resena footer{ margin-top:auto; padding-top:.4rem; font-size:.88rem; color:var(--tinta-3); border-top:1px solid var(--linea); }
.resena footer b{ color:var(--tinta); font-weight:600; }
.resenas-nav{ display:flex; gap:.5rem; justify-content:flex-end; margin-top:.4rem; }
.resenas-nav button{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--linea-2);
  background:transparent; color:var(--tinta-2); cursor:pointer; display:grid; place-items:center;
  transition:background var(--tr), color var(--tr), border-color var(--tr);
}
.resenas-nav button:hover{ background:var(--marca-osc); color:#fff; border-color:transparent; }

/* ---------------------------------------------------------- prosa */
.prosa{ max-width:70ch; }
.prosa > *:first-child{ margin-top:0; }
.prosa p{ margin:0 0 1.25em; color:var(--tinta-2); }
.prosa-h2{ font-size:clamp(1.5rem,1.25rem + 1.1vw,2.05rem); margin:2.2em 0 .6em; scroll-margin-top:calc(var(--cabecera) + 20px); }
.prosa-h3{ font-size:clamp(1.2rem,1.1rem + .5vw,1.42rem); margin:1.9em 0 .5em; color:var(--taupe); }
.prosa-lista{ margin:0 0 1.4em; padding-left:0; list-style:none; }
.prosa-lista li{ position:relative; padding-left:1.7rem; margin-bottom:.6rem; color:var(--tinta-2); }
.prosa-lista li::before{
  content:""; position:absolute; left:0; top:.36em; width:15px; height:15px;
  background:var(--marca); opacity:.8;
  -webkit-mask:url("../img/ginkgo.png") center/contain no-repeat;
          mask:url("../img/ginkgo.png") center/contain no-repeat;
}
/* si el navegador no admite máscaras, se ve el rombo de siempre */
@supports not ((-webkit-mask:url("")) or (mask:url(""))){
  .prosa-lista li::before{
    width:9px; height:9px; top:.62em;
    border-radius:50% 0 50% 50%; transform:rotate(45deg); opacity:.75;
  }
}
.prosa blockquote{
  margin:2em 0; padding:1.4rem 1.6rem; border-left:3px solid var(--marca);
  background:var(--crema); border-radius:0 var(--radio) var(--radio) 0;
}
.prosa blockquote span{ font-family:var(--display); font-size:1.2rem; line-height:1.45; color:var(--tinta); }
.prosa a{ color:var(--marca); text-underline-offset:3px; }
/* los botones dentro del texto no heredan el color de los enlaces:
   quedaba letra de color sobre fondo del mismo color */
.prosa a.btn, .prosa a.btn:hover, .prosa a.btn:focus-visible{ color:var(--btn-texto); text-decoration:none; }
.prosa-sigue{ font-weight:500; color:var(--tinta) !important; }
.prosa-sigue .enlace-flecha{ white-space:nowrap; text-decoration:none; font-weight:600; }

.cta-linea{
  margin:2.4em 0; padding:clamp(1.4rem,3vw,2rem);
  background:var(--rosa); border-radius:var(--radio);
  display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; justify-content:space-between;
}
.cta-linea p{ margin:0; flex:1 1 280px; color:var(--tinta); font-size:1.02rem; }

.indice{
  background:var(--crema); border-radius:var(--radio); padding:1.3rem 1.5rem; margin-bottom:2.2rem;
  border:1px solid var(--linea);
}
.indice h2{ font-family:var(--display); font-size:1rem; letter-spacing:0; text-transform:none; font-weight:400; font-style:italic; color:var(--tinta-3); margin:0 0 .7rem; }
.indice ol{ margin:0; padding-left:1.15rem; display:grid; gap:.35rem; }
.indice a{ color:var(--tinta-2); text-decoration:none; font-size:.94rem; }
.indice a:hover{ color:var(--marca); text-decoration:underline; }

/* ---------------------------------------------------------- blog */
.entrada-meta{ display:flex; flex-wrap:wrap; gap:.4rem .9rem; font-size:.85rem; color:var(--tinta-3); }
.entrada-meta time{ font-variant-numeric:tabular-nums; }
.blog-destacada{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(1.4rem,3vw,2.6rem); align-items:center; }
@media (max-width:860px){ .blog-destacada{ grid-template-columns:1fr; } }
.blog-destacada .tarjeta-foto{ aspect-ratio:16/10; border-radius:var(--radio); }

/* ---------------------------------------------------------- formulario */
.form{ display:grid; gap:.85rem; }
.form-fila{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); gap:.85rem; }
.campo{ display:flex; flex-direction:column; gap:.25rem; }
.campo label{ font-size:.82rem; font-weight:600; color:var(--tinta-2); }
.campo label .req{ color:var(--sello); }
.campo input,.campo select,.campo textarea{
  width:100%; padding:.6rem .85rem; border-radius:10px; font-size:.95rem;
  border:1px solid var(--linea-2); background:var(--papel); color:var(--tinta);
  transition:border-color var(--tr), box-shadow var(--tr), background var(--tr);
}
.campo textarea{ min-height:92px; resize:vertical; line-height:1.55; }
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; border-color:var(--marca);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--marca) 20%, transparent);
}
.campo select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23806d65' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .75rem center; background-size:17px; padding-right:2.1rem; }
.casilla{ display:flex; gap:.6rem; align-items:flex-start; font-size:.84rem; color:var(--tinta-2); line-height:1.5; }
.casilla input{ width:18px; height:18px; margin-top:.2rem; flex:none; accent-color:var(--marca); }
/* los dos párrafos de la presentación, con la misma voz tipográfica */
.presenta{ font-size:1rem; line-height:1.75; color:var(--tinta-2); margin:0 0 1rem; }
.presenta:last-of-type{ margin-bottom:0; }

/* La foto de la presentación mide 510 px de ancho y la columna es más ancha:
   sin esto, la imagen se queda a su tamaño y deja una franja blanca al lado. */
.foto-presenta{
  border-radius:var(--radio-g); overflow:hidden; box-shadow:var(--sombra-m);
  background:var(--crema-2);
}
.foto-presenta img{ width:100%; height:100%; object-fit:cover; aspect-ratio:3/2; }

/* cabecera de reseñas: el título a un lado y, al otro, el camino */
.cabecera-camino{
  max-width:none; display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr);
  align-items:center; gap:clamp(1.5rem,4vw,3.5rem);
}
.cabecera-camino > div:first-child{ max-width:34rem; }
.camino{ color:var(--marca); min-width:0; }
.camino svg{ display:block; width:100%; height:auto; overflow:visible; }
.caminante{ color:var(--marca-osc); }
@media (max-width:900px){
  .cabecera-camino{ grid-template-columns:minmax(0,1fr); gap:.6rem; }
  .camino{ max-width:560px; }
}
.resenas-media{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .5rem; margin:.7rem 0 0; color:var(--tinta-2); font-size:.95rem; }
.resenas-media .estrellas{ display:inline-flex; gap:1px; color:#c8912e; }
.resenas-media strong{ color:var(--tinta); }
.resenas-media a{ color:var(--marca); font-weight:600; }

.pista-contacto{ font-size:.82rem; color:var(--tinta-3); line-height:1.5; margin:.35rem 0 0; }
.pista-contacto strong{ color:var(--tinta-2); }
.campo input[aria-invalid="true"]{ border-color:var(--sello); box-shadow:0 0 0 3px color-mix(in srgb, var(--sello) 18%, transparent); }
.trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.aviso{ padding:1rem 1.2rem; border-radius:12px; font-size:.94rem; line-height:1.6; }
.aviso--ok{ background:color-mix(in srgb, var(--marca) 14%, transparent); border:1px solid color-mix(in srgb, var(--marca) 30%, transparent); color:var(--marca-osc); }
.aviso--error{ background:color-mix(in srgb, var(--sello) 14%, transparent); border:1px solid color-mix(in srgb, var(--sello) 32%, transparent); color:var(--acento); }

/* ---------------------------------------------------------- contacto */
.contacto-rejilla{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; }
@media (max-width:900px){ .contacto-rejilla{ grid-template-columns:1fr; } }
.dato{ display:flex; gap:1rem; align-items:flex-start; padding:1.1rem 0; border-bottom:1px solid var(--linea); }
.dato:first-of-type{ border-top:1px solid var(--linea); }
.dato-icono{ width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center; background:color-mix(in srgb, var(--marca) 13%, transparent); color:var(--marca-osc); }
.dato-icono svg{ width:19px; height:19px; }
.dato-txt{ display:flex; flex-direction:column; gap:.12rem; min-width:0; }
.dato-txt .et{ font-family:var(--display); font-size:.9rem; letter-spacing:0; text-transform:none; font-style:italic; color:var(--tinta-3); }
.dato-txt a,.dato-txt span{ font-size:1.02rem; color:var(--tinta); text-decoration:none; word-break:break-word; }
/* en pantallas táctiles, el correo y los teléfonos con altura suficiente para el dedo */
@media (pointer:coarse){ .dato-txt a{ display:inline-block; padding-block:.45rem; } }
/* la casilla de privacidad de los formularios, más fácil de marcar en el móvil */
input[type="checkbox"]{ width:22px; height:22px; accent-color:var(--marca-osc); flex:none; }
.dato-txt a:hover{ color:var(--marca); }

.mapa{ border-radius:var(--radio); overflow:hidden; border:1px solid var(--linea); background:var(--crema-2); }
.mapa iframe{ width:100%; height:var(--mapa-alto, 380px); border:0; display:block; filter:grayscale(.25) contrast(1.02); }
/* el recuadro que ocupa el sitio del mapa hasta que se pide */
.mapa--diferido{ min-height:var(--mapa-alto, 380px); display:grid; background:var(--rosa); }
@media (max-width:760px){ .mapa--diferido{ min-height:0; } }
.mapa-aviso{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.7rem; padding:1.6rem 1.2rem; }
.mapa-pin{ width:34px; height:34px; background:var(--marca); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat; }
.mapa-dir{ margin:0; color:var(--tinta-2); line-height:1.5; }
.mapa-dir strong{ color:var(--tinta); }
.mapa-acciones{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; }
.mapa-nota{ margin:0; font-size:.78rem; color:var(--tinta-3); max-width:32ch; }

/* ---------------------------------------------------------- tests */
.test-barra{ height:5px; background:var(--crema-2); border-radius:99px; overflow:hidden; margin-bottom:2rem; }
.test-barra i{ display:block; height:100%; background:linear-gradient(90deg, var(--melocoton), var(--marca)); border-radius:99px; transition:width 380ms cubic-bezier(.22,.61,.36,1); }
.pregunta{ padding:1.4rem 0; border-bottom:1px solid var(--linea); }
.pregunta p{ font-family:var(--display); font-size:1.14rem; line-height:1.4; margin:0 0 .95rem; }
.opciones{ display:flex; flex-wrap:wrap; gap:.5rem; }
.opciones label{
  position:relative; padding:.5rem 1rem; border-radius:99px; cursor:pointer;
  border:1px solid var(--linea-2); font-size:.89rem; color:var(--tinta-2);
  transition:background var(--tr), color var(--tr), border-color var(--tr);
}
.opciones input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.opciones label:has(input:checked){ background:var(--marca-osc); color:#fff; border-color:transparent; }
.opciones label:has(input:focus-visible){ box-shadow:0 0 0 3px color-mix(in srgb, var(--marca) 25%, transparent); }

.resultado-aro{
  --pct:0; width:172px; height:172px; border-radius:50%; display:grid; place-items:center; margin:0 auto 1.4rem;
  background:conic-gradient(var(--marca) calc(var(--pct) * 1%), var(--crema-2) 0);
  position:relative;
}
.resultado-aro::after{ content:""; position:absolute; inset:12px; border-radius:50%; background:var(--fondo); }
.resultado-aro span{ position:relative; z-index:1; font-family:var(--display); font-size:2.4rem; line-height:1; }
.banda{ display:inline-block; padding:.45rem 1.1rem; border-radius:99px; font-weight:600; font-size:.95rem; }
.banda--baja{ background:color-mix(in srgb, var(--azul) 16%, transparent); color:var(--azul-osc); }
.banda--media{ background:color-mix(in srgb, var(--acento) 16%, transparent); color:var(--acento); }
.banda--alta{ background:color-mix(in srgb, var(--sello) 16%, transparent); color:#8f3a36; }

.nota-legal{ font-size:.86rem; color:var(--tinta-3); line-height:1.62; }

/* ---------------------------------------------------------- pie */
.pie{ background:var(--bloque-tinta); color:rgba(252,244,236,.9); padding-block:clamp(3.4rem,6vw,5rem) 0; }
.pie a{ color:inherit; text-decoration:none; }
.pie a:hover{ color:#fff; }
.pie-rejilla{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:clamp(1.8rem,4vw,3rem); }
@media (max-width:900px){ .pie-rejilla{ grid-template-columns:repeat(2,minmax(0,1fr)); } .pie-rejilla > :first-child{ grid-column:1/-1; } }
@media (max-width:520px){ .pie-rejilla{ grid-template-columns:1fr; } }
.pie h3{ font-family:var(--display); font-size:1.04rem; letter-spacing:0; text-transform:none; color:rgba(240,238,229,.62); margin:0 0 .9rem; font-weight:400; }
.pie ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; font-size:.94rem; }
.pie-logo{ height:96px; width:auto; margin-bottom:1.1rem; }
.pie-claim{ font-size:.95rem; line-height:1.7; max-width:34ch; }
.pie-social{ display:flex; gap:.6rem; margin-top:1.3rem; }
.pie-social a{ width:40px; height:40px; border-radius:50%; border:1px solid rgba(240,238,229,.2); display:grid; place-items:center; transition:background var(--tr), border-color var(--tr); }
.pie-social a:hover{ background:var(--marca); border-color:transparent; }
.pie-social svg{ width:17px; height:17px; }
/* crédito del estudio, con el degradado en movimiento */
.credito{ margin:.2rem 0 0; text-align:center; font-size:.82rem; letter-spacing:.01em; }
.credito-arcoiris{
  background-image:linear-gradient(90deg,#e2607f,#e8963c,#dfc84e,#5aa469,#4b8fb5,#8a6bb0,#e2607f);
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:arcoiris 7s linear infinite;
}
.credito-arcoiris a{ color:inherit; text-decoration:none; font-weight:700; }
.credito-arcoiris a:hover{ text-decoration:underline; text-underline-offset:3px; }
.credito-corazon{ font-size:.95em; }
@keyframes arcoiris{ from{ background-position:0 0; } to{ background-position:-300% 0; } }
@media (prefers-reduced-motion:reduce){ .credito-arcoiris{ animation:none; } }
/* si el navegador no sabe recortar el fondo al texto, se ve en color normal */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .credito-arcoiris{ -webkit-text-fill-color:currentColor; color:rgba(240,238,229,.6); }
}

.pie-fin{
  margin-top:clamp(2.4rem,5vw,3.6rem); padding:1.4rem 0; border-top:1px solid rgba(240,238,229,.14);
  display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; justify-content:space-between; font-size:.83rem; color:rgba(240,238,229,.5);
}
.pie-fin nav{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; }

/* ---------------------------------------------------------- barra flotante móvil */
.barra-movil{
  position:fixed; left:0; right:0; bottom:0; z-index:80; display:none;
  background:color-mix(in srgb, var(--fondo) 94%, transparent); backdrop-filter:blur(14px);
  border-top:1px solid var(--linea);
  padding:.55rem max(.8rem, env(safe-area-inset-left)) calc(.55rem + env(safe-area-inset-bottom));
  gap:.5rem;
}
.barra-movil a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:.15rem;
  padding:.45rem 0; border-radius:12px; text-decoration:none;
  font-size:.8rem; font-weight:600; color:var(--tinta-2);
}
.barra-movil a svg{ width:19px; height:19px; }
.barra-movil a.destacado{ background:var(--marca-osc); color:#fff; }
@media (max-width:760px){ .barra-movil{ display:flex; } body{ padding-bottom:74px; } }
/* mientras se escribe en un campo, la barra se retira: en móvil se comía
   el último campo y el botón de enviar cuando sube el teclado */
.barra-movil{ transition:transform var(--tr), opacity var(--tr); }
body.escribiendo .barra-movil{ transform:translateY(110%); opacity:0; pointer-events:none; }

/* cada columna del pie con su icono, según de qué habla */
.pie-col h3{ display:flex; align-items:center; gap:.5rem; }
.pie-col h3::before{
  content:""; width:17px; height:17px; flex:none;
  background:currentColor; opacity:.55;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
.pie-col--centro h3::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5'/%3E%3C/svg%3E");
}
.pie-col--especialidades h3::before{
  -webkit-mask-image:url("../img/ginkgo.png"); mask-image:url("../img/ginkgo.png");
}
.pie-col--donde h3::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* puntos del pie: la hoja del sello en las listas de enlaces y, en «Dónde
   estamos», un icono que dice qué es cada dato */
.pie-col li{ position:relative; padding-left:1.5rem; }
.pie-col li::before{
  content:""; position:absolute; left:0; top:.3em; width:13px; height:13px;
  background:currentColor; opacity:.5;
  -webkit-mask:url("../img/ginkgo.png") center/contain no-repeat;
          mask:url("../img/ginkgo.png") center/contain no-repeat;
}
.pie-col li:hover::before{ opacity:.85; }
.pie-col .pie-i::before{ width:14px; height:14px; opacity:.6; }
.pie-col .pie-i--mapa::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.pie-col .pie-i--tel::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E"); }
.pie-col .pie-i--correo::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.pie-col .pie-i--hora::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
/* en pantallas táctiles los enlaces llevan relleno arriba y abajo para poder
   pulsarlos: el punto baja con ellos para seguir a la altura de la primera línea */
@media (pointer:coarse){
  .pie-col li:has(> a)::before{ top:calc(.62rem + .3em); }
}

/* filtros por tema del blog */
.filtros-blog{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin:0 0 clamp(1.6rem,3vw,2.4rem);
}
.filtros-blog .filtro{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem .95rem; border-radius:100px; text-decoration:none;
  border:1px solid var(--linea); background:var(--papel);
  color:var(--tinta-2); font-size:.9rem; font-weight:500;
  transition:border-color var(--tr), background var(--tr), color var(--tr);
}
.filtros-blog .filtro span{
  font-size:.76rem; font-weight:700; color:var(--tinta-3);
  background:var(--crema); border-radius:100px; padding:.05rem .42rem;
}
.filtros-blog .filtro:hover{ border-color:var(--marca-cla); color:var(--tinta); }
.filtros-blog .filtro.on{ background:var(--marca-osc); border-color:var(--marca-osc); color:#fff; }
.filtros-blog .filtro.on span{ background:rgba(255,255,255,.22); color:#fff; }
@media (max-width:760px){
  .filtros-blog{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:.3rem; }
  .filtros-blog::-webkit-scrollbar{ display:none; }
  .filtros-blog .filtro{ flex:none; }
}

/* artículo con el índice a un lado, que acompaña la lectura */
.entrada-rejilla{
  display:grid; grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.4rem); align-items:start;
}
.entrada-cuerpo{ min-width:0; max-width:var(--env-estr); }
/* la columna ocupa todo el alto de la fila: es lo que deja viajar al sticky */
.indice-col{ height:100%; }
.indice--lado{ position:sticky; top:calc(var(--cabecera) + 1.2rem); margin:0; }
.indice--lado ol{ max-height:calc(100dvh - var(--cabecera) - 8rem); overflow-y:auto; }
.indice--lado a.activo{ color:var(--marca); font-weight:600; }
@media (max-width:1024px){
  .entrada-rejilla{ grid-template-columns:minmax(0,1fr); }
  .entrada-rejilla > *{ width:min(100%, var(--env-estr)); margin-inline:auto; }
  .indice-col{ height:auto; }
  .indice--lado{ position:static; }
  .indice--lado ol{ max-height:none; }
}

/* ventana de pedir cita, disponible en toda la web */
.dlg{
  border:0; padding:0; background:transparent;
  width:min(100% - 1.6rem, 560px); max-height:calc(100dvh - 2rem);
  margin:auto; color:var(--tinta);
}
.dlg::backdrop{ background:rgba(46,26,24,.62); backdrop-filter:blur(3px); }
.dlg-caja{
  position:relative; background:var(--papel); border:1px solid var(--linea);
  border-radius:var(--radio-g); padding:clamp(1.4rem,3vw,2.1rem);
  box-shadow:var(--sombra-g); max-height:calc(100dvh - 2rem); overflow-y:auto;
}
.dlg-caja h2{ font-size:clamp(1.4rem,1.2rem + 1vw,1.85rem); margin:.1rem 0 .5rem; }
.dlg-texto{ color:var(--tinta-2); font-size:.95rem; margin:0 0 1.2rem; }
.dlg-texto a{ color:var(--marca); font-weight:600; }
.dlg-pie{ font-size:.8rem; color:var(--tinta-3); margin:.2rem 0 0; line-height:1.5; }
.dlg-cerrar{
  position:absolute; top:.7rem; right:.7rem; width:40px; height:40px;
  border:0; border-radius:50%; background:var(--crema); color:var(--tinta-2);
  font-size:1.5rem; line-height:1; cursor:pointer; transition:background var(--tr), color var(--tr);
}
.dlg-cerrar:hover{ background:var(--crema-2); color:var(--tinta); }
.dlg[open]{ animation:dlg-entra .28s cubic-bezier(.22,.61,.36,1); }
@keyframes dlg-entra{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .dlg[open]{ animation:none; } }
/* en pantallas pequeñas, la ventana se ajusta para que quepa de una vez */
@media (max-width:560px){
  .dlg-caja{ padding:1.2rem 1.1rem 1.3rem; }
  .dlg-caja h2{ font-size:1.35rem; margin:.1rem 0 .35rem; }
  .dlg-texto{ font-size:.88rem; margin-bottom:.9rem; }
  .dlg-pie{ font-size:.76rem; }
  .dlg-cerrar{ width:36px; height:36px; top:.5rem; right:.5rem; }
}

/* botones flotantes: llamar, pedir cita y WhatsApp */
.fab-pila{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:80;
  display:flex; flex-direction:column; gap:.7rem; align-items:flex-end;
}
.fab{
  position:relative; width:50px; height:50px; border-radius:50%;
  display:grid; place-items:center; color:#fff; text-decoration:none;
  box-shadow:0 10px 24px -10px rgba(59,38,36,.55);
  transition:transform var(--tr), box-shadow var(--tr);
}
.fab svg{ width:22px; height:22px; }
.fab img{ width:34px; height:34px; object-fit:contain; }
.fab:hover{ transform:translateY(-2px) scale(1.07); box-shadow:0 16px 30px -10px rgba(59,38,36,.5); }
.fab:active{ transform:scale(.96); }
.fab-tel{ background:linear-gradient(145deg, var(--marca), var(--marca-osc)); }
.fab-cita{ background:var(--papel); border:1px solid var(--linea); }
.fab-wa{
  background:linear-gradient(145deg,#2fe173,#22c15e); width:58px; height:58px;
  box-shadow:0 14px 30px -12px rgba(37,211,102,.75);
}
.fab-wa svg{ width:30px; height:30px; }
/* anillo que late en WhatsApp */
.fab-wa::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid #25d366; animation:fab-latido 2.4s ease-out infinite; pointer-events:none;
}
@keyframes fab-latido{ 0%{ transform:scale(1); opacity:.55; } 70%{ transform:scale(1.5); opacity:0; } 100%{ opacity:0; } }
/* etiqueta que se despliega al pasar el cursor */
.fab-etiqueta{
  position:absolute; right:calc(100% + 12px); top:50%;
  transform:translateY(-50%) translateX(8px);
  background:var(--bloque-tinta); color:#fff; font-size:.82rem; font-weight:700;
  white-space:nowrap; padding:.4rem .8rem; border-radius:100px;
  box-shadow:0 8px 20px -8px rgba(59,38,36,.6);
  opacity:0; pointer-events:none; transition:opacity var(--tr), transform var(--tr);
}
.fab-etiqueta::after{
  content:""; position:absolute; left:100%; top:50%; transform:translateY(-50%);
  border:5px solid transparent; border-left-color:var(--bloque-tinta);
}
@media (hover:hover) and (pointer:fine){
  .fab:hover .fab-etiqueta,.fab:focus-visible .fab-etiqueta{ opacity:1; transform:translateY(-50%) translateX(0); }
}
@media (prefers-reduced-motion:reduce){ .fab-wa::after{ animation:none; opacity:0; } }
/* en móvil manda la barra inferior, así que la pila se retira */
@media (max-width:760px){ .fab-pila{ display:none; } }

/* acciones de la ficha de cada profesional */
.ficha-acciones{
  display:flex; flex-wrap:wrap; gap:.7rem;
  margin-top:1.8rem; padding-top:1.4rem; border-top:1px solid var(--linea);
}
.ficha-acciones .btn{ flex:1 1 auto; justify-content:center; }
.ficha-acciones .btn-linea{ --btn-texto:var(--marca-osc); border-color:var(--marca-cla); }
.ficha-acciones .btn-linea:hover{ border-color:var(--marca); background:var(--crema); }
@media (max-width:520px){ .ficha-acciones .btn{ flex:1 1 100%; } }


/* ---------------------------------------------------------- animación de entrada */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity 620ms cubic-bezier(.22,.61,.36,1), transform 620ms cubic-bezier(.22,.61,.36,1); }
.reveal.visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* foco visible coherente */
:focus-visible{ outline:2px solid var(--marca); outline-offset:3px; border-radius:4px; }

/* salto al contenido */
.saltar{
  position:absolute; left:1rem; top:-100px; z-index:200;
  background:var(--marca-osc); color:#fff; padding:.7rem 1.2rem; border-radius:0 0 12px 12px;
  text-decoration:none; transition:top var(--tr);
}
.saltar:focus{ top:0; }

/* ---------------------------------------------------------- cookies */
.cookies{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:95;
  max-width:520px; margin-inline:auto;
  background:var(--papel); border:1px solid var(--linea-2); border-radius:var(--radio);
  box-shadow:var(--sombra-g); padding:1.3rem 1.4rem;
  display:none; gap:1rem; flex-direction:column;
}
.cookies.visible{ display:flex; }
.cookies p{ margin:0; font-size:.9rem; line-height:1.6; color:var(--tinta-2); }
.cookies-botones{ display:flex; flex-wrap:wrap; gap:.6rem; }

/* ---------------------------------------------------------- ajustes del modo oscuro */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) .btn{ --btn-texto:#1c1413; }
  :root:not([data-tema="claro"]) .btn:hover,
  :root:not([data-tema="claro"]) .btn:focus-visible{ color:#1c1413; }
  :root:not([data-tema="claro"]) .btn-linea{ --btn-texto:var(--tinta); }
  :root:not([data-tema="claro"]) .btn-claro{ --btn-fondo:rgba(255,255,255,.92); --btn-texto:#1c1413; }
  :root:not([data-tema="claro"]) .resenas-nav button:hover{ color:#1c1413; }
  :root:not([data-tema="claro"]) .opciones label:has(input:checked){ color:#1c1413; }
  :root:not([data-tema="claro"]) .saltar{ color:#1c1413; }
  :root:not([data-tema="claro"]) .persona-rol{ background:rgba(0,0,0,.55); }
  :root:not([data-tema="claro"]) .etiquetas li{ color:var(--marca-osc); }
  :root:not([data-tema="claro"]) .logo-img--color{ display:none; }
  :root:not([data-tema="claro"]) .logo-img--claro{ display:block; }
}
:root[data-tema="oscuro"] .btn{ --btn-texto:#1c1413; }
:root[data-tema="oscuro"] .btn:hover{ color:#1c1413; }
:root[data-tema="oscuro"] .logo-img--color{ display:none; }
:root[data-tema="oscuro"] .logo-img--claro{ display:block; }

/* ---------------------------------------------------------- fondo sutil de sección */
.seccion--fondo{ position:relative; isolation:isolate; overflow:hidden; }
.fondo-foto{ position:absolute; inset:0; z-index:-2; pointer-events:none; }
.fondo-foto img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.55) blur(2px); opacity:.055; }
.seccion--fondo::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, var(--fondo) 0%, transparent 22%, transparent 78%, var(--fondo) 100%);
}
.seccion--crema.seccion--fondo::before{ background:linear-gradient(180deg, var(--crema) 0%, transparent 22%, transparent 78%, var(--crema) 100%); }
.seccion--rosa.seccion--fondo::before{ background:linear-gradient(180deg, var(--rosa) 0%, transparent 22%, transparent 78%, var(--rosa) 100%); }
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) .fondo-foto img{ opacity:.09; filter:grayscale(.6) brightness(.8) blur(2px); }
}
:root[data-tema="oscuro"] .fondo-foto img{ opacity:.09; filter:grayscale(.6) brightness(.8) blur(2px); }

/* la hoja de ginkgo como filigrana */
.filigrana{
  position:absolute; z-index:-1; pointer-events:none; opacity:.05;
  width:min(46vw, 520px); aspect-ratio:1; right:-8%; top:-10%;
  background:var(--marca);
  -webkit-mask:url("../img/ginkgo.png") center/contain no-repeat;
          mask:url("../img/ginkgo.png") center/contain no-repeat;
}
.filigrana--izq{ right:auto; left:-10%; top:auto; bottom:-12%; transform:scaleX(-1); }

/* ---------------------------------------------------------- submenú del equipo */
.sub--equipo{ min-width:330px; padding:.5rem; }
.sub--equipo a{ display:flex; align-items:center; gap:.8rem; padding:.5rem .6rem; }
.sub-foto{
  width:46px; height:46px; flex:none; border-radius:12px; overflow:hidden;
  background:var(--crema-2); box-shadow:0 1px 3px rgba(59,38,36,.14);
}
.sub-foto img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; }
.sub-txt{ min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.sub-txt b{ font-weight:600; color:var(--tinta); font-size:.95rem; }
.sub-txt small{ margin:0; font-size:.79rem; color:var(--tinta-3); }
.sub--equipo .sub-pie{
  display:block; margin-top:.3rem; padding:.55rem .6rem; border-top:1px solid var(--linea);
  font-size:.85rem; color:var(--marca); font-weight:600;
}
@media (max-width:1000px){
  .sub--equipo{ min-width:0; }
  .sub-foto{ width:38px; height:38px; border-radius:10px; }
  .sub--equipo .sub-pie{ border-top:0; margin-top:0; }   /* la persona de encima ya lleva su línea */
}

/* ---------------------------------------------------------- galería del centro */
.galeria{ columns:3; column-gap:clamp(.9rem,1.6vw,1.4rem); }
@media (max-width:900px){ .galeria{ columns:2; } }
@media (max-width:560px){ .galeria{ columns:1; } }

.galeria figure{ margin:0 0 clamp(.9rem,1.6vw,1.4rem); break-inside:avoid; }
.galeria a{
  display:block; position:relative; overflow:hidden; border-radius:var(--radio);
  background:var(--crema-2); box-shadow:var(--sombra-s);
  transition:transform var(--tr), box-shadow var(--tr);
}
.galeria a:hover,.galeria a:focus-visible{ transform:translateY(-3px); box-shadow:var(--sombra-m); }
.galeria img{ width:100%; height:auto; display:block; transition:transform 700ms cubic-bezier(.22,.61,.36,1); }
.galeria a:hover img{ transform:scale(1.035); }
.galeria a::after{
  content:""; position:absolute; inset:0; opacity:0;
  background:linear-gradient(to top, rgba(46,26,24,.55), transparent 55%);
  transition:opacity var(--tr);
}
.galeria a:hover::after,.galeria a:focus-visible::after{ opacity:1; }
.galeria .lupa{
  position:absolute; right:.8rem; bottom:.8rem; z-index:1;
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.92); color:var(--tinta);
  opacity:0; transform:translateY(6px);
  transition:opacity var(--tr), transform var(--tr);
}
.galeria a:hover .lupa,.galeria a:focus-visible .lupa{ opacity:1; transform:none; }
.galeria .lupa svg{ width:17px; height:17px; }
@media (hover:none){ .galeria .lupa{ opacity:1; transform:none; } }

/* ---------------------------------------------------------- visor de fotos */
.visor{
  width:min(100vw, 100%); max-width:none; max-height:none;
  width:100vw; height:100dvh; margin:0; padding:0; border:0; background:transparent;
  overflow:hidden; color:#fff;
}
.visor::backdrop{ background:rgba(20,21,16,.92); backdrop-filter:blur(6px); }
.visor-caja{ position:relative; width:100%; height:100%; display:grid; place-items:center; padding:clamp(3.2rem,7vw,5rem) clamp(.8rem,5vw,4.5rem); }
.visor-img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:10px; box-shadow:0 30px 90px -40px rgba(0,0,0,.9); }
.visor-img.cambiando{ opacity:0; }
.visor-img{ transition:opacity 200ms ease; }

.visor-pie{
  position:absolute; left:0; right:0; bottom:0; padding:1rem clamp(1rem,4vw,2.4rem) calc(1rem + env(safe-area-inset-bottom));
  display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:baseline; justify-content:center;
  font-size:.92rem; color:rgba(255,255,255,.94); text-align:center;
  background:linear-gradient(to top, rgba(20,21,16,.75), transparent);
}
.visor-pie .n{ font-variant-numeric:tabular-nums; color:rgba(255,255,255,.55); font-size:.85rem; }

.visor button{
  position:absolute; z-index:2; display:grid; place-items:center;
  width:48px; height:48px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.25); background:rgba(20,21,16,.5); color:#fff;
  backdrop-filter:blur(8px);
  transition:background var(--tr), transform var(--tr), border-color var(--tr);
}
.visor button:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.5); }
.visor button svg{ width:20px; height:20px; }
.visor-cerrar{ top:clamp(.8rem,2.5vw,1.5rem); right:clamp(.8rem,2.5vw,1.5rem); }
.visor-ant{ left:clamp(.6rem,2.5vw,1.5rem); top:50%; transform:translateY(-50%); }
.visor-sig{ right:clamp(.6rem,2.5vw,1.5rem); top:50%; transform:translateY(-50%); }
.visor-ant:hover,.visor-sig:hover{ transform:translateY(-50%) scale(1.06); }
@media (max-width:560px){
  .visor-ant{ left:.5rem; } .visor-sig{ right:.5rem; }
  .visor button{ width:42px; height:42px; }
}

/* ---------------------------------------------------------- datos del centro en tarjeta */
.tarjeta-datos{
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio);
  padding:clamp(1.3rem,2.4vw,1.9rem); box-shadow:var(--sombra-s);
}
.tarjeta-datos .dato:first-of-type{ border-top:0; padding-top:0; }
.tarjeta-datos .dato:last-of-type{ border-bottom:0; padding-bottom:0; }

/* ---------------------------------------------------------- página del centro */
.portada--interior{ min-height:min(78svh, 700px); }
.miga--claro{ color:rgba(255,255,255,.75); }
.miga--claro a{ color:rgba(255,255,255,.93); }
.miga--claro a:hover{ color:#fff; }

.centro-intro{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
@media (max-width:900px){ .centro-intro{ grid-template-columns:1fr; } }

.centro-mapa{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem,4vw,3.4rem); align-items:start;
}
@media (max-width:900px){ .centro-mapa{ grid-template-columns:1fr; } }
.centro-mapa .mapa iframe{ height:var(--mapa-alto, min(62vh, 520px)); }

.paso--simple{ grid-template-columns:1fr; gap:.3rem; }
.paso--simple h3{ font-size:1.16rem; }

/* ---------------------------------------------------------- portada: dos columnas */
.portada--home{ min-height:min(100svh, 940px); align-items:center; padding-top:calc(var(--cabecera) + 2.4rem); }
.portada-rejilla{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,4vw,4rem); align-items:center; width:100%;
}
/* sin esto, un hijo con contenido que no rompe (los tres datos) ensancha la pista */
.portada-rejilla > *{ min-width:0; }
@media (max-width:1000px){ .portada-rejilla{ grid-template-columns:minmax(0,1fr); gap:2.2rem; } }

.portada--home h1{
  font-size:clamp(1.9rem, 1.2rem + 2.5vw, 3.35rem);
  font-weight:300; color:#fff; margin:0 0 .35rem; letter-spacing:-.02em;
}
.portada-marca{
  font-family:var(--display); font-style:italic; font-weight:300;
  font-size:clamp(1.25rem, 1rem + 1.1vw, 1.9rem);
  color:#f9ddc1; margin:0 0 1.1rem; line-height:1.2;
}
.portada-claim{
  font-size:clamp(1rem, .96rem + .3vw, 1.12rem); line-height:1.6;
  color:rgba(255,255,255,.95); max-width:38ch; margin:0;
  padding-left:1rem; border-left:2px solid rgba(233,228,201,.55);
}

/* los tres datos, en una sola línea mientras quepan */
.portada-datos{
  display:flex; flex-wrap:nowrap; align-items:baseline; gap:.5rem;
  margin:1.8rem 0 0; padding-top:1.1rem; border-top:1px solid rgba(255,255,255,.22);
  font-size:clamp(.7rem, .58rem + .32vw, .86rem); color:rgba(255,255,255,.92);
  list-style:none; padding-inline:0;
}
.portada-datos li{ white-space:nowrap; }
.portada-datos li + li::before{ content:"·"; opacity:.5; margin-right:.55rem; }
.portada-datos strong{ color:#fff; font-weight:600; }
/* por debajo de esto no caben los tres seguidos: se apilan */
@media (max-width:760px){
  .portada-datos{ flex-wrap:wrap; gap:.25rem 0; font-size:.82rem; }
  .portada-datos li{ flex:0 0 100%; white-space:normal; }
  .portada-datos li + li::before{ content:none; }
  .portada-datos li::before{
    content:""; display:inline-block; width:5px; height:5px; border-radius:50%;
    background:rgba(233,228,201,.75); margin-right:.55rem; vertical-align:middle;
  }
}

/* diapositivas de la cabecera */
.diapos{ position:absolute; inset:0; overflow:hidden; }
.diapo{ position:absolute; inset:0; opacity:0; transition:opacity 1400ms ease; }
.diapo.activa{ opacity:1; }
.diapo img{ width:100%; height:100%; object-fit:cover; object-position:center 45%; }
.diapo.activa img{ animation:acercar 9s linear forwards; }
@keyframes acercar{ from{ transform:scale(1.02); } to{ transform:scale(1.10); } }
@media (prefers-reduced-motion: reduce){
  .diapo{ transition:none; } .diapo.activa img{ animation:none; }
}
.diapo-lugar{
  position:absolute; right:clamp(1rem,3vw,2.4rem); bottom:clamp(1rem,3vw,2rem); z-index:3;
  font-family:var(--display); font-style:italic; font-size:.92rem;
  color:rgba(255,255,255,.75); text-shadow:0 1px 8px rgba(0,0,0,.5);
}

/* formulario de la portada */
.portada-form{
  background:color-mix(in srgb, var(--papel) 96%, transparent);
  border:1px solid rgba(255,255,255,.5); border-radius:var(--radio-g);
  padding:clamp(1.3rem,2.4vw,1.9rem);
  box-shadow:var(--sombra-g); backdrop-filter:blur(10px);
  color:var(--tinta);
}
.portada-form h2{ font-size:1.35rem; margin:0 0 .25rem; color:var(--tinta); }
.portada-form .pie-form{ font-size:.82rem; color:var(--tinta-3); margin:.7rem 0 0; line-height:1.5; }
.portada-form .form{ gap:.75rem; margin-top:1rem; }
.portada-form .campo input,
.portada-form .campo select,
.portada-form .campo textarea{ padding:.55rem .8rem; font-size:.93rem; }
.portada-form .campo textarea{ min-height:70px; }
.portada-form .casilla{ font-size:.8rem; }

/* ---------------------------------------------------------- sello vertical fijo */
.seccion--sello{ position:relative; overflow-x:clip; }
.sello-vertical{
  position:absolute; left:clamp(0px, 1.2vw, 22px); top:0; bottom:0;
  width:104px; z-index:0; pointer-events:none;
}
.sello-vertical i{
  position:sticky; top:34vh; display:block; position:-webkit-sticky;
  width:104px; height:min(54vh, 540px);
}
.sello-vertical i::before{
  content:""; position:absolute; left:50%; top:50%;
  width:96px; height:96px;
  transform:translate(-50%,-50%);
  background:var(--marca); opacity:.17;
  -webkit-mask:url("../img/logo-sello-peq.svg") center/contain no-repeat;
          mask:url("../img/logo-sello-peq.svg") center/contain no-repeat;
}
.seccion--sello > .env{ position:relative; z-index:1; }
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) .sello-vertical i::before{ opacity:.22; }
}
:root[data-tema="oscuro"] .sello-vertical i::before{ opacity:.22; }
@media (max-width:1180px){ .sello-vertical{ display:none; } }

/* fondo de foto sobre la sección de color de marca */
.seccion--marca.seccion--fondo::before{
  background:linear-gradient(180deg, var(--bloque-marca) 0%, transparent 26%, transparent 74%, var(--bloque-marca) 100%);
}
.seccion--marca .fondo-foto img{ opacity:.10; filter:grayscale(.8) blur(3px); mix-blend-mode:soft-light; }

/* --------------------------------------------- CTA final con fotos de fondo
   Las fotos se encadenan igual que en la portada, pero teñidas del verde de
   la marca para que el texto siga leyéndose sin esfuerzo. */
.seccion--cta{ position:relative; isolation:isolate; overflow:hidden; }
.seccion--cta > .env{ position:relative; z-index:2; }
.diapos--cta{ position:absolute; inset:0; z-index:0; }
.diapos--cta .diapo img{ width:100%; height:100%; object-fit:cover; object-position:center 45%; }
.diapos--cta .diapo{ filter:grayscale(.65); opacity:0; }
.diapos--cta .diapo.activa{ opacity:.30; }
.seccion--cta::after{                       /* el tinte verde por encima de la foto */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(169,86,85,.55) 0%, rgba(169,86,85,.88) 70%, var(--bloque-marca) 100%),
    linear-gradient(180deg, var(--bloque-marca) 0%, transparent 18%, transparent 82%, var(--bloque-marca) 100%);
}
@media (prefers-reduced-motion:reduce){ .diapos--cta .diapo.activa img{ animation:none; } }

/* En el móvil cada ficha del equipo ocupaba casi una pantalla entera.
   Se pasa a dos columnas con la foto más baja, para ver foto, nombre y
   datos de un vistazo. */
@media (max-width:760px){
  .rejilla-3:has(.persona){ grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem; }
  .persona-foto{ aspect-ratio:4/5; }
  .persona-nombre{ font-size:1.05rem; margin:.7rem 0 .1rem; }
  .persona-cargo{ font-size:.8rem; line-height:1.4; }
  .persona-rol{ font-size:.68rem; padding:.2rem .5rem; }
}
/* En pantallas estrechas la ficha se pone en horizontal: foto a un lado y
   nombre y datos al otro. Se ve todo sin desplazarse y el retrato conserva
   su proporción. */
@media (max-width:520px){
  .rejilla-3:has(.persona){ grid-template-columns:minmax(0,1fr); gap:.8rem; }
  .persona{
    display:grid; grid-template-columns:118px minmax(0,1fr);
    column-gap:1rem; row-gap:0; align-items:center;
  }
  .persona-foto{ aspect-ratio:4/5; margin:0; grid-row:1 / span 3; align-self:center; }
  /* nombre, título y cargo apilados en la columna de la derecha */
  .persona > :not(.persona-foto){ grid-column:2; }
  .persona-nombre{ margin:0 0 .15rem; align-self:end; }
  .persona-cargo{ align-self:start; }
  .persona:hover .persona-foto{ transform:none; }
}

/* En el móvil las columnas se apilan y la página se estira mucho:
   se recorta el aire entre secciones sin tocar el de dentro. */
@media (max-width:760px){
  .seccion{ padding-block:clamp(2.2rem,7vw,3rem); }
  .cabecera-seccion{ margin-bottom:1.5rem; }
  .rejilla{ gap:1.1rem; }
  .rejilla-lado{ gap:1.4rem; }
  h2{ margin-bottom:.5rem; }
  .cta-linea{ margin-top:2rem !important; }
}

/* ------------------------------------------------- zonas de toque en pantalla táctil
   En el móvil los enlaces de listas quedaban en 15-18 px de alto, por debajo de lo
   que se puede pulsar con el dedo sin fallar. Se les da recorrido vertical sin
   tocar el aspecto en escritorio. */
@media (pointer:coarse){
  .pie ul a,
  .pie-fin nav a,
  .miga a,
  .indice a{ display:inline-block; padding-block:.62rem; }
  .pie ul{ display:grid; gap:.1rem; }
  .enlace-flecha{ padding-block:.5rem; }
  .credito-arcoiris a{ display:inline-block; padding-block:.4rem; }
  .campo input,.campo select{ min-height:44px; }
  .barra-movil a{ min-height:48px; }
}

/* ---------------------------------------------------------- rejillas de tres */
.rejilla-tres{ grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:980px){ .rejilla-tres{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:620px){ .rejilla-tres{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------- blog: cargar más */
.blog-mas{ display:flex; flex-direction:column; align-items:center; gap:.8rem; margin-top:clamp(2.2rem,4vw,3.2rem); }
.blog-cargando{ margin:0; font-size:.9rem; color:var(--tinta-3); }