/* ==========================================================================
   Kaoru Consulting — hoja de estilos principal
   Paleta: crema y beige editorial + rojo de marca (enso)
   ========================================================================== */

:root{
  --ink:#241F1A;          /* negro cálido: bloques oscuros y pie */
  --brand:#D00808;        /* rojo exacto del enso del logo */
  --brand-deep:#9B0505;   /* texto pequeño sobre fondo claro */
  --brand-bright:#FF6A57; /* sobre fondos oscuros: cumple contraste AA */
  --brand-hot:#EF2117;    /* estado hover del rojo */
  --sand:#E9CBA4;         /* arena cálida para destacados sobre foto */
  --paper:#FBF7F1;        /* crema: fondo base */
  --paper-2:#F1E8DA;      /* beige: secciones alternas */
  --paper-3:#E8DCC9;      /* beige profundo: banda de citas */
  --text:#2A241E;
  --text-soft:#71685C;
  --text-on-dark:#EFE6DA;
  --line:#E2D6C3;
  --line-dark:rgba(255,255,255,.18);

  --wrap:1180px;
  --radius:14px;
  --radius-lg:20px;
  --shadow-sm:0 2px 10px rgba(74,54,34,.07);
  --shadow-md:0 14px 36px rgba(74,54,34,.13);

  /* Geométrica estilo Kabel: Josefin Sans es su reinterpretación moderna.
     Los respaldos mantienen el mismo carácter geométrico. */
  --display:"Kaoru Branding","Josefin Sans","Century Gothic",Futura,sans-serif;
  --sans:"Josefin Sans","Century Gothic","Questrial",Futura,"Avenir Next","Trebuchet MS",sans-serif;
  --serif:"Josefin Sans","Century Gothic","Questrial",Futura,"Avenir Next","Trebuchet MS",sans-serif;
}

/* Kaoru Branding: la tipografía del logotipo de Kaoru X1, hecha por la casa.
   Subconjunto latino, un solo peso. Se sirve desde el propio sitio. */
@font-face{
  font-family:"Kaoru Branding";
  src:url("../fonts/kaoru-branding.woff") format("woff"),
      url("../fonts/kaoru-branding.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px;}
body{
  margin:0;
  font-family:var(--sans);
  font-size:18.5px;
  line-height:1.72;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;}
a{color:inherit;}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.2;letter-spacing:.004em;margin:0 0 .6em;text-wrap:balance;}
p,li{text-wrap:pretty;}
h1{font-size:clamp(2.2rem,5.2vw,3.7rem);}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem);}
h3{font-size:1.2rem;}
p{margin:0 0 1.1em;}
ul,ol{margin:0;padding:0;list-style:none;}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--brand);color:#fff;padding:.7rem 1.2rem;font-weight:600;border-radius:0 0 8px 0;}
.skip-link:focus{left:0;}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px;}
.hero :focus-visible,.section-dark :focus-visible,.site-footer :focus-visible,
.site-header:not(.is-scrolled) :focus-visible{outline-color:var(--brand-bright);}

/* ---------- Marca ---------- */
/* :where() deja la especificidad en cero: si no, esta regla le ganaría
   al display:none que oculta la versión del logotipo que no toca. */
:where(.brand) picture{display:contents;}
.brand{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;color:inherit;}
.brand-lockup{width:auto;height:42px;flex:none;object-fit:contain;}
.brand-lockup-dark{display:none;}
.is-scrolled .brand-lockup-light{display:none;}
.is-scrolled .brand-lockup-dark{display:block;}
@media (max-width:560px){.brand-lockup{height:32px;}}
.brand-text{display:flex;flex-direction:column;line-height:1.05;}
.brand-text strong{font-family:var(--serif);font-size:1.24rem;letter-spacing:-.01em;}
.brand-text span{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;opacity:.72;}

