/* Personalidad · Cálida y local (references/personalidades.md). Referencias: Aucoot, Fox Valuations. Nueva en v2.
   Agencia de personas: papel crema, portada centrada (el motivo del logo dibujado, su frase y los dos caminos) sobre una
   foto enmarcada por el papel, caras antes que cifras y «Valorar mi casa» en el color de marca siempre en la cabecera
   (Fox). Fotos con un punto cálido. Densidad media.
   Pone maqueta, escala, densidad, tratamiento de fotos y orden de la confianza. Color, logo, motivo y fuentes del
   cliente los pone marca.css (tools/montar.py), que se carga después: las fuentes de aquí son solo las de partida.
   Marcado propio (caminos en color de marca y con borde, tono de los textos): tools/aplica_personalidad.py. */
:root {
  --c-fondo: #F5EEE4;
  --c-texto: #211A15; /* grises de apoyo (64 %) a 4,9:1 sobre el papel */
  --c-acento: #B5562F; /* provisional: marca.css pone el primario de la agencia */
  --c-suave: #ECE1D2;
  --f-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-texto: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --escala: 1;
  --section-y: clamp(84px, 8.5vw, 148px);
}
[data-personalidad="calida"] h1, [data-personalidad="calida"] h2, [data-personalidad="calida"] h3 { font-weight: var(--peso-display, 400); letter-spacing: -.02em; }

/* Cabecera de papel desde el principio, con «Valorar mi casa» en el color de marca siempre (no solo al bajar) */
[data-personalidad="calida"] .header:not(.is-solid) { color: var(--c-texto); }
[data-personalidad="calida"] .header:not(.is-solid)::before { opacity: 1; }
html:not(.menu-open) [data-personalidad="calida"] .header:not(.is-solid) .brand__logo[data-logo="normal"] { display: block; }
html:not(.menu-open) [data-personalidad="calida"] .header:not(.is-solid) .brand__logo[data-logo="claro"] { display: none; }
[data-personalidad="calida"] .header:not(.is-dark) .header__cta { background: var(--c-acento); border-color: var(--c-acento); color: var(--c-sobre-acento, var(--c-texto)); }

/* Caminos: Comprar en el color de marca, Vender con borde (los dos sobre papel) */
.pill--marca { background: var(--c-acento); color: var(--c-sobre-acento, var(--c-texto)); }
.pill--marca .pill__arrow { background: var(--c-sobre-acento, var(--c-texto)); }
.pill--marca .pill__arrow::before { border-color: var(--c-acento); }
.pill--borde { border: 1px solid currentColor; }

/* ---------- Portada centrada sobre papel, foto enmarcada debajo ---------- */
[data-personalidad="calida"] .hero {
  display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
  height: auto; min-height: 0; max-height: none;
  padding-top: calc(var(--header-h) + clamp(28px, 6vh, 72px));
  background: var(--c-fondo); color: var(--c-texto);
}
[data-personalidad="calida"] .hero__inner { order: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: clamp(28px, 5vh, 56px); }
[data-personalidad="calida"] .hero__title {
  max-width: 17em; font-size: calc(clamp(2.05rem, 1.2rem + 2.6vw, 4rem) * var(--escala)); line-height: 1.08; text-shadow: none;
}
[data-personalidad="calida"] .hero__caminos { justify-content: center; margin-top: 30px; }
[data-personalidad="calida"] .hero__media {
  order: 2; position: relative; inset: auto; overflow: hidden;
  width: calc(100% - 2 * var(--pad)); max-width: var(--max); height: min(64svh, 680px); min-height: 320px;
}
[data-personalidad="calida"] .hero__shade { display: none; }
[data-personalidad="calida"] .hero__foot { order: 3; border-top: 0; min-height: 48px; }
[data-personalidad="calida"] .hero__caption { color: var(--mute); }
[data-personalidad="calida"] .hero__toggle span { border-color: var(--c-texto); }
/* El motivo del logo, dibujado encima de la frase (la ilustración de línea de Fox); sin motivo, nada */
[data-motivo][data-personalidad="calida"] .hero__inner::before {
  content: ""; display: block; width: min(168px, 40vw); aspect-ratio: 112 / 40; margin-bottom: 22px;
  background: var(--c-acento); -webkit-mask: var(--motivo) center / contain no-repeat; mask: var(--motivo) center / contain no-repeat;
}
@media (max-width: 767px) {
  [data-personalidad="calida"] .hero__media { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
  [data-personalidad="calida"] .hero__caminos { display: grid; width: 100%; }
}

/* ---------- Fotos con un punto cálido (filtro fijo, no se anima) ---------- */
[data-personalidad="calida"] .hero__slide img,
[data-personalidad="calida"] .card__media img,
[data-personalidad="calida"] .persona__foto img { filter: saturate(.94) sepia(.07); }
[data-personalidad="calida"] .card__title { font-family: var(--f-display); font-size: calc(1.3rem * var(--escala)); }

/* ---------- Confianza: primero las caras, luego lo que dicen sus clientes, al final las cifras ---------- */
[data-personalidad="calida"] .agencia > .wrap { display: flex; flex-direction: column; }
[data-personalidad="calida"] .equipo { order: 1; }
[data-personalidad="calida"] .testimonios { order: 2; }
[data-personalidad="calida"] .cifras { order: 3; }
[data-personalidad="calida"] .persona__nombre { font-size: calc(1.35rem * var(--escala)); }
@media (min-width: 900px) { [data-personalidad="calida"] .equipo { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1080px; } }

/* Contraste AA sobre papel (axe): etiqueta del camino y pie de foto más firmes que en la base (pensados para ir sobre foto) */
[data-personalidad="calida"] .camino__label { opacity: .85; }
[data-personalidad="calida"] .hero__caption { color: color-mix(in srgb, var(--c-texto) 80%, var(--c-fondo)); }