/* ==========================================================================
   Capa premium — se carga al final (después de base.css y photo.css).
   Objetivo: una sola voz visual. Un acento cálido (oro suave) + el azul de marca,
   movimiento con propósito, relieve y profundidad. Todo el movimiento se apaga con
   prefers-reduced-motion. Para desactivar esta capa: quitar premium.css y fx.js del HTML.
   ========================================================================== */

:root {
  --gold: #C9B58C;                       /* acento cálido: sólo líneas, numerales sobre oscuro y detalles */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --frame-r: 28px;
  --glow: rgba(156, 195, 234, .42);
}

/* ---------- 1. Pulido general ---------- */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { text-rendering: optimizeLegibility; }
::selection { background: var(--navy); color: #fff; }
.is-dark ::selection, .site-footer ::selection { background: var(--sky); color: var(--ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.is-dark :focus-visible, .site-footer :focus-visible, .school :focus-visible, .band :focus-visible { outline-color: var(--sky); }

/* Un solo tratamiento de color para todas las fotos (que no se noten de bancos distintos) */
.svc__media img, .sol img, .portrait img, .band__bg img, .school__bg img { filter: saturate(.95) contrast(1.03); }

/* Rayita de los títulos: oro sobre claro y sobre oscuro, mismo gesto en todo el sitio */
.eyebrow::before { background: var(--gold); opacity: 1; height: 1.5px; transform-origin: left center; }
.accent-i { font-variation-settings: "opsz" 72; }

/* ---------- 2. Barra de progreso de lectura ---------- */
.fx-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 140; pointer-events: none; }
.fx-progress::before { content: ""; position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--gold), var(--sky) 55%, var(--blue)); }

/* ---------- 3. Portada: foto enmarcada + sello ---------- */
.phero {
  background:
    radial-gradient(60% 80% at 10% 8%, #fff 0, rgba(255, 255, 255, 0) 62%),
    radial-gradient(46% 58% at 94% 96%, rgba(156, 195, 234, .30) 0, rgba(156, 195, 234, 0) 72%),
    var(--paper);
  isolation: isolate;
}
/* luz que acompaña al cursor (sólo con mouse) */
.phero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: var(--spot, 0); transition: opacity .8s var(--ease-out);
  background: radial-gradient(520px circle at var(--mx, 30%) var(--my, 30%), rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 62%); }

.phero__media { position: absolute; z-index: 1; isolation: isolate; }
.phero__bg { border-radius: var(--frame-r); overflow: hidden; background: #E9E3D8;
  box-shadow: 0 60px 100px -48px rgba(6, 23, 42, .6), 0 22px 40px -24px rgba(6, 23, 42, .38); }
.phero .phero__bg img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; box-shadow: none;
  -webkit-mask-image: none; mask-image: none; scale: 1.05; filter: saturate(.98) contrast(1.02); }
/* marco fino desplazado + halo de luz detrás */
.phero__media::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1.5px solid var(--gold); border-radius: var(--frame-r); translate: 1.1rem 1.1rem; }
.phero__media::after { content: ""; position: absolute; inset: -14% -18% -10% -10%; z-index: -2; background: radial-gradient(closest-side, var(--glow), rgba(156, 195, 234, 0)); pointer-events: none; }

/* sello giratorio con el isotipo */
.phero__seal { position: absolute; z-index: 3; left: -3.4rem; bottom: -2.6rem; width: 8.4rem; aspect-ratio: 1; display: grid; place-items: center; filter: drop-shadow(0 16px 24px rgba(6, 23, 42, .35)); }
.phero__seal svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.seal__bg { fill: var(--navy); }
.seal__hair { fill: none; stroke: var(--gold); stroke-opacity: .55; stroke-width: .8; }
.seal__ring { transform-origin: 100px 100px; }
.seal__ring text { font: 600 12.6px/1 var(--font-body); letter-spacing: .04em; fill: var(--gold); }
.phero__seal img { position: relative; width: 38%; height: 38%; }