/* ---------- Encabezado ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:transparent;
  backdrop-filter:none;
  color:#fff;
  border-bottom:1px solid var(--line-dark);
  transition:background .3s ease,box-shadow .3s ease;
}
.site-header{border-bottom-color:transparent;}
.site-header.is-scrolled{background:rgba(251,247,241,.96);backdrop-filter:blur(12px);color:var(--text);border-bottom-color:var(--line);box-shadow:0 4px 22px rgba(74,54,34,.10);}
.is-scrolled .nav a{color:var(--text-soft);}
.is-scrolled .nav a:hover{color:var(--text);background:rgba(42,36,30,.07);}
.is-scrolled .nav a.nav-cta,.is-scrolled .nav a.nav-cta:hover{color:#fff;}
.is-scrolled .nav-toggle{border-color:var(--line);color:var(--text);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:76px;}
.nav ul{display:flex;align-items:center;gap:.35rem;}
.nav a{
  display:block;padding:.55rem .85rem;border-radius:8px;
  text-decoration:none;font-size:1rem;font-weight:500;color:var(--text-on-dark);
  transition:color .2s ease,background .2s ease;
}
.nav a:hover{color:#fff;background:rgba(255,255,255,.08);}
.nav a.nav-cta{
  background:var(--brand);color:#fff;font-weight:600;
  padding-inline:1.15rem;margin-left:.5rem;
}
.nav a.nav-cta:hover{background:var(--brand-hot);color:#fff;}

.nav-toggle{display:none;background:none;border:1px solid var(--line-dark);border-radius:10px;padding:.55rem .6rem;cursor:pointer;color:#fff;}
.nav-toggle-bars{display:block;width:22px;}
.nav-toggle-bars i{display:block;height:2px;background:currentColor;border-radius:2px;margin:4px 0;transition:transform .25s ease,opacity .2s ease;}
.nav-toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] i:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ---------- Hero: primera vista a pantalla completa ---------- */
.hero{
  position:relative;color:#FDF8F1;background:transparent;
  min-height:100svh;display:grid;align-items:center;
  padding:clamp(7rem,14vh,10rem) 0 6rem;
}
/* Fija a la ventana: la foto se queda quieta y el contenido pasa por encima.
   Se usa position:fixed en lugar de background-attachment:fixed porque este
   último no funciona en Safari de iOS. */
.hero-bg{
  position:fixed;inset:0;z-index:-1;
  background-color:var(--ink);   /* respaldo si la foto no carga */
  /* Archivo del propio proyecto: antes apuntaba a una URL del bucket y se
     rompió al vaciarlo. image-set sirve WebP a quien lo entienda, y la
     variante de 1200 px a las pantallas pequeñas. */
  background-image:image-set(
    url("../img/hero-fuji.webp") type("image/webp"),
    url("../img/hero-fuji.jpg") type("image/jpeg"));
  background-position:center 40%;background-size:cover;background-repeat:no-repeat;
  filter:saturate(1.6) contrast(1.08) brightness(1.04);
}
@media (max-width:900px){
  .hero-bg{
    background-image:image-set(
      url("../img/hero-fuji-1200.webp") type("image/webp"),
      url("../img/hero-fuji-1200.jpg") type("image/jpeg"));
  }
}
/* Resplandor neón: magenta, cian y violeta fundidos sobre la foto */
.hero-bg::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(78% 58% at 14% 10%,rgba(255,38,140,.46),transparent 64%),
    radial-gradient(58% 46% at 88% 18%,rgba(0,232,255,.26),transparent 62%),
    radial-gradient(95% 62% at 50% 106%,rgba(168,58,255,.42),transparent 68%),
    linear-gradient(200deg,rgba(190,50,220,.20) 0%,transparent 45%);
  mix-blend-mode:screen;
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(52% 38% at 50% 54%,rgba(8,3,20,.58),transparent 72%),
    linear-gradient(180deg,rgba(10,5,26,.80) 0%,rgba(16,7,34,.30) 24%,rgba(14,6,32,.24) 52%,rgba(8,3,22,.84) 100%),
    radial-gradient(120% 78% at 50% 46%,transparent 30%,rgba(8,3,22,.50) 100%);
}
.hero-inner{text-align:center;max-width:900px;margin-inline:auto;}
.hero-logo{
  width:auto;height:clamp(84px,11vw,132px);margin:0 auto 1.6rem;display:block;
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.45));
}
.hero h1{
  margin-bottom:.45em;
  text-shadow:0 2px 8px rgba(6,2,18,.55),0 6px 34px rgba(6,2,18,.45);
}
.hero-eyebrow{
  font-family:var(--display);font-size:clamp(.78rem,1.4vw,.97rem);font-weight:400;
  letter-spacing:.26em;text-transform:uppercase;color:var(--sand);
  margin:0 0 1.1rem;text-shadow:0 2px 10px rgba(6,2,18,.6);
}
.hero h1{
  font-size:clamp(1.95rem,4.6vw,3.15rem);font-weight:400;line-height:1.12;
  max-width:17ch;margin:0 auto .5em;
}
.hero-lead{
  font-size:clamp(1rem,1.6vw,1.18rem);line-height:1.55;color:#F3E9DC;
  max-width:50ch;margin:0 auto 2.1rem;text-shadow:0 2px 10px rgba(6,2,18,.55);
}
.hero-actions{display:flex;justify-content:center;margin:0 0 2.6rem;}



