/* site.css — piezas comunes del sitio (rediseño de octubre de 2026).
   Se carga DESPUÉS de /socios/partner.css y /servicios/landing.css y solo añade lo que aquellas no
   tienen: la navegación completa, el pie, la home, las páginas de línea, los casos y la intro.
   Mismo sistema: negro con la niebla de .atmos, Space Grotesk + Inter y un único acento bronce.
   Todo lo que se puede reutilizar de landing.css (.kicker, .title, .lede, .card, .grid, .steps,
   .stats, .proof, .faq, .form, .btn…) se reutiliza: aquí no se redefine. */

/* ---------- navegación completa ----------
   Va encima del primer bloque de cada página, como la .topbar de las landings: absoluta y con
   sombra de texto, porque las cabeceras empiezan sobre fotografía. Sin JavaScript funciona entera:
   el desplegable y el menú móvil son <details>. site.js solo los cierra al pulsar fuera. */
.site-nav{position:absolute; top:0; left:0; right:0; z-index:20; display:flex; align-items:center;
  justify-content:space-between; gap:clamp(16px,2.4vw,36px);
  /* el borde izquierdo de la marca cae en la misma vertical que el contenido (.wrap: 1320 px + su relleno) */
  padding:clamp(20px,3.2vw,38px) calc(max(0px,(100vw - 1320px) / 2) + clamp(28px,5vw,72px));
  text-shadow:0 1px 2px rgba(10,10,10,.55), 0 0 22px rgba(10,10,10,.8)}
.site-nav .brand{flex:none}
.sn-links{display:flex; align-items:center; gap:clamp(18px,2vw,30px)}
.sn-links > a,.sn-drop > summary,.sn-tel,.sn-wa{font-family:'Inter',sans-serif; font-weight:300; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--stone); white-space:nowrap; cursor:pointer}
.sn-links > a:hover,.sn-drop > summary:hover,.sn-tel:hover,.sn-wa:hover{color:var(--ink)}
.site-nav .brand[aria-current="page"]{text-decoration:none}
.site-nav a[aria-current="page"]:not(.brand){color:var(--ink); text-decoration:underline; text-decoration-color:var(--bronze);
  text-underline-offset:7px; text-decoration-thickness:1px}
.sn-drop{position:relative}
.sn-drop > summary{list-style:none; display:flex; align-items:center; gap:8px}
.sn-drop > summary::-webkit-details-marker{display:none}
.sn-drop > summary::after{content:''; width:6px; height:6px; border-right:1px solid currentColor;
  border-bottom:1px solid currentColor; transform:rotate(45deg); margin-top:-4px; transition:transform .2s ease}
.sn-drop[open] > summary::after{transform:rotate(-135deg); margin-top:3px}
.sn-menu{position:absolute; top:calc(100% + 14px); left:-18px; min-width:250px; padding:10px;
  border:1px solid var(--surface-line); border-radius:10px; background:rgba(16,16,18,.98);
  box-shadow:var(--surface-shadow); text-shadow:none; display:grid}
.sn-menu a{padding:10px 12px; border-radius:6px; font-family:'Inter',sans-serif; font-weight:300;
  font-size:14px; color:var(--stone)}
.sn-menu a:hover{background:rgba(248,247,244,.05); color:var(--ink)}
.sn-menu .sn-sub,.sn-panel .sn-sub{padding-left:26px; font-size:13px; color:var(--gray)}
.sn-menu a[aria-current="page"]{text-decoration:none; color:var(--ink); background:var(--bronze-soft)}
.sn-contact{display:flex; align-items:center; gap:clamp(14px,1.6vw,22px)}
.sn-cta{padding:10px 20px; min-height:40px; text-shadow:none}
.sn-mobile{display:none}
.sn-mobile > summary{list-style:none; display:flex; align-items:center; gap:10px; cursor:pointer;
  min-height:44px; font-family:'Inter',sans-serif; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); position:relative; z-index:31}
.sn-mobile > summary::-webkit-details-marker{display:none}
.sn-burger{position:relative; width:20px; height:1px; background:currentColor}
.sn-burger::before,.sn-burger::after{content:''; position:absolute; left:0; width:20px; height:1px;
  background:currentColor; transition:transform .25s ease}
