/* Cauce Consultores · v3 · «informe subrayado»: hoja de informe blanca, tinta grafito, índigo de la firma
   (--principal) y un solo resaltador amarillo que marca lo que importa. Los casos se miden en una regla. */
:root {
  --principal: #3B2F9E;
  --principal-osc: #2E2479;
  --resaltador: #F2E14C;
  --papel: #F4F5F1;
  --blanco: #FFFFFF;
  --tinta: #15171C;
  --tinta-2: #474B54;
  --tinta-3: #6A6E77;
  --linea: #D7D9D2;
  --linea-2: #E6E7E2;
  --f-titulo: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-texto: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ancho: 1240px;
  --margen: clamp(20px, 5vw, 56px);
  --radio: 6px;
  --sombra: 0 1px 2px rgba(21, 23, 28, .06), 0 10px 30px -12px rgba(21, 23, 28, .22);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: 400 1.0625rem/1.6 var(--f-texto); font-feature-settings: "tnum" 0;
  overflow-x: clip; padding-bottom: 76px;
}
@media (min-width: 960px) { body { padding-bottom: 0; } }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--f-titulo); color: var(--tinta); margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--principal); text-underline-offset: 3px; text-decoration-thickness: 1px; }
::selection { background: var(--resaltador); color: var(--tinta); }
:focus-visible { outline: 2px solid var(--principal); outline-offset: 3px; border-radius: 2px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; background: var(--tinta); color: #fff; padding: 10px 14px; z-index: 50; border-radius: var(--radio); }
.saltar:focus { top: 12px; }

/* franja de la página de ejemplo */
.ejemplo { background: var(--tinta); color: #E9EAE6; font-size: .8125rem; line-height: 1.45; text-align: center; padding: 8px var(--margen); }
.ejemplo strong { color: #fff; font-weight: 600; }

/* ───────── botones ───────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border-radius: var(--radio);
  background: var(--principal); color: #fff; border: 1.5px solid var(--principal);
  font: 600 1rem/1.15 var(--f-texto); text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color .2s ease, border-color .2s ease, transform .2s cubic-bezier(.2, .8, .2, 1);
}
.boton svg { width: 20px; height: 20px; flex: none; }
.boton:hover { background: var(--principal-osc); border-color: var(--principal-osc); }
.boton:active { transform: translateY(1px); }
.boton--linea { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.boton--linea:hover { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.boton--peq { white-space: nowrap; min-height: 42px; padding: 0 16px; font-size: .9375rem; }
.boton--ancho { width: 100%; }

/* ───────── cabecera ───────── */
.cabecera {
  position: sticky; top: 0; z-index: 20; background: rgba(244, 245, 241, .94);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--linea);
  display: flex; align-items: center; gap: 24px; padding: 12px var(--margen);
}
.marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinta); min-width: 0; margin-right: auto; }
.marca__sello {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 4px;
  background: linear-gradient(to top, var(--resaltador) 0 32%, var(--tinta) 32%);
  color: #fff; font: 700 1.25rem/1 var(--f-titulo);
}
.marca__logo { height: 40px; width: auto; max-width: 140px; object-fit: contain; flex: none; }
.marca__nombre { font: 700 1.1875rem/1.1 var(--f-titulo); letter-spacing: -.01em; overflow-wrap: anywhere; }
.nav { display: none; }
.cabecera > .boton { display: none; }
@media (min-width: 1180px) { .nav { display: flex; } }
@media (min-width: 960px) {
  .nav { gap: 26px; }
  .nav a { white-space: nowrap; color: var(--tinta-2); text-decoration: none; font-size: .9375rem; padding: 6px 0; border-bottom: 2px solid transparent; }
  .nav a:hover { color: var(--tinta); border-bottom-color: var(--resaltador); }
  .cabecera > .boton { display: inline-flex; }
}