.hero-scroll{
  position:absolute;left:50%;bottom:2.1rem;translate:-50% 0;
  width:26px;height:42px;border:2px solid rgba(255,255,255,.5);border-radius:14px;
  display:grid;justify-items:center;padding-top:7px;
  transition:border-color .25s ease;
}
.hero-scroll:hover{border-color:#fff;}
.hero-scroll span{
  width:3px;height:8px;border-radius:2px;background:#fff;
  animation:scrollHint 1.8s ease-in-out infinite;
}
@keyframes scrollHint{0%,100%{transform:translateY(0);opacity:1;}55%{transform:translateY(12px);opacity:.2;}}

.eyebrow{
  display:flex;align-items:center;gap:.65rem;
  font-family:var(--display);font-size:.82rem;font-weight:400;letter-spacing:.19em;
  text-transform:uppercase;color:var(--brand-bright);margin:0 0 1.1rem;
}
.eyebrow::before{content:"";flex:none;width:1.7rem;height:2px;background:currentColor;opacity:.85;}
.eyebrow-dark{color:var(--brand-deep);}

.btn{
  display:inline-block;padding:.92rem 1.7rem;border-radius:999px;
  font-family:var(--display);font-weight:400;font-size:1.08rem;text-decoration:none;cursor:pointer;
  transition:transform .18s ease,box-shadow .22s ease,background .22s ease,color .22s ease;
}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 10px 26px rgba(208,8,8,.30);}
.btn-primary:hover{background:var(--brand-hot);transform:translateY(-2px);}
.btn-ghost{border:1px solid rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.06);}
.btn-ghost:hover{background:rgba(255,255,255,.16);transform:translateY(-2px);}
.section .btn-primary{box-shadow:0 10px 26px rgba(74,54,34,.16);}

/* ---------- Franja de cifras bajo la primera vista ---------- */
.stats-strip{background:var(--paper);color:var(--text);padding:clamp(2.6rem,5vw,3.6rem) 0;border-bottom:1px solid var(--line);}
.hero-stats{display:grid;gap:1.8rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-block:0;}
.hero-stats dt{font-family:var(--display);font-size:1.7rem;color:var(--text);margin-bottom:.2rem;}
.hero-stats dd{margin:0;font-size:.99rem;color:var(--text-soft);line-height:1.55;}

/* Con movimiento reducido, la foto se desplaza con la página como cualquier
   otro elemento: el efecto de fondo fijo puede molestar a quien lo activa. */
@media (prefers-reduced-motion:reduce){
  .hero-bg{position:absolute;top:0;left:0;right:0;bottom:auto;height:100svh;}
}

/* ---------- Secciones ---------- */
.stats-strip,.section,.site-footer{position:relative;z-index:1;}
/* Fondo explícito: con la foto fija detrás, una sección transparente
   dejaría verla en lugar del crema. */