.sn-burger::before{top:-6px} .sn-burger::after{top:6px}
.sn-mobile[open] .sn-burger{background:transparent}
.sn-mobile[open] .sn-burger::before{transform:translateY(6px) rotate(45deg)}
.sn-mobile[open] .sn-burger::after{transform:translateY(-6px) rotate(-45deg)}
.sn-panel{position:fixed; inset:0; z-index:30; overflow-y:auto; background:#0A0A0A; text-shadow:none;
  display:flex; flex-direction:column; padding:clamp(92px,14vh,120px) clamp(28px,7vw,56px) 40px}
.sn-panel > a{padding:13px 0; border-bottom:1px solid var(--line); font-family:'Space Grotesk',sans-serif;
  font-weight:300; font-size:20px; color:var(--ink)}
.sn-panel > a.sn-sub{font-family:'Inter',sans-serif; font-size:15px; padding:10px 0 10px 18px; color:var(--stone)}
/* páginas de entrada del servicio 3 (19-10-2026): un nivel por debajo de los tres servicios */
.sn-panel > a.sn-sub2{font-family:'Inter',sans-serif; padding:8px 0 8px 36px; font-size:14px; color:var(--gray)}
.sn-panel .sn-pcontact{margin:26px 0 0; font-family:'Inter',sans-serif; font-size:15px; color:var(--stone)}
.sn-panel .sn-pcontact a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--bronze-line); text-underline-offset:3px}
@media (max-width:1180px){ .sn-links{gap:16px} .sn-wa{display:none} }
@media (max-width:980px){
  .sn-links,.sn-cta{display:none}
  .sn-mobile{display:block}
}
@media (max-width:520px){ .site-nav{gap:12px} }
/* la barra de las landings enseña «Servicios» solo cuando cabe */
@media (max-width:760px){ .tb-more{display:none} }

/* ---------- pie completo ---------- */
.site-foot{position:relative; z-index:1; border-top:1px solid var(--line);
  padding:clamp(48px,8vh,84px) 0 clamp(36px,6vh,56px); font-family:'Inter',sans-serif; font-weight:300}
.sf-grid{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:clamp(26px,3vw,48px)}
.sf-brand p{margin:16px 0 0; max-width:42ch; font-size:14px; line-height:1.65; color:var(--stone)}
.sf-col{display:flex; flex-direction:column; gap:10px; min-width:0}
.sf-col a{font-size:14px; line-height:1.5; color:var(--stone); overflow-wrap:anywhere}
.sf-col a.sf-sub{padding-left:14px; font-size:13px; color:var(--gray)}
.sf-col a:hover,.sf-legal a:hover{color:var(--ink)}
.sf-h{margin:0 0 6px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze)}
.sf-hours{margin:8px 0 0; font-size:14px; line-height:1.5; color:var(--stone)}
.sf-hours span{display:block; margin-bottom:2px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--stone)}
.sf-legal{margin:clamp(36px,5vh,52px) 0 0; padding-top:20px; border-top:1px solid var(--line);
  font-size:12px; line-height:1.7; color:var(--gray)}
.sf-legal a{color:var(--gray)}
.sf-mini{margin-top:14px; font-size:13px; line-height:1.9; color:var(--gray)}
@media (max-width:900px){ .sf-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .sf-brand{grid-column:1/-1} }
@media (max-width:520px){ .sf-grid{grid-template-columns:1fr} }

/* ---------- cabecera de página interior ---------- */
/* .section.flow fija su propio relleno y gana por especificidad: por eso va con las tres clases */
.section.flow.page-head{padding-top:clamp(140px,22vh,210px); padding-bottom:clamp(28px,5vh,56px)}
.crumbs{margin:0 0 clamp(18px,2.4vh,26px); font-family:'Inter',sans-serif; font-weight:300; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gray)}
.crumbs a{color:var(--stone)} .crumbs a:hover{color:var(--ink)}
.page-head .title.md{max-width:20ch}
.page-head .lede{max-width:62ch}

/* ---------- home: héroe ----------
   El monolito a sangre, como el héroe de siempre, pero con texto de verdad encima: el titular es
   ya la tesis comercial. La foto va en <img> con srcset para que el móvil no baje 430 KB. */
.home-hero{display:flex; align-items:flex-end; height:auto; min-height:100svh;
  padding:clamp(140px,22vh,220px) 0 clamp(72px,12vh,120px)}
