/* ===========================================================================
   Caro Comunicando — capa de mejora (aditiva, fiel a la marca)
   Solo pulido: accesibilidad, perf-friendly micro-interacciones y profundidad.
   No altera tipografía, paleta ni el lenguaje editorial sin border-radius.
   =========================================================================== */

/* --- Anclas internas: compensar el nav sticky para que no tape el título --- */
html{ scroll-behavior:smooth; scroll-padding-top:128px; }
@media (max-width:720px){ html{ scroll-padding-top:100px; } }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

/* --- Foco visible (accesibilidad: siempre activo, sin motion) --- */
a:focus-visible,
button:focus-visible,
.btn-cta:focus-visible,
.btn-primary:focus-visible,
.btn-teal:focus-visible,
.btn-outline-light:focus-visible,
.servicio-link:focus-visible,
.text-link:focus-visible{
  outline:2px solid var(--gold, #c89a4a);
  outline-offset:3px;
}
/* Sobre fondos teal oscuros, anillo dorado claro para contraste */
.brilla a:focus-visible,
.testi a:focus-visible,
.ctafinal a:focus-visible,
footer a:focus-visible,
.btn-outline-light:focus-visible{
  outline-color:var(--gold-soft, #d9b87a);
}

/* --- Skip link (salta al contenido, oculto hasta foco por teclado) --- */
.skip-link{
  position:absolute;left:16px;top:-60px;z-index:100;
  background:var(--teal-deep, #143432);color:var(--gold-soft, #d9b87a);
  font-family:'Inter',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;
  padding:14px 22px;border:1px solid var(--gold, #c89a4a);
  transition:top .2s ease;
}
.skip-link:focus{ top:16px; }

/* --- Barra fina de progreso de lectura (oro, editorial, no intrusiva) --- */
.read-progress{
  position:fixed;left:0;top:0;height:2px;width:0%;
  background:linear-gradient(to right, var(--gold,#c89a4a), var(--gold-soft,#d9b87a));
  z-index:60;pointer-events:none;
  transition:width .12s linear;
}
@media (prefers-reduced-motion: reduce){ .read-progress{ display:none; } }

/* --- Nav: estado "scrolled" con profundidad sutil --- */
.nav{ transition:box-shadow .35s ease, background-color .35s ease; }
.nav.scrolled{
  box-shadow:0 1px 0 var(--hairline, rgba(42,38,35,.12)),
             0 14px 30px -22px rgba(20,52,50,.55);
  background:rgba(245,241,234,0.97);
}

/* ===========================================================================
   Micro-interacciones — todas detrás de prefers-reduced-motion: no-preference
   (transform/opacity/box-shadow: no provocan reflow, sin layout shift)
   =========================================================================== */
@media (prefers-reduced-motion: no-preference){

  /* Botones: leve elevación + sombra cálida al hover (sin desplazar layout) */
  .btn-primary,.btn-cta,.btn-teal,.btn-outline-light{
    transition:background .2s ease, color .2s ease,
               transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease;
    will-change:transform;
  }
  .btn-primary:hover,.btn-cta:hover,.btn-teal:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 26px -14px rgba(200,154,74,.55);
  }
  .btn-outline-light:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 26px -16px rgba(245,241,234,.4);
  }

  /* Tarjetas: elevación editorial discreta */
  .creden-card,.servicio,.testi-card{
    transition:background .25s ease,
               transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
  }
  .creden-card:hover,.testi-card:hover{
    transform:translateY(-4px);
    box-shadow:0 22px 40px -26px rgba(20,52,50,.4);
  }
  .servicio:hover{
    transform:translateY(-4px);
    box-shadow:0 22px 40px -26px rgba(20,52,50,.32);
  }

  /* Foto del hero: Ken Burns lentísimo, editorial */
  .hero-photo.photo-real img{
    animation:cc-kenburns 20s ease-in-out infinite alternate;
    transform-origin:center 30%;
  }
  @keyframes cc-kenburns{
    from{ transform:scale(1); }
    to{ transform:scale(1.055); }
  }

  /* Flecha de los links: ya animan; reforzamos el text-link del hero */
  .text-link .arr{ transition:transform .25s cubic-bezier(.2,.7,.2,1); }
}

/* --- Círculos BRILLA: realce dorado al pasar (solo color, sin motion) --- */
.brilla-circle{ transition:background-color .3s ease, color .3s ease, border-color .3s ease; }
.brilla-step:hover .brilla-circle,
.brilla-step:focus-within .brilla-circle{
  background:rgba(200,154,74,.14);
  color:var(--gold-soft, #d9b87a);
  border-color:var(--gold-soft, #d9b87a);
}

/* --- Imágenes: evitar salto de layout mientras cargan --- */
.photo-real img{ background:var(--teal-deep, #143432); }

/* --- Enlace legal del footer (Aviso de Privacidad) --- */
.foot-bottom .foot-legal{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-soft, #d9b87a);font-weight:500;
  border-bottom:1px solid rgba(217,184,122,.35);padding-bottom:3px;
  transition:color .2s ease, border-color .2s ease;
}
.foot-bottom .foot-legal:hover{
  color:var(--gold, #c89a4a);border-color:var(--gold, #c89a4a);
}

/* ===========================================================================
   Menú móvil (hamburguesa + overlay) — fiel a la marca, generado por JS
   =========================================================================== */
.cc-burger{
  display:none;
  position:relative;z-index:2;
  width:44px;height:44px;
  flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:none;border:none;cursor:pointer;padding:0;margin-left:8px;
}
.cc-burger span{
  display:block;width:26px;height:2px;background:var(--teal, #1f4f4d);
  transition:transform .28s cubic-bezier(.2,.7,.2,1), opacity .2s ease;
}
.cc-burger.is-open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.cc-burger.is-open span:nth-child(2){ opacity:0; }
.cc-burger.is-open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
.cc-burger:focus-visible{ outline:2px solid var(--gold,#c89a4a);outline-offset:3px; }

/* El hamburguesa aparece cuando los .nav-links se ocultan (≤960px) */
@media (max-width:960px){ .cc-burger{ display:flex; } }

html.cc-menu-lock{ overflow:hidden; }
/* Con el menú abierto, el header (logo + X) queda por encima del overlay */
html.cc-menu-lock .nav{ z-index:80; }

.cc-mobile-menu{
  position:fixed;inset:0;z-index:70;
  background:var(--teal-deep, #143432);
  display:flex;align-items:center;justify-content:center;
  padding:120px 32px 48px;
  opacity:0;visibility:hidden;
  transition:opacity .32s ease, visibility .32s ease;
}
.cc-mobile-menu.is-open{ opacity:1;visibility:visible; }
.cc-mobile-menu::before{
  content:"";position:absolute;inset:20px;
  border:1px solid rgba(200,154,74,.18);pointer-events:none;
}

.cc-mobile-inner{
  display:flex;flex-direction:column;align-items:center;
  gap:28px;width:100%;max-width:420px;
}
.cc-mobile-inner a{
  font-family:'Cormorant Garamond',serif;font-weight:500;
  font-size:clamp(28px,8vw,40px);line-height:1;
  color:var(--offwhite, #f5f1ea);letter-spacing:-.01em;
  transition:color .2s ease;
}
.cc-mobile-inner a:hover{ color:var(--gold-soft, #d9b87a); }
.cc-mobile-inner a:focus-visible{ outline:2px solid var(--gold,#c89a4a);outline-offset:6px; }
.cc-mobile-inner .cc-mobile-cta{
  margin-top:20px;
  font-family:'Inter',sans-serif;font-weight:600;
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal-deep, #143432);background:var(--gold, #c89a4a);
  padding:18px 32px;line-height:1;
  transition:background .2s ease;
}
.cc-mobile-inner .cc-mobile-cta:hover{
  background:var(--gold-soft, #d9b87a);color:var(--teal-deep,#143432);
}

@media (prefers-reduced-motion: reduce){
  .cc-burger span,
  .cc-mobile-menu{ transition:none; }
}