.section{background:var(--paper);padding:clamp(4rem,8vw,6.5rem) 0;}
.section-soft{background:var(--paper-2);}
.section-dark{background:var(--ink);color:#fff;}
.section-dark p{color:var(--text-on-dark);}
.section-head{max-width:70ch;margin-bottom:clamp(2.2rem,4vw,3.2rem);}
.section-lead{font-size:1.1rem;color:var(--text-soft);max-width:62ch;}
.section-dark .section-lead{color:var(--text-on-dark);}

/* ---------- Carrusel de citas de la primera vista ---------- */
.quote-carousel{max-width:660px;margin-inline:auto;padding-top:1.9rem;border-top:1px solid rgba(255,255,255,.18);}
.quote-viewport{display:grid;text-align:center;min-height:1px;}
.quote{
  grid-area:1 / 1;margin:0;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .6s ease,transform .6s ease,visibility .6s;
}
.quote.is-active{opacity:1;visibility:visible;transform:none;}
.quote blockquote{
  margin:0 auto .9rem;max-width:30ch;
  font-size:clamp(1.05rem,2.1vw,1.5rem);font-weight:300;font-style:italic;
  line-height:1.35;color:#fff;
  text-shadow:0 2px 10px rgba(6,2,18,.55),0 6px 34px rgba(6,2,18,.45);
}
.quote blockquote::before{content:"«";margin-right:.12em;}
.quote blockquote::after{content:"»";margin-left:.12em;}
.quote figcaption{
  font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sand);text-shadow:0 2px 10px rgba(6,2,18,.6);
}
.quote-controls{display:flex;align-items:center;justify-content:center;gap:1.1rem;margin-top:1.5rem;}
.quote-nav{
  display:grid;place-items:center;width:2.7rem;height:2.7rem;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.45);border-radius:50%;
  color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.quote-nav span[aria-hidden]{transform:translateY(-2px);}
.quote-nav:hover{background:rgba(255,255,255,.22);border-color:#fff;transform:translateY(-2px);}
.quote-dots{display:flex;justify-content:center;gap:.55rem;}
.quote-dot{
  width:.55rem;height:.55rem;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.4);transition:background .2s ease,transform .2s ease;
}
.quote-dot:hover{background:rgba(255,255,255,.7);}
.quote-dot[aria-current="true"]{background:var(--sand);transform:scale(1.3);}

/* ---------- El valor está en los procesos ---------- */
.valor-grid{display:grid;gap:2.5rem;grid-template-columns:1.15fr .85fr;align-items:start;}
.valor-lead{
  font-family:var(--sans);font-weight:600;font-size:clamp(1.16rem,2vw,1.42rem);
  line-height:1.5;color:var(--text);margin-bottom:1.2em;
}
.valor-copy p{color:var(--text-soft);}
.valor-flow{
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:1.9rem 1.7rem;
}
.valor-flow h3{font-size:1.12rem;margin-bottom:1.3em;}
.flow{display:grid;gap:0;counter-reset:flow;}
.flow li{position:relative;padding:0 0 1.5rem 2.6rem;counter-increment:flow;}
.flow li:last-child{padding-bottom:0;}
.flow li::before{
  content:counter(flow);position:absolute;left:0;top:-.1rem;
  display:grid;place-items:center;width:1.75rem;height:1.75rem;
  border-radius:50%;background:var(--ink);color:var(--brand-bright);
  font-family:var(--serif);font-size:.85rem;
}
.flow li:not(:last-child)::after{
  content:"";position:absolute;left:.85rem;top:1.9rem;bottom:.35rem;
  width:1px;background:linear-gradient(var(--brand),rgba(208,8,8,.22));
}
.flow span{display:block;font-weight:600;font-size:.99rem;}
.flow small{display:block;font-size:.94rem;color:var(--text-soft);line-height:1.45;}
.flow-note{
  margin:1.6rem 0 0;padding-top:1.2rem;border-top:1px solid var(--line);
  font-size:.95rem;font-style:italic;color:var(--text-soft);
}

/* ---------- Servicios ---------- */
.section-head-wide{max-width:none;}
.promise{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem 1.4rem;
  margin-top:1.4rem;
}
.promise li{
  position:relative;font-family:var(--display);font-size:.92rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
}
.promise li:not(:last-child)::after{
  content:"";position:absolute;right:-.85rem;top:50%;
  width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--brand);
}

.services{display:grid;gap:1.4rem;grid-template-columns:repeat(3,minmax(0,1fr));}
.service{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:2rem 1.75rem;
  box-shadow:var(--shadow-sm);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.service:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:rgba(208,8,8,.35);}
