/* =========================================================================
   GRUPO LINAJE — Sistema de diseño
   Especialistas en herencias y sucesiones
   -------------------------------------------------------------------------
   Paleta:  blanco roto · negro carbón · gris piedra · verde bosque · burdeos
   Tipos:   Playfair Display (serif editorial) + Inter Tight (sans contemporánea)
   ========================================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Superficies */
  --paper:      #F7F4EF;
  --paper-2:    #EFEAE1;
  --paper-3:    #E6E0D5;
  --white:      #FCFAF7;

  /* Tinta */
  --ink:        #15171A;
  --ink-2:      #24282B;
  --ink-3:      #3A3F43;

  /* Piedra */
  --stone:      #85817A;
  --ink-soft:   #6B6760;   /* gris de texto pequeno: 4,9:1 sobre marfil */
  --stone-2:    #A9A49B;
  --stone-3:    #C8C2B7;

  /* Marca */
  --forest:     #1C3A2E;
  --forest-2:   #2B5643;
  --forest-3:   #3E7159;
  --olive:      #7E8C63;
  --claret:     #6B2739;

  /* Derivados */
  --line:       rgba(21,23,26,.13);
  --line-soft:  rgba(21,23,26,.07);
  --line-dark:  rgba(247,244,239,.16);

  /* Tipografía */
  --serif: 'Playfair Display', 'Iowan Old Style', 'Palatino Linotype', Georgia, 'Times New Roman', serif;
  --sans:  'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Escala tipográfica — TODOS los tamaños de la web salen de aquí.
     Los px indicados son con el tamaño de raíz por defecto (16 px);
     si el usuario agranda la letra del navegador, todo escala con él.
     Regla: por debajo de 13 px no baja ningún texto que haya que leer. */
  --t-2xs:  .8125rem;   /* 13 px · legal, contadores, microcopy mínimo */
  --t-xs:   .875rem;    /* 14 px · navegación, botones, epígrafes, etiquetas */
  --t-sm:   .9375rem;   /* 15 px · notas, pies de foto, texto auxiliar */
  --t-base: 1rem;       /* 16 px · campos de formulario: por debajo, iOS hace zoom al enfocar */
  --t-md:   1.0625rem;  /* 17 px · texto de tarjetas, listas y pie */
  --t-lg:   1.15rem;    /* 18,4 px · nombre de marca en el pie */
  --t-body: clamp(1.0625rem, .22vw + 1.02rem, 1.15rem);  /* 17 → 18,4 px */
  --t-lede: clamp(1.15rem, 1.45vw, 1.34rem);             /* 18,4 → 21 px */

  /* Titulares. El orden de tamaño es el orden de importancia:
     hero > frase de marca > frase de sección > titular de sección. */
  --d-hero: clamp(2.8rem, 6.4vw, 6.4rem);   /* 45 → 92 px */
  --d-xxl:  clamp(2.45rem, 6vw, 5.4rem);    /* 39 → 86 px */
  --d-xl:   clamp(2.3rem, 5.4vw, 4.8rem);   /* 37 → 78 px */
  --d-l:    clamp(2.15rem, 4.2vw, 3.7rem);  /* 34 → 60 px */
  --d-m:    clamp(1.45rem, 2.2vw, 2.1rem);  /* 23 → 32 px */
  --d-s:    clamp(1.24rem, 1.7vw, 1.6rem);  /* 20 → 25 px */

  /* Tres pesos, no once. */
  /* Medida de linea: la unidad ch equivale al ancho del cero, que en
     Inter Tight es mas ancho que la letra media. 53ch dan unos 74
     caracteres reales por linea, dentro del optimo de lectura. */
  --medida: 53ch;

  --w-normal: 400;
  --w-medium: 500;
  --w-bold:   600;

  /* Ritmo */
  --gutter: clamp(20px, 5vw, 76px);
  --maxw: 1560px;
  --section-y: clamp(76px, 9.4vw, 146px);

  /* Movimiento */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .28s;
  --t: .55s;
  --t-slow: .9s;

  --radius: 3px;
  --radius-lg: 6px;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* Sin esto el navegador pide 700 a una fuente que sólo llega a 600 y la
   engorda artificialmente (falsa negrita). */
strong,b{ font-weight:var(--w-bold); }
/* Los titulares y las cabeceras de tabla venian del navegador a 700; la
   Inter Tight solo se carga hasta 600, asi que el navegador la engordaba
   por software. Se fijan al peso real disponible. */
h1,h2,h3,h4,h5,h6{ font-weight:var(--w-normal); }
th{ font-weight:var(--w-medium); text-align:left; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.58;
  font-weight:var(--w-normal);
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
body.is-locked{ overflow:hidden; }
img,svg,video{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,p,figure,blockquote,dl,dd{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
hr{ border:0; border-top:1px solid var(--line); margin:0; }
::selection{ background:var(--forest); color:var(--paper); }
:focus-visible{
  outline:2px solid var(--forest-3);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- 3. TEXTURA ---------- */
.grain{
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.4; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.19'/%3E%3C/svg%3E");
}

/* ---------- 4. TIPOGRAFÍA ---------- */
.display{
  font-family:var(--serif);
  font-weight:var(--w-normal);
  line-height:.95;
  letter-spacing:-.033em;
  text-wrap:balance;
}
.d-xxl{ font-size:var(--d-xxl); }
.d-xl { font-size:var(--d-xl); }
.d-l  { font-size:var(--d-l); line-height:1.02; }
.d-m  { font-size:var(--d-m); line-height:1.1; letter-spacing:-.022em; }
.d-s  { font-size:var(--d-s); line-height:1.18; letter-spacing:-.018em; }

.serif-it{ font-family:var(--serif); font-style:italic; font-weight:var(--w-normal); letter-spacing:-.02em; }

.eyebrow{
  font-size:var(--t-2xs); font-weight:var(--w-medium); letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-soft);
  display:flex; align-items:center; gap:.85em;
}
.eyebrow::before{
  content:''; width:26px; height:1px; background:var(--forest-3); flex:none;
}
.eyebrow.no-rule::before{ display:none; }
.eyebrow.dark{ color:var(--stone-3); }

.lede{
  font-size:var(--t-lede);
  line-height:1.5; color:var(--ink-3); max-width:52ch;
  font-weight:var(--w-normal);
}
.muted{ color:var(--stone); }
.tiny{ font-size:var(--t-2xs); line-height:1.5; letter-spacing:.01em; color:var(--ink-soft); }
/* Sobre fondo oscuro el gris tiene que ir al otro lado de la escala. */
.dark .tiny,.footer .tiny,.final .tiny{ color:var(--stone-2); }

.num{
  font-family:var(--sans); font-weight:var(--w-medium); font-size:var(--t-2xs);
  letter-spacing:.16em; color:var(--forest-3);
  font-variant-numeric:tabular-nums;
}

/* ---------- 5. LAYOUT ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); position:relative; }
.section--tight{ padding-block:clamp(60px,7vw,110px); }
.dark{ background:var(--ink); color:var(--paper); }
.dark .muted{ color:var(--stone-2); }
.dark .lede{ color:var(--stone-3); }
.forest{ background:var(--forest); color:var(--paper); }

.sec-head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  gap:clamp(24px,4vw,72px); align-items:end;
  margin-bottom:clamp(40px,5vw,78px);
}
.sec-head__aside{ padding-bottom:.4em; }
@media (max-width:900px){
  .sec-head{ grid-template-columns:1fr; gap:22px; }
  .sec-head__aside{ padding-bottom:0; }
}

/* ---------- 6. BOTONES / ENLACES ---------- */
.btn{
  --bg:var(--forest); --fg:var(--paper); --bd:var(--forest);
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.85em; padding:1.12em 1.9em;
  background:var(--bg); color:var(--fg); border:1px solid var(--bd);
  font-size:var(--t-xs); font-weight:var(--w-medium); letter-spacing:.12em; text-transform:uppercase;
  border-radius:var(--radius); cursor:pointer; overflow:hidden;
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform .45s var(--ease-out);
  will-change:transform;
}
.btn span{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:.7em; }
.btn::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:var(--ink); transform:translateY(101%);
  transition:transform .5s var(--ease-out);
}
.btn:hover::after,.btn:focus-visible::after{ transform:translateY(0); }
.btn .arw{ transition:transform .4s var(--ease-out); }
.btn:hover .arw{ transform:translateX(5px); }

.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--line); }
.btn--ghost::after{ background:var(--forest); }
.btn--ghost:hover{ color:var(--paper); border-color:var(--forest); }
.dark .btn--ghost{ --fg:var(--paper); --bd:var(--line-dark); }
.dark .btn--ghost::after{ background:var(--paper); }
.dark .btn--ghost:hover{ color:var(--ink); border-color:var(--paper); }

.btn--paper{ --bg:var(--paper); --fg:var(--ink); --bd:var(--paper); }
.btn--paper::after{ background:var(--forest); }
.btn--paper:hover{ color:var(--paper); }

.btn--lg{ padding:1.32em 2.4em; font-size:var(--t-sm); }
.btn--block{ width:100%; }

/* Enlace con subrayado que se desplaza */
.link{
  position:relative; display:inline-flex; align-items:center; gap:.55em;
  font-size:var(--t-2xs); font-weight:var(--w-medium); letter-spacing:.12em; text-transform:uppercase;
  color:var(--forest); padding-bottom:.42em;
}
.link::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform-origin:right; transform:scaleX(1);
  transition:transform .45s var(--ease-out);
}
.link:hover::after{ transform:scaleX(0); transform-origin:left; }
.link .arw{ transition:transform .4s var(--ease-out); }
.link:hover .arw{ transform:translateX(5px); }
.dark .link{ color:var(--paper); }

.arw{ width:.95em; height:.95em; flex:none; }

/* ---------- 7. NAVEGACIÓN ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  transition:background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; height:var(--nav-h,84px);
  transition:height .4s var(--ease);
}
.nav.is-stuck{
  background:rgba(247,244,239,.86);
  backdrop-filter:saturate(1.5) blur(14px);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom-color:var(--line-soft);
}
.nav.is-stuck .nav__in{ --nav-h:68px; }
.nav.is-hidden{ transform:translateY(-104%); transition:transform .45s var(--ease); }

.brand{ display:flex; align-items:center; gap:13px; flex:none; }
.brand__mark{ width:22px; height:28px; flex:none; color:var(--forest); }
.brand__txt{ display:flex; flex-direction:column; line-height:1; }
.brand__name{
  font-family:var(--serif); font-size:var(--t-md); font-weight:var(--w-normal);
  letter-spacing:.11em; text-transform:uppercase;
}
.brand__sub{
  font-size:var(--t-2xs); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:5px; font-weight:var(--w-medium);
}

.nav__links{ display:flex; align-items:center; gap:clamp(14px,1.9vw,30px); }
.nav__link{
  position:relative; font-size:var(--t-xs); font-weight:var(--w-medium); letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-2); padding:6px 0;
  transition:color var(--t-fast) var(--ease);
}
.nav__link::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--forest); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease-out);
}
.nav__link:hover{ color:var(--forest); }
.nav__link:hover::after,.nav__link[aria-current="page"]::after{ transform:scaleX(1); }
.nav__link[aria-current="page"]{ color:var(--forest); }

.nav__cta{ display:flex; align-items:center; gap:14px; flex:none; }
.nav__tel{
  font-size:var(--t-xs); letter-spacing:.09em; font-weight:var(--w-medium); color:var(--ink-2);
  display:inline-flex; align-items:center; gap:.55em;
}
.nav__tel:hover{ color:var(--forest); }
.nav .btn{ padding:.92em 1.45em; font-size:var(--t-2xs); }

.burger{
  display:none; width:44px; height:44px; margin-right:-10px;
  align-items:center; justify-content:center; flex:none;
}
.burger i{
  display:block; width:22px; height:1.5px; background:var(--ink); position:relative;
  transition:background .2s var(--ease);
}
.burger i::before,.burger i::after{
  content:''; position:absolute; left:0; width:22px; height:1.5px; background:var(--ink);
  transition:transform .4s var(--ease-out);
}
.burger i::before{ top:-7px; }
.burger i::after{ top:7px; }
.burger.is-open i{ background:transparent; }
.burger.is-open i::before{ transform:translateY(7px) rotate(45deg); }
.burger.is-open i::after{ transform:translateY(-7px) rotate(-45deg); }

/* Menú móvil */
.menu{
  position:fixed; inset:0; z-index:890; background:var(--ink); color:var(--paper);
  padding:calc(var(--nav-h,84px) + 30px) var(--gutter) calc(40px + env(safe-area-inset-bottom,0px));
  display:flex; flex-direction:column; justify-content:space-between;
  /* En movil apaisado o en pantallas bajas el menu no cabe: se desplaza por
     dentro en lugar de quedar cortado. */
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  clip-path:inset(0 0 100% 0); pointer-events:none;
  transition:clip-path .7s var(--ease-out);
}
.menu.is-open{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.menu__list{ display:flex; flex-direction:column; gap:2px; }
.menu__item{ overflow:hidden; }
.menu__link{
  font-family:var(--serif); font-size:clamp(2rem,9vw,3.1rem); font-weight:var(--w-normal);
  letter-spacing:-.03em; line-height:1.3; display:flex; align-items:baseline; gap:.5em;
  transform:translateY(102%); transition:transform .6s var(--ease-out);
}
.menu.is-open .menu__link{ transform:translateY(0); }
.menu__link i{
  font-style:normal; font-family:var(--sans); font-size:var(--t-2xs);
  letter-spacing:.18em; color:var(--olive);
}
.menu__foot{ display:flex; flex-direction:column; gap:18px; opacity:0; transition:opacity .5s .35s var(--ease); }
.menu.is-open .menu__foot{ opacity:1; }

@media (max-width:1140px){
  .nav__links{ display:none; }
  .nav__tel{ display:none; }
  .burger{ display:flex; }
}
@media (max-width:560px){
  .nav .btn{ display:none; }
}

/* ---------- 8. HERO ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:stretch;
  padding-top:var(--nav-h,84px); overflow:clip;
}
.hero__grid{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  align-items:stretch;
}
.hero__left{
  padding:clamp(34px,4.4vw,74px) clamp(24px,3.6vw,64px) clamp(34px,4vw,64px) var(--gutter);
  display:flex; flex-direction:column; justify-content:center; gap:clamp(20px,2.4vw,34px);
  position:relative; z-index:3;
}
.hero__brandline{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.hero__kicker{
  font-size:var(--t-2xs); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:var(--w-medium);
}
.hero__h1{ margin-block:.06em .04em; }
.hero__h1 em{
  font-style:italic; font-weight:var(--w-normal);
  background:linear-gradient(180deg,var(--forest-2),var(--forest));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__sub{
  font-family:var(--serif); font-style:italic; font-weight:var(--w-normal);
  font-size:clamp(1.28rem,2.15vw,2rem); line-height:1.16; letter-spacing:-.022em;
  color:var(--ink-2); max-width:22ch;
}
.hero__p{ max-width:46ch; }
.hero__ctas{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.hero__meta{
  display:flex; flex-wrap:wrap; gap:8px 26px; padding-top:clamp(8px,1.4vw,18px);
  border-top:1px solid var(--line-soft); margin-top:4px;
}
.hero__meta li{
  font-size:var(--t-sm); letter-spacing:.02em; color:var(--ink-soft);
  display:flex; align-items:center; gap:.55em;
}
.hero__meta svg{ width:13px; height:13px; color:var(--forest-3); flex:none; }

/* Columna derecha: panel de conversión.
   Ocupa la mitad derecha completa y contrasta en verde bosque contra el
   blanco roto de la izquierda. El formulario vive dentro, sin tarjeta. */
.hero__right{
  position:relative; display:flex; align-items:center; justify-content:center;
  background:var(--forest); color:var(--paper);
  padding:clamp(40px,4.4vw,72px) clamp(26px,3.6vw,60px);
  overflow:hidden;
}
/* Dos focos muy suaves para que el verde no quede como un bloque plano */
.hero__right::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(115% 75% at 84% 8%, rgba(126,140,99,.3) 0%, rgba(28,58,46,0) 58%),
    radial-gradient(95% 75% at 6% 100%, rgba(9,22,17,.6) 0%, rgba(28,58,46,0) 62%);
}