.home-hero .bg{object-position:center 30%; filter:grayscale(1) contrast(1.05)}
.home-hero .veil{background:linear-gradient(to top,#0A0A0A 0%,rgba(10,10,10,.86) 34%,rgba(10,10,10,.42) 70%,rgba(10,10,10,.62) 100%)}
.home-hero .wrap{position:relative; z-index:3}
/* Su cara junto a la línea de servicios: quien llega ve desde el primer momento con quién va a hablar.
   height:auto por la misma razón que .foot-face: el atributo height gana a aspect-ratio. */
.hero-id{display:flex; align-items:center; gap:clamp(14px,1.6vw,22px)}
.hero-id .eyebrow{line-height:1.8; max-width:62ch}
.hero-face{flex:none; width:clamp(54px,5vw,68px); height:auto; aspect-ratio:1; border-radius:50%; object-fit:cover;
  filter:grayscale(1) contrast(1.04); box-shadow:0 0 0 1px rgba(248,247,244,.18), 0 0 46px 6px rgba(176,141,87,.12)}
/* En móvil, con el espaciado de .42em la línea se partía en cinco junto a la foto; con .2em son tres,
   la misma altura que el retrato. */
@media (max-width:520px){ .hero-id .eyebrow{letter-spacing:.2em; line-height:1.7} }
.home-hero .title.hero{max-width:17ch}
.home-hero .sub{max-width:54ch; color:var(--stone)}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:clamp(28px,4vh,40px)}

/* ---------- líneas de servicio ---------- */
.lines{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr); gap:clamp(16px,1.8vw,26px)}
.line{display:flex; flex-direction:column; border:1px solid var(--surface-line); border-radius:10px;
  background:var(--surface-sheen),var(--surface); box-shadow:var(--surface-shadow),var(--surface-inset);
  padding:clamp(22px,2.4vw,32px)}
.line.feat{border-color:var(--bronze-line)}
.line .tag{font-family:'Inter',sans-serif; font-weight:300; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bronze)}
.line h3{margin:14px 0 0; font-family:'Space Grotesk',sans-serif; font-weight:400;
  font-size:clamp(21px,2vw,28px); line-height:1.15; color:var(--ink)}
.line p{margin:14px 0 0; font-family:'Inter',sans-serif; font-weight:300; font-size:16px; line-height:1.6; color:var(--stone)}
.line ul{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:2px}
.line li a,.line li span{display:flex; justify-content:space-between; gap:12px; padding:11px 0;
  border-top:1px solid var(--line); font-family:'Inter',sans-serif; font-weight:300; font-size:14px; color:var(--ink)}
.line li a:hover{color:var(--bronze)}
.line li em{font-style:normal; color:var(--gray); white-space:nowrap}
.line .more{margin-top:auto; padding-top:22px; font-family:'Inter',sans-serif; font-size:13px;
  letter-spacing:.06em; color:var(--bronze)}
.line .more:hover{color:var(--ink)}
@media (max-width:1100px){ .lines{grid-template-columns:1fr 1fr} .line.feat{grid-column:1/-1} }
@media (max-width:700px){ .lines{grid-template-columns:1fr} }

/* ---------- cómo trabajo: cuatro pasos reales, en orden ---------- */
.howto{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,1.8vw,26px); counter-reset:h}
.howto li{position:relative; padding-top:22px; border-top:1px solid var(--line-2)}
.howto li::before{counter-increment:h; content:'0' counter(h); position:absolute; top:-1px; left:0;
  padding-top:14px; border-top:1px solid var(--bronze); width:34px; font-family:'Inter',sans-serif;
  font-size:11px; letter-spacing:.2em; color:var(--bronze)}