.service-icon{
  display:grid;place-items:center;width:3rem;height:3rem;margin-bottom:1.25rem;
  border-radius:13px;background:rgba(208,8,8,.10);
}
.service-icon svg{
  width:24px;height:24px;fill:none;stroke:var(--brand);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.service h3{font-size:1.16rem;line-height:1.25;margin-bottom:.5em;}
.service p{margin:0;font-size:1.01rem;color:var(--text-soft);}

/* ---------- Pilares (bloque alterno de servicios) ---------- */
.pillars{display:grid;gap:1.6rem;grid-template-columns:repeat(2,minmax(0,1fr));}
.pillars > :last-child:nth-child(odd){grid-column:1 / -1;}
@media (min-width:901px){
  .pillars > :last-child:nth-child(odd){display:grid;grid-template-columns:1.05fr .95fr;gap:2.2rem;align-items:start;}
  .pillars > :last-child:nth-child(odd) .pillar-head{grid-column:1;}
  .pillars > :last-child:nth-child(odd) .checklist{margin-top:0;padding-top:.2rem;border-top:0;border-left:1px solid var(--line);padding-left:1.8rem;}
}
.pillar{
  position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:2.2rem 1.9rem;
  box-shadow:var(--shadow-sm);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.pillar:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:rgba(208,8,8,.35);}
.pillar-num{
  display:inline-block;font-family:var(--display);font-size:1rem;font-weight:400;
  color:var(--brand-deep);background:rgba(208,8,8,.10);
  border-radius:999px;padding:.16rem .72rem;margin-bottom:1rem;
}
.pillar h3{font-size:1.42rem;margin-bottom:.35em;}
.pillar > p,.pillar-head p{color:var(--text-soft);font-size:.98rem;max-width:56ch;}
.pillar-head h3{margin-bottom:.35em;}
.checklist{display:grid;gap:.6rem;margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--line);}
.checklist li{position:relative;padding-left:1.75rem;font-size:1rem;line-height:1.5;color:var(--text);}
.checklist li::before{
  content:"";position:absolute;left:0;top:.52em;width:.72rem;height:.4rem;
  border-left:2.2px solid var(--brand-deep);border-bottom:2.2px solid var(--brand-deep);
  transform:rotate(-45deg);
}

/* ---------- Cierre de sección ---------- */
.section-foot{
  margin:2.4rem 0 0;padding-top:1.5rem;border-top:1px solid var(--line);
  font-size:1rem;color:var(--text-soft);max-width:78ch;
}
.section-foot a{color:var(--brand-deep);font-weight:600;text-decoration:none;}
.section-foot a:hover{text-decoration:underline;text-underline-offset:3px;}
.section-dark .section-foot{border-top-color:var(--line-dark);color:var(--text-on-dark);}
.section-dark .section-foot strong{color:#fff;}
.hero-actions-left{justify-content:flex-start;flex-wrap:wrap;gap:.85rem;margin-bottom:0;}

/* ---------- Banda de producto (Kaoru X1) ---------- */
.section-accent{background:var(--paper-3);position:relative;overflow:hidden;}
.section-accent > .wrap{position:relative;z-index:1;}
.section-accent::after{
  content:"";position:absolute;right:-7rem;top:50%;translate:0 -50%;
  width:27rem;height:27rem;border:3.4rem solid rgba(208,8,8,.07);
  border-radius:50%;pointer-events:none;
}
@media (max-width:900px){.section-accent::after{right:-13rem;opacity:.6;}}

.product-grid{display:grid;gap:1.3rem;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:2.6rem;}
.product-card{background:rgba(255,255,255,.6);border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem 1.5rem;}
.product-card h3{font-size:1.1rem;margin-bottom:.4em;}
.product-card p{margin:0;font-size:.98rem;color:var(--text-soft);}
.product-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem;}
.product-foot p{margin:0;font-size:.98rem;color:var(--text-soft);max-width:46ch;}

