/* =========================================================
   Berenice E. Acosta — Perito Psicóloga
   Hoja de estilos común (diseño "C" + contenido "A")
   Colores: fondo #0B0F14 · superficie #11171E · acento #7FD1C4
   Tipografías: Manrope (texto) + Instrument Serif (cursivas)
   ========================================================= */

/* ---------- Tipografías alojadas en el propio sitio (más rápidas, sin depender de Google) ---------- */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/manrope-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/manrope-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/manrope-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/manrope-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-latin-400-italic.woff2) format('woff2')}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#0B0F14;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:#7FD1C4}
a:hover{color:#FFFFFF}

/* ---------- Animaciones de entrada ---------- */
@keyframes fadeC{from{opacity:0;transform:translateY(30px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes scanC{0%{transform:translateY(-100%)}100%{transform:translateY(900%)}}
@keyframes pulseC{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.6;transform:scale(1.08)}}
@keyframes growC{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes revC{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}

.c-in{opacity:0;animation:fadeC 1.1s cubic-bezier(.2,.7,.2,1) forwards}
.c-d1{animation-delay:.2s}
.c-d2{animation-delay:.4s}
.c-d3{animation-delay:.6s}
.c-scan{animation:scanC 7s linear infinite}
.c-glow{animation:pulseC 8s ease-in-out infinite}
.c-grow{transform-origin:top;animation:growC 2.4s .6s cubic-bezier(.6,0,.2,1) both}

/* Aparición al hacer scroll (js/main.js): cada bloque aparece completo al entrar en pantalla */
.js-reveal .c-rev{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js-reveal .c-rev.is-visible{opacity:1;transform:none}

/* ---------- Anillos de fondo (reemplazan la cuadrícula) ---------- */
@keyframes orbitC{to{transform:rotate(360deg)}}@keyframes orbitR{to{transform:rotate(-360deg)}}
.c-orbit{transform-origin:500px 500px;animation:orbitC 120s linear infinite}.c-arc{transform-origin:500px 500px;animation:orbitC 40s linear infinite}.c-arc2{transform-origin:500px 500px;animation:orbitR 28s linear infinite}

/* ---------- Parallax de fotos ---------- */
.c-fixed{background-size:cover;background-position:center;background-attachment:fixed}
.js-parallax .c-fixed{background-attachment:scroll}
.c-bg-inicio{background-image:url(../img/ambiente-balanza-noche.jpg)}
.c-bg-cert{background-image:url(../img/certificado-25-anios-marco.jpg)}
.c-bg-esc{background-image:url(../img/ambiente-balanza-consulta.jpg)}
.c-bg-escritorio{background-image:url(../img/ambiente-escritorio-pericial.jpg)}
.c-bg-puerta{background-image:url(../img/ambiente-puerta-reserva.jpg)}

/* ---------- Componentes ---------- */
.c-card{transition:border-color .4s,background .4s,transform .4s}
.c-card:hover{border-color:#7FD1C4;background:#18212B;transform:translateY(-4px)}
.c-lcard{transition:border-color .4s,transform .4s,box-shadow .4s}
.c-lcard:hover{border-color:#2B6A62;transform:translateY(-4px);box-shadow:0 24px 48px -28px rgba(11,15,20,.4)}
.c-step{transition:border-color .4s,background .4s}
.c-step:hover{border-color:#7FD1C4;background:#18212B}

.c-nav a{color:#AAB4C0;text-decoration:none;transition:color .25s}
.c-nav a:hover{color:#FFFFFF}

.c-btn{transition:box-shadow .35s,background .35s}
.c-btn:hover{box-shadow:0 0 0 6px rgba(127,209,196,.18);background:#A3E3D8}
.c-out{transition:border-color .3s,color .3s}
.c-out:hover{border-color:#7FD1C4;color:#7FD1C4}

.c-img{overflow:hidden;border-radius:20px;border:1px solid #232D38}
.c-img img{display:block;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.c-img:hover img{transform:scale(1.04)}

.c-field{transition:border-color .3s,background .3s}
.c-field:focus{outline:none;border-color:#7FD1C4;background:#18212B}

/* ---------- Botón flotante de WhatsApp ---------- */
.c-wa{transition:transform .3s,box-shadow .3s,background .3s}
.c-wa:hover{transform:translateY(-3px);background:#A3E3D8;color:#0B0F14}
@keyframes waC{0%{box-shadow:0 0 0 0 rgba(127,209,196,.5)}70%{box-shadow:0 0 0 16px rgba(127,209,196,0)}100%{box-shadow:0 0 0 0 rgba(127,209,196,0)}}
.c-wa::after{content:"";position:absolute;inset:0;border-radius:999px;animation:waC 2.6s ease-out 3s infinite;pointer-events:none}

/* ---------- Celular ---------- */
@media (max-width:720px){
  nav{padding-left:22px !important;padding-right:22px !important}
  [style*="max-width:1280px"], [style*="max-width:1000px"]{padding-left:22px !important;padding-right:22px !important}
  article, form{padding:28px !important}
  nav > a > span{display:none}
  .c-wa{right:16px !important;bottom:16px !important;padding:14px !important}
  .c-wa span{display:none}
}

/* Accesibilidad: respetar "reducir movimiento" */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .c-in,.c-rev{opacity:1 !important;transform:none !important;filter:none !important}
}