.howto h3{margin:22px 0 0; font-family:'Space Grotesk',sans-serif; font-weight:400; font-size:clamp(17px,1.5vw,21px); color:var(--ink)}
.howto p{margin:10px 0 0; font-family:'Inter',sans-serif; font-weight:300; font-size:15px; line-height:1.6; color:var(--stone)}
@media (max-width:900px){ .howto{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .howto{grid-template-columns:1fr} }

/* ---------- dos columnas: argumento + lista ---------- */
.two{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:start}
@media (max-width:900px){ .two{grid-template-columns:1fr} }

/* ---------- caso destacado (GLS) ---------- */
.case-hl{border:1px solid var(--surface-line); border-radius:12px; background:var(--surface-sheen),var(--surface);
  box-shadow:var(--surface-shadow),var(--surface-inset); padding:clamp(24px,3vw,44px)}
.case-hl .stats{margin-top:clamp(22px,3vh,32px)}
.case-hl .src{margin:20px 0 0; font-family:'Inter',sans-serif; font-weight:300; font-size:12px; color:var(--gray)}

/* ---------- banda (asesorías, cierre) ---------- */
.band{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}

/* ---------- manifiesto con el busto ----------
   El único sitio fuera de las páginas de marca donde queda una estatua: es la identidad de la
   casa. En móvil se reencuadra al rostro (mismo arreglo que /socios). */
.manifest{display:flex; align-items:center; height:auto; min-height:min(92vh,860px); padding:clamp(80px,14vh,140px) 0}
.manifest .bg{object-position:left center; filter:grayscale(1) contrast(1.04)}
.manifest .veil{background:linear-gradient(90deg,rgba(10,10,10,.25) 0%,rgba(10,10,10,.70) 45%,#0A0A0A 82%)}
.manifest .wrap{position:relative; z-index:3; display:flex; justify-content:flex-end}
.manifest .statement{max-width:22ch}
.manifest .copy{max-width:min(560px,100%)}
@media (max-width:768px){
  .manifest .bg{object-position:30% 50%; filter:grayscale(1) contrast(1.04) brightness(1.1)}
  .manifest .veil{background:linear-gradient(to top,#0A0A0A 10%,rgba(10,10,10,.78) 55%,rgba(10,10,10,.45) 100%)}
  .manifest{align-items:flex-end}
}

/* ---------- productos con precio, en las páginas de línea ---------- */
.offers{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:clamp(16px,1.8vw,26px)}
.offer{display:flex; flex-direction:column; border:1px solid var(--surface-line); border-radius:10px;
  background:var(--surface-sheen),var(--surface); box-shadow:var(--surface-shadow),var(--surface-inset);
  padding:clamp(22px,2.4vw,30px)}
.offer .price{margin:16px 0 0; font-family:'Space Grotesk',sans-serif; font-weight:300;
  font-size:clamp(24px,2.4vw,32px); color:var(--ink)}
.offer .price small{display:block; margin-top:6px; font-family:'Inter',sans-serif; font-size:12px;
  letter-spacing:.06em; color:var(--gray)}
.offer h3{margin:0; font-family:'Space Grotesk',sans-serif; font-weight:400; font-size:clamp(19px,1.8vw,24px); color:var(--ink)}
.offer p{margin:14px 0 0; font-family:'Inter',sans-serif; font-weight:300; font-size:15px; line-height:1.6; color:var(--stone)}
.offer .btn{margin-top:auto; align-self:flex-start}
.offer .btn:first-of-type{margin-top:22px}

/* ---------- casos de éxito ---------- */
.filters{display:flex; flex-wrap:wrap; gap:10px}
.filters button{min-height:40px; padding:9px 18px; border-radius:999px; border:1px solid var(--line-2);
  background:transparent; color:var(--stone); font:300 13px/1 'Inter',sans-serif; letter-spacing:.04em; cursor:pointer}
.filters button:hover{border-color:var(--stone); color:var(--ink)}
.filters button[aria-pressed="true"]{border-color:var(--bronze); background:var(--bronze-soft); color:var(--ink)}
.cases{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); gap:clamp(16px,1.8vw,26px)}
.cases.feat{grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr))}
.case{display:flex; flex-direction:column; border:1px solid var(--surface-line); border-radius:10px;
  background:var(--surface-sheen),var(--surface); box-shadow:var(--surface-shadow),var(--surface-inset);
  padding:clamp(22px,2.4vw,32px); min-width:0}
.case[hidden]{display:none !important}
.case .tag{font-family:'Inter',sans-serif; font-weight:300; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gray)}
.case h3{margin:12px 0 0; font-family:'Space Grotesk',sans-serif; font-weight:400;
  font-size:clamp(18px,1.7vw,23px); line-height:1.25; color:var(--ink)}
.case dl{margin:18px 0 0}
.case dt{margin-top:14px; font-family:'Inter',sans-serif; font-weight:300; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--bronze)}
.case dd{margin:6px 0 0; font-family:'Inter',sans-serif; font-weight:300; font-size:15px; line-height:1.6; color:var(--stone)}
.case .lines-of{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:20px}
.case .lines-of a,.case .lines-of span{padding:5px 12px; border-radius:999px; border:1px solid var(--line-2);
  font-family:'Inter',sans-serif; font-weight:300; font-size:12px; color:var(--stone)}