/* Tarjeta de formulario (se sigue usando tal cual en el formulario final) */
.form-card{
  position:relative; background:var(--white);
  border:1px solid var(--line-soft);
  box-shadow:0 1px 2px rgba(21,23,26,.04), 0 30px 70px -32px rgba(21,23,26,.4);
  padding:clamp(22px,2vw,30px);
  border-radius:var(--radius-lg);
}
.hero__form{ position:relative; z-index:2; width:100%; max-width:430px; }

/* Dentro del panel la tarjeta desaparece: el formulario va sobre el verde */
.hero__form .form-card{
  background:transparent; border:0; box-shadow:none; padding:0; border-radius:0;
}
.hero__form .eyebrow{ color:var(--stone-3); }
.hero__form .eyebrow::before{ background:var(--olive); }
.hero__form .form-card__head h2{
  color:var(--paper); font-size:clamp(1.45rem,2.1vw,1.95rem);
}
.hero__form .field input,
.hero__form .field textarea{
  background:rgba(247,244,239,.06); border-color:rgba(247,244,239,.2); color:var(--paper);
}
.hero__form .field input:hover,
.hero__form .field textarea:hover{ border-color:rgba(247,244,239,.4); }
.hero__form .field input:focus,
.hero__form .field textarea:focus{ border-color:var(--paper); background:rgba(247,244,239,.11); }
.hero__form .field label{ color:var(--stone-3); }
.hero__form .field.is-filled label,
.hero__form .field input:focus + label,
.hero__form .field textarea:focus + label{ color:var(--olive); }
.hero__form .field--err input,
.hero__form .field--err textarea{ border-color:#E4A9B6; }
.hero__form .field__err{ color:#EDBDC7; }

.hero__form .consent{ color:var(--stone-3); }
.hero__form .consent a{ color:var(--paper); }
.hero__form .consent input{ background:rgba(247,244,239,.06); border-color:rgba(247,244,239,.36); }
.hero__form .consent input:checked{
  background-color:var(--paper); border-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' fill='none' stroke='%231C3A2E' stroke-width='2'%3E%3Cpath d='M1 4 3.6 6.6 9 1.2'/%3E%3C/svg%3E");
}
.hero__form .consent.is-err input{ border-color:#E4A9B6; }

.hero__form .btn{ --bg:var(--paper); --fg:var(--ink); --bd:var(--paper); }
.hero__form .btn::after{ background:var(--olive); }
.hero__form .btn:hover{ color:var(--ink); }
.hero__form .form-card__note{ color:var(--stone-3); }
.hero__form .form-card__note svg{ color:var(--olive); }
.hero__form .form-msg.ok{
  background:rgba(126,140,99,.18); color:#DDE6CC; border-color:rgba(126,140,99,.45);
}
.hero__form .form-msg.err{
  background:rgba(247,244,239,.08); color:#EDBDC7; border-color:rgba(237,189,199,.38);
}

/* Firma: recupera el elemento humano que daba el pie de foto */
/* Cierre del panel: la marca en claro, centrada, como sello del bloque */
.hero__marca{
  margin-top:clamp(20px,2.4vw,32px); padding-top:clamp(16px,1.8vw,22px);
  border-top:1px solid rgba(247,244,239,.16);
  display:flex; justify-content:center;
}
.hero__marca img{
  display:block; width:auto; height:clamp(26px,2.6vw,34px);
  opacity:.9;
}
.form-card__head{ margin-bottom:16px; }
.form-card__head h2{
  font-family:var(--serif); font-size:var(--d-s); font-weight:var(--w-normal); letter-spacing:-.024em;
  line-height:1.1; margin-top:8px;
}
.form-card__note{
  display:flex; align-items:center; justify-content:center; gap:.6em;
  margin-top:13px; font-size:var(--t-2xs); letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-soft);
}
.form-card__note svg{ width:12px; height:12px; color:var(--forest-3); }

/* ---------- Formulario en dos pasos ----------
   Paso 1: el usuario dice qué le pasa. Paso 2: sus datos.
   Las tarjetas son deliberadamente sobrias: rectángulos, sin sombra y
   sin icono, para no romper la línea editorial del resto de la web. */
.fstep[hidden]{ display:none; }
.fstep{
  opacity:0; transform:translateY(10px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.fstep.is-on{ opacity:1; transform:none; }

.opts{ display:grid; gap:7px; }
.opt{
  appearance:none; -webkit-appearance:none; font:inherit; cursor:pointer;
  position:relative; display:grid; gap:1px; text-align:left;
  padding:13px 42px 13px 16px;
  border:1px solid var(--line); background:var(--white); color:var(--ink);
  border-radius:var(--radius);
  transition:background var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease);
}
.opt::after{
  content:''; position:absolute; right:17px; top:50%;
  width:7px; height:7px; margin-top:-5px;
  border-right:1.4px solid currentColor; border-top:1.4px solid currentColor;
  transform:rotate(45deg); opacity:.45;
  transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.opt:hover::after{ opacity:1; transform:rotate(45deg) translate(2px,-2px); }
.opt__t{ font-size:var(--t-md); font-weight:var(--w-medium); letter-spacing:-.012em; line-height:1.3; }
.opt__q{ font-size:var(--t-sm); line-height:1.38; color:var(--stone); }

/* Sobre el panel verde del hero */
.hero__form .opt{
  border-color:rgba(247,244,239,.22); background:rgba(247,244,239,.05); color:var(--paper);
}
.hero__form .opt:hover{ background:rgba(247,244,239,.11); border-color:rgba(247,244,239,.5); }
.hero__form .opt:focus-visible{ outline:2px solid var(--paper); outline-offset:2px; }
.hero__form .opt__q{ color:var(--stone-3); }
.hero__form .opt.is-picked{ border-color:var(--olive); }

/* Volver al paso 1 */
.fstep__back{
  appearance:none; background:none; border:0; cursor:pointer; font:inherit;
  display:inline-flex; align-items:center; gap:.5em;
  margin-bottom:14px; padding:0;
  font-size:var(--t-2xs); letter-spacing:.09em; text-transform:uppercase;
  color:var(--stone); transition:color var(--t-fast) var(--ease);
}
.fstep__back .arw{ width:13px; height:13px; transform:rotate(180deg); }
.fstep__back:hover{ color:var(--ink); }
.hero__form .fstep__back{ color:var(--stone-3); }
.hero__form .fstep__back:hover{ color:var(--paper); }
/* La situación elegida queda a la vista como recordatorio */
.hero__form [data-pick]{ color:var(--olive); }

@media (max-width:1240px){
  .hero__form{ max-width:380px; }
}
/* Apilado: el panel verde pasa a ser una banda a todo el ancho, justo
   debajo del titular. La conversión sigue en la primera pantalla. */
@media (max-width:1040px){
  .hero{ min-height:auto; padding-bottom:0; }
  .hero__grid{ grid-template-columns:1fr; }
  .hero__left{ padding:clamp(40px,7vw,64px) var(--gutter) clamp(30px,5vw,44px); }
  .hero__right{ padding:clamp(36px,6vw,54px) var(--gutter) clamp(42px,7vw,62px); }
  .hero__form{ max-width:540px; margin-inline:auto; }
}
@media (max-width:640px){
  .hero__form{ max-width:none; }
}

/* ---------- 9. FORMULARIOS ---------- */
.field{ position:relative; margin-bottom:11px; }
.field label{
  position:absolute; left:13px; top:13px; pointer-events:none;
  font-size:var(--t-xs); color:var(--ink-soft); letter-spacing:.005em;
  transition:transform .28s var(--ease), font-size .28s var(--ease), color .28s var(--ease);
  transform-origin:left top; background:transparent;
}
.field input,.field textarea,.field select{
  width:100%; background:var(--paper); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:21px 13px 8px;
  font-size:var(--t-base); color:var(--ink); transition:border-color .28s var(--ease), background .28s var(--ease);
  appearance:none;
}
.field textarea{ resize:vertical; min-height:88px; line-height:1.5; }
.field select{
  padding-top:21px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2385817A' stroke-width='1.4'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.field input:hover,.field textarea:hover,.field select:hover{ border-color:var(--stone-3); }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--forest-2); background:var(--white);
}
.field.is-filled label,
.field input:focus + label,
.field textarea:focus + label,
.field select:focus + label{
  transform:translateY(-8px) scale(.74); color:var(--forest-2);
}
.field select + label{ transform:translateY(-8px) scale(.74); }
.field--err input,.field--err textarea,.field--err select{ border-color:var(--claret); }
.field__err{
  display:none; font-size:var(--t-2xs); color:var(--claret); margin-top:5px; letter-spacing:.01em;
}
.field--err .field__err{ display:block; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
@media (max-width:480px){ .field-row{ grid-template-columns:1fr; gap:0; } }

.hp{ position:absolute!important; left:-9999px!important; opacity:0; height:0; width:0; }

.consent{
  display:flex; gap:10px; align-items:flex-start; margin:13px 0 15px;
  font-size:var(--t-xs); line-height:1.55; color:var(--ink-3);
}
.consent input{
  appearance:none; width:16px; height:16px; flex:none; margin-top:1px;
  border:1px solid var(--stone-2); border-radius:2px; background:var(--paper);
  cursor:pointer; transition:background .2s var(--ease), border-color .2s var(--ease);
}
.consent input:checked{
  background:var(--forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' fill='none' stroke='%23F7F4EF' stroke-width='1.8'%3E%3Cpath d='M1 4 3.6 6.6 9 1.2'/%3E%3C/svg%3E") center no-repeat;
  border-color:var(--forest);
}
.consent a{ color:var(--ink-3); text-decoration:underline; text-underline-offset:2px; }
.consent.is-err input{ border-color:var(--claret); }

.radio-row{ display:flex; gap:8px; margin-bottom:11px; flex-wrap:wrap; }
.radio-row > span{
  width:100%; font-size:var(--t-2xs); letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:3px;
}
.radio{
  flex:1; min-width:86px; position:relative;
}
.radio input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.radio span{
  display:block; text-align:center; padding:11px 8px; font-size:var(--t-xs);
  border:1px solid var(--line-soft); border-radius:var(--radius);
  background:var(--paper); transition:all .25s var(--ease); cursor:pointer;
}
.radio input:checked + span{
  background:var(--forest); color:var(--paper); border-color:var(--forest);
}
.radio input:focus-visible + span{ outline:2px solid var(--forest-3); outline-offset:2px; }

.form-msg{
  display:none; margin-top:14px; padding:14px 15px; border-radius:var(--radius);
  font-size:var(--t-sm); line-height:1.5;
}
.form-msg.ok{ display:block; background:rgba(62,113,89,.1); color:var(--forest); border:1px solid rgba(62,113,89,.26); }
.form-msg.err{ display:block; background:rgba(107,39,57,.07); color:var(--claret); border:1px solid rgba(107,39,57,.22); }

.btn.is-loading{ pointer-events:none; opacity:.72; }
.btn.is-loading span::after{
  content:''; width:12px; height:12px; border:1.6px solid currentColor;
  border-top-color:transparent; border-radius:50%; display:inline-block;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- 10. MANIFIESTO ---------- */
.manifesto{ border-top:1px solid var(--line-soft); }
.manifesto__grid{
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(30px,5vw,90px); align-items:start;
}
.manifesto__aside{ display:flex; flex-direction:column; gap:22px; padding-top:.6em; }
.manifesto__aside p{ color:var(--ink-3); font-size:var(--t-md); line-height:1.6; }
@media (max-width:900px){ .manifesto__grid{ grid-template-columns:1fr; gap:28px; } }

/* Ticker */
.ticker{
  overflow:hidden; border-block:1px solid var(--line-soft);
  padding-block:14px; background:var(--paper-2);
}
.ticker__track{ display:flex; gap:0; width:max-content; animation:slide 44s linear infinite; }
.ticker span{
  font-size:var(--t-2xs); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
  padding-inline:26px; display:inline-flex; align-items:center; gap:26px; white-space:nowrap;
}
.ticker span::after{ content:''; width:3px; height:3px; border-radius:50%; background:var(--forest-3); }
@keyframes slide{ to{ transform:translateX(-50%); } }
.ticker:hover .ticker__track{ animation-play-state:paused; }

/* ---------- 11. SITUACIONES (interactivo) ---------- */
.situations__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft);
}
.sit{
  position:relative; background:var(--paper); padding:clamp(20px,2vw,30px);
  min-height:clamp(158px,15vw,208px); text-align:left; cursor:pointer;
  display:flex; flex-direction:column; justify-content:space-between; gap:14px;
  transition:background .4s var(--ease), color .4s var(--ease);
  overflow:hidden;
}
.sit::before{
  content:''; position:absolute; inset:0; background:var(--forest);
  transform:translateY(100%); transition:transform .55s var(--ease-out); z-index:0;
}
.sit:hover::before,.sit[aria-expanded="true"]::before{ transform:translateY(0); }
.sit > *{ position:relative; z-index:1; }
.sit:hover,.sit[aria-expanded="true"]{ color:var(--paper); }
.sit__t{
  font-size:var(--t-xs); font-weight:var(--w-medium); letter-spacing:.1em; text-transform:uppercase;
  line-height:1.35;
}
.sit__q{
  font-family:var(--serif); font-style:italic; font-weight:var(--w-normal); font-size:var(--t-md);
  line-height:1.24; color:var(--ink-3); transition:color .4s var(--ease); letter-spacing:-.015em;
}
.sit:hover .sit__q,.sit[aria-expanded="true"] .sit__q{ color:rgba(247,244,239,.78); }
.sit__plus{
  position:absolute; top:clamp(18px,1.8vw,26px); right:clamp(18px,1.8vw,26px);
  width:15px; height:15px; opacity:.4; transition:opacity .3s var(--ease), transform .45s var(--ease-out);
}
.sit:hover .sit__plus{ opacity:1; }
.sit[aria-expanded="true"] .sit__plus{ opacity:1; transform:rotate(135deg); }

.sit-panel{
  grid-column:1/-1; background:var(--paper-2); overflow:hidden;
  display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease-out);
}
.sit-panel.is-open{ grid-template-rows:1fr; }
.sit-panel__in{ min-height:0; }
.sit-panel__pad{
  padding:clamp(26px,3.4vw,50px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  gap:clamp(22px,3.4vw,58px); align-items:start;
}
.sit-panel h3{
  font-family:var(--serif); font-size:clamp(1.42rem,2.5vw,2rem); font-weight:var(--w-normal);
  letter-spacing:-.025em; line-height:1.08; margin-bottom:14px;
}
.sit-panel p{ color:var(--ink-3); max-width:62ch; }
.sit-panel p + p{ margin-top:11px; }
.sit-panel__cta{
  display:flex; flex-direction:column; gap:14px; align-items:flex-start;
  padding-left:clamp(0px,2vw,26px); border-left:1px solid var(--line);
}
@media (max-width:1100px){ .situations__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:1000px){ .sit-panel__pad{ grid-template-columns:1fr; } .sit-panel__cta{ border-left:0; padding-left:0; } }
@media (max-width:560px){
  .situations__grid{ grid-template-columns:1fr; }
  .sit{ min-height:0; padding:20px 18px; }
}

/* ---------- 12. PILARES ---------- */
.pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-dark); }
.pillar{
  background:var(--ink); padding:clamp(28px,3vw,46px) clamp(20px,2.2vw,34px);
  display:flex; flex-direction:column; gap:14px;
  transition:background .5s var(--ease);
}
.pillar:hover{ background:var(--forest); }
.pillar__n{ font-size:var(--t-2xs); letter-spacing:.16em; color:var(--olive); transition:color .4s var(--ease); }
.pillar:hover .pillar__n{ color:rgba(247,244,239,.6); }
.pillar h3{
  font-size:var(--t-xs); font-weight:var(--w-medium); letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper); line-height:1.3;
}
.pillar p{ color:var(--stone-3); font-size:var(--t-md); line-height:1.58; transition:color .4s var(--ease); }
.pillar:hover p{ color:rgba(247,244,239,.82); }
@media (max-width:980px){ .pillars{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){ .pillars{ grid-template-columns:1fr; } }

/* ---------- 13. SERVICIOS ---------- */
.services{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); border-block:1px solid var(--line-soft); }
.svc{
  position:relative; background:var(--paper); padding:clamp(26px,2.6vw,40px) clamp(20px,2.2vw,32px);
  min-height:clamp(230px,20vw,290px); display:flex; flex-direction:column; gap:12px;
  overflow:hidden; transition:background .5s var(--ease);
}
.svc::after{
  content:''; position:absolute; left:0; top:0; width:100%; height:2px;
  background:var(--forest); transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease-out);
}
.svc:hover::after{ transform:scaleX(1); }
.svc:hover{ background:var(--white); }
.svc__n{ font-size:var(--t-2xs); letter-spacing:.16em; color:var(--ink-soft); }
.svc h3{
  font-size:var(--t-xs); font-weight:var(--w-medium); letter-spacing:.12em; text-transform:uppercase;
  line-height:1.34; color:var(--ink);
}
.svc p{ color:var(--ink-3); font-size:var(--t-md); line-height:1.58; flex:1; }
.svc .link{ font-size:var(--t-2xs); margin-top:4px; }
@media (max-width:1180px){ .services{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .services{ grid-template-columns:1fr; } .svc{ min-height:0; } }

/* ---------- 14. SECCIÓN EMOCIONAL ---------- */
.emotive{
  position:relative; overflow:clip; background:var(--ink); color:var(--paper);
  padding-block:clamp(110px,16vw,240px);
}
.emotive__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.emotive__bg img{
  width:100%; height:120%; object-fit:cover; opacity:.3;
  filter:grayscale(.68) contrast(1.1); will-change:transform;
}
.emotive__bg::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 30% 40%,rgba(21,23,26,.5) 0%,rgba(21,23,26,.92) 72%);
}
.emotive__in{ position:relative; z-index:2; }
.emotive__h{ max-width:16ch; }
.emotive__list{
  margin-top:clamp(40px,5vw,78px); display:flex; flex-direction:column;
  border-top:1px solid var(--line-dark); max-width:640px;
}
.emotive__list li{
  padding:clamp(12px,1.4vw,19px) 0; border-bottom:1px solid var(--line-dark);
  font-family:var(--serif); font-weight:var(--w-normal); font-size:clamp(1.3rem,3vw,2.1rem);
  letter-spacing:-.025em; line-height:1.1; color:var(--paper);
  display:flex; align-items:baseline; gap:18px;
}
.emotive__list li b{
  font-family:var(--sans); font-size:var(--t-2xs); font-weight:var(--w-medium); letter-spacing:.16em;
  color:var(--olive); flex:none; width:24px;
}
.emotive__end{
  margin-top:clamp(36px,4.6vw,66px); max-width:26ch;
  font-family:var(--serif); font-style:italic; font-weight:var(--w-normal);
  font-size:clamp(1.3rem,2.5vw,2.05rem); line-height:1.16; letter-spacing:-.024em;
  color:var(--paper);
}