@media (min-width: 901px) {
  .phero { --fw: min(46vw, 640px, calc((100svh - var(--header-h) - var(--bar-h) - 3rem) / 1.06)); }
  .phero__media { width: var(--fw); height: calc(var(--fw) * 1.06);
    right: max(var(--gutter), calc((100vw - var(--container)) / 2));
    top: calc((100% - var(--bar-h) + var(--header-h)) / 2); translate: 0 -50%; }
}
@media (max-width: 900px) {
  .phero { --mw: min(100vw - 2 * var(--gutter), 560px); }
  .phero__media { width: var(--mw); aspect-ratio: 1 / 1.02; top: 5.6rem; left: 50%; translate: -50% 0; }
  .phero__bg, .phero__bg img { background: #E9E3D8; }
  .phero .phero__bg img { object-position: 50% 0; }
  .phero__media::before { translate: .7rem .7rem; }
  .phero__seal { left: -.5rem; bottom: -1.7rem; width: 5.6rem; }
  .phero__inner { padding-top: calc(5.6rem + var(--mw) * 1.02 + 3.1rem); }
}

/* coherencia de color del bloque de texto de la portada */
.phero__title { letter-spacing: -.03em; }
.phero__title em { color: var(--blue); padding-right: .08em; }
.phero__sub { color: #2F4157; }
.phero__bar { background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* ---------- 4. Botones: brillo al pasar + sombra con color de marca ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, 0) 68%); translate: -130% 0; }
.btn:hover::before { translate: 130% 0; transition: translate .9s var(--ease-out); }
.phero .btn--light { box-shadow: 0 14px 30px -16px rgba(10, 37, 67, .7); }

/* ---------- 5. Secciones oscuras: profundidad, luz y grano ---------- */
#metodo, #credenciales {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(70% 90% at 0% 0%, #14416F 0, rgba(20, 65, 111, 0) 60%),
    radial-gradient(60% 80% at 100% 100%, #0C2A4B 0, rgba(12, 42, 75, 0) 62%),
    var(--navy);
}
#metodo > .container, #credenciales > .container { position: relative; z-index: 2; }
#metodo::before, #credenciales::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--spot, 0); transition: opacity .7s var(--ease-out);
  background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 30%), rgba(156, 195, 234, .17), rgba(156, 195, 234, 0) 62%); }
#metodo::after, #credenciales::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .07; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.method li::before { color: var(--gold); }
.method { position: relative; border-top-color: transparent; }
.method::before, .pillars::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, var(--gold), var(--sky) 60%, rgba(156, 195, 234, .15)); transform-origin: left center; }
.pillars { position: relative; border-top-color: transparent; }
.pillars::before { background: linear-gradient(90deg, var(--gold), var(--blue) 60%, rgba(10, 92, 160, .1)); }
.cred--main .cred__num, .cred .cred__num { color: var(--gold); }
.pillar .num, .sol__n, .path__n { color: var(--blue-ink); }
.path:nth-child(2) .path__n { color: var(--gold); }
.cred { transition: background .5s var(--ease-out); }
.cred:hover { background: rgba(255, 255, 255, .035); }

/* ---------- 6. Tarjetas: relieve y borde dorado al pasar ---------- */
.sol, .path { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s var(--ease-out); }
.sol:hover, .path:hover { border-color: rgba(201, 181, 140, .9); }
.fx-tilt { position: relative; }
.fx-tilt::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 46%); mix-blend-mode: soft-light; }
.fx-tilt.is-tilting::after { opacity: 1; }

/* ---------- 7. Fotos de servicios: marco más fino y sombra más suave ---------- */
.svc__media::before { background: linear-gradient(145deg, var(--mist), rgba(228, 237, 246, .35)); border: 1px solid rgba(201, 181, 140, .55); }
.svc__media img { box-shadow: 0 40px 70px -36px rgba(6, 23, 42, .5); translate: 0 var(--py, 0px); }
.svc__media::before { translate: 0 calc(var(--py, 0px) * -1.3); }
.band__bg img, .school__bg img { inset: -10% 0; height: 120%; translate: 0 var(--py, 0px); will-change: translate; }

/* ---------- 8. Formulario ---------- */
.form-card { border-top: 3px solid var(--gold); }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 4px rgba(10, 92, 160, .14); border-color: var(--blue); outline: none; }

/* ---------- 9. WhatsApp flotante: pulso discreto ---------- */
.wa-float.is-on::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }

/* ---------- 10. Pie ---------- */
.site-footer { border-top: 1px solid rgba(201, 181, 140, .4); }