.case .lines-of a:hover{border-color:var(--bronze-line); color:var(--ink)}
.case.big{border-color:var(--bronze-line)}

/* ---------- intro de vídeo de la home ----------
   Solo existe si index.html añade html.intro-on ANTES de pintar (primera visita de la sesión, sin
   reduced-motion ni ahorro de datos, y no viniendo de otra página del sitio). Sin JavaScript no hay
   intro: el vídeo nunca tapa la página. */
#home-intro{display:none}
.intro-on #home-intro{display:flex; position:fixed; inset:0; z-index:100; background:#0A0A0A;
  align-items:center; justify-content:center; transition:opacity .9s ease}
.intro-on #home-intro.hide{opacity:0; pointer-events:none}
#home-intro video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
#skip{position:fixed; bottom:max(26px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); z-index:101;
  font:400 13px/1 'Inter',sans-serif; letter-spacing:.04em; color:#F8F7F4; background:rgba(10,10,10,.35);
  border:1px solid rgba(248,247,244,.35); border-radius:999px; padding:12px 20px; min-height:44px; cursor:pointer}
#skip:hover{background:rgba(248,247,244,.12); border-color:rgba(248,247,244,.6)}
.intro-on body{overflow:hidden}

/* ---------- transiciones entre secciones (16-10-2026) ----------
   Rafael: «se ven cortes claros entre secciones». Las secciones con fotografía heredaban de
   partner.css un fondo negro opaco y terminaban en seco contra la niebla de .atmos, que es más
   clara. Ahora son transparentes y la foto —con su velo— se desvanece por los bordes: la niebla
   sigue por debajo sin costura. Por eso el degradado .seam, que tapaba ese corte, ya no hace falta.
   Los filetes que separaban bloques pasan a líneas que se apagan hacia los extremos. */
.home-hero,.manifest,.section.split,.page-head.photo{background:transparent}
.home-hero .bg,.home-hero > .veil,.section.split > .bg,.section.split > .veil,
.page-head.photo .bg,.page-head.photo > .veil{
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 60%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 60%,transparent 100%)}
.manifest .bg,.manifest > .veil{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 80%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 80%,transparent 100%)}
.flow.seam::before{display:none}
.band{border:0}
.rule{background:linear-gradient(90deg,transparent,var(--line) 15%,var(--line) 85%,transparent)}
.site-foot,.lfoot{border-top:0;
  background:linear-gradient(90deg,transparent,var(--line-2) 18%,var(--line-2) 82%,transparent) top/100% 1px no-repeat}

/* ---------- cabecera con fotografía en las páginas interiores ----------
   «Muy oscuras las páginas que no son la home»: la home tiene una fotografía por pantalla y las
   interiores solo la niebla. Cada una lleva ahora en la cabecera una de las fotografías de la casa
   (monolito, busto, ágora), en gris, con el velo cargado a la izquierda —donde va el texto— y
   fundida por abajo con la niebla. .flip la refleja para que el motivo quede a la derecha. */
.section.flow.page-head.photo{display:flex; align-items:flex-end; min-height:min(86vh,820px)}
.page-head.photo .bg{filter:grayscale(1) contrast(1.05)}
.page-head.photo .bg.flip{transform:scaleX(-1)}
.page-head.photo > .veil{background:
  linear-gradient(90deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.78) 36%,rgba(10,10,10,.38) 68%,rgba(10,10,10,.22) 100%)}
.page-head.photo .wrap{position:relative; z-index:3}
.section.flow.page-head.photo.auto{min-height:0; align-items:flex-start}
.page-head.photo.auto > .veil{background:linear-gradient(90deg,rgba(10,10,10,.94) 0%,rgba(10,10,10,.82) 45%,rgba(10,10,10,.6) 100%)}
@media (max-width:768px){
  .page-head.photo > .veil,.page-head.photo.auto > .veil{background:
    linear-gradient(to top,rgba(10,10,10,.96) 0%,rgba(10,10,10,.84) 50%,rgba(10,10,10,.5) 100%)}
}

/* ---------- formulario corto, compacto (home y /contacto, 19-10-2026) ----------
   Rafael: «este formulario es enorme». Nombre, empresa, teléfono y email en dos columnas, mensaje
   de dos líneas y la información básica de protección de datos en letra pequeña bajo la casilla
   (sigue entera: responsable, finalidad, legitimación, destinatarios y derechos). Los campos se
   quedan en 16 px para que iOS no amplíe la página al tocarlos. */