/* ───────── portada ───────── */
.portada {
  max-width: var(--ancho); margin: 0 auto; padding: clamp(32px, 6vw, 88px) var(--margen) clamp(36px, 6vw, 80px);
  display: grid; gap: clamp(36px, 5vw, 72px); align-items: center;
}
@media (min-width: 960px) { .portada { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.portada h1 {
  font-size: clamp(2.5rem, 8.2vw, 5.25rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 700;
}
.resaltado {
  color: inherit; padding: 0 .06em; margin: 0 -.02em;
  background: linear-gradient(transparent 0 56%, var(--resaltador) 56% 94%, transparent 94%) no-repeat 0 0 / 100% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* el único movimiento de la página: el resaltador pasa por el titular */
@media (prefers-reduced-motion: no-preference) {
  .resaltado { animation: resaltar 1.1s cubic-bezier(.16, 1, .3, 1) .35s both; }
  @keyframes resaltar { from { background-size: 0 100%; } to { background-size: 100% 100%; } }
}
.portada__lema { margin-top: 22px; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--tinta-2); max-width: 34em; }
.portada__botones { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.portada__botones .boton { flex: 1 1 220px; }
@media (min-width: 600px) { .portada__botones .boton { flex: 0 0 auto; } }
.portada__nota { margin-top: 16px; font-size: .9375rem; color: var(--tinta-3); display: flex; gap: 8px; align-items: baseline; }
.portada__nota::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--resaltador); border: 1.5px solid var(--tinta); transform: translateY(1px); }

.portada__figura { margin: 0; position: relative; }
.foto { position: relative; overflow: hidden; background: var(--linea-2); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.portada__foto { aspect-ratio: 4 / 3.4; border-radius: var(--radio); }
@media (min-width: 960px) { .portada__foto { aspect-ratio: 4 / 5; } }
.ficha {
  position: relative; margin: -56px 14px 0; background: var(--blanco); border-radius: var(--radio);
  padding: 16px 18px 18px; box-shadow: var(--sombra); border: 1px solid var(--linea-2);
}
@media (min-width: 960px) { .ficha { position: absolute; left: -48px; bottom: 36px; width: min(360px, 88%); margin: 0; } }
.ficha__cabeza { display: flex; justify-content: space-between; gap: 12px; font-size: .8125rem; color: var(--tinta-3); }
.ficha__cabeza b { color: var(--tinta); font-weight: 600; }
.ficha__aviso { white-space: nowrap; }
.ficha__indicador { margin-top: 4px; font: 700 1.25rem/1.2 var(--f-titulo); }
.ficha__indicador span { font: 400 .9375rem var(--f-texto); color: var(--tinta-3); }

/* ───────── la regla (antes → después) ───────── */
.regla {
  position: relative; height: 92px; margin-top: 10px;
  --marca-y: 52px;
}
.regla::before {             /* la regla: línea con marcas cada 5 % y marcas largas cada 25 % */
  content: ""; position: absolute; left: 0; right: 0; top: var(--marca-y); height: 14px;
  background:
    linear-gradient(var(--tinta), var(--tinta)) 0 0 / 100% 1.5px no-repeat,
    repeating-linear-gradient(90deg, var(--tinta) 0 1.5px, transparent 1.5px 25%) 0 0 / calc(100% - 1.5px) 14px no-repeat,
    repeating-linear-gradient(90deg, var(--tinta-3) 0 1px, transparent 1px 5%) 0 0 / calc(100% - 1px) 7px no-repeat;
}
.regla::after { content: ""; position: absolute; right: 0; top: var(--marca-y); width: 1.5px; height: 14px; background: var(--tinta); }
.regla__tramo {
  position: absolute; top: calc(var(--marca-y) - 9px); height: 10px;
  left: min(var(--a), var(--d)); width: calc(max(var(--a), var(--d)) - min(var(--a), var(--d)));
  background: var(--resaltador);
}
.regla__marca { position: absolute; top: 0; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); line-height: 1.1; white-space: nowrap; }
.regla__marca i { font: italic 400 .75rem var(--f-texto); color: var(--tinta-3); }
.regla__marca b { font: 700 1.125rem var(--f-titulo); font-variant-numeric: tabular-nums; }
.regla__marca::after { content: ""; width: 12px; height: 12px; margin-top: 6px; border-radius: 50%; border: 2px solid var(--tinta); background: var(--blanco); }
.regla__marca--antes { left: var(--a); color: var(--tinta-2); }
.regla__marca--despues { left: var(--d); }
.regla__marca--despues b { color: var(--principal); }
.regla__marca--despues::after { background: var(--principal); border-color: var(--principal); }
.regla__escala { position: absolute; left: 0; right: 0; top: calc(var(--marca-y) + 20px); display: flex; justify-content: space-between; font-size: .75rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
/* que las etiquetas no se salgan por los bordes */
.regla__marca { max-width: 120px; }
.regla[style*="--a:0"] .regla__marca--antes, .regla[style*="--d:0"] .regla__marca--despues { transform: none; align-items: flex-start; }

/* ───────── sectores ───────── */
.sectores {
  max-width: var(--ancho); margin: 0 auto; padding: 18px var(--margen) 0; color: var(--tinta-2);
  border-top: 1px solid var(--linea); font-size: 1rem;
}
.sectores span { color: var(--tinta); font-weight: 600; }

/* ───────── secciones ───────── */
.seccion { max-width: var(--ancho); margin: 0 auto; padding: clamp(56px, 8vw, 112px) var(--margen) 0; }
.seccion h2, .opiniones h2 { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.06; letter-spacing: -.03em; font-weight: 700; }
.seccion__cabeza { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); max-width: 46em; }
.seccion__cabeza > p { color: var(--tinta-2); }
.aviso { font-size: .875rem; color: var(--tinta-3); }

/* servicios: una hoja de informe con renglones */
.servicios__lista { list-style: none; margin: 0; padding: 0; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); }
.servicio { display: grid; gap: 14px; padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 36px); }
.servicio + .servicio { border-top: 1px solid var(--linea-2); }
.servicio h3 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); letter-spacing: -.02em; line-height: 1.15; }
.servicio__que > p { margin-top: 8px; color: var(--tinta-2); max-width: 40em; }
.servicio__que > .servicio__resultado { color: var(--tinta); }
.servicio__resultado b { font-weight: 600; }
.servicio__resultado span {
  background: linear-gradient(transparent 0 62%, rgba(242, 225, 76, .75) 62% 96%, transparent 96%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.servicio__cuanto { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding-top: 12px; border-top: 1px dashed var(--linea); }
.servicio__plazo { font-size: .9375rem; color: var(--tinta-3); }
.servicio__precio { font-variant-numeric: tabular-nums; white-space: nowrap; }
.servicio__precio small { font-size: .875rem; color: var(--tinta-3); }
.servicio__precio b { font: 700 1.375rem var(--f-titulo); letter-spacing: -.01em; }
@media (min-width: 820px) {
  .servicio { grid-template-columns: minmax(0, 1fr) 220px; gap: 40px; align-items: start; }
  .servicio__cuanto { display: grid; justify-items: end; text-align: right; padding: 4px 0 0; border-top: 0; gap: 4px; }
}

/* casos */
.casos__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 820px) { .casos__lista { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } }
.caso { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 22px 22px 24px; display: grid; gap: 4px; align-content: start; }
.caso__quien { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: .875rem; color: var(--tinta-3); }
.caso__quien b { color: var(--tinta); font-weight: 600; }
.caso__indicador { font-size: 1.5rem; letter-spacing: -.02em; margin-top: 6px; }
.caso__plazo { font: 400 .9375rem var(--f-texto); color: var(--tinta-3); letter-spacing: 0; }
.caso__texto { color: var(--tinta-2); font-size: .9375rem; margin-top: 4px; }

/* cómo trabajamos */
.como { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 960px) { .como { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.pasos { list-style: none; margin: 28px 0 0; padding: 0; counter-reset: paso; }
.pasos li {
  counter-increment: paso; position: relative; padding: 0 0 26px 64px; min-height: 48px;
}
.pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: -2px; width: 44px; height: 44px; display: grid; place-items: center;
  border: 1.5px solid var(--tinta); border-radius: 50%; background: var(--papel);
  font: 700 1.125rem/1 var(--f-titulo); font-variant-numeric: tabular-nums; z-index: 1;
}
.pasos li:first-child::before { background: var(--resaltador); }
.pasos li:not(:last-child)::after { content: ""; position: absolute; left: 21.5px; top: 44px; bottom: 0; width: 1.5px; background: var(--linea); }
.pasos h3 { font-size: 1.25rem; letter-spacing: -.01em; line-height: 1.25; padding-top: 8px; }
.pasos p { margin-top: 6px; color: var(--tinta-2); max-width: 36em; }
.como__foto { aspect-ratio: 3 / 2; border-radius: var(--radio); }

/* equipo: en el celular, foto pequeña al lado; en el computador, el título a la izquierda y tres columnas */
.equipo__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.persona { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0 18px; align-items: start; }
.persona > .persona__foto { grid-row: span 3; }
.persona h3 { font-size: 1.25rem; letter-spacing: -.01em; padding-top: 4px; }
.persona__cargo { color: var(--principal); font-weight: 600; font-size: .9375rem; margin-top: 2px; }
.persona p:last-child:not(.persona__cargo) { color: var(--tinta-2); font-size: .9375rem; margin-top: 6px; }
.persona__foto { aspect-ratio: 4 / 5; border-radius: var(--radio); }
.persona__foto img { filter: grayscale(.25) contrast(1.02); }
.persona__foto--inicial { display: grid; place-items: center; background: var(--tinta); }
.persona__foto--inicial span { color: #fff; font: 700 2.5rem var(--f-titulo); }
@media (min-width: 640px) {
  .equipo__lista { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px 20px; }
  .persona { display: block; }
  .persona h3 { margin-top: 16px; padding-top: 0; }
  .persona__foto--inicial span { font-size: 4rem; }
}
@media (min-width: 1100px) {
  .equipo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: 56px; align-items: start; }
  .equipo .seccion__cabeza { position: sticky; top: 110px; }
}

/* opiniones: el único campo de color fuerte de la página */
.opiniones {
  margin-top: clamp(64px, 9vw, 120px); background: var(--principal); color: #fff;
  padding: clamp(56px, 8vw, 104px) var(--margen);
}
.opiniones > * { max-width: calc(var(--ancho) - 2 * var(--margen)); margin-left: auto; margin-right: auto; }
.opiniones h2 { color: #fff; }
.opiniones__aviso { margin-top: 10px; color: #D9D6F2; font-size: .875rem; }
.citas { list-style: none; padding: 0; margin-top: 36px; display: grid; gap: 36px; }
@media (min-width: 820px) { .citas { grid-template-columns: 1fr 1fr; gap: 56px; } }
.citas blockquote { margin: 0; }
.citas blockquote p { font: 500 clamp(1.25rem, 2.3vw, 1.625rem)/1.35 var(--f-titulo); letter-spacing: -.01em; }
.cita__quien { margin-top: 14px; font-size: .9375rem; color: #D9D6F2; padding-left: 28px; position: relative; }
.cita__quien::before { content: ""; position: absolute; left: 0; top: .7em; width: 18px; height: 2px; background: var(--resaltador); }

/* preguntas */
.acordeon { border-top: 1px solid var(--linea); max-width: 860px; margin-top: 28px; }
.acordeon details { border-bottom: 1px solid var(--linea); }
.acordeon summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 0; font: 600 1.125rem/1.35 var(--f-titulo);
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary svg { flex: none; transition: transform .25s ease; }
.acordeon details[open] summary svg { transform: rotate(45deg); }
.acordeon summary:hover span { text-decoration: underline; text-decoration-color: var(--resaltador); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.acordeon details p { padding: 0 40px 22px 0; color: var(--tinta-2); max-width: 44em; }

/* contacto */
.contacto { display: grid; gap: clamp(32px, 5vw, 72px); padding-bottom: clamp(56px, 8vw, 104px); }
@media (min-width: 960px) { .contacto { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; } }
.contacto__lado > p { margin-top: 14px; color: var(--tinta-2); max-width: 32em; }
.contacto__botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.contacto__botones .boton { flex: 1 1 200px; }
@media (min-width: 600px) { .contacto__botones .boton { flex: 0 0 auto; } }
.contacto__datos { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; }
.contacto__datos li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; font-size: .9375rem; }
.contacto__datos li > span:first-child { color: var(--tinta-3); }
.contacto__datos a { color: var(--tinta); overflow-wrap: anywhere; }
.horario { margin-top: 24px; border-collapse: collapse; width: 100%; max-width: 420px; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.horario caption { text-align: left; font-weight: 600; margin-bottom: 6px; }
.horario th, .horario td { text-align: left; padding: 7px 0; border-top: 1px solid var(--linea-2); vertical-align: top; }
.horario th { font-weight: 400; color: var(--tinta-3); padding-right: 16px; width: 46%; }

.formulario { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: clamp(20px, 3vw, 36px); display: grid; gap: 20px; box-shadow: var(--sombra); }
.campo { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.campo label, .campo legend { font-weight: 600; font-size: .9375rem; padding: 0; }
.campo__opc { font-weight: 400; color: var(--tinta-3); }
.campo__ayuda { color: var(--tinta-3); font-size: .875rem; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--linea); border-radius: var(--radio);
  background: var(--blanco); color: var(--tinta); font: 400 1rem var(--f-texto);
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--principal); box-shadow: 0 0 0 3px rgba(59, 47, 158, .16); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.chips label { position: relative; font-weight: 400; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px; border: 1.5px solid var(--linea); border-radius: 999px;
  font-size: .9375rem; cursor: pointer; transition: background-color .15s, border-color .15s;
}
.chips span:hover { border-color: var(--tinta-3); }
.chips input:checked + span { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.chips input:focus-visible + span { outline: 2px solid var(--principal); outline-offset: 2px; }
.error { color: #A3261B; font-weight: 600; font-size: .9375rem; }
.nota { color: var(--tinta-3); font-size: .8125rem; }

/* pie */
.pie { background: var(--tinta); color: #C9CBC4; padding: 40px var(--margen) 48px; font-size: .9375rem; display: grid; gap: 6px; }
.pie > * { max-width: var(--ancho); width: 100%; margin: 0 auto; }
.pie__nombre { color: #fff; font: 700 1.375rem var(--f-titulo); }
.pie a { color: #fff; }

/* barra de abajo en el celular */
.barra-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(244, 245, 241, .96);
  border-top: 1px solid var(--linea); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.barra-movil .boton { flex: 1; }
.barra-movil__icono {
  flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--radio);
  border: 1.5px solid var(--tinta); color: var(--tinta);
}
.barra-movil__icono svg { width: 22px; height: 22px; }
@media (min-width: 960px) { .barra-movil { display: none; } }

/* diálogo de la página de ejemplo */
dialog { border: 0; padding: 0; border-radius: 10px; max-width: min(460px, calc(100vw - 32px)); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45); }
dialog::backdrop { background: rgba(21, 23, 28, .55); }
.dlg { padding: 26px; display: grid; gap: 14px; }
.dlg h2 { font-size: 1.5rem; }
.dlg p { color: var(--tinta-2); }
.dlg__mensaje { margin: 0; white-space: pre-wrap; background: #FBF7CF; padding: 14px; border-radius: 4px; font: 400 .9375rem/1.5 var(--f-texto); max-height: 40vh; overflow: auto; }