/* ---------- Fotografía de apoyo ---------- */
.figura{
  margin:0 0 clamp(2.2rem,4vw,3.2rem);
  position:relative;
}
.figura picture{display:block;}
.figura img{
  /* height:auto es imprescindible: sin él, el atributo height del HTML fija la
     altura y aspect-ratio no llega a aplicarse. */
  display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;
  border-radius:var(--radius-lg);
  /* Un grado cálido leve para que las fotos no peleen con la paleta crema */
  filter:saturate(.94) contrast(1.02);
}
.figura figcaption{
  display:flex;align-items:center;gap:.65rem;
  margin-top:.9rem;
  font-family:var(--display);font-size:.84rem;letter-spacing:.06em;
  color:var(--text-soft);
}
.figura figcaption::before{
  content:"";flex:none;width:1.7rem;height:2px;background:var(--brand);opacity:.85;
}
.section-dark .figura figcaption,.page-hero .figura figcaption{color:var(--text-on-dark);}
.figura-alta img{aspect-ratio:4/3;}
@media (max-width:760px){
  .figura picture{display:block;}
.figura img{aspect-ratio:16/10;}
  .figura figcaption{font-size:.8rem;}
}

/* ---------- Logotipo de Kaoru X1 ---------- */
.logo-x1{
  display:block;width:auto;height:clamp(2.1rem,3.4vw,3rem);
  margin:0 0 1.3rem;
}
.page-hero .logo-x1{height:clamp(1.55rem,2.5vw,2.15rem);margin-bottom:1.9rem;}
.section-accent .logo-x1{height:clamp(1.5rem,2.3vw,2rem);margin:.1rem 0 1.1rem;}