.form.compact .frow2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(16px,2vw,28px)}
.form.compact .field{margin-top:16px}
.form.compact .frow2 > .field:nth-child(-n+2){margin-top:0}
.form.compact .flabel{margin-bottom:2px; font-size:11px}
.form.compact .flabel .opt{letter-spacing:.04em; text-transform:none; color:var(--gray)}
.form.compact .field input,.form.compact .field select,.form.compact .field textarea{padding:9px 0; font-size:16px}
.form.compact .field textarea{min-height:66px}
.form.compact .check{margin-top:20px; gap:12px}
.form.compact .check span{font-size:14px; line-height:1.5}
.form.compact .check small{display:block; margin-top:6px; font-size:12px; line-height:1.5; color:var(--gray)}
.form.compact .factions{margin-top:20px; gap:10px 18px}
.form.compact .fhelp{margin:0; font-size:13px}
.conv-form:has(.form.compact){padding:clamp(22px,2.4vw,34px)}
@media (max-width:560px){
  .form.compact .frow2{grid-template-columns:1fr}
  .form.compact .frow2 > .field:nth-child(2){margin-top:16px}
}

/* ---------- camino de implantación (/servicios/odoo, 16-10-2026) ----------
   Rafael quería el método «como un camino o algo llamativo»: análisis → mapa de procesos → diseño e
   instalación en un VPS del cliente, y la propiedad de módulos y datos bien a la vista. Cada <li> es un
   .reveal propio: la línea se dibuja y el nodo se enciende cuando el visitante llega a esa etapa.
   Todo lo que se anima va dentro de un .r-fade, que está oculto hasta .inview; por eso el estado sin
   animar es el visible y, sin JavaScript (el <noscript> fuerza .r-fade), el camino se ve completo. */
.camino{list-style:none; margin:clamp(44px,6.5vh,72px) 0 0; padding:0}
.camino > li{position:relative; display:grid; grid-template-columns:52px minmax(0,1fr) minmax(0,1.05fr);
  column-gap:clamp(20px,3vw,52px); align-items:start}
.cm-step{padding-bottom:clamp(56px,8vh,96px)}
.cm-edge{padding-bottom:clamp(40px,6vh,64px)}
.cm-edge.cm-last{padding-bottom:0}
.cm-edge p{grid-column:2 / -1; margin:0; max-width:72ch; font-family:'Inter',sans-serif; font-weight:300;
  font-size:15px; line-height:1.6; color:var(--stone)}
.cm-edge b{font-weight:400; color:var(--ink)}
.cm-line{position:absolute; left:25px; top:0; bottom:0; width:2px;
  background:linear-gradient(to bottom,var(--bronze),var(--bronze-line)) no-repeat 0 0 / 2px 100%}