/* ---------- 15. PROCESO ---------- */
.process{ position:relative; }
.steps{ position:relative; margin-top:clamp(30px,4vw,58px); }
.steps__line{
  position:absolute; left:calc(clamp(44px,5vw,72px) / 2); top:16px; bottom:16px; width:1px;
  background:var(--line);
}
.steps__line i{
  position:absolute; inset:0; background:var(--forest); transform-origin:top;
  transform:scaleY(var(--p,0)); transition:transform .12s linear;
}
.step{
  display:grid; grid-template-columns:clamp(44px,5vw,72px) minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(16px,2.6vw,46px); align-items:start;
  padding-block:clamp(22px,2.8vw,40px); border-bottom:1px solid var(--line-soft);
  position:relative;
}
.step:last-child{ border-bottom:0; }
.step__dot{
  width:clamp(30px,3.2vw,40px); height:clamp(30px,3.2vw,40px); border-radius:50%;
  border:1px solid var(--line); background:var(--paper); display:grid; place-items:center;
  font-size:var(--t-2xs); letter-spacing:.04em; color:var(--ink-soft);
  transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease-out);
  position:relative; z-index:2;
}
.step.is-on .step__dot{ background:var(--forest); color:var(--paper); border-color:var(--forest); transform:scale(1.06); }
.step h2{
  font-size:clamp(var(--t-xs),1.1vw,var(--t-base)); font-weight:var(--w-medium); letter-spacing:.14em;
  text-transform:uppercase; line-height:1.36; color:var(--ink);
  transition:color .4s var(--ease);
}
.step p{ color:var(--ink-3); font-size:var(--t-md); line-height:1.58; max-width:56ch; }
@media (max-width:820px){
  .step{ grid-template-columns:clamp(40px,10vw,56px) 1fr; }
  .step p{ grid-column:2; }
}

/* ---------- 16. CASOS ---------- */
.cases{ position:relative; }
.cases__rail{
  display:flex; gap:clamp(14px,1.6vw,22px); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:18px; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
  scrollbar-width:thin; scrollbar-color:var(--stone-3) transparent;
  cursor:grab;
}
.cases__rail.is-drag{ cursor:grabbing; scroll-snap-type:none; }
.cases__rail::-webkit-scrollbar{ height:3px; }
.cases__rail::-webkit-scrollbar-thumb{ background:var(--stone-3); }
.cases__rail::-webkit-scrollbar-track{ background:var(--line-soft); }
.case{
  flex:0 0 clamp(268px,25vw,352px); scroll-snap-align:start;
  background:var(--white); border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  padding:clamp(24px,2.2vw,32px); display:flex; flex-direction:column; gap:16px;
  min-height:238px; text-align:left; cursor:pointer;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease), border-color .4s var(--ease);
}
.case:hover{
  transform:translateY(-5px);
  box-shadow:0 26px 54px -30px rgba(21,23,26,.4);
  border-color:var(--stone-3);
}
.case__q{
  font-family:var(--serif); font-size:clamp(1.18rem,1.75vw,1.45rem); font-weight:var(--w-normal);
  line-height:1.2; letter-spacing:-.022em; flex:1;
}
.case__q::before{ content:'«'; color:var(--forest-3); margin-right:.12em; }
.case__q::after{ content:'»'; color:var(--forest-3); margin-left:.1em; }
.case .link{ font-size:var(--t-2xs); }
.rail-hint{
  display:flex; align-items:center; gap:10px; margin-top:16px;
  font-size:var(--t-2xs); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft);
}
.rail-hint svg{ width:26px; height:8px; }

/* ---------- 17. MODAL ---------- */
dialog.modal{
  border:0; padding:0; background:transparent; max-width:min(620px,92vw); width:100%;
  color:var(--ink); margin:auto;
}
dialog.modal::backdrop{ background:rgba(21,23,26,.62); backdrop-filter:blur(4px); }
.modal__box{
  background:var(--paper); border-radius:var(--radius-lg); padding:clamp(28px,3.4vw,46px);
  position:relative; box-shadow:0 40px 90px -40px rgba(21,23,26,.6);
  animation:modalIn .5s var(--ease-out) both;
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(14px) scale(.99); } }
.modal__x{
  position:absolute; top:14px; right:14px; width:38px; height:38px;
  display:grid; place-items:center; border-radius:50%; color:var(--stone);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.modal__x:hover{ background:var(--paper-3); color:var(--ink); }
.modal__box h3{
  font-family:var(--serif); font-size:clamp(1.5rem,2.6vw,2.05rem); font-weight:var(--w-normal);
  letter-spacing:-.026em; line-height:1.08; margin:10px 0 16px;
}
.modal__box p{ color:var(--ink-3); }
.modal__box p + p{ margin-top:11px; }
.modal__foot{
  margin-top:26px; padding-top:20px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
}

/* ---------- 18. FUNDADOR ---------- */
.founder{ background:var(--paper-2); }
.founder__grid{
  display:grid; grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  gap:clamp(28px,5vw,86px); align-items:center;
}
.founder__photo{
  position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:var(--radius-lg);
  background:var(--paper-3);
}
.founder__photo img{ width:100%; height:100%; object-fit:cover; filter:saturate(.95); }
.founder__photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(28,58,46,0) 60%,rgba(28,58,46,.28) 100%);
  pointer-events:none;
}
.founder__body{ display:flex; flex-direction:column; gap:clamp(18px,2.2vw,28px); }
.founder__id{ padding-top:clamp(14px,2vw,22px); border-top:1px solid var(--line); }
.founder__id strong{
  display:block; font-family:var(--serif); font-size:clamp(1.28rem,2.1vw,1.72rem);
  font-weight:var(--w-normal); letter-spacing:-.022em;
}
.founder__id span{
  font-size:var(--t-2xs); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
  margin-top:7px; display:block;
}
.founder__quote{
  font-family:var(--serif); font-style:italic; font-weight:var(--w-normal);
  font-size:clamp(1.24rem,2.1vw,1.72rem); line-height:1.24; letter-spacing:-.022em;
  color:var(--ink); max-width:30ch;
}
@media (max-width:900px){
  .founder__grid{ grid-template-columns:1fr; }
  .founder__photo{ aspect-ratio:3/4; max-width:420px; }
}

