/* ════════════════════════════════════════════════════════════════════════
   CAPA DE DISEÑO · brokerdeguardia
   ────────────────────────────────────────────────────────────────────────
   Todo lo de aquí es CSS puro. Ni una línea de JavaScript, ni un recurso de
   terceros. No es purismo: es lo que sostiene la Content-Security-Policy con
   `script-src 'none'`, el control C7 de CUSTOR y la promesa de que visitar la
   página no comunica la IP del lector fuera del EEE.

   Lo que aporta movimiento —revelado al hacer scroll, la línea que se dibuja,
   el degradado que respira— va dentro de `@supports`, y el estado por defecto
   es SIEMPRE visible. Si el navegador no lo entiende, se ve todo igual de
   bien; lo que no puede pasar nunca es que un texto quede invisible porque
   una animación no se ejecutó.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  --r-s:10px; --r-m:14px; --r-l:20px; --r-xl:28px;
  --e-1:0 1px 2px rgba(0,0,0,.05);
  --e-2:0 1px 2px rgba(0,0,0,.05), 0 8px 22px -14px rgba(0,0,0,.30);
  --e-3:0 2px 4px rgba(0,0,0,.05), 0 20px 44px -22px rgba(0,0,0,.40);
  --e-4:0 3px 6px rgba(0,0,0,.06), 0 34px 70px -34px rgba(0,0,0,.50);
  --paso:cubic-bezier(.22,.61,.36,1);
}

/* ── Enlaces con subrayado de verdad, no el del navegador ─────────────── */
main a:not(.btn):not(.rel a):not(.card a):not(.perfil a){
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, currentColor 32%, transparent);
  transition:text-decoration-color .18s var(--paso);
}
main a:not(.btn):hover{text-decoration-color:currentColor}

/* ── Foco visible y con intención ─────────────────────────────────────── */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}

/* ══ HERO: profundidad por capas ═══════════════════════════════════════ */
.hero{position:relative;isolation:isolate;overflow:hidden}
/* capa 1 · malla de degradados que respira */
.hero>.velo{position:absolute;inset:-30%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(38% 44% at 18% 22%, var(--halo-a) 0%, transparent 62%),
    radial-gradient(34% 40% at 82% 12%, var(--halo-b) 0%, transparent 60%),
    radial-gradient(46% 50% at 62% 88%, var(--halo-c) 0%, transparent 64%);
  filter:blur(6px)}
/* capa 2 · grano finísimo, para que el color no parezca plástico */
.hero>.grano{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:20px 20px}

@media (prefers-reduced-motion: no-preference){
  .hero>.velo{animation:respirar 22s var(--paso) infinite alternate}
}
@keyframes respirar{
  from{transform:translate3d(-1.5%,-1%,0) scale(1)}
  to{transform:translate3d(1.5%,1.5%,0) scale(1.06)}
}

/* ── Titular con entrada escalonada ───────────────────────────────────── */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .hero .eyebrow,.hero h1,.hero .lead,.hero .cta-row,
    .hero .credenciales,.hero .firma,.hero .hero-note{
      animation:entrar .7s var(--paso) backwards}
    .hero h1{animation-delay:.06s}
    .hero .lead{animation-delay:.14s}
    .hero .cta-row{animation-delay:.22s}
    .hero .credenciales,.hero .firma{animation-delay:.3s}
    .hero .hero-note{animation-delay:.36s}
  }
}
@keyframes entrar{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── Revelado al entrar en pantalla. Por defecto: VISIBLE. ────────────── */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .revela{animation:asomar .8s var(--paso) both;
      animation-timeline:view();animation-range:entry 0% cover 26%}
  }
}
@keyframes asomar{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ══ SEPARADORES: que las secciones no choquen en seco ═════════════════ */
.onda{display:block;width:100%;height:44px;margin-bottom:-1px}
.onda+section,.onda+div{margin-top:-1px}

/* ══ TARJETAS con borde vivo ═══════════════════════════════════════════ */
.card{position:relative;border-radius:var(--r-m);box-shadow:var(--e-2);
  transition:transform .2s var(--paso), box-shadow .2s var(--paso)}
.card:before{content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;
  background:linear-gradient(140deg,var(--gold),transparent 42%);
  opacity:0;transition:opacity .2s var(--paso)}
.card:hover{transform:translateY(-3px);box-shadow:var(--e-3)}
.card:hover:before{opacity:.9}
.card .n{position:relative;display:inline-grid;place-items:center;
  width:44px;height:44px;border-radius:12px;font-size:20px;
  background:color-mix(in srgb, var(--gold) 18%, transparent);
  color:var(--gold-d);margin-bottom:12px}

/* ══ CIFRAS ════════════════════════════════════════════════════════════ */
.cifras div{position:relative;overflow:hidden;box-shadow:var(--e-1)}
.cifras div:after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--gold),transparent)}