/* ==========================================================================
   MOVIMIENTO (sólo si la persona no pidió reducirlo)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* --- entrada de la portada --- */
  .js .phero__bg { animation: fx-unveil 1.5s var(--ease-out) .1s both; }
  .js .phero .phero__bg img { animation: fx-zoom 2.4s var(--ease-out) .1s both; transition: translate .7s var(--ease-out); }
  .js .phero__media::before { animation: fx-frame 1.3s var(--ease-out) .55s both; }
  .js .phero__media::after { animation: fx-fade 1.6s ease-out .3s both, fx-glow 7s ease-in-out 2s infinite alternate; }
  .js .phero__seal { animation: fx-pop 1s var(--ease-out) 1.15s both; transition: translate .8s var(--ease-out); }
  .js .seal__ring { animation: fx-spin 34s linear infinite; }
  .js .phero .eyebrow { animation: fx-rise 1s var(--ease-out) .15s both; }
  .js .phero .eyebrow::before { animation: fx-line 1.1s var(--ease-out) .35s both; }
  .js .phero__sub { animation: fx-rise 1s var(--ease-out) .85s both; }
  .js .phero .hero__cta { animation: fx-rise 1s var(--ease-out) 1s both; }
  .js .phero__bar { animation: fx-fade 1.2s ease-out 1.25s both; }
  .js .phero__title .fx-w > span { animation: fx-word 1.15s var(--ease-out) calc(.3s + var(--i, 0) * .085s) both; }

  /* --- títulos por palabra (al entrar en pantalla) --- */
  .fx-split .fx-w { display: inline-block; vertical-align: top; overflow: hidden; padding: 0 .06em .16em; margin: 0 -.06em -.16em; }
  .fx-split .fx-w > span { display: inline-block; }
  .accent-i .fx-w, em .fx-w { padding-right: .16em; margin-right: -.16em; }
  .fx-split:not(.phero__title) .fx-w > span { transform: translateY(115%); transition: transform .9s var(--ease-out) calc(.05s + var(--i, 0) * .028s); }
  .fx-split.fx-in:not(.phero__title) .fx-w > span { transform: none; }

  /* --- revelado de bloques: sube, se enfoca y aparece --- */
  .js .reveal { transform: translateY(28px);
    transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); transition-delay: var(--d, 0s); }
  .js .reveal.is-in { transform: none; }
  .js .reveal .eyebrow::before { transform: scaleX(0); transition: transform 1.1s var(--ease-out) .35s; }
  .js .reveal.is-in .eyebrow::before { transform: scaleX(1); }

  /* --- fotos de servicios: se descubren de arriba hacia abajo --- */
  .js .svc__media.reveal { filter: none; }
  .js .svc__media.reveal img { clip-path: inset(0 0 100% 0 round var(--radius-lg)); scale: 1.22;
    transition: clip-path 1.5s var(--ease-out) .1s, scale 2s var(--ease-out) .1s; }
  .js .svc__media.reveal.is-in img { clip-path: inset(-80px -80px -80px -80px round var(--radius-lg)); scale: 1; }
  .js .svc__media.reveal .chip { opacity: 0; translate: 0 14px; transition: opacity .9s var(--ease-out) .9s, translate .9s var(--ease-out) .9s; }
  .js .svc__media.reveal.is-in .chip { opacity: 1; translate: 0 0; }
  .js .svc__media.reveal::before { opacity: 0; scale: .94; transition: opacity 1.2s var(--ease-out) .35s, scale 1.4s var(--ease-out) .35s; }
  .js .svc__media.reveal.is-in::before { opacity: 1; scale: 1; }

  /* --- líneas que se dibujan --- */
  .method::before, .pillars::before { transform: scaleX(0); transition: transform 2.2s var(--ease-out) .2s; }
  .method.fx-in::before, .pillars.fx-in::before { transform: scaleX(1); }
  .method li::before { display: inline-block; }

  /* --- tarjetas con inclinación 3D (sólo mouse) --- */
  @media (hover: hover) and (pointer: fine) {
    .fx-tilt.is-tilting { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
      transition: transform .12s linear, box-shadow .5s var(--ease-out), border-color .4s; box-shadow: 0 42px 72px -36px rgba(6, 23, 42, .55); }
    .fx-mag { transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), translate .35s var(--ease-out); }
  }

  /* --- WhatsApp: pulso --- */
  .wa-float.is-on::after { animation: fx-ping 3.2s ease-out 2.5s infinite; }

  @keyframes fx-unveil { from { clip-path: inset(0 0 100% 0 round var(--frame-r)); } to { clip-path: inset(-120px -120px -120px -120px round var(--frame-r)); } }
  @keyframes fx-zoom   { from { scale: 1.3; } to { scale: 1.05; } }
  @keyframes fx-frame  { from { opacity: 0; translate: 0 0; } to { opacity: 1; translate: 1.1rem 1.1rem; } }
  @keyframes fx-fade   { from { opacity: 0; } to { opacity: 1; } }
  @keyframes fx-glow   { from { opacity: .75; scale: .98; } to { opacity: 1; scale: 1.05; } }
  @keyframes fx-pop    { from { opacity: 0; scale: .55; rotate: -40deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
  @keyframes fx-spin   { to { transform: rotate(360deg); } }
  @keyframes fx-rise   { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
  @keyframes fx-line   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes fx-word   { from { transform: translateY(115%) rotate(2.5deg); } to { transform: none; } }
  @keyframes fx-ping   { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); } 70%, 100% { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); } }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  @keyframes fx-frame { from { opacity: 0; translate: 0 0; } to { opacity: 1; translate: .7rem .7rem; } }
}