.cm-edge > .cm-line{top:12px}
.cm-pin{grid-column:1; justify-self:center; position:relative; z-index:1; width:14px; height:14px; margin-top:5px;
  border-radius:50%; border:1px solid var(--bronze); background:#0A0A0A}
.cm-last .cm-pin{margin-top:2px; background:var(--bronze)}
.cm-node{grid-column:1; justify-self:center; position:relative; z-index:1; width:52px; height:52px;
  display:grid; place-items:center; border-radius:50%; border:1px solid var(--bronze);
  background:radial-gradient(circle at 50% 30%,rgba(176,141,87,.26),#0E0D0C 72%);
  font-family:'Space Grotesk',sans-serif; font-weight:300; font-size:22px; color:var(--ink);
  box-shadow:0 0 40px 4px rgba(176,141,87,.16)}
.cm-text{grid-column:2; padding-top:4px}
.cm-k{margin:0; font-family:'Inter',sans-serif; font-weight:300; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bronze)}
.cm-text h3{margin:12px 0 0; font-family:'Space Grotesk',sans-serif; font-weight:400;
  font-size:clamp(20px,2vw,28px); line-height:1.2; letter-spacing:-.01em; color:var(--ink)}
.cm-text p:not(.cm-k){margin:14px 0 0; max-width:52ch; font-family:'Inter',sans-serif; font-weight:300;
  font-size:16px; line-height:1.65; color:var(--stone)}
.cm-vis{grid-column:3}

/* etapa 1 · notas de análisis */
.cm-qs{list-style:none; margin:0; padding:4px 0}
.cm-qs li{display:grid; grid-template-columns:20px minmax(0,1fr); column-gap:12px; padding:12px 16px;
  border-bottom:1px solid var(--line)}
.cm-qs li:last-child{border-bottom:0}
.cm-qs li::before{content:"\2713"; grid-row:1 / span 2; width:20px; height:20px; margin-top:1px; display:grid;
  place-items:center; border-radius:50%; border:1px solid var(--bronze-line); color:var(--bronze);
  font-size:10px; line-height:1}
.cm-qs .q{font-family:'Inter',sans-serif; font-weight:400; font-size:14px; line-height:1.4; color:var(--ink)}
.cm-qs .a{margin-top:3px; font-family:'Inter',sans-serif; font-weight:300; font-size:13px; line-height:1.5; color:var(--stone)}

/* etapa 2 · mapa de proceso: la caja ocupa siempre el mismo ancho para que los conectores cuadren */
.cm-flow{list-style:none; margin:0; padding:20px 18px 22px}
.cm-flow li{display:grid; grid-template-columns:54% minmax(0,1fr); column-gap:14px; align-items:center}
.cm-flow li + li{margin-top:26px}
.cm-flow .box{position:relative; display:block; padding:9px 12px; border:1px solid var(--surface-line);
  border-radius:6px; background:rgba(248,247,244,.045); font-family:'Inter',sans-serif; font-weight:400;
  font-size:13px; line-height:1.3; color:var(--ink); text-align:center}
.cm-flow li + li .box::before{content:""; position:absolute; left:50%; top:-27px; width:1px; height:22px;
  background:var(--bronze-line)}
.cm-flow li + li .box::after{content:""; position:absolute; left:calc(50% - 4px); top:-6px;
  border-style:solid; border-width:5px 4.5px 0; border-color:var(--bronze) transparent transparent}
.cm-flow .dec .box{border-style:dashed; border-color:var(--bronze); color:var(--bronze)}
.cm-flow .mod{font-family:'Inter',sans-serif; font-weight:300; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gray)}
.cm-flow .alt{position:relative; justify-self:start; padding:7px 11px; border:1px dashed var(--line-2);
  border-radius:6px; font-family:'Inter',sans-serif; font-weight:300; font-size:12px; line-height:1.35; color:var(--stone)}
.cm-flow .alt::before{content:""; position:absolute; right:100%; top:50%; width:14px; height:1px; background:var(--bronze-line)}
.cm-flow i{font-style:normal; color:var(--bronze)}
.cm-flow .alt i{margin-right:6px}
.cm-flow .yes{position:absolute; left:calc(50% + 9px); top:-22px; font-family:'Inter',sans-serif;
  font-weight:300; font-size:11px; line-height:1}

/* etapa 3 · su servidor y lo que se conecta a él */
.cm-srv{padding:18px}
.cm-box{border:1px solid var(--bronze-line); border-radius:8px; background:rgba(176,141,87,.06); padding:14px}
.cm-shead{display:flex; justify-content:space-between; align-items:center; gap:8px 12px; flex-wrap:wrap;
  font-family:'Inter',sans-serif; font-weight:400; font-size:13px; color:var(--ink)}
.cm-shead .led{display:inline-block; width:7px; height:7px; margin-right:9px; vertical-align:1px;
  border-radius:50%; background:var(--bronze); box-shadow:0 0 10px var(--bronze)}
.cm-shead .own{font-weight:300; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--bronze)}
.cm-mods{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:14px}
.cm-mods span,.cm-links span{padding:8px 6px; border-radius:5px; font-family:'Inter',sans-serif;
  font-weight:300; font-size:12px; line-height:1.3; text-align:center; color:var(--stone)}
.cm-mods span{border:1px solid var(--surface-line); background:rgba(248,247,244,.045)}
.cm-mods .mine{border-color:var(--bronze); color:var(--bronze)}
.cm-links{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:34px}
.cm-links span{position:relative; border:1px dashed var(--line-2)}
.cm-links span::before{content:""; position:absolute; left:50%; bottom:100%; width:1px; height:34px; background:var(--bronze-line)}
.cm-links span::after{content:""; position:absolute; left:calc(50% - 3px); bottom:100%; width:6px; height:6px;
  border-radius:50%; background:var(--bronze); box-shadow:0 0 8px var(--bronze); opacity:0}