/* ---------- Etiquetas de estado ---------- */
.state{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:.28rem .75rem;border-radius:999px;border:1px solid;
  vertical-align:middle;margin-left:.6rem;
}
.state::before{content:"";width:.42rem;height:.42rem;border-radius:50%;background:currentColor;}
.state-live{color:var(--ink);border-color:var(--line);background:#fff;}
.state-dev{color:var(--brand-deep);border-color:rgba(208,8,8,.30);background:rgba(208,8,8,.07);}
.state-legend{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;font-size:.92rem;color:var(--text-soft);margin:1.2rem 0 0;}
.state-legend .state{margin-left:0;}
.pillar-head h3 .state{font-size:.62rem;}

/* ---------- Sub-navegación de página de producto ---------- */
.subnav{
  position:sticky;top:76px;z-index:90;
  background:rgba(251,247,241,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.subnav ul{display:flex;gap:.2rem;overflow-x:auto;scrollbar-width:none;padding:.5rem 0;}
.subnav ul::-webkit-scrollbar{display:none;}
.subnav a{
  white-space:nowrap;padding:.45rem .8rem;border-radius:8px;
  font-size:.92rem;color:var(--text-soft);text-decoration:none;
  transition:background .2s ease,color .2s ease;
}
.subnav a:hover{background:rgba(42,36,30,.06);color:var(--text);}
.subnav a[aria-current="true"]{color:var(--brand-deep);font-weight:600;}
@media (max-width:760px){.subnav{top:68px;}}

/* ---------- Enlace activo del menú ---------- */
.nav a[aria-current="true"]{color:var(--text);}
.nav a[aria-current="true"]::after{content:"";display:block;height:2px;margin-top:.28rem;background:var(--brand);border-radius:2px;}
.site-header:not(.is-scrolled) .nav a[aria-current="true"]{color:#fff;}
.nav a.nav-cta[aria-current="true"]::after{display:none;}

/* ---------- Página de producto: cabecera propia ---------- */
.page-hero{
  background:var(--ink);color:#fff;
  padding:calc(76px + clamp(3.4rem,7vw,5.4rem)) 0 clamp(3rem,6vw,4.6rem);
  position:relative;overflow:hidden;
}
/* El arco del enso, a la izquierda */
.page-hero::after{
  content:"";position:absolute;left:-11rem;bottom:-13rem;
  width:32rem;height:32rem;border:3.6rem solid rgba(208,8,8,.15);
  border-radius:50%;pointer-events:none;
}

/* La X, a la derecha: mide más que su sitio y el hero la recorta por el borde */
.hero-x{
  position:absolute;top:50%;right:-9%;translate:0 -50%;
  width:min(58%,660px);aspect-ratio:1;
  pointer-events:none;
  /* El <svg> recorta su propio contenido por defecto y eso cortaba la X en
     seco por la izquierda. Con overflow visible el único recorte lo hace el
     hero, que es el que debe morder los brazos por el borde derecho. */
  overflow:visible;
}
.hero-x path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;}
.hero-x-a{stroke:var(--brand-bright);stroke-width:1.25;opacity:.85;}
.hero-x-b{stroke:var(--sand);stroke-width:1.15;opacity:.6;}
.hero-x-halo{stroke-width:5;opacity:.1;}
@media (max-width:900px){
  .hero-x{right:-22%;width:78%;}
  .hero-x-a{opacity:.4;}
  .hero-x-b{opacity:.24;}
  .hero-x-halo{opacity:.06;}
  .page-hero::after{left:-18rem;opacity:.6;}
}
.page-hero > .wrap{position:relative;z-index:1;}
.page-hero .eyebrow{color:var(--brand-bright);}
.page-hero h1{font-size:clamp(2rem,4.6vw,3.3rem);max-width:20ch;}
.page-hero .section-lead{color:var(--text-on-dark);max-width:62ch;}
.page-hero .btn-ghost{border-color:rgba(255,255,255,.5);}

/* ---------- Pasos del enfoque ---------- */
.steps{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.steps li{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.9rem 1.6rem;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease;
}
.steps li:hover{box-shadow:var(--shadow-md);border-color:rgba(208,8,8,.28);transform:translateY(-4px);}
.step-num{
  display:grid;place-items:center;width:2.4rem;height:2.4rem;margin-bottom:1.1rem;
  border-radius:50%;border:1.5px solid var(--brand);color:var(--brand);
  font-family:var(--display);font-size:1.14rem;
}
.steps h3{color:var(--text);font-size:1.16rem;}
.steps p{font-size:1rem;margin:0;color:var(--text-soft);}

/* ---------- Nosotros ---------- */
.split{display:grid;gap:3rem;grid-template-columns:1.05fr .95fr;align-items:start;}
.split-text p{color:var(--text-soft);}
.split-text .btn{margin-top:.6rem;}
.values{display:grid;gap:1rem;}
.values li{
  background:var(--paper-2);border-left:3px solid var(--brand);
  border-radius:0 var(--radius) var(--radius) 0;padding:1.3rem 1.5rem;
}
.values h3{font-size:1.06rem;margin-bottom:.3em;}
.values p{margin:0;font-size:1rem;color:var(--text-soft);}

/* ---------- Industrias ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.7rem;}
.chips li{
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:.6rem 1.25rem;font-size:.99rem;font-weight:500;box-shadow:var(--shadow-sm);
}

/* ---------- Contacto ---------- */
.contact-grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.contact-card{
  display:block;text-decoration:none;color:#fff;
  background:rgba(255,255,255,.05);border:1px solid var(--line-dark);
  border-radius:var(--radius);padding:1.8rem 1.5rem;
  transition:background .25s ease,transform .25s ease,border-color .25s ease;
}
.contact-card:hover{background:rgba(255,255,255,.1);border-color:rgba(255,74,61,.55);transform:translateY(-4px);}
.contact-card-static:hover{transform:none;background:rgba(255,255,255,.05);border-color:var(--line-dark);}
.contact-card svg{width:26px;height:26px;fill:none;stroke:var(--brand-bright);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:.9rem;}
.contact-card h3{font-size:1.08rem;color:#fff;margin-bottom:.25em;}
.contact-card p{margin:0 0 .8rem;font-size:1.01rem;color:var(--text-on-dark);}
/* La tarjeta de teléfono no es un enlace: lleva dos números dentro. */
.contact-card p a{color:inherit;text-decoration:none;}
.contact-card p a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.contact-action{font-size:.9rem;font-weight:600;color:var(--brand-bright);letter-spacing:.02em;}

/* El correo es el canal que queremos que se use: se destaca en rojo de marca y
   las otras tarjetas quedan como alternativas. Va después de las reglas base
   porque comparte especificidad con ellas y decide el orden. */
.contact-card-primary{background:var(--brand);border-color:var(--brand);}
.contact-card-primary:hover{background:var(--brand-hot);border-color:var(--brand-hot);}
.contact-card-primary svg{stroke:#fff;}
.contact-card-primary h3,.contact-card-primary p,.contact-card-primary .contact-action{color:#fff;}
.contact-card-primary .contact-action{text-decoration:underline;text-underline-offset:3px;}

/* ---------- Pie de página ---------- */
.site-footer{background:var(--ink);color:var(--text-on-dark);padding-top:3.5rem;}
.footer-inner{display:grid;gap:2.5rem;grid-template-columns:1.6fr 1fr 1fr;padding-bottom:2.5rem;}
.footer-brand p{margin-top:1.1rem;font-size:.98rem;max-width:38ch;opacity:.8;}
.site-footer h4{font-family:var(--sans);font-size:.76rem;letter-spacing:.19em;text-transform:uppercase;color:var(--brand-bright);margin:0 0 1rem;}
.site-footer ul{display:grid;gap:.55rem;font-size:.98rem;}
.site-footer a{text-decoration:none;opacity:.85;transition:opacity .2s ease,color .2s ease;}
.site-footer a:hover{opacity:1;color:var(--brand-bright);}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;
  border-top:1px solid var(--line-dark);padding-block:1.3rem;font-size:.9rem;opacity:.72;
}
.footer-bottom p{margin:0;}

/* ---------- Animación de entrada ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;}
.reveal.is-visible{opacity:1;transform:none;}

/* ---------- Responsivo ---------- */
@media (max-width:1000px){
  .services{grid-template-columns:repeat(2,minmax(0,1fr));}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:900px){
  .split,.valor-grid{grid-template-columns:1fr;gap:2.2rem;}
  .pillars{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr 1fr;}
  .footer-brand{grid-column:1 / -1;}
}
@media (max-width:760px){
  body{font-size:16px;}
  .nav-toggle{display:block;}
  .nav{
    position:absolute;left:0;right:0;top:100%;
    background:var(--paper);border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .nav.is-open{max-height:26rem;}
  .nav ul{flex-direction:column;align-items:stretch;gap:0;padding:.6rem 1.25rem 1.4rem;}
  .nav a{padding:.85rem .4rem;border-radius:6px;color:var(--text);}
  .nav a:hover{background:rgba(42,36,30,.07);color:var(--text);}
  .nav a.nav-cta,.nav a.nav-cta:hover{color:#fff;}
  .nav a.nav-cta{margin:.7rem 0 0;text-align:center;}
  .hero-stats{gap:1.2rem;}
  .quote-nav{width:2.3rem;height:2.3rem;font-size:1.25rem;}
  .services,.product-grid{grid-template-columns:1fr;}
  .product-foot{flex-direction:column;align-items:flex-start;gap:1rem;}
  .hero-actions .btn{width:100%;text-align:center;}
}
@media (max-width:520px){
  .footer-inner{grid-template-columns:1fr;}
  .hero-actions .btn{width:100%;text-align:center;}
}

/* ---------- Preferencias de movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
  .reveal{opacity:1;transform:none;}
}

/* ---------- Impresión ---------- */
@media print{
  .site-header,.nav-toggle,.hero-actions,.skip-link,.quote-nav,.quote-dots,.subnav{display:none !important;}
  body{color:#000;background:#fff;}
  .hero,.section-dark,.site-footer,.stats-strip,.section-accent,.page-hero{background:#fff !important;color:#000 !important;}
  .section-accent::after,.page-hero::after{display:none !important;}
  .pillar,.service,.steps li,.product-card{break-inside:avoid;border-color:#999 !important;box-shadow:none !important;}
  .state{border-color:#666 !important;color:#000 !important;background:#fff !important;}
  .quote-viewport{display:block;}
  .quote{opacity:1 !important;visibility:visible !important;transform:none !important;margin-bottom:1.2rem;}
  .quote blockquote{color:#000 !important;}
  .hero-bg{display:none;}
  .section-dark p,.hero-lead,.steps h3,.contact-card h3,.contact-card p{color:#000 !important;}
}