/* Capa de marca Casa First para B y C (muestra v3): cabecera sin cápsula, naranja como superficie,
   el tejado del logo como recurso (cargador, marcador de sección, pie, hover). Texto sobre naranja: #111. */
:root {
  --tejado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 40' fill='none' stroke='%23FF4F00' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 26 L56 2 L110 26 M20 18 V38 M20 26 H96'/%3E%3C/svg%3E");
  --tejado-tinta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 40' fill='none' stroke='%23111111' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 26 L56 2 L110 26 M20 18 V38 M20 26 H96'/%3E%3C/svg%3E");
}

/* ---------- Cabecera: barra a todo el ancho, el logo suelto (nada de píldora) ---------- */
.header { isolation: isolate; padding: 10px var(--pad); }
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-fondo);
  border-bottom: 1px solid var(--line); opacity: 0; transition: opacity .6s var(--ease-out), background-color .6s;
}
.header .header__inner::before { display: none; }
.header__inner { border-radius: 0; padding: 0; height: 60px; }
.header.is-solid::before { opacity: 1; }
.header.is-solid.is-dark::before { background: color-mix(in srgb, var(--c-texto) 94%, var(--c-fondo)); border-color: var(--line-d); }
.menu-open .header::before { opacity: 0; }
.brand { height: 48px; }
.brand__logo { max-width: min(190px, 44vw); }
@media (max-width: 600px) { .brand { height: 40px; } .header__inner { height: 52px; } }


/* ---------- Cargador: naranja, el tejado se dibuja y aparece el logo en tinta ---------- */
.loader {
  position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 22px;
  background: var(--c-acento); pointer-events: none;
  animation: loader-fuera .9s cubic-bezier(.7, 0, .2, 1) 1.5s forwards;
}
.loader svg { width: min(200px, 46vw); fill: none; stroke: #111; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 260; stroke-dashoffset: 260; animation: tejado-traza 1.1s cubic-bezier(.3, 0, .2, 1) .1s forwards; }
.loader img { height: 54px; width: auto; filter: brightness(0); opacity: 0; animation: aparece .5s ease-out .75s forwards; }
@keyframes tejado-traza { to { stroke-dashoffset: 0; } }
@keyframes aparece { to { opacity: 1; } }
@keyframes loader-fuera { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
html:not(.js) .loader { display: none; }
@media (prefers-reduced-motion: reduce) { .loader { display: none; } }

/* ---------- Palabra clave del titular ---------- */
.hero__title em { font-style: normal; color: var(--c-acento); }

/* ---------- Valoración: superficie naranja entera ---------- */
.valoracion { position: relative; overflow: hidden; background: var(--c-acento); color: #111; }
.valoracion .eyebrow, .valoracion .lead { color: #111; }
.valoracion .eyebrow::before { background-image: var(--tejado-tinta); }
.valoracion ::selection { background: #111; color: var(--c-acento); }
.valoracion .wrap { position: relative; }
.valoracion__tejado { position: absolute; right: calc(var(--pad) * -1); bottom: -8%; width: min(52vw, 760px); fill: none; stroke: #111; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; opacity: .9; pointer-events: none; }
.pill--tinta { margin-top: 36px; background: #111; color: #fff; }
.pill--tinta .pill__arrow { background: var(--c-acento); }
.pill--tinta .pill__arrow::before { border-color: #111; }
.pill--tinta:hover { background: #2a2a2a; }

/* ---------- Agencia: datos reales y una cita real ---------- */
.claims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: clamp(32px, 4vw, 56px); padding-top: 24px; border-top: 1px solid var(--line); }
.claims b { display: block; font-family: var(--f-display); font-weight: 500; font-size: calc(clamp(1.8rem, 1.2rem + 2vw, 3.2rem) * var(--escala)); line-height: 1; letter-spacing: -.03em; margin-bottom: 8px; }
.claims span { font-size: 14px; color: var(--mute); }
.cita { margin: clamp(36px, 4vw, 56px) 0 28px; }
.cita blockquote { font-family: var(--f-display); font-size: calc(clamp(1.25rem, 1rem + .8vw, 1.75rem) * var(--escala)); line-height: 1.3; letter-spacing: -.01em; max-width: 30ch; }
.cita figcaption { margin-top: 14px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
@media (max-width: 600px) { .claims { grid-template-columns: 1fr; } }

/* ---------- Hover: subrayado naranja en las fichas ---------- */
.card__title { text-decoration: underline 2px transparent; text-underline-offset: 6px; transition: text-decoration-color .4s; }
.card__link:hover .card__title { text-decoration-color: var(--c-acento); }

/* ---------- Pie: el tejado sobre el nombre ---------- */
.footer__brand::before { content: ""; display: block; width: clamp(80px, 12vw, 180px); aspect-ratio: 112 / 40; margin-bottom: 10px; background: var(--tejado) left bottom / contain no-repeat; }
@media (max-width: 899px) {
  /* En móvil el tejado grande cruzaba el botón: pasa arriba a la derecha, pequeño */
  .valoracion__tejado { top: -58px; bottom: auto; right: 0; width: 120px; }
}