/* propiedad: el mensaje que cierra el camino */
.cm-own{margin-top:clamp(56px,8vh,96px)}
.cm-own-in{display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:clamp(18px,2.4vw,32px);
  padding:clamp(28px,3.4vw,48px); border:1px solid var(--bronze-line); border-radius:12px;
  background:radial-gradient(120% 140% at 0% 0%,rgba(176,141,87,.14),rgba(176,141,87,0) 60%),var(--surface);
  box-shadow:var(--surface-shadow),var(--surface-inset)}
.cm-key{grid-column:1; grid-row:1 / span 3; margin-top:4px; color:var(--bronze)}
.cm-own-t,.cm-own-l,.cm-own-f{grid-column:2}
.cm-own-t{margin:0; max-width:26ch; font-family:'Space Grotesk',sans-serif; font-weight:300;
  font-size:clamp(24px,2.8vw,40px); line-height:1.15; letter-spacing:-.02em; color:var(--ink)}
.cm-own-l{list-style:none; margin:clamp(22px,3vh,32px) 0 0; padding:0; display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,28px)}
.cm-own-l li{padding-top:14px; border-top:1px solid var(--bronze-line); font-family:'Inter',sans-serif;
  font-weight:300; font-size:15px; line-height:1.6; color:var(--stone)}
.cm-own-l b{display:block; margin-bottom:6px; font-weight:400; color:var(--ink)}
.cm-own-f{margin:clamp(20px,2.8vh,28px) 0 0; font-family:'Inter',sans-serif; font-weight:300;
  font-size:15px; line-height:1.6; color:var(--bronze)}

/* animaciones: solo cuando la etapa entra en pantalla */
@keyframes cmGrow{from{background-size:2px 0}to{background-size:2px 100%}}
@keyframes cmPulse{
  0%{box-shadow:0 0 0 0 rgba(176,141,87,.55),0 0 40px 4px rgba(176,141,87,.16)}
  100%{box-shadow:0 0 0 18px rgba(176,141,87,0),0 0 40px 4px rgba(176,141,87,.16)}}
@keyframes cmIn{from{opacity:0; transform:translateX(-10px)}to{opacity:1; transform:none}}
@keyframes cmFlow{0%{transform:translateY(0); opacity:0}15%,80%{opacity:1}100%{transform:translateY(-30px); opacity:0}}
.inview > .cm-line{animation:cmGrow 1.4s cubic-bezier(.4,0,.2,1) .15s both}
.inview > .cm-node{animation:cmPulse 1.5s ease-out .45s both}
.inview .cm-qs li,.inview .cm-flow li{animation:cmIn .55s cubic-bezier(.16,1,.3,1) both}
.inview .cm-qs li:nth-child(1),.inview .cm-flow li:nth-child(1){animation-delay:.45s}
.inview .cm-qs li:nth-child(2),.inview .cm-flow li:nth-child(2){animation-delay:.62s}
.inview .cm-qs li:nth-child(3),.inview .cm-flow li:nth-child(3){animation-delay:.79s}
.inview .cm-qs li:nth-child(4),.inview .cm-flow li:nth-child(4){animation-delay:.96s}
.inview .cm-flow li:nth-child(5){animation-delay:1.13s}
.inview .cm-links span::after{animation:cmFlow 2.6s ease-in-out 1s infinite}
.inview .cm-links span:nth-child(2)::after{animation-delay:1.85s}
.inview .cm-links span:nth-child(3)::after{animation-delay:2.7s}
@media (prefers-reduced-motion:reduce){
  .inview > .cm-line,.inview > .cm-node,.inview .cm-qs li,.inview .cm-flow li,
  .inview .cm-links span::after{animation:none}
}

@media (max-width:900px){
  .camino > li{grid-template-columns:40px minmax(0,1fr); column-gap:18px}
  .cm-line{left:19px}
  .cm-node{width:40px; height:40px; font-size:18px}
  .cm-edge p{grid-column:2}
  .cm-vis{grid-column:2; margin-top:26px}
}
@media (max-width:760px){
  .cm-own-in{grid-template-columns:1fr}
  .cm-key{grid-row:auto; margin:0 0 16px}
  .cm-own-t,.cm-own-l,.cm-own-f{grid-column:1}
  .cm-own-l{grid-template-columns:1fr}
}
@media (max-width:440px){
  .cm-mods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cm-flow{padding:18px 14px 20px}
  .cm-flow .mod{letter-spacing:.08em}
}