/* ══ LÍNEA DE TIEMPO que se dibuja al bajar ════════════════════════════ */
.linea:before{transform-origin:top}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .linea:before{animation:dibujar linear both;
      animation-timeline:view();animation-range:entry 10% cover 55%}
  }
}
@keyframes dibujar{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.linea .hito:before{transition:transform .2s var(--paso)}
.linea .hito:hover:before{transform:scale(1.35)}

/* ══ EL SEMÁFORO, como componente de verdad ════════════════════════════ */
.semaforo{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:10px 0 6px}
.semaforo article{position:relative;border-radius:var(--r-m);padding:20px 22px 20px 58px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--e-1)}
.semaforo article:before{content:"";position:absolute;left:20px;top:22px;
  width:20px;height:20px;border-radius:50%}
.semaforo article:after{content:"";position:absolute;left:29px;top:42px;bottom:20px;width:2px;
  background:linear-gradient(180deg,currentColor,transparent);opacity:.18}
.semaforo b{display:block;color:var(--navy);margin-bottom:4px;font-size:16px}
.semaforo p{margin:0;font-size:15px;color:var(--muted)}
.semaforo .v:before{background:#189a67;box-shadow:0 0 0 5px rgba(24,154,103,.14)}
.semaforo .a:before{background:#d9884a;box-shadow:0 0 0 5px rgba(217,136,74,.16)}
.semaforo .r:before{background:#c0503a;box-shadow:0 0 0 5px rgba(192,80,58,.14)}

/* ══ FORMULARIO: que apetezca rellenarlo ═══════════════════════════════ */
.conversa{display:grid;gap:26px;grid-template-columns:1.35fr .8fr;align-items:start}
@media(max-width:860px){.conversa{grid-template-columns:1fr}}

.form-caja{position:relative;background:#fff;border-radius:var(--r-xl);padding:30px;
  border:1px solid var(--line);box-shadow:var(--e-4)}
.form-caja:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:linear-gradient(150deg,var(--gold),transparent 38%,transparent 62%,color-mix(in srgb,var(--navy) 40%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* los campos, agrupados y numerados: se lee como una conversación */
.tramo{position:relative;padding-left:42px;margin-bottom:26px}
.tramo:last-of-type{margin-bottom:18px}
.tramo>.num{position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-size:13.5px;font-weight:700;
  background:var(--navy);color:#fff}
.tramo>h3{margin:2px 0 14px;font-size:1.02rem;color:var(--navy)}
.tramo:after{content:"";position:absolute;left:13.5px;top:34px;bottom:-20px;width:1.5px;
  background:linear-gradient(180deg,var(--line),transparent)}
.tramo:last-of-type:after{display:none}

/* La etiqueta SIEMPRE encima de su casilla, y todas las casillas del mismo
   ancho. Antes `.campo` era un <label> en línea: con un texto corto («Correo»)
   la casilla se le quedaba al lado y con uno largo («Nombre y apellidos»)
   bajaba a la línea siguiente, así que unas quedaban alineadas y otras no.
   En el móvil se notaba mucho. (23-ago-2026) */
.campo{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.campo>em{margin-top:0}
/* Aire entre la casilla de texto y el recuadro de «he leído y acepto». */
.consent{margin-top:14px}
.campo>span{display:flex;align-items:baseline;gap:6px}
.campo .op{font-weight:400;font-size:12px;color:var(--muted);
  background:var(--paper);border:1px solid var(--line);border-radius:99px;padding:1px 8px}
.campo input,.campo select,.campo textarea{
  border:1.5px solid #d3dad6;border-radius:12px;padding:13px 14px;
  transition:border-color .16s var(--paso), box-shadow .16s var(--paso), background .16s}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:#b9c4bf}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 22%,transparent);outline:none}
/* cuando el campo ya tiene contenido, se marca: da sensación de avance */
.campo input:not(:placeholder-shown):valid,
.campo textarea:not(:placeholder-shown){border-color:color-mix(in srgb,var(--ok) 55%,#d3dad6)}
.campo select:valid{border-color:color-mix(in srgb,var(--ok) 55%,#d3dad6)}
.campo select:invalid{color:var(--muted)}

.consent{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;
  border-radius:var(--r-m);border:1.5px solid var(--line);
  transition:border-color .16s var(--paso), background .16s var(--paso)}
.consent input[type=checkbox]{width:18px;height:18px;flex:0 0 18px;margin-top:2px;accent-color:var(--navy)}
.consent:hover{border-color:#c3cec8}
.consent:has(input:checked){border-color:color-mix(in srgb,var(--ok) 45%,transparent);
  background:color-mix(in srgb,var(--ok) 6%,#fff)}

.form-caja .btn{position:relative;overflow:hidden;border-radius:14px;
  background:linear-gradient(135deg,var(--gold),color-mix(in srgb,var(--gold) 72%, #ffffff));
  box-shadow:0 10px 26px -12px color-mix(in srgb,var(--gold) 80%,transparent);
  transition:transform .16s var(--paso), box-shadow .16s var(--paso)}
.form-caja .btn:hover{transform:translateY(-2px);
  box-shadow:0 16px 34px -14px color-mix(in srgb,var(--gold) 85%,transparent)}
.form-caja .btn:active{transform:translateY(0)}

/* el panel de al lado: lo que pasa DESPUÉS de darle a enviar */
.despues{position:sticky;top:22px;background:var(--navy);color:#fff;
  border-radius:var(--r-xl);padding:26px;box-shadow:var(--e-3)}
@media(max-width:860px){.despues{position:static}}
.despues h3{color:#fff;margin:0 0 16px;font-family:var(--serif);font-size:1.22rem}
.despues ol{list-style:none;padding:0;margin:0 0 20px;counter-reset:d}
.despues ol li{counter-increment:d;position:relative;padding-left:38px;margin-bottom:16px;
  font-size:15px;color:#dfeae5}
.despues ol li:last-child{margin-bottom:0}
.despues ol li:before{content:counter(d);position:absolute;left:0;top:-1px;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--gold);color:var(--navy);font-weight:700;font-size:13px}
.despues ol li b{color:#fff}
.despues .promesas{border-top:1px solid rgba(255,255,255,.16);padding-top:18px;margin:0;
  list-style:none;display:grid;gap:10px}
.despues .promesas li{position:relative;padding-left:26px;font-size:14.2px;color:#cfe0d9}
.despues .promesas li:before{content:"";position:absolute;left:2px;top:7px;width:10px;height:6px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}

/* ══ SELLO ═════════════════════════════════════════════════════════════ */
.sello{box-shadow:var(--e-2);transition:box-shadow .2s var(--paso)}
.sello:hover{box-shadow:var(--e-3)}
.sello .escudo{filter:drop-shadow(0 6px 14px rgba(0,0,0,.14))}

/* ══ BOTONES generales ═════════════════════════════════════════════════ */
.btn-gold{box-shadow:0 8px 22px -12px color-mix(in srgb,var(--gold) 80%,transparent)}
.btn-gold:hover{box-shadow:0 14px 30px -14px color-mix(in srgb,var(--gold) 85%,transparent)}
.btn-ghost{backdrop-filter:blur(2px);transition:background .18s var(--paso),border-color .18s var(--paso)}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}

/* ══ DETALLES de lectura ═══════════════════════════════════════════════ */
.def{position:relative;box-shadow:var(--e-1)}
.def.destacado:before{content:"";position:absolute;left:-4px;top:0;bottom:0;width:4px;
  border-radius:4px;background:linear-gradient(180deg,var(--gold),transparent)}
details{transition:box-shadow .18s var(--paso),border-color .18s var(--paso)}
details:hover{border-color:#c9d4cf;box-shadow:var(--e-1)}
details[open]{box-shadow:var(--e-2)}
summary:after{transition:transform .2s var(--paso)}
details[open] summary:after{transform:rotate(180deg)}
.rel a{position:relative;overflow:hidden}
.rel a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .22s var(--paso)}
.rel a:hover:after{transform:scaleX(1)}

@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
}

/* La sección de conversión respira más que el resto: con el ancho del texto
   los campos se apilaban de uno en uno y el formulario parecía interminable. */
#hablamos>.wrap{max-width:1080px}
#hablamos .form-fila{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
@media(min-width:861px){
  #hablamos>.wrap>p{max-width:60ch}
}
/* En pantallas medianas el panel de al lado se queda sin sitio: baja debajo. */
@media(max-width:1000px) and (min-width:861px){
  .conversa{grid-template-columns:1fr}
  .despues{position:static}
}

/* ── el sello, donde se decide ───────────────────────────────────────────────
   Va dentro del panel de garantías, que en el móvil se lee antes que los
   campos. Enlaza al bloque largo de abajo, donde está la explicación completa
   y de quién es el sello. */
.sello-corto{display:flex;align-items:center;gap:13px;text-decoration:none;
  margin:0 0 20px;padding:13px 15px;border-radius:14px;color:#fff;
  background:color-mix(in srgb,#fff 9%,transparent);
  border:1px solid color-mix(in srgb,#fff 20%,transparent)}
.sello-corto:hover{background:color-mix(in srgb,#fff 15%,transparent)}
.sello-corto .escudito{flex:none;width:34px;height:34px;color:var(--acento)}
.sello-corto span{font-size:13.2px;line-height:1.45;color:#cfe0d9}
.sello-corto b{display:block;color:#fff;font-size:14.2px;margin-bottom:2px}
.sello-corto u{text-underline-offset:2px}

/* ══════════════════════════════════════════════════════════════════════════
   MÓVIL
   Casi todo el mundo va a leer esto desde el teléfono, así que esta parte no
   es "que quepa": es la versión principal y manda sobre lo de arriba.
   ══════════════════════════════════════════════════════════════════════════ */

/* Los campos, a 16 px como mínimo. Por debajo de eso, iOS hace zoom él solo al
   enfocar un campo y deja al usuario con la página descolocada y el teclado
   encima. Es la causa número uno de abandono de un formulario en iPhone. */
input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px}

@media(max-width:860px){
  /* La cabecera ocupaba 199 px —una cuarta parte de la pantalla— porque los
     seis enlaces se envolvían en dos filas. Se quedan en una sola fila que se
     arrastra con el dedo, con un desvanecido a la derecha que avisa de que hay
     más. Baja a unos 110 px y el contenido empieza donde tiene que empezar. */
  .nav{padding:11px 0;flex-wrap:wrap;gap:8px}
  .brand{min-height:44px}
  .nav-links{flex-wrap:nowrap;width:100%;overflow-x:auto;overflow-y:hidden;
    gap:6px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin-right:-16px;padding-right:26px;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 30px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 30px),transparent)}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{scroll-snap-align:start;white-space:nowrap}
  .brand small{display:none}          /* el reclamo ya está en el hero */

  /* Zonas de toque. El dedo no es un ratón: 44 px es el mínimo cómodo, y hay
     que dárselo sin separar visualmente los enlaces. */
  .nav-links a{min-height:44px;display:inline-flex;align-items:center;padding:0 8px}
  .migas a,.migas span{min-height:30px;display:inline-flex;align-items:center}
  footer a,.consent a{min-height:44px;display:inline-flex;align-items:center;padding:0 5px;
    margin:0 -5px}   /* el margen negativo devuelve el hueco: se toca más, se ve igual */
  footer li a,footer p a,.consent p a{min-height:0;display:inline}   /* en prosa, no */
  h2>a,h3>a{display:inline-block;padding:6px 0}
  /* Los campos, con alto de dedo. */
  .campo input,.campo select,.campo textarea{min-height:48px}
  .campo textarea{min-height:110px}

  /* La prosa, con aire. En un teléfono se lee una columna estrecha y muy larga:
     el interlineado apretado que en escritorio queda elegante aquí cansa, y
     además pega los enlaces de una línea a los de la siguiente hasta que se
     pulsa el que no era. 1.75 resuelve las dos cosas a la vez. */
  main p,main li,.lead{line-height:1.75}
  main p{margin-bottom:1.15em}
  main h2{line-height:1.25}
  main h3{line-height:1.3}
  /* y que ninguna palabra larga rompa el ancho */
  main p,main li,main h1,main h2,main h3{overflow-wrap:break-word}

  /* La casilla de consentimiento se toca de verdad: es la que da el permiso
     del art. 6.1.a, así que marcarla tiene que ser inequívoco y sin fallos. */
  .consent{padding:14px 16px;align-items:flex-start;gap:12px}
  .consent input[type=checkbox]{width:24px;height:24px;flex:0 0 24px;margin-top:1px}

  /* Primero la promesa, después el esfuerzo: en un teléfono el panel de "qué
     pasa cuando le des a enviar" tiene que leerse ANTES de los campos, o se
     lee cuando ya has decidido no rellenarlos. */
  .conversa{display:flex;flex-direction:column;gap:20px}
  .conversa .despues{order:-1}
  .despues{padding:22px}

  /* Los tramos numerados, más juntos y con menos sangría: en 320 px cada píxel
     de la izquierda es ancho de línea que se pierde. */
  .tramo{padding-left:36px;margin-bottom:22px}
  .tramo:after{left:12.5px}

  /* Deja sitio abajo para la barra de acción, sólo donde la hay. */
  body:has(.barra-movil){padding-bottom:84px}
}

/* ── barra de acción fija, sólo en el móvil ──────────────────────────────────
   En un teléfono el botón de contacto se queda a kilómetros en cuanto empiezas
   a leer. Esta barra lo mantiene siempre a un dedo de distancia. Y donde el
   navegador lo soporta, se aparta sola al llegar al formulario: ahí ya estorba
   más que ayuda. Sin una línea de JavaScript. */
.barra-movil{display:none}
@media(max-width:860px){
  .barra-movil{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    align-items:center;gap:12px;padding:11px 16px calc(11px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--navy) 94%,transparent);
    backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.12)}
  /* Compacta a la fuerza: con el texto libre se iba a 110 px y se comía la
     séptima parte de la pantalla. Cada mitad, una línea y sólo una. */
  .barra-movil .que{flex:1 1 auto;min-width:0;margin:0;color:#fff;font-size:12.6px;line-height:1.35}
  .barra-movil .que b,.barra-movil .que span{display:block;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .barra-movil .que b{font-size:13.8px}
  .barra-movil .que span{color:#b9c8d8}
  .barra-movil a{flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center;
    padding:0 18px;border-radius:999px;background:var(--acento);color:var(--tinta);
    font-weight:700;font-size:15px;text-decoration:none}
}
@supports (animation-timeline: view()){
  @media(max-width:860px) and (prefers-reduced-motion: no-preference){
    body{timeline-scope:--zona-form}
    #hablamos{view-timeline-name:--zona-form}
    .barra-movil{animation:apartarse linear both;
      animation-timeline:--zona-form;animation-range:entry 0% entry 55%}
    @keyframes apartarse{to{transform:translateY(110%);opacity:0;visibility:hidden}}
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   EL PIE
   Con la estructura de los demás sitios del grupo (custor.es, citor.es,
   creas.us): marca y qué es · columnas por tema · sello · letra pequeña ·
   cierre con el ©. Antes eran cinco columnas apelmazadas, sin logo y con el
   correo repetido dos veces seguidas.
   ══════════════════════════════════════════════════════════════════════════ */
/* la cabecera del pie: quién es la marca, y quién responde por ella */
.pie-cab{display:grid;gap:22px 40px;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  align-items:start;padding-bottom:26px;margin-bottom:26px;
  border-bottom:1px solid rgba(255,255,255,.13)}
@media(max-width:820px){.pie-cab{grid-template-columns:1fr;gap:20px}}
.pie-quien b{display:block;color:#fff;font-size:13px;margin-bottom:7px}
.pie-quien p{margin:0;font-size:13.6px;line-height:1.7}
.pie-marca{display:flex;align-items:flex-start;gap:15px}
.pie-marca .pie-simbolo{width:40px;height:40px;flex:none;overflow:visible;margin-top:1px}
.pie-marca b{display:block;font-family:var(--serif);font-size:1.18rem;color:#fff;
  margin-bottom:3px;line-height:1.2}
.pie-marca p{margin:0;max-width:46ch;font-size:14.4px;line-height:1.6}

/* el sello, con la relación declarada donde se ve */
.pie-sello{display:flex;align-items:center;gap:14px;margin:28px 0 4px;
  padding:14px 17px;border-radius:12px;text-decoration:none;
  background:color-mix(in srgb,#fff 6%,transparent);
  border:1px solid color-mix(in srgb,#fff 16%,transparent)}
.pie-sello:hover{background:color-mix(in srgb,#fff 11%,transparent)}
.pie-sello svg{width:30px;height:30px;flex:none;color:var(--acento)}
.pie-sello span{font-size:12.8px;line-height:1.5}
.pie-sello b{display:block;color:#fff;font-size:13.6px;margin-bottom:1px}

.fine .cierre{margin:18px 0 0;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.13)}

@media(max-width:860px){
  .pie-marca{gap:12px;padding-bottom:20px;margin-bottom:22px}
  .pie-marca .pie-simbolo{width:34px;height:34px}
  .pie-sello{margin:22px 0 2px}
}

/* `footer b{display:block}` está pensado para los títulos de columna, pero
   alcanzaba también a las negritas dentro de la prosa legal y partía cada
   frase en cinco líneas. Se acota a lo que sí es un título. */
.fine b,.pie-sello span b:not(:first-child),.pie-marca p b{display:inline;margin:0;font-size:inherit}
.fine .cierre b{display:inline}

/* ══════════════════════════════════════════════════════════════════════════
   PÁGINA DE PROVINCIA · ficha del broker, gráfico y tarifa
   ══════════════════════════════════════════════════════════════════════════ */
.figura{margin:22px 0 26px}
.gr{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:10px 8px}
.gr .rej{stroke:var(--line);stroke-width:1}
.gr .zar{fill:none;stroke:var(--gold);stroke-width:2.8;stroke-linejoin:round;stroke-linecap:round}
.gr .ara{fill:none;stroke:var(--muted);stroke-width:1.6;stroke-dasharray:5 4;opacity:.75}
.gr .area{fill:var(--gold);opacity:.09}
.gr .hito{fill:var(--gold);stroke:#fff;stroke-width:2}
.gr .val{font-size:13px;font-weight:700;fill:var(--navy)}
.gr .ejey{font-size:10.5px;fill:var(--muted);text-anchor:end}
.gr .ejex{font-size:11px;fill:var(--muted);text-anchor:middle}
.gr .leg text{font-size:11px;fill:var(--muted)}
.figura figcaption{font-size:13.4px;color:var(--muted);margin-top:10px;line-height:1.6}
.nota-fuente{font-size:14.4px;color:var(--muted);border-left:2px solid var(--line);
  padding-left:16px;margin:20px 0}
.verificado{font-weight:700;color:var(--navy)}

.tabla-datos{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fff;margin:18px 0}
.tabla-datos table{border-collapse:collapse;width:100%;min-width:460px;font-size:14.6px}
.tabla-datos caption{text-align:left;padding:14px 16px 0;font-size:12.4px;color:var(--muted)}
.tabla-datos th,.tabla-datos td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--line)}
.tabla-datos th{font-size:10.6px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.tabla-datos tbody tr:last-child td{border-bottom:0}
.art{font-size:11.6px;color:var(--muted);white-space:nowrap}
@media(max-width:700px){
  .gr .ejey,.gr .ejex,.gr .leg text{font-size:13px}
  .gr .val{font-size:15px}
  .ficha-broker{padding:20px}
}

/* ══════════════════════════════════════════════════════════════════════════
   TARJETA DE PERFIL DEL BROKER
   Se lee en dos segundos: quién es, qué le acredita, qué hace y cómo se le
   escribe. La verificación es una insignia junto al nombre —como en cualquier
   red profesional—, no un cartel que compita con él.
   ══════════════════════════════════════════════════════════════════════════ */
.perfil{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  margin:28px 0 36px;
  box-shadow:0 1px 2px rgba(18,63,58,.05), 0 30px 60px -38px rgba(18,63,58,.55)}

/* la portada, con el trazo de la marca asomando */
.pf-portada{height:112px;overflow:hidden;line-height:0}
.pf-portada svg{width:100%;height:112px;display:block}

/* la fila de identidad: el avatar monta sobre la portada */
.pf-cuerpo{display:grid;gap:0 20px;padding:0 26px 22px;
  grid-template-columns:auto minmax(0,1fr) auto;align-items:end}
.pf-avatar{width:104px;height:104px;margin-top:-52px;border-radius:50%;
  background:var(--navy);border:5px solid #fff;display:grid;place-items:center;
  box-shadow:0 8px 22px -12px rgba(18,63,58,.6)}
.pf-avatar span{font-family:var(--serif);font-size:34px;font-weight:700;color:var(--gold);
  letter-spacing:.02em;line-height:1}
.pf-id{padding-bottom:2px;min-width:0}
.pf-id h2{margin:12px 0 2px;font-size:1.62rem;line-height:1.15;display:flex;
  align-items:center;gap:9px;flex-wrap:wrap}
.pf-check{display:inline-flex;width:23px;height:23px;color:#189a67;flex:none;
  text-decoration:none;transition:transform .16s var(--paso)}
.pf-check:hover{transform:scale(1.14)}
.pf-check svg{width:100%;height:100%}
.pf-rol{margin:0 0 3px;font-size:15px;color:var(--navy)}
.pf-rol b{color:var(--gold-d,#b3672f)}
.pf-soc{margin:0;font-size:13.8px;color:var(--muted)}
.pf-acciones{display:flex;gap:10px;padding-bottom:3px;flex-wrap:wrap}
.pf-acciones .btn,.pf-acciones .btn2{font-size:15px;padding:11px 20px;border-radius:999px;
  white-space:nowrap;min-height:46px;display:inline-flex;align-items:center}
.pf-acciones .btn2{border:1px solid var(--line);color:var(--navy);text-decoration:none;font-weight:700}
.pf-acciones .btn2:hover{border-color:var(--navy);background:var(--tint)}

/* las cifras: lo que acredita, en formato dato */
.pf-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  border-top:1px solid var(--line);background:var(--tint)}
.pf-cifra{padding:16px 22px;border-right:1px solid var(--line);display:block}
.pf-cifra:last-child{border-right:0}
.pf-cifra b{display:block;font-family:var(--serif);font-size:1.32rem;color:var(--navy);
  line-height:1.15;letter-spacing:-.01em}
.pf-cifra span{display:block;font-size:12.4px;color:var(--muted);margin-top:2px;line-height:1.4}
a.pf-cifra.dest b{color:var(--gold-d,#b3672f)}
a.pf-cifra:hover{background:#fff}
a.pf-cifra.dest:after{content:"comprobar en el registro →";display:block;font-size:11px;
  color:var(--gold-d,#b3672f);margin-top:5px;font-weight:600}

/* el pie: especialidades y la nota de valoraciones */
.pf-pie{padding:20px 26px 24px;border-top:1px solid var(--line)}
.pf-esp-t{margin:0 0 9px;font-size:10.6px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted)}
.pf-chips{margin:0 0 18px;display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;
  background:color-mix(in srgb,var(--gold) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--gold) 34%,transparent);
  color:var(--navy);font-size:13.4px;font-weight:600}
.pf-nota{margin:0;font-size:13.6px;color:var(--muted);line-height:1.6}
.pf-nota b{color:var(--navy)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

@media(max-width:820px){
  .pf-cuerpo{grid-template-columns:1fr;gap:0;padding:0 20px 20px}
  .pf-avatar{width:88px;height:88px;margin-top:-44px}
  .pf-avatar span{font-size:29px}
  .pf-id h2{font-size:1.42rem;margin-top:14px}
  .pf-acciones{margin-top:18px}
  .pf-acciones .btn,.pf-acciones .btn2{flex:1 1 auto;justify-content:center}
  .pf-cifra{border-right:0;border-bottom:1px solid var(--line)}
  .pf-cifra:last-child{border-bottom:0}
  .pf-pie{padding:18px 20px 22px}
}

/* Al sacar la tarjeta del selector de prosa, sus enlaces se quedaron con el
   subrayado por defecto del navegador. Hay que decir que no, explícitamente:
   quitar una regla no es lo mismo que poner la contraria. */
.perfil a{text-decoration:none}
.pf-legal{font-size:12.6px;color:var(--muted);opacity:.85}
/* el svg no se deja aplastar por el flex del titular */
.pf-check svg{flex:none;aspect-ratio:1}

/* Tres columnas exactas: con `auto-fit` la cuarta se descolgaba a una fila
   entera para ella sola, que era lo que hacía caótico el pie. */
footer .cols{display:grid;gap:24px 34px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:820px){footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){footer .cols{grid-template-columns:1fr;gap:20px}}

/* La letra pequeña, a dos columnas: cinco párrafos seguidos a todo el ancho
   son un muro que nadie lee. */
/* Una sola columna (decisión de Toño, 21-ago): con el sello y el
   cierre debajo, las dos columnas descuadraban. */
@media(min-width:900px){
  .fine{max-width:72ch;margin-left:auto;margin-right:auto}
}
.fine{margin-top:26px;padding-top:24px;border-top:1px solid rgba(255,255,255,.13)}

/* ══ AUTODIAGNÓSTICO ═══════════════════════════════════════════════════════ */
.diag{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl,28px);
  padding:30px;margin:26px 0 34px;box-shadow:var(--e-4)}
.diag .tramo h2{font-size:1.06rem;margin:2px 0 14px;color:var(--navy)}
.diag button{width:100%;font-size:16px}
.diag-priv{margin:16px 0 0;font-size:13.2px;color:var(--muted);line-height:1.6}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* el veredicto */
.veredicto{border-radius:20px;padding:28px 30px;margin:22px 0 30px;border:1px solid var(--line);
  background:#fff;box-shadow:var(--e-3)}
.veredicto .v-luz{display:flex;align-items:center;gap:9px;margin:0 0 8px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.veredicto .v-luz span{width:14px;height:14px;border-radius:50%}
.veredicto h1{margin:0 0 8px}
.veredicto .v-bajada{margin:0;font-size:1.06rem;color:var(--muted);max-width:56ch}
.veredicto .v-plazo{margin:16px 0 0;padding-top:16px;border-top:1px solid var(--line);
  font-size:1.02rem}
.veredicto.verde{border-color:color-mix(in srgb,#189a67 45%,var(--line))}
.veredicto.verde .v-luz{color:#0d6b47} .veredicto.verde .v-luz span{background:#189a67}
.veredicto.ambar{border-color:color-mix(in srgb,#d9884a 50%,var(--line))}
.veredicto.ambar .v-luz{color:var(--gold-d,#b3672f)} .veredicto.ambar .v-luz span{background:#d9884a}
.veredicto.rojo{border-color:color-mix(in srgb,#c0503a 45%,var(--line))}
.veredicto.rojo .v-luz{color:#c0503a} .veredicto.rojo .v-luz span{background:#c0503a}

/* los frenos */
.frenos{display:grid;gap:12px;margin:8px 0 26px}
.frenos article{display:grid;grid-template-columns:38px 1fr;gap:14px;align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.frenos .f-n{margin:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold-d,#b3672f);
  font-weight:700;font-size:14px}
.frenos h3{margin:2px 0 5px;font-size:1.04rem}
.frenos p{margin:0;font-size:14.8px;color:var(--muted)}
.frenos .f-plazo{margin-top:8px;font-size:12.8px;font-weight:700;color:var(--navy)}

.veto-legal{border:1px solid color-mix(in srgb,#c0503a 30%,var(--line));border-radius:12px;
  padding:16px 20px;margin:22px 0;background:color-mix(in srgb,#c0503a 4%,transparent)}
.veto-legal p{margin:0;font-size:14.4px;color:var(--muted)}
.cta-box.verde{border-color:color-mix(in srgb,#189a67 40%,var(--line));
  background:color-mix(in srgb,#189a67 5%,transparent)}
.fine-priv{font-size:13.2px;color:var(--muted);border-top:1px solid var(--line);
  padding-top:18px;margin-top:26px}
@media(max-width:700px){.diag{padding:22px 20px}}

/* ── el semáforo como promesa, antes de rellenar nada ─────────────────── */
.promesa{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:24px 0 26px}
.promesa article{position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-m);padding:18px 20px 18px 46px;box-shadow:var(--e-1)}
.promesa .pt{position:absolute;left:18px;top:21px;width:16px;height:16px;border-radius:50%}
.promesa b{display:block;font-size:15px;margin-bottom:3px}
.promesa p{margin:0;font-size:14px;color:var(--muted);line-height:1.5}
.promesa .pv .pt{background:#189a67;box-shadow:0 0 0 4px rgba(24,154,103,.15)}
.promesa .pv b{color:#0d6b47}
.promesa .pa .pt{background:#d9884a;box-shadow:0 0 0 4px rgba(217,136,74,.17)}
.promesa .pa b{color:var(--gold-d)}
.promesa .pr .pt{background:#c0503a;box-shadow:0 0 0 4px rgba(192,80,58,.15)}
.promesa .pr b{color:#c0503a}

/* el formulario, con su panel al lado */
.diag-cols{display:grid;gap:24px;grid-template-columns:1.4fr .8fr;align-items:start;margin-bottom:34px}
@media(max-width:900px){.diag-cols{grid-template-columns:1fr}
  .diag-cols .diag-lado{order:-1}}
.diag{margin:0}
.diag-lado{background:var(--navy);color:#cfe0d9;border-radius:var(--r-xl);padding:24px 26px;
  position:sticky;top:22px}
@media(max-width:900px){.diag-lado{position:static}}
.diag-lado h2{color:#fff;font-size:1.18rem;margin:0 0 16px}
.diag-lado ol{list-style:none;padding:0;margin:0 0 18px;counter-reset:d}
.diag-lado ol li{counter-increment:d;position:relative;padding-left:34px;margin-bottom:13px;
  font-size:14.2px;line-height:1.55}
.diag-lado ol li:before{content:counter(d);position:absolute;left:0;top:-1px;width:24px;height:24px;
  border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;
  background:var(--gold);color:var(--navy)}
.diag-lado b{color:#fff}
.diag-lado .promesas{list-style:none;padding:18px 0 0;margin:0;
  border-top:1px solid rgba(255,255,255,.16);display:grid;gap:9px}
.diag-lado .promesas li{position:relative;padding-left:25px;font-size:13.8px}
.diag-lado .promesas li:before{content:"";position:absolute;left:2px;top:7px;width:10px;height:6px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.dl-fine{margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.16);
  font-size:12.6px;line-height:1.6;color:#a9c0b8}

/* ── los tres ficheros oficiales ──────────────────────────────────────── */
.ficheros{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:18px 0 22px}
.ficheros article{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);
  padding:20px;box-shadow:var(--e-1)}
.fi-n{margin:0 0 2px;font-family:var(--mono,ui-monospace);font-size:11px;letter-spacing:.13em;
  color:var(--gold-d);font-weight:700}
.ficheros h3{margin:0 0 8px;font-size:1.08rem}
.ficheros p{margin:0 0 10px;font-size:14.2px;color:var(--muted);line-height:1.55}
.fi-plazo{font-size:12.8px;font-weight:700;color:var(--navy)!important;margin:0 0 10px!important}
.fi-url{margin:0!important;font-size:13px;word-break:break-all}

/* La ayuda bajo cada campo. Esta regla solo vivía en el <style> de la portada,
   así que cualquier formulario en otra página salía con el texto de ayuda
   pegado al lado del input. Va aquí, que la cargan todas. */
.campo>em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:4px}
.campo>em.op{display:inline;font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--tenue,#8b968f);margin:0 0 0 6px}

/* ── el formulario de conversión del diagnóstico (17-ago-2026) ───────────── */
/* El diagnóstico ya dice la verdad, incluido «no me necesitas». Esto va
   después, y por eso se puede permitir ser directo: no vende, ofrece. */
.conv{margin-top:16px}
.conv-cebo{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.conv-campos{display:grid;gap:0 16px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));align-items:end}
.conv .consent{margin-top:14px}
.conv button{margin-top:14px}

/* Volver al inicio desde el resultado del diagnóstico, y acciones del error. */
.volver{margin:0 0 6px}
.volver a{font-size:14px;color:var(--muted)}
.acciones{display:flex;flex-wrap:wrap;gap:10px;align-items:center}