/* ---------- 19. ARTÍCULOS ---------- */
.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border-block:1px solid var(--line-soft); }
.post{
  background:var(--paper); padding:clamp(24px,2.4vw,36px) clamp(20px,2.2vw,30px);
  display:flex; flex-direction:column; gap:14px; min-height:clamp(200px,17vw,250px);
  transition:background .45s var(--ease);
}
.post:hover{ background:var(--white); }
.post__tag{
  font-size:var(--t-2xs); letter-spacing:.16em; text-transform:uppercase; color:var(--forest-3);
}
.post h2{
  font-family:var(--serif); font-size:clamp(1.14rem,1.6vw,1.38rem); font-weight:var(--w-normal);
  line-height:1.16; letter-spacing:-.022em; flex:1;
  transition:color .3s var(--ease);
}
.post:hover h3{ color:var(--forest); }
.post__more{
  font-size:var(--t-2xs); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
  display:flex; align-items:center; gap:.5em; transition:color .3s var(--ease), gap .3s var(--ease);
}
.post:hover .post__more{ color:var(--forest); gap:.85em; }
@media (max-width:1000px){ .posts{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .posts{ grid-template-columns:1fr; } .post{ min-height:0; } }

/* ---------- 20. CTA OSCURO ---------- */
.cta-dark{ position:relative; overflow:clip; }
.cta-dark::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(70% 120% at 82% 18%,rgba(43,86,67,.5) 0%,rgba(21,23,26,0) 62%);
  pointer-events:none;
}
.cta-dark__in{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(26px,4vw,72px); align-items:end; }
@media (max-width:860px){ .cta-dark__in{ grid-template-columns:1fr; align-items:start; } }

/* ---------- 21. FAQ ---------- */
.faq{ border-top:1px solid var(--line-soft); }
.faq__list{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  padding:clamp(20px,2.3vw,30px) 0; text-align:left;
  font-family:var(--serif); font-size:clamp(1.1rem,1.75vw,1.44rem); font-weight:var(--w-normal);
  letter-spacing:-.022em; line-height:1.22; color:var(--ink);
  transition:color .3s var(--ease);
}
.faq__q:hover{ color:var(--forest); }
.faq__ic{
  flex:none; width:20px; height:20px; margin-top:.28em; position:relative;
}
.faq__ic::before,.faq__ic::after{
  content:''; position:absolute; background:var(--forest); transition:transform .45s var(--ease-out);
}
.faq__ic::before{ top:50%; left:0; width:100%; height:1.2px; margin-top:-.6px; }
.faq__ic::after{ left:50%; top:0; height:100%; width:1.2px; margin-left:-.6px; }
.faq__q[aria-expanded="true"] .faq__ic::after{ transform:rotate(90deg); }
.faq__a{
  display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease-out);
}
.faq__a.is-open{ grid-template-rows:1fr; }
.faq__a > div{ min-height:0; overflow:hidden; }
.faq__a p{
  color:var(--ink-3); max-width:72ch; padding-bottom:clamp(20px,2.3vw,30px);
}
.faq__a p + p{ padding-bottom:0; margin-bottom:11px; }

/* ---------- 22. CTA FINAL + FORMULARIO ---------- */
.final{ position:relative; overflow:clip; padding-block:clamp(84px,11vw,158px); }
.final::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(90% 100% at 20% 100%,rgba(43,86,67,.46) 0%,rgba(21,23,26,0) 65%);
}
.final__in{ position:relative; z-index:2; }
.final h2{ max-width:22ch; }
/* La franja de cierre se repite en todas las paginas. En la portada es el
   remate editorial y va grande; en el resto es un elemento recurrente y no
   debe tapar al H1 propio de cada pagina. */
.final .display{ font-size:var(--d-l); }
.final--home .display{ font-size:var(--d-xxl); }
.final__sub{ margin-top:clamp(20px,2.4vw,32px); max-width:44ch; }
.final__cta{ margin-top:clamp(26px,3vw,42px); display:flex; flex-wrap:wrap; gap:14px; }

.closing{ background:var(--paper-2); }
.closing__grid{
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(30px,5vw,86px); align-items:start;
}
.closing__aside{ display:flex; flex-direction:column; gap:26px; position:sticky; top:110px; }
.assure{ display:flex; flex-direction:column; gap:14px; }
.assure li{ display:flex; gap:12px; align-items:flex-start; font-size:var(--t-md); line-height:1.5; color:var(--ink-3); }
.assure svg{ width:16px; height:16px; color:var(--forest-2); flex:none; margin-top:.25em; }
.contact-box{ padding-top:22px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:12px; }
.contact-box a{ display:flex; align-items:center; gap:10px; font-size:var(--t-md); color:var(--ink-2); transition:color .25s var(--ease); }
.contact-box a:hover{ color:var(--forest); }
.contact-box svg{ width:15px; height:15px; color:var(--forest-3); flex:none; }
@media (max-width:900px){
  .closing__grid{ grid-template-columns:1fr; }
  .closing__aside{ position:static; }
}
.form-lg{ padding:clamp(26px,3vw,44px); }
.form-lg .field input,.form-lg .field textarea,.form-lg .field select{ padding:23px 15px 9px; font-size:var(--t-base); }
.form-lg .field label{ left:15px; top:15px; font-size:var(--t-xs); }
.form-lg .field textarea{ min-height:124px; }

/* ---------- 23. PIE ---------- */
.footer{ background:var(--ink); color:var(--stone-2); padding-block:clamp(52px,6vw,84px) 30px; }
.footer__top{
  display:grid; grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));
  gap:clamp(26px,3.4vw,50px); padding-bottom:clamp(36px,4vw,58px);
  border-bottom:1px solid var(--line-dark);
}
.footer__brand .brand__mark{ color:var(--forest-3); width:26px; height:33px; }
.footer__brand .brand__name{ color:var(--paper); font-size:var(--t-lg); }
.footer h2{
  font-size:var(--t-2xs); letter-spacing:.18em; text-transform:uppercase; color:var(--paper);
  margin-bottom:18px; font-weight:var(--w-medium);
}
.footer ul{ display:flex; flex-direction:column; gap:10px; }
.footer a{ font-size:var(--t-md); color:var(--stone-2); transition:color .25s var(--ease); }
.footer a:hover{ color:var(--paper); }
/* El cierre del pie iba de extremo a extremo y la nota legal quedaba colgada
   a la izquierda: los tres bloques se centran en el mismo eje. */
.footer__bot{
  padding-top:26px; display:flex; flex-wrap:wrap; gap:14px 34px;
  justify-content:center; align-items:center; text-align:center;
}
.footer__legal{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; }
.footer__legal a{ font-size:var(--t-xs); }
.footer__note{
  margin:24px auto 0; padding-top:22px; border-top:1px solid var(--line-dark);
  font-size:var(--t-2xs); line-height:1.65; color:#8A857E;
  max-width:88ch; text-align:center;
}
@media (max-width:900px){ .footer__top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer__top{ grid-template-columns:1fr; } }

/* ---------- 24. BARRA MÓVIL ---------- */
.mbar{
  position:fixed; left:0; right:0; bottom:0; z-index:880; display:none;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(247,244,239,.93); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line-soft);
  transform:translateY(120%); transition:transform .5s var(--ease-out);
  gap:8px;
}
.mbar.is-on{ transform:translateY(0); }
.mbar .btn{ flex:1; padding:1.08em 1rem; font-size:var(--t-xs); }
.mbar__tel{
  width:52px; flex:none; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:var(--radius); color:var(--forest);
}
.mbar__tel svg{ width:17px; height:17px; }
@media (max-width:860px){
  .mbar{ display:flex; }
  body{ padding-bottom:0; }
  /* Solo mientras la barra esta arriba se reserva su alto: asi no queda un
     hueco muerto al pie cuando no se ve. */
  body:has(.mbar.is-on){ padding-bottom:calc(74px + env(safe-area-inset-bottom,0px)); }
}

/* ---------- 25. CURSOR ---------- */
.cur,.cur-r{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%; }
.cur{ width:6px; height:6px; background:var(--forest); margin:-3px 0 0 -3px; }
.cur-r{
  width:34px; height:34px; border:1px solid rgba(28,58,46,.4); margin:-17px 0 0 -17px;
  transition:width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease),
             background .3s var(--ease), border-color .3s var(--ease), opacity .3s var(--ease);
}
.cur-r.is-hot{
  width:56px; height:56px; margin:-28px 0 0 -28px;
  background:rgba(28,58,46,.08); border-color:rgba(28,58,46,.25);
}
body.on-dark .cur{ background:var(--paper); }
body.on-dark .cur-r{ border-color:rgba(247,244,239,.4); }
body.on-dark .cur-r.is-hot{ background:rgba(247,244,239,.1); border-color:rgba(247,244,239,.3); }
@media (hover:none),(pointer:coarse),(max-width:1024px){ .cur,.cur-r{ display:none!important; } }

/* ---------- 26. REVELADOS ---------- */
.reveal{ transition:opacity .85s var(--ease-out), transform .85s var(--ease-out); }
.js-anim .reveal{ opacity:0; transform:translateY(22px); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
.reveal[data-d="5"]{ transition-delay:.4s; }
/* Red de seguridad. El estado oculto de partida solo se aplica con la clase
   .js-anim, que el propio main.js se pone al arrancar. Si el script no llega
   a cargarse —bloqueado, caido, cache corrupta—, la clase no aparece y la
   pagina se ve entera, sin animaciones. El <noscript> de cada pagina cubre
   el caso de JavaScript desactivado. */
.reveal[data-split]{ opacity:1; transform:none; }

.lines{ display:block; }
/* La caja que recorta mide lo que la línea (0,95 em) y los rasgos que bajan
   —la «y», la «g», la «j»— quedan fuera y se cortan. Se agranda por abajo
   con padding y se compensa con un margen negativo, así el recorte deja de
   morder las letras sin mover ni un píxel la maquetación. */
.lines .ln{
  display:block; overflow:hidden;
  padding-bottom:.3em; margin-bottom:-.3em;
}
.lines .ln > span{
  display:block;
  transition:transform .95s var(--ease-out);
}
.js-anim .lines .ln > span{ transform:translateY(150%); }
.lines.is-in .ln > span{ transform:translateY(0); }
.lines .ln:nth-child(2) > span{ transition-delay:.07s; }
.lines .ln:nth-child(3) > span{ transition-delay:.14s; }
.lines .ln:nth-child(4) > span{ transition-delay:.21s; }

.wipe{ transition:clip-path 1.1s var(--ease-out); }
.js-anim .wipe{ clip-path:inset(0 100% 0 0); }
.wipe.is-in{ clip-path:inset(0 0 0 0); }

/* ---------- 27. SLOT DE FOTOGRAFÍA (marcador) ---------- */
.slot{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  padding:24px; gap:10px; align-content:center;
  background:
    linear-gradient(135deg,rgba(28,58,46,.1) 0%,rgba(28,58,46,0) 46%),
    linear-gradient(315deg,rgba(107,39,57,.08) 0%,rgba(107,39,57,0) 46%),
    repeating-linear-gradient(45deg,rgba(21,23,26,.028) 0 2px,transparent 2px 9px),
    var(--paper-3);
  color:var(--stone);
}
.slot svg{ width:34px; height:34px; opacity:.44; }
.slot b{ font-size:var(--t-2xs); letter-spacing:.16em; text-transform:uppercase; font-weight:var(--w-medium); color:var(--ink-3); }
.slot code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:var(--t-2xs);
  background:rgba(21,23,26,.06); padding:4px 9px; border-radius:3px; color:var(--ink-2);
}
.slot span{ font-size:var(--t-2xs); max-width:34ch; line-height:1.5; }
.has-photo .slot{ display:none; }
.slot--dark{ background:var(--ink-2); color:var(--stone-2); }
.slot--dark b{ color:var(--paper); }
.slot--dark code{ background:rgba(247,244,239,.1); color:var(--paper); }

/* ---------- 28. PÁGINAS INTERIORES ---------- */
.phead{
  padding-top:calc(var(--nav-h,84px) + clamp(52px,7vw,110px));
  padding-bottom:clamp(40px,5vw,78px);
  border-bottom:1px solid var(--line-soft);
  position:relative;
}
.phead__in{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(24px,4vw,70px); align-items:end; }
.phead .display{ max-width:17ch; font-size:var(--d-xl); }
/* El H1 es ahora el antetitulo, que va en cuerpo pequeno: no debe heredar
   el tamano del titular grande. */
.phead h1.eyebrow{ max-width:none; font-size:var(--t-2xs); }
@media (max-width:900px){ .phead__in{ grid-template-columns:1fr; } }

.crumbs{ display:flex; flex-wrap:wrap; gap:8px; font-size:var(--t-2xs); letter-spacing:.11em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:22px; }
.crumbs a:hover{ color:var(--forest); }
.crumbs span{ color:var(--ink-soft); }

.prose{ max-width:70ch; }
.prose > * + *{ margin-top:1.15em; }
.prose h2{
  font-family:var(--serif); font-size:clamp(1.6rem,2.8vw,2.3rem); font-weight:var(--w-normal);
  letter-spacing:-.026em; line-height:1.1; margin-top:2.2em; margin-bottom:.1em;
}
.prose h3{
  font-family:var(--serif); font-size:clamp(1.2rem,1.8vw,1.5rem); font-weight:var(--w-normal);
  letter-spacing:-.02em; line-height:1.2; margin-top:1.8em;
}
.prose p{ color:var(--ink-3); line-height:1.7; }
.prose strong{ color:var(--ink); font-weight:var(--w-bold); }
/* La viñeta va posicionada, NO con flex: con display:flex cada <strong> del
   interior se convertía en un bloque aparte y el texto se partía en trozos
   separados por el gap. Así el párrafo fluye como un párrafo normal. */
.prose ul,.prose ol{ display:flex; flex-direction:column; gap:.6em; padding-left:0; list-style:none; }
.prose li{
  position:relative; padding-left:1.5em;
  color:var(--ink-3); line-height:1.6;
}
.prose li::before{
  content:''; position:absolute; left:.22em; top:.64em;
  width:5px; height:5px; border-radius:50%; background:var(--forest-3);
}
.prose ol{ counter-reset:o; }
.prose ol li{ counter-increment:o; padding-left:2.2em; }
.prose ol li::before{
  content:counter(o,decimal-leading-zero);
  left:0; top:.22em; width:auto; height:auto; border-radius:0; background:none;
  color:var(--forest-2); font-size:var(--t-2xs); letter-spacing:.08em; font-weight:var(--w-medium);
}
.prose a:not(.btn):not(.link){ color:var(--forest); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.prose a:not(.btn):not(.link):hover{ color:var(--forest-3); }
.prose blockquote{
  border-left:2px solid var(--forest); padding-left:clamp(16px,2vw,26px); margin-block:1.6em;
  font-family:var(--serif); font-style:italic; font-weight:var(--w-normal);
  font-size:clamp(1.14rem,1.8vw,1.42rem); line-height:1.3; letter-spacing:-.02em; color:var(--ink);
}
.callout{
  background:var(--paper-2); border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  padding:clamp(20px,2.2vw,28px); margin-block:1.8em;
}
.callout b{ display:block; font-size:var(--t-2xs); letter-spacing:.16em; text-transform:uppercase; color:var(--forest); margin-bottom:9px; }
.callout p{ font-size:var(--t-md); line-height:1.6; }

.article-grid{ display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:clamp(30px,5vw,80px); align-items:start; }
.toc{ position:sticky; top:110px; padding-left:clamp(0px,2vw,26px); border-left:1px solid var(--line); }
.toc h2{ font-size:var(--t-2xs); font-weight:var(--w-medium); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:16px; }
.toc ul{ display:flex; flex-direction:column; gap:11px; }
.toc ul a{ font-size:var(--t-sm); color:var(--ink-soft); line-height:1.4; transition:color .25s var(--ease); display:block; }
.toc ul a:hover,.toc ul a.is-on{ color:var(--forest); }
.toc__cta{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
@media (max-width:1000px){
  .article-grid{ grid-template-columns:1fr; }
  .toc{ position:static; border-left:0; padding-left:0; display:none; }
}

.meta-row{ display:flex; flex-wrap:wrap; gap:8px 22px; font-size:var(--t-2xs); letter-spacing:.11em; text-transform:uppercase; color:var(--ink-soft); }

/* Bloque de dos columnas genérico */
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(26px,4.6vw,80px); align-items:start; }
.split--a{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
@media (max-width:900px){ .split,.split--a{ grid-template-columns:1fr; } }

.list-def{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.list-def > div{ padding-block:clamp(18px,2.2vw,28px); border-bottom:1px solid var(--line-soft); display:grid; grid-template-columns:minmax(0,.44fr) minmax(0,1fr); gap:clamp(16px,2.6vw,40px); }
.list-def h3{ font-size:var(--t-xs); font-weight:var(--w-medium); letter-spacing:.12em; text-transform:uppercase; line-height:1.36; }
.list-def p{ color:var(--ink-soft); }
@media (max-width:760px){ .list-def > div{ grid-template-columns:1fr; gap:8px; } }


/* Impresión */
@media print{
  .nav,.mbar,.grain,.cur,.cur-r,.menu,.ck,.hero__form{ display:none!important; }
  body{ background:#fff; color:#000; }
  .reveal{ opacity:1!important; transform:none!important; }
}

/* ---------- 29. AJUSTES FINOS ---------- */
/* El titular del hero vive en una columna estrecha, pero tiene que cantar en
   el mismo tono que los de las paginas interiores: mismo cuerpo que ellos
   (--d-xl), para que al pasar de la portada a Herencias o Sucesiones el
   titular no cambie de tamano. */
.hero__h1{ font-size:var(--d-xl); }
@media (max-width:1040px){ .hero__h1{ font-size:clamp(2.7rem,9.2vw,4.6rem); } }  /* 43 → 74 px */

/* Cursiva dentro de titulares en línea */
.display i,.display em{ font-style:italic; font-weight:var(--w-normal); }
/* Un <strong> dentro de un titular no debe pedir un peso que la Playfair
   no tiene cargado: hereda el del propio titular. */
h1 strong,h2 strong,h3 strong,.display strong,.display b,
.faq__q strong,.prose blockquote strong{ font-weight:inherit; }

/* La marca de agua de la foto no debe capturar el puntero */
.slot{ pointer-events:none; }

/* Enlaces del pie dentro de listas con icono */
.footer .brand:hover .brand__name{ color:var(--paper); }

/* ---------- 30. HERO EN PANTALLAS BAJAS ----------
   Muchos portátiles dan 620-700 px de alto útil. El formulario NO puede
   quedar por debajo del pliegue: es el elemento de conversión principal. */
.hero__ctas{ flex-wrap:nowrap; }
.hero__ctas .btn{ padding:1.12em 1.55em; font-size:var(--t-xs); white-space:nowrap; }
@media (max-width:1400px) and (min-width:1041px){
  .hero__ctas .btn{ letter-spacing:.11em; padding-inline:1.3em; }
}
@media (max-width:640px){
  .hero__ctas{ flex-wrap:wrap; }
  .hero__ctas .btn{ width:100%; }
}

@media (min-width:1041px) and (max-height:960px){
  .hero__left{ gap:clamp(11px,1.5vw,22px); padding-block:clamp(22px,3vw,44px); }
  /* Si el hero se comprime, las frases de marca se comprimen con el: el
     H1 tiene que seguir siendo lo mas grande de la pagina. El titular no se
     toca, para no descuadrarlo con el de las demas paginas. */
  .final--home .display,.emotive__h,.manifesto .display{ font-size:var(--d-l); }
  .hero__sub{ font-size:clamp(1.2rem,1.7vw,1.62rem); }
  .hero__p{ font-size:var(--t-md); }
  .hero__form .form-card__head h2{ font-size:clamp(var(--t-lg),1.55vw,1.42rem); }
  .form-card__head{ margin-bottom:13px; }
  .field{ margin-bottom:9px; }
  .field input,.field textarea{ padding:18px 12px 7px; font-size:var(--t-sm); }
  .field label{ top:11px; font-size:var(--t-xs); }
  .field textarea{ min-height:68px; }
  .consent{ margin:11px 0 12px; font-size:var(--t-2xs); }
  .form-card__note{ margin-top:10px; }
}
@media (min-width:1041px) and (max-height:740px){
  .hero__meta{ display:none; }
  .hero__left{ gap:clamp(9px,1.2vw,16px); }
}

/* ---------- 31. CABECERA SOBRE EL MENÚ ABIERTO ----------
   La barra queda por encima del panel oscuro: hay que invertir su color
   o la marca y el icono desaparecen sobre el fondo negro. */
body.menu-open .nav{
  background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom-color:transparent; transform:none;
}
body.menu-open .brand__mark{ color:var(--forest-3); }
body.menu-open .brand__name{ color:var(--paper); }
body.menu-open .brand__sub{ color:var(--stone); }
body.menu-open .burger i,
body.menu-open .burger i::before,
body.menu-open .burger i::after{ background:var(--paper); }
body.menu-open .burger.is-open i{ background:transparent; }

/* El menú móvil lleva sus propios canales dentro del bloque «Contacto» */
.menu .nav__tel{ display:inline-flex; }

/* El marcador de la foto de ambiente, a una esquina: no debe competir
   con el titular mientras la fotografía real no esté subida. */
.emotive__bg .slot{ place-items:end; align-content:end; text-align:right; padding:clamp(20px,3vw,40px); }
.emotive__bg .slot span{ max-width:30ch; }

/* Tablas de las páginas legales: nunca deben empujar el ancho de la página */
.prose table{ display:block; max-width:100%; overflow-x:auto; }

/* ---------- 32. PANTALLAS GRANDES: el panel sangra al borde ----------
   El texto sigue alineado con la retícula del resto de la página, pero el
   verde llega hasta el filo derecho. Evita el efecto "web dentro de una caja". */
@media (min-width:1620px){
  .hero__grid{ max-width:none; }
  .hero__left{ padding-left:calc((var(--vw-real, 100vw) - var(--maxw)) / 2 + var(--gutter)); }
}

/* ---------- 33. EQUIPO ----------
   Fotografía de grupo: horizontal y con presencia. El recorte se ancla
   arriba para que ninguna cara quede fuera al reducir la altura. */
.team{ margin:0 0 clamp(34px,4.4vw,64px); }
.team__img{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  aspect-ratio:3/2; background:var(--paper-3);
}
/* Con la foto puesta desaparece la caja: la imagen se funde con el fondo */
.team__img.has-photo{ background:transparent; border-radius:0; }
.team__img img{
  width:100%; height:100%; object-fit:cover; object-position:center 10%;
  filter:saturate(.96);
}
/* Difuminado de bordes: una elipse opaca centrada en las caras que se
   desvanece hacia los lados y, sobre todo, hacia abajo. Una sola capa de
   máscara, sin composición, para que funcione en todos los navegadores. */
.team__img.has-photo img{
  -webkit-mask-image:radial-gradient(128% 118% at 50% 30%,
      #000 0%, #000 46%, rgba(0,0,0,.72) 68%, rgba(0,0,0,.24) 87%, transparent 100%);
  mask-image:radial-gradient(128% 118% at 50% 30%,
      #000 0%, #000 46%, rgba(0,0,0,.72) 68%, rgba(0,0,0,.24) 87%, transparent 100%);
}
.team__cap{
  margin-top:14px; font-size:var(--t-sm); line-height:1.5; color:var(--ink-3);
  letter-spacing:.01em;
}
.team__cap strong{ color:var(--ink-2); font-weight:var(--w-bold); }

/* El borde inferior de la foto ya está difuminado, así que el aire que deja
   sobra: se recorta para que el pie y el texto entren en esa zona de fundido
   y el bloque se lea como una sola pieza, no como «imagen + párrafo». */

.team__body{ align-items:start; position:relative; z-index:2; }
.team__body .founder__quote{ max-width:18ch; }

.team__list{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border-top:1px solid var(--line);
  margin-top:clamp(36px,4.4vw,62px);
}
.team__list li{
  background:var(--paper-2); padding:clamp(20px,2.2vw,30px) clamp(16px,1.8vw,26px);
  display:flex; flex-direction:column; gap:8px;
}
.team__list strong{
  font-family:var(--serif); font-size:clamp(1.02rem,1.4vw,1.2rem);
  font-weight:var(--w-normal); letter-spacing:-.015em; color:var(--ink);
}
.team__list span{ font-size:var(--t-xs); line-height:1.5; color:var(--ink-soft); }

/* En pantallas pequeñas la foto se acerca: tres caras en 16/9 quedan diminutas */
@media (max-width:820px){
  .team__img{ aspect-ratio:4/3; }
  .team__body .founder__quote{ max-width:none; }
}
@media (max-width:760px){
  .team__list{ grid-template-columns:1fr; }
}

/* Línea de anclaje dentro del texto del equipo: rompe el bloque de párrafos
   y da un punto donde la vista se para. */
.team__claim{
  font-family:var(--serif); font-style:italic; font-weight:var(--w-normal);
  font-size:clamp(1.35rem,2.3vw,1.92rem); line-height:1.15; letter-spacing:-.024em;
  color:var(--forest); margin-block:.7em .55em;
}

/* ---------- 34. EQUIPO: VERSIÓN DISCRETA ----------
   La foto deja de mandar en la sección. En la portada se centra y se limita
   el ancho; en «Grupo Linaje» comparte fila con los nombres. */
.team:not(.team--sm){ max-width:760px; margin-inline:auto; }

.team-compact{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(30px,4.6vw,76px); align-items:center;
}
.team--sm{ margin:0; }
.team--sm .team__img{ aspect-ratio:3/2; }

/* Lista de abogados en columna, junto a la foto */
.team__list--stack{
  display:flex; flex-direction:column; gap:0;
  background:none; border-top:1px solid var(--line); margin-top:0;
}
.team__list--stack li{
  background:none; padding:clamp(15px,1.7vw,21px) 0;
  border-bottom:1px solid var(--line-soft);
}
.team__list--stack li:last-child{ border-bottom:0; }

@media (max-width:860px){
  .team-compact{ grid-template-columns:1fr; gap:clamp(22px,4vw,34px); }
  .team--sm .team__img{ aspect-ratio:4/3; }
}

/* Dirección del despacho */
.office{
  font-style:normal; font-family:var(--serif); font-weight:var(--w-normal);
  font-size:clamp(1.08rem,1.5vw,1.28rem); line-height:1.45; letter-spacing:-.012em;
  color:var(--ink); padding-left:clamp(14px,1.6vw,20px);
  border-left:2px solid var(--forest); margin-block:1.3em;
}

/* ---------- 35. CABECERA DE PÁGINA SIN COLUMNA LATERAL ----------
   Cuando el titular va solo, la retícula de dos columnas dejaría medio
   ancho vacío. Pasa a una sola columna y se acorta el aire inferior para
   que el formulario entre antes en pantalla. */
.phead__in--solo{ display:block; }
.phead:has(.phead__in--solo){ padding-bottom:clamp(26px,3.2vw,44px); }
.phead__in--solo h1,.phead__in--solo .display{ max-width:14ch; }

/* ---------- 36. «EN QUÉ CREEMOS» ----------
   El titular ocupa la columna estrecha y los cuatro principios la ancha,
   en rejilla 2×2. Aprovecha el ancho sin dejar media fila vacía. */
.sec-head--wide{
  grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);
  align-items:start; margin-bottom:0;
}
.beliefs{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft);
}
.beliefs li{
  background:var(--paper); padding:clamp(22px,2.4vw,34px);
  display:flex; flex-direction:column; gap:9px;
  transition:background .45s var(--ease);
}
.beliefs li:hover{ background:var(--white); }
.beliefs__n{ font-size:var(--t-2xs); letter-spacing:.16em; color:var(--forest-3); }
.beliefs h3{
  font-size:var(--t-xs); font-weight:var(--w-medium); letter-spacing:.12em;
  text-transform:uppercase; line-height:1.34; color:var(--ink);
}
.beliefs p{ color:var(--ink-3); font-size:var(--t-md); line-height:1.58; }

@media (max-width:940px){
  .sec-head--wide{ grid-template-columns:1fr; gap:clamp(20px,3vw,30px); }
}
@media (max-width:520px){
  .beliefs{ grid-template-columns:1fr; }
}

/* ---------- 37. LOGOTIPO ----------
   Mismo hueco que ocupaba el lockup anterior: ~30 px de alto en la esquina,
   ~26 al encogerse la barra. Sin el CSS la imagen saldría a 1000 px. */
.brand{ position:relative; display:block; flex:none; line-height:0; }
.brand__logo{
  display:block; width:auto; height:var(--logo-h,30px);
  transition:height .4s var(--ease), opacity .3s var(--ease);
}
.nav.is-stuck .brand__logo{ --logo-h:26px; }

/* Versión clara superpuesta: solo se ve con el menú abierto (fondo negro) */
.brand__logo--claro{ position:absolute; left:0; top:0; opacity:0; }
body.menu-open .brand__logo--oscuro{ opacity:0; }
body.menu-open .brand__logo--claro{ opacity:1; }

/* Pie de pagina: sin la frase de apoyo, el logotipo es lo unico que ocupa la
   primera columna, asi que se dimensiona por el ancho de esa columna en vez
   de por una altura fija. min(100%,...) impide que se salga en ningun ancho. */
/* El logotipo se queda solo en una columna tan alta como la lista de areas:
   en vez de pegarse arriba y dejar el hueco debajo, se centra en el alto de
   la fila. Horizontalmente sigue alineado a la izquierda, con los margenes de
   la pagina. */
.footer__brand{ align-self:center; }
.brand--pie{ width:100%; }
.brand--pie .brand__logo{ height:auto; width:min(100%,340px); }

@media (max-width:560px){
  .brand__logo{ --logo-h:26px; }
  .nav.is-stuck .brand__logo{ --logo-h:23px; }
}

/* ---------- 38. MAPA ----------
   No se carga nada de Google hasta que el visitante pulsa. Así la web sigue
   sin contenido de terceros por defecto y la política de cookies se sostiene. */
.mapa{
  position:relative; margin-block:1.4em; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:
    linear-gradient(135deg,rgba(28,58,46,.05) 0%,rgba(28,58,46,0) 55%),
    repeating-linear-gradient(0deg,var(--line-soft) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(90deg,var(--line-soft) 0 1px,transparent 1px 34px),
    var(--paper-2);
  aspect-ratio:16/10;
}
.mapa__previo{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; text-align:center;
  padding:clamp(20px,3vw,34px);
}
.mapa__pin{ width:34px; height:34px; color:var(--forest); }
.mapa__dir{
  font-style:normal; font-family:var(--serif); font-weight:var(--w-normal);
  font-size:clamp(1.02rem,1.4vw,1.2rem); line-height:1.4; color:var(--ink);
}
.mapa__previo .btn{ padding:.92em 1.5em; }
.mapa__previo .tiny{ max-width:30ch; }
.mapa iframe{ display:block; width:100%; height:100%; border:0; }

.mapa__acciones{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:1.2em;
}

@media (max-width:620px){ .mapa{ aspect-ratio:4/3; } }

/* ---------- 39. ENTRADILLA DE LAS CABECERAS DE PÁGINA ----------
   En sans y a 16 px no aguantaba el peso del titular: quedaba menuda y
   dejaba la mitad derecha vacía. Pasa a la serif editorial, con más cuerpo
   y una medida más ancha. Las páginas legales quedan fuera (su entradilla
   no lleva .reveal): allí un texto normativo en serif grande chirriaría. */
.phead .lede.reveal{
  font-family:var(--serif);
  font-weight:var(--w-normal);
  font-size:clamp(1.2rem,1.95vw,1.72rem);
  line-height:1.28;
  letter-spacing:-.022em;
  color:var(--ink-2);
  max-width:28ch;
}
/* La ficha de cada artículo lleva debajo una línea de datos: que respire */
.phead .lede.reveal + .meta-row{ margin-top:24px; }

/* La entradilla se alineaba por la base del titular y quedaba caída.
   Centrada respecto al bloque de la izquierda queda a la misma altura
   óptica, y funciona igual en las páginas que llevan antetítulo y en
   las que no, sin depender de medidas fijas. */
.phead__in{ align-items:center; }

/* ---------- 40. IMÁGENES DE APOYO ---------- */
.figura{
  margin:clamp(26px,3.2vw,42px) 0 0;
  border-radius:var(--radius-lg); overflow:hidden;
  background:var(--paper-2);
}
.figura img{ display:block; width:100%; height:auto; }

/* ---------- 41. EQUIPO EN PORTADA: COMPOSICIÓN CENTRADA ----------
   Antes había cuatro alineaciones peleando —titular a la izquierda, entradilla
   a la derecha, foto centrada, cita y texto en dos columnas—. Todo al eje. */
.equipo-centro .equipo__head{
  max-width:900px; margin:0 auto clamp(32px,4vw,56px); text-align:center;
}
.equipo-centro .equipo__head .eyebrow{ justify-content:center; margin-bottom:22px; }
.equipo-centro .equipo__head .lede{
  margin:clamp(18px,2vw,26px) auto 0; max-width:56ch;
}
.equipo-centro .team{ max-width:760px; margin-inline:auto; }
.equipo-centro .team__cap{ text-align:center; margin-top:16px; }

.equipo-centro .equipo__texto{
  max-width:620px; margin:clamp(30px,3.6vw,50px) auto 0; text-align:center;
}
.equipo-centro .equipo__texto p{ color:var(--ink-3); line-height:1.66; }
.equipo-centro .equipo__texto p + p{ margin-top:1.05em; }
.equipo-centro .founder__quote{
  max-width:26ch; margin:0 auto clamp(22px,2.4vw,32px);
}
.equipo-centro .team__claim{ margin-block:.8em .6em; }

/* ---------- 42. SITUACIONES: ORIENTACIÓN Y DETALLE ÚTIL ----------
   Las tarjetas dicen ahora en qué fase está el usuario, y el panel deja de
   ser dos párrafos para dar tres cosas: qué significa, qué hacer y el riesgo. */
.sit{ min-height:0; gap:10px; padding-block:clamp(22px,2.2vw,30px); }
.sit__fase{
  font-size:var(--t-2xs); letter-spacing:.16em; text-transform:uppercase;
  color:var(--forest-3); transition:color .4s var(--ease);
}
.sit:hover .sit__fase,.sit[aria-expanded="true"] .sit__fase{ color:var(--olive); }
.sit__q{ flex:1; }
.sit__mas{
  display:inline-flex; align-items:center; gap:.5em; margin-top:2px;
  font-size:var(--t-2xs); letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-soft); transition:color .4s var(--ease), gap .3s var(--ease);
}
.sit:hover .sit__mas,.sit[aria-expanded="true"] .sit__mas{ color:var(--paper); gap:.85em; }
.sit--otra{ background:var(--paper-2); }
.sit--otra .sit__t{ color:var(--forest); }
.sit--otra:hover .sit__t,.sit--otra[aria-expanded="true"] .sit__t{ color:var(--paper); }

/* Panel */
.sit-panel__main h3{ margin-bottom:14px; }
.sit-panel__main > div p + p{ margin-top:11px; }
.sit-pasos{ margin-top:clamp(22px,2.4vw,32px); }
.sit-pasos h4{
  font-size:var(--t-2xs); letter-spacing:.16em; text-transform:uppercase;
  color:var(--forest); margin-bottom:16px; font-weight:var(--w-medium);
}
.sit-pasos ol{
  counter-reset:paso; display:flex; flex-direction:column; gap:12px;
  list-style:none; padding:0;
}
.sit-pasos li{
  counter-increment:paso; position:relative; padding-left:2.2em;
  color:var(--ink-3); line-height:1.6; font-size:var(--t-md);
}
.sit-pasos li::before{
  content:counter(paso,decimal-leading-zero); position:absolute; left:0; top:.18em;
  font-size:var(--t-2xs); letter-spacing:.08em; color:var(--forest-2); font-weight:var(--w-medium);
}
.sit-ojo{
  background:var(--paper); border-left:2px solid var(--claret);
  padding:clamp(16px,1.8vw,22px); border-radius:0 var(--radius) var(--radius) 0;
  margin-bottom:22px;
}
.sit-ojo b{
  display:block; font-size:var(--t-2xs); letter-spacing:.16em; text-transform:uppercase;
  color:var(--claret); margin-bottom:9px;
}
.sit-ojo p{ font-size:var(--t-sm); line-height:1.58; color:var(--ink-3); }
.sit-panel__cta{ display:block; }
.sit-panel__cta .tiny{ margin-top:14px; }

@media (max-width:1000px){
  .sit-panel__cta{ margin-top:8px; }
}

/* La salida para quien no encaja ocupa su propia banda: sola en una celda
   dejaba tres huecos vacíos, y además conviene que se vea. */
.sit--otra{
  grid-column:1 / -1;
  flex-direction:row; align-items:center; flex-wrap:wrap;
  gap:8px 28px; padding-block:clamp(20px,2vw,28px);
}
.sit--otra .sit__plus{ display:none; }
.sit--otra .sit__q{ flex:1 1 220px; }
.sit--otra .sit__mas{ margin-top:0; }
@media (max-width:640px){
  .sit--otra{ flex-direction:column; align-items:flex-start; gap:10px; }
}

/* Encabezado de sección sin columna lateral: el titular va solo, sin dejar
   medio ancho vacío, y con algo menos de aire porque no hay nada que sostener. */
.sec-head--solo{
  display:block;
  margin-bottom:clamp(30px,3.4vw,50px);
}
.sec-head--solo h2{ max-width:18ch; }

/* ---------- 43. BLOQUE DE PRIMERA CONSULTA GRATUITA ----------
   Era un recuadro gris idéntico a los informativos. Es el argumento que más
   fricción quita, así que se lleva el verde de marca y su propio botón:
   aparece justo donde el lector está pensando en cuánto va a costarle. */
.gratis{
  position:relative; overflow:hidden;
  background:var(--forest); color:var(--paper);
  border-radius:var(--radius-lg);
  padding:clamp(26px,3vw,38px);
  margin-block:clamp(30px,3.4vw,46px);
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,3vw,40px); align-items:center;
}
.gratis::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(110% 90% at 88% 6%, rgba(126,140,99,.3) 0%, rgba(28,58,46,0) 60%),
    radial-gradient(90% 80% at 4% 100%, rgba(9,22,17,.5) 0%, rgba(28,58,46,0) 62%);
}
.gratis__txt{ position:relative; z-index:2; }
.gratis b{
  display:block; font-family:var(--serif); font-weight:var(--w-normal);
  font-size:clamp(1.24rem,1.9vw,1.6rem); line-height:1.16; letter-spacing:-.02em;
  color:var(--paper); margin-bottom:10px;
}
.gratis p{ color:var(--stone-3); font-size:var(--t-md); line-height:1.6; max-width:52ch; }
.gratis .btn{ position:relative; z-index:2; white-space:nowrap; }

@media (max-width:760px){
  .gratis{ grid-template-columns:1fr; gap:22px; }
  .gratis .btn{ width:100%; }
}

/* =========================================================================
   44. PIEZAS AÑADIDAS EN LA REVISIÓN DE CONVERSIÓN
   ========================================================================= */

/* ---------- Nombres del equipo bajo la fotografía ---------- */
.team__nombres{
  list-style:none; margin:clamp(24px,2.8vw,38px) auto 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,34px);
  max-width:900px; text-align:center;
}
.team__nombres li{
  display:grid; gap:5px; align-content:start;
  padding-top:clamp(16px,1.8vw,22px);
  border-top:1px solid var(--line);
}
.team__nombres b{
  font-family:var(--serif); font-weight:var(--w-normal);
  font-size:clamp(1.02rem,1.35vw,1.2rem); line-height:1.2;
  letter-spacing:-.02em; color:var(--ink);
}
.team__nombres span{ font-size:var(--t-sm); line-height:1.4; color:var(--ink-3); }
.team__nombres em{
  font-style:normal; font-size:var(--t-2xs); letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-soft);
}
@media (max-width:760px){
  .team__nombres{ grid-template-columns:1fr; gap:0; max-width:420px; }
  .team__nombres li{ padding-block:16px; }
}

/* ---------- Nota bajo el CTA final ---------- */
.final__nota{
  display:flex; align-items:center; justify-content:center; gap:.6em;
  margin-top:clamp(20px,2.2vw,28px);
  font-size:var(--t-2xs); letter-spacing:.09em; text-transform:uppercase;
  color:var(--stone-3);
}
.final__nota svg{ width:12px; height:12px; color:var(--olive); }

/* ---------- Tiempo de lectura en las tarjetas del centro de conocimiento ---------- */
.post__meta{
  display:flex; align-items:center; gap:.7em; flex-wrap:wrap;
  font-size:var(--t-2xs); letter-spacing:.16em; text-transform:uppercase;
}
.post__meta .post__tag{ font-size:inherit; letter-spacing:inherit; }
.post__min{ color:var(--ink-soft); }
.post__min::before{ content:'·'; margin-right:.7em; color:var(--stone-2); }

/* ---------- Cierre de artículo: ¿es esta tu situación? ---------- */
.art-cta{
  margin-top:clamp(34px,4vw,54px);
  padding:clamp(24px,2.8vw,34px);
  border:1px solid var(--line);
  border-left:2px solid var(--forest);
  border-radius:var(--radius);
  background:var(--paper-2);
  display:grid; gap:12px;
}
.art-cta h3{
  font-family:var(--serif); font-weight:var(--w-normal);
  font-size:clamp(1.25rem,1.9vw,1.6rem); line-height:1.16; letter-spacing:-.024em;
}
.art-cta p{ color:var(--ink-3); max-width:52ch; }
.art-cta .btn{ justify-self:start; margin-top:6px; }

/* ---------- Titulares en móvil ----------
   En pantallas estrechas los mínimos de los clamp() eran demasiado grandes y
   cada línea compuesta se partía en dos. Aquí se bajan solo esos mínimos, sin
   tocar el tamaño en escritorio ni el titular del hero. */
@media (max-width:620px){
  .final .display{ font-size:clamp(1.92rem,8.4vw,3.1rem); }
  .emotive__h{ font-size:clamp(2rem,8.8vw,3.1rem); }
  .manifesto .display{ font-size:clamp(1.72rem,7.4vw,2.6rem); }
  .cta-dark .display{ font-size:clamp(1.62rem,6.9vw,2.6rem); }
}

/* =========================================================================
   45. RITMO TIPOGRAFICO
   Separacion entre parrafos y ancho de linea, en un solo sitio.
   ========================================================================= */
.prose{ max-width:var(--medida); }        /* ~74 caracteres reales por linea */
.prose p{ line-height:1.62; }
.prose p + p{ margin-top:1.05em; }
.prose h2{ margin-top:2.1em; margin-bottom:.55em; }
.prose h3{ margin-top:1.6em; margin-bottom:.45em; }
.prose ul,.prose ol{ margin-block:1.1em; }
.prose li + li{ margin-top:.55em; }

/* Los bloques de texto largo no pasan de ~72 caracteres por linea */
.faq__a p,.sit-panel p,.callout p{ max-width:var(--medida); }
.list-def > div > p,.split .prose p,.split .prose li{ max-width:var(--medida); }
.manifesto__aside p,.gratis p,.art-cta p{ max-width:54ch; }

/* En movil el interlineado se abre un punto: las lineas son mas cortas y
   el texto se lee de un vistazo. */
@media (max-width:620px){
  body{ line-height:1.62; }
  .lede{ line-height:1.45; }
  .svc p,.step p,.pillar p,.beliefs p,.sit-pasos li{ line-height:1.6; }
}

/* =========================================================================
   46. SEDES
   Dos despachos, una sola pieza centrada. Sin cajas ni sombras: filete fino
   entre columnas y un pequeno trazo verde como marca de cada sede, que es
   lo que sustituye al borde lateral cuando el texto va centrado.
   El mapa sigue sin cargarse hasta que el visitante pulsa.
   ========================================================================= */
.donde{ text-align:center; }
.donde .sec-head--solo{ margin-bottom:clamp(18px,2vw,26px); }
.donde .sec-head--solo h2{ max-width:none; }

.sedes-intro{
  margin:0 auto clamp(40px,4.6vw,66px); max-width:54ch; color:var(--ink-3);
}

.sedes{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:1060px; margin-inline:auto;
}
.sede{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding-inline:clamp(16px,3vw,48px);
}
/* Filete vertical entre las dos sedes: estructura sin dibujar una caja */
@media (min-width:861px){
  .sede + .sede{ border-left:1px solid var(--line); }
}
.sede::before{
  content:''; display:block; width:30px; height:2px; background:var(--forest);
  margin-bottom:clamp(16px,1.8vw,22px);
}
.sede__ciudad{
  font-size:var(--t-2xs); font-weight:var(--w-medium); letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:10px;
}
.sede__dir{
  font-style:normal; font-family:var(--serif); font-weight:var(--w-normal);
  font-size:clamp(1.15rem,1.6vw,1.42rem); line-height:1.4; letter-spacing:-.016em;
  color:var(--ink);
}
/* La direccion es un enlace, pero no debe parecer un enlace hasta que se pasa
   por encima: en movil abre directamente la app de mapas. */
a.sede__dir{ text-decoration:none; transition:color var(--t-fast) var(--ease); }
a.sede__dir:hover{ color:var(--forest); }
a.sede__dir:focus-visible{ outline:2px solid var(--forest); outline-offset:4px; border-radius:2px; }

.sede .mapa{ width:100%; margin-block:clamp(20px,2.4vw,30px) 0; aspect-ratio:16/9; }
.sede__acciones{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:12px 20px; margin-top:clamp(16px,1.8vw,22px);
}
.sede__acciones .btn{ padding:.92em 1.5em; }

/* Version breve de la portada: sin mapa, las dos fichas mas juntas */
.sedes--breve{ max-width:820px; }
.sedes--breve .sede__dir{ margin-bottom:2px; }

@media (max-width:860px){
  .sedes{ grid-template-columns:1fr; gap:clamp(34px,6vw,48px); }
  .sede + .sede{ padding-top:clamp(34px,6vw,48px); border-top:1px solid var(--line); }
  .sede{ padding-inline:0; }
}

.sedes-nota{
  margin:clamp(34px,4vw,52px) auto 0; max-width:58ch; color:var(--ink-3);
}
.sedes-nota + .sedes-nota{ margin-top:1.05em; }

/* El aviso de carga de Google cabia en dos lineas partido por la mitad */
.mapa__previo .tiny{ max-width:36ch; }

/* =========================================================================
   47. WHATSAPP
   Via alternativa, no principal. Mismo tratamiento tipografico que el
   telefono de la cabecera: nada de burbuja verde flotante.
   ========================================================================= */
.nav__wa{
  font-size:var(--t-xs); letter-spacing:.09em; font-weight:var(--w-medium);
  color:var(--ink-2); display:inline-flex; align-items:center; gap:.5em;
  transition:color var(--t-fast) var(--ease);
}
.nav__wa:hover{ color:var(--forest); }
.nav__wa svg{ flex:none; }
/* Separador fino entre telefono y WhatsApp */
.nav__wa::before{
  content:''; width:1px; height:14px; background:var(--line);
  margin-right:.9em;
}
/* Debajo de 1240 px el rotulo sobra: basta el icono */
@media (max-width:1240px){
  .nav__wa span{ display:none; }
  .nav__wa::before{ margin-right:.4em; }
}
/* Donde desaparece el telefono, desaparece tambien */
@media (max-width:1140px){
  .nav__wa{ display:none; }
}
/* Pero dentro del menu desplegado vuelve, con su rotulo */
.menu .nav__tel span,.menu .nav__wa span{ display:inline; }

/* En la barra inferior del movil, junto al telefono */
.mbar__tel + .mbar__tel{ border-left:1px solid var(--line); }

/* En el pie y en la caja de contacto hereda el estilo de los demas enlaces */
.contact-box a[data-wa] svg{ color:var(--forest-3); }

/* =========================================================================
   48. CANALES DE CONTACTO EN LA CABECERA
   «Contacto» sigue siendo un enlace a su pagina; el galon de al lado abre el
   panel. Asi en tactil no hay ambiguedad: tocar el rotulo navega, tocar el
   galon despliega. Con raton basta pasar por encima.
   ========================================================================= */
.nav__drop{ position:relative; display:inline-flex; align-items:center; gap:.2em; }
.nav__chev{
  appearance:none; background:none; border:0; padding:6px 2px; margin:0;
  cursor:pointer; color:var(--ink-2); display:inline-flex; line-height:0;
  transition:color var(--t-fast) var(--ease);
}
.nav__chev svg{ width:11px; height:11px; transition:transform .32s var(--ease-out); }
.nav__drop:hover .nav__chev,.nav__chev:hover{ color:var(--forest); }
.nav__drop.is-open .nav__chev svg{ transform:rotate(180deg); }
.nav__chev:focus-visible{ outline:2px solid var(--forest); outline-offset:3px; border-radius:2px; }

.canales{
  position:absolute; top:calc(100% + 14px); right:0; z-index:5;
  min-width:272px; padding:6px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 20px 44px -34px rgba(21,23,26,.45);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .26s var(--ease), transform .26s var(--ease-out), visibility .26s;
}
/* Puente invisible: el raton puede bajar del rotulo al panel sin que se cierre */
.canales::before{ content:''; position:absolute; left:0; right:0; top:-14px; height:14px; }
.nav__drop.is-open .canales{ opacity:1; visibility:visible; transform:none; }

.canal{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  align-items:center; column-gap:13px; row-gap:1px;
  padding:11px 13px; border-radius:2px;
  transition:background var(--t-fast) var(--ease);
}
.canal + .canal{ border-top:1px solid var(--line-soft); }
.canal svg{ grid-row:1 / 3; width:15px; height:15px; color:var(--forest-3); }
.canal__t{
  font-size:var(--t-2xs); font-weight:var(--w-medium); letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft);
}
.canal__v{
  font-family:var(--sans); font-weight:var(--w-normal);
  font-size:var(--t-md); line-height:1.3; letter-spacing:-.004em; color:var(--ink-2);
  font-variant-numeric:tabular-nums;   /* los digitos del telefono, en columna */
}
.canal:hover{ background:var(--paper-2); }
.canal:hover .canal__v{ color:var(--forest); }
.canal:focus-visible{ outline:2px solid var(--forest); outline-offset:-2px; }

/* ---------- La misma pieza dentro del menu de movil ---------- */
.menu__item--drop{ display:flex; flex-wrap:wrap; align-items:center; }
.menu__item--drop > .menu__link{ flex:1 1 auto; }
.menu__chev{
  appearance:none; background:none; border:1px solid var(--line-dark); padding:0;
  width:40px; height:40px; flex:none; border-radius:50%;
  cursor:pointer; color:var(--paper);
  display:inline-flex; align-items:center; justify-content:center;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.menu__chev svg{ width:14px; height:14px; transition:transform .38s var(--ease-out); }
.menu__chev:hover{ border-color:var(--paper); background:rgba(247,244,239,.07); }
.menu__chev:focus-visible{ outline:2px solid var(--paper); outline-offset:3px; }
.menu__item--drop.is-open .menu__chev svg{ transform:rotate(180deg); }

.menu__canales{
  flex:0 0 100%; max-height:0; overflow:hidden;
  transition:max-height .45s var(--ease-out), opacity .3s var(--ease);
  opacity:0;
}
.menu__item--drop.is-open .menu__canales{ max-height:320px; opacity:1; }
.canal--movil{
  padding:13px 0 13px 2px; border-radius:0;
  border-top:1px solid var(--line-dark);
}
.canal--movil + .canal--movil{ border-top:1px solid var(--line-dark); }
.canal--movil .canal__t{ color:var(--stone-2); }
.canal--movil .canal__v{ color:var(--paper); font-size:var(--t-lg); }
.canal--movil svg{ color:var(--olive); }
.canal--movil:hover{ background:none; }
.canal--movil:hover .canal__v{ color:var(--olive); }

/* El bloque de primera consulta ya no lleva parrafo. Dentro de .prose la
   columna mide unos 500 px, asi que en dos columnas el titular se partia en
   tres lineas: se apila, con el boton debajo. */
.gratis__txt b{ margin-bottom:0; }
.prose .gratis{ grid-template-columns:1fr; gap:clamp(16px,1.8vw,22px); }
.prose .gratis .btn{ justify-self:start; }



/* En contacto.html la columna se queda solo con los tres canales: sin el
   bloque de arriba, la linea superior sobraba y el texto pedia mas cuerpo. */
.contact-box--solo{ padding-top:0; border-top:0; gap:16px; }
.contact-box--solo a{ font-size:clamp(1.08rem,1.5vw,1.28rem); }
.contact-box--solo svg{ width:17px; height:17px; }

/* Indice de las paginas legales: navegacion interna discreta, sin competir
   con el texto. */
.indice-legal{
  margin-block:clamp(28px,3vw,40px);
  padding:clamp(20px,2.2vw,28px);
  background:var(--paper-2); border:1px solid var(--line-soft);
  border-radius:var(--radius);
}
.indice-legal b{
  display:block; font-size:var(--t-2xs); font-weight:var(--w-medium);
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:14px;
}
.indice-legal ol{
  margin:0; padding:0; list-style:none; counter-reset:il;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 26px;
}
.indice-legal li{ counter-increment:il; padding-left:2em; position:relative; margin:0; }
.indice-legal li::before{
  content:counter(il,decimal-leading-zero); position:absolute; left:0; top:.2em;
  font-size:var(--t-2xs); letter-spacing:.08em; color:var(--forest-2);
  font-weight:var(--w-medium);
}
.indice-legal a{ color:var(--ink-3); font-size:var(--t-sm); line-height:1.45; }
.indice-legal a:hover{ color:var(--forest); }
@media (max-width:700px){ .indice-legal ol{ grid-template-columns:1fr; } }

/* Primera capa de proteccion de datos bajo cada formulario */
.capa-datos{
  margin-top:14px; font-size:var(--t-2xs); line-height:1.6; color:var(--ink-soft);
}
.capa-datos a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.capa-datos a:hover{ color:var(--forest); }
.hero__form .capa-datos,.panel .capa-datos{ color:var(--stone-3); }
.hero__form .capa-datos a,.panel .capa-datos a{ color:var(--stone-3); }
.hero__form .capa-datos a:hover,.panel .capa-datos a:hover{ color:var(--paper); }

/* =========================================================================
   51. PÁGINAS LEGALES
   Aviso legal, privacidad y cookies se leen como un documento: una sola
   columna centrada. Antes el texto quedaba pegado a la izquierda con media
   pantalla vacía a la derecha.
   ========================================================================= */
.legal .wrap{ max-width:820px; }
.legal .prose{ max-width:none; margin-inline:auto; }
.legal .phead__in{ display:block; }
.legal .phead__in .sec-head__aside{ margin-top:clamp(14px,1.6vw,20px); }
.legal .phead__in .lede{ max-width:52ch; }
.legal .indice-legal{ margin-inline:0; }

/* =========================================================================
   52. AJUSTES DE LA NAVEGACIÓN
   ========================================================================= */
/* Ningún epígrafe debe partirse en dos líneas */
.nav__link{ white-space:nowrap; }

/* Más aire entre epígrafes: el menú ocupa mejor el ancho disponible */
.nav__links{ gap:clamp(16px,2.6vw,42px); }

/* «Contacto» en el verde de la marca: es la entrada de acción del menú */
.nav__drop > .nav__link{ color:var(--forest); }
.nav__drop > .nav__link::after{ background:var(--forest); }
.nav__drop .nav__chev{ color:var(--forest); }
.nav__drop > .nav__link:hover,
.nav__drop:hover .nav__chev{ color:var(--forest-3); }

/* El logo deja de estar pegado al margen: se reparte en el hueco que queda
   antes del menú. Solo en escritorio; en móvil la cabecera es logo + burger
   y ahí sí tiene que ir al borde. */


/* Con una sola sede la rejilla de dos columnas no tiene sentido: el bloque
   se centra y se le pone un ancho de lectura cómodo. */
.sedes--una{ grid-template-columns:minmax(0,1fr); max-width:620px; }
.sedes--una .sede{ padding-inline:0; }
.sedes--una .sede + .sede{ border-left:0; }

/* La franja 1141-1360 px llevaba el interletraje apretado porque antes convivían
   el menú y el botón «Cuéntanos tu caso». Con «Contacto» ya no hace falta: el
   reparto del apartado 54 cabe en todos los anchos. */

/* =========================================================================
   53. «CONTACTO» COMO BOTÓN DE LA CABECERA
   Ocupa el sitio del antiguo «Cuéntanos tu caso»: mismo peso visual, pero
   abriendo los canales de contacto en lugar de llevar a un formulario.
   ========================================================================= */
.nav__cta .nav__drop{
  background:var(--forest); color:var(--paper);
  border-radius:var(--radius);
  padding:.86em 1.35em; gap:.5em;
  transition:background var(--t-fast) var(--ease);
}
.nav__cta .nav__drop > .nav__link{ color:var(--paper); padding:0; }
.nav__cta .nav__drop > .nav__link::after{ display:none; }
.nav__cta .nav__chev{ color:var(--paper); padding:0; }
.nav__cta .nav__drop:hover{ background:var(--forest-2); }
.nav__cta .nav__drop:hover .nav__link,
.nav__cta .nav__drop:hover .nav__chev{ color:var(--paper); }
.nav__cta .nav__drop > .nav__link:focus-visible,
.nav__cta .nav__chev:focus-visible{ outline:2px solid var(--paper); outline-offset:2px; }
.nav__cta .canales{ top:calc(100% + 12px); }

/* El menú queda con cuatro epígrafes: reparto holgado entre logo y botón */
@media (min-width:1141px){
  .nav__in{ gap:clamp(20px,3vw,48px); }
}

/* En móvil la cabecera vuelve a ser logo + hamburguesa: los canales ya están
   dentro del menú desplegado y en la barra fija inferior. */
@media (max-width:1140px){
  .nav__cta .nav__drop{ display:none; }
}

/* =========================================================================
   54. REPARTO DE LA CABECERA EN ESCRITORIO
   Con cuatro epígrafes y un solo botón sobraba aire a ambos lados del menú.
   En lugar de acercar los bloques al centro —que dejaría el logo y el botón
   descolgados de los márgenes— se le da cuerpo al propio menú: un punto más
   de tamaño, algo más de interletraje y huecos que crecen con la pantalla.
   Se gana además legibilidad en un texto en versales, que es donde más se
   nota un cuerpo corto.
   ========================================================================= */
/* Una sola familia en la cabecera. El logotipo y los titulares son Playfair;
   el menu iba en Inter, y al lado del logotipo se notaba el cambio de letra.
   Pasa a la serif en su unico peso cargado (400), que es tambien el que usa
   el menu desplegado en movil: asi la cabecera es homogenea de arriba abajo.
   Y baja de cuerpo: junto a un logotipo de 30 px, 15 px pesaban demasiado. */
.nav__link{
  font-family:var(--serif); font-weight:var(--w-normal);
  font-size:var(--t-xs); letter-spacing:.1em;
}
@media (min-width:1141px){
  .nav__links{ gap:clamp(28px,calc(12.7vw - 114px),78px); }
  .nav__cta .nav__drop{ padding:.92em 1.6em; }
}

/* =========================================================================
   55. TITULAR DE SECCION CENTRADO
   Sin el parrafo de apoyo al lado, la rejilla de dos columnas dejaba el
   titular descolgado a la izquierda: pasa a ocupar el ancho entero y se
   centra sobre las tarjetas que abre.
   ========================================================================= */
.sec-head--centrada{
  display:block; text-align:center;
  margin-bottom:clamp(34px,4vw,62px);
}
.sec-head--centrada h2{ margin-inline:auto; max-width:20ch; }

/* =========================================================================
   56. FECHA DEL FALLECIMIENTO Y CONFIRMACIÓN DE ENVÍO
   ========================================================================= */
/* Tres desplegables encadenados en lugar de escribir la fecha a mano. El mes
   no se abre hasta que hay año, ni el día hasta que hay mes. */
.fecha-sel{ margin-bottom:11px; }
.fecha-sel__t{
  display:block; font-size:var(--t-2xs); letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:6px;
}
.fecha-sel__cols{ display:grid; grid-template-columns:.9fr 1.25fr .8fr; gap:10px; }
.fecha-sel .field{ margin-bottom:0; }
.fecha-sel select:disabled{ color:var(--stone-3); cursor:not-allowed; background-color:var(--paper-2); }
/* En movil el ano ocupa toda la linea y debajo van mes y dia. El mes se
   lleva la parte ancha: «Septiembre» no cabe en media columna. */
@media (max-width:430px){
  .fecha-sel__cols{ grid-template-columns:1.45fr .55fr; }
  .fecha-sel .field:first-child{ grid-column:1 / -1; }
}

/* Confirmación de envío: el formulario se retira y deja una sola cosa en
   pantalla, para que no quede duda de que la consulta ha salido. */
.form-ok{
  text-align:center; padding:clamp(18px,3vw,34px) 0 6px;
  opacity:0; transform:translateY(10px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.form-ok.is-in{ opacity:1; transform:none; }
.form-ok:focus{ outline:none; }
.form-ok__ico{
  width:56px; height:56px; margin:0 auto 18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(62,113,89,.1); border:1px solid rgba(62,113,89,.3); color:var(--forest);
}
.form-ok__ico svg{
  width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
/* La marca de verificación se dibuja sola. El trazo oculto vive dentro de la
   propia animación (from + fill-mode both), nunca en el estado base: si el
   navegador no llega a animar —pestaña en segundo plano, movimiento reducido,
   animaciones desactivadas—, el visto sale dibujado en lugar de no salir. */
.form-ok__ico svg{ stroke-dasharray:30; stroke-dashoffset:0; }
.form-ok.is-in .form-ok__ico svg{ animation:okTrazo .55s .2s var(--ease-out) both; }
@keyframes okTrazo{ from{ stroke-dashoffset:30; } to{ stroke-dashoffset:0; } }
.form-ok__t{
  font-family:var(--serif); font-weight:var(--w-normal); font-size:var(--d-m);
  line-height:1.15; margin:0 0 10px;
}
.form-ok__p{ font-size:var(--t-md); line-height:1.6; color:var(--ink-3); margin:0 auto; max-width:34ch; }
.form-ok__c{ margin:18px auto 0; font-size:var(--t-sm); color:var(--ink-soft); }
.form-ok__c a{ color:var(--forest); text-decoration:underline; text-underline-offset:3px; }
.form-ok__otra{
  margin-top:24px; background:none; border:0; cursor:pointer; padding:0 0 3px;
  font-size:var(--t-2xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); border-bottom:1px solid var(--line);
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.form-ok__otra:hover{ color:var(--forest); border-bottom-color:var(--forest); }

/* Sobre el panel oscuro del hero */
.hero__form .form-ok__ico{ background:rgba(126,140,99,.2); border-color:rgba(126,140,99,.5); color:#DDE6CC; }
.hero__form .form-ok__t{ color:var(--paper); }
.hero__form .form-ok__p{ color:var(--stone-2); }
.hero__form .form-ok__c{ color:var(--stone-3); }
.hero__form .form-ok__c a{ color:var(--paper); }
.hero__form .form-ok__otra{ color:var(--stone-3); border-bottom-color:rgba(247,244,239,.32); }
.hero__form .form-ok__otra:hover{ color:var(--paper); border-bottom-color:var(--paper); }

@media (prefers-reduced-motion:reduce){
  .form-ok{ transition:none; transform:none; }
}

/* =========================================================================
   57. «SEGUIR LEYENDO»
   Los articulos solo enlazaban a Contacto: ni una vez a Herencias o
   Sucesiones, que son las paginas que tienen que posicionar. Tres destinos
   al pie de cada articulo, con el titulo real del destino como texto del
   enlace, que es lo que Google lee para entender de que va la pagina.
   ========================================================================= */
.seguir{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; background:var(--line-soft);
  border-block:1px solid var(--line-soft);
}
.seguir li{ margin:0; background:var(--paper); }
.seguir a{
  display:flex; flex-direction:column; gap:8px; height:100%;
  padding:clamp(20px,2.4vw,30px);
  background:var(--paper); transition:background var(--t-fast) var(--ease);
}
.seguir a:hover{ background:var(--paper-2); }
.seguir__t{
  font-family:var(--serif); font-size:var(--t-lg); line-height:1.25; color:var(--ink);
  transition:color var(--t-fast) var(--ease);
}
.seguir a:hover .seguir__t{ color:var(--forest); }
.seguir__p{ font-size:var(--t-sm); line-height:1.55; color:var(--ink-soft); }
@media (max-width:860px){ .seguir{ grid-template-columns:1fr; } }

/* =========================================================================
   58. FIRMA DE LOS ARTICULOS
   Quien escribe y cuando se reviso. En contenido juridico es lo que permite
   al lector —y a Google— saber que hay un profesional identificable detras.
   ========================================================================= */
.art-firma{
  margin-top:14px; display:flex; flex-direction:column; gap:3px;
  font-size:var(--t-2xs); line-height:1.5; color:var(--ink-soft);
}
.art-firma strong{ font-weight:var(--w-medium); color:var(--ink-3); }
.art-firma time{ font-variant-numeric:tabular-nums; }

/* =========================================================================
   59. MOVIMIENTO REDUCIDO
   Quien lo pide en su sistema no deberia ver ni animaciones de entrada, ni
   paralaje, ni cursor propio. El contenido aparece directamente en su sitio.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .cur,.cur-r{ display:none!important; }
  .js-anim .reveal{ opacity:1; transform:none; }
  .js-anim .lines .ln > span{ transform:none; }
  .js-anim .wipe{ clip-path:none; }
}

/* =========================================================================
   60. TABLAS DE CONTENIDO
   No habia tablas en el proyecto. Se resuelven con el mismo lenguaje del
   resto: filetes finos, versales pequenas en la cabecera y, en movil, cada
   fila se apila con su etiqueta delante en lugar de obligar a desplazar.
   ========================================================================= */
.tabla-env{ margin-block:clamp(22px,2.6vw,32px); }
.tabla{
  width:100%; border-collapse:collapse; font-size:var(--t-sm); line-height:1.55;
  border-block:1px solid var(--line-soft);
}
.tabla th{
  text-align:left; font-size:var(--t-2xs); font-weight:var(--w-medium);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  padding:12px 16px 12px 0; border-bottom:1px solid var(--line-soft);
}
.tabla td{ padding:14px 16px 14px 0; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.tabla tbody tr:last-child td{ border-bottom:0; }
.tabla td:first-child{ color:var(--ink); font-weight:var(--w-medium); }
@media (max-width:680px){
  .tabla,.tabla tbody,.tabla tr,.tabla td{ display:block; width:100%; }
  .tabla thead{ position:absolute; left:-9999px; }
  .tabla tr{ padding:16px 0; border-bottom:1px solid var(--line-soft); }
  .tabla tbody tr:last-child{ border-bottom:0; }
  .tabla td{ padding:0 0 8px; border:0; }
  .tabla td::before{
    content:attr(data-t); display:block; margin-bottom:3px;
    font-size:var(--t-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  }
  .tabla td:last-child{ padding-bottom:0; }
}