/* CODIFICANDO | Movimiento y acabado de todo el sitio principal.
   Los estados ocultos solo existen con html.cod-anim, que pone sitio.js: sin JavaScript todo se ve.
   Con «reducir movimiento» no se anima nada. */

/* ---------- Texto blanco sobre naranja en las acciones ---------- */
html body .cod-nav .cod-actions a.cod-btn-cta,
html body #wrapwrap #wrap .cpl .cpl-btn-primario,
html body #wrapwrap #wrap .cpl .cpl-atajos a.cpl-atajo-sel,
html body #wrapwrap #wrap .cod-lp-btn-primary,
html body #wrapwrap #wrap.cdp .cdp-boton--accion,
html body #codMobileMenu .cdp-btn--accion { color: #fff !important; text-shadow: 0 1px 1px rgba(120, 50, 0, .35); }
html body #wrapwrap #wrap .cpl .cpl-btn-primario *, html body #wrapwrap #wrap.cdp .cdp-boton--accion * { color: #fff !important; }

/* ---------- Barra de avance de lectura ---------- */
.cod-avance { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #FF7900, #FFB066); z-index: 100001; pointer-events: none; }

/* ---------- Cabecera: sombra al bajar ---------- */
html.cod-bajo #wrapwrap > header { box-shadow: 0 8px 28px rgba(30, 33, 40, .10) !important; transition: box-shadow .25s ease; }

@media (prefers-reduced-motion: no-preference) {
  /* ---------- Entrada al aparecer en pantalla ---------- */
  html.cod-anim [data-cod-ver] { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--cod-d, 0ms); will-change: opacity, transform; }
  html.cod-anim [data-cod-ver="izq"] { transform: translate3d(-32px, 0, 0); }
  html.cod-anim [data-cod-ver="der"] { transform: translate3d(32px, 0, 0); }
  html.cod-anim [data-cod-ver="zoom"] { transform: scale(.94); }
  html.cod-anim [data-cod-ver].cod-visto { opacity: 1; transform: none; }

  /* ---------- Inicio de cada página: entra sin esperar al JavaScript ---------- */
  @keyframes cod-sube { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
  @keyframes cod-flota { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -10px, 0); } }
  @keyframes cod-brillo { 0% { transform: translateX(-130%) skewX(-18deg); } 60%, 100% { transform: translateX(260%) skewX(-18deg); } }
  @keyframes cod-halo { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .55; } 50% { transform: translate3d(-4%, 5%, 0) scale(1.12); opacity: .8; } }
  @keyframes cod-raya { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  #wrapwrap #wrap.cdp :is(.cdp-inicio, .cdq-inicio) :is(.cdp-firma, h1, .cdp-apoyo, .cdp-acciones, .cdp-beneficios, .cdp-wa-linea) { animation: cod-sube .8s cubic-bezier(.2, .7, .2, 1) both; }
  #wrapwrap #wrap.cdp :is(.cdp-inicio, .cdq-inicio) h1 { animation-delay: .08s; }
  #wrapwrap #wrap.cdp :is(.cdp-inicio, .cdq-inicio) .cdp-apoyo { animation-delay: .16s; }
  #wrapwrap #wrap.cdp :is(.cdp-inicio, .cdq-inicio) .cdp-acciones { animation-delay: .24s; }
  #wrapwrap #wrap.cdp .cdp-inicio .cdp-beneficios { animation-delay: .32s; }
  #wrapwrap #wrap.cdp .cdp-inicio .cdp-wa-linea { animation-delay: .4s; }
  #wrapwrap #wrap.cdp .cdp-inicio figure { animation: cod-flota 7s ease-in-out 1s infinite; }

  /* ---------- Botones: elevación y destello ---------- */
  #wrapwrap #wrap :is(.cdp-boton, .cpl-btn, .cdt-btn, .cod-lp-btn), .cod-nav .cod-actions a.cod-btn-cta { position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease !important; }
  #wrapwrap #wrap :is(.cdp-boton, .cpl-btn, .cdt-btn, .cod-lp-btn):hover, .cod-nav .cod-actions a.cod-btn-cta:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 24px rgba(30, 33, 40, .16) !important; }
  #wrapwrap #wrap :is(.cdp-boton, .cpl-btn, .cdt-btn, .cod-lp-btn):active { transform: translateY(0) scale(.98) !important; }
  #wrapwrap #wrap :is(.cdp-boton--accion, .cpl-btn-primario, .cdt-btn--primario)::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent); transform: translateX(-130%) skewX(-18deg); animation: cod-brillo 4.2s ease-in-out 1.4s infinite; pointer-events: none; }

  /* ---------- Tarjetas: se levantan al pasar ---------- */
  #wrapwrap #wrap :is(.cdp-plan, .cdq-tarjetas > li, .cdq-razones > li, .cdq-depto, .cdq-pasos > li, .cdp-giros__lista a, .cdt-card, .cod-lp-plan, .cod-lp-card) { transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s ease, border-color .28s ease !important; }
  #wrapwrap #wrap :is(.cdp-plan, .cdq-tarjetas > li, .cdq-razones > li, .cdq-depto, .cdp-giros__lista a, .cdt-card, .cod-lp-plan, .cod-lp-card):hover { transform: translateY(-6px) !important; box-shadow: 0 18px 40px rgba(30, 33, 40, .12) !important; border-color: #FF7900 !important; }
  #wrapwrap #wrap.cdp figure img { transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease !important; }
  #wrapwrap #wrap.cdp .cdp-demo__item figure:hover img { transform: scale(1.025) !important; box-shadow: 0 24px 50px rgba(30, 33, 40, .16) !important; }

  /* ---------- Títulos de sección: raya naranja que se dibuja ---------- */
  #wrapwrap #wrap.cdp .cdp-cab h2::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 12px; border-radius: 2px; background: #FF7900; transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s cubic-bezier(.2, .7, .2, 1) .25s; }
  #wrapwrap #wrap.cdp .cdp-cab.cod-visto h2::after, html:not(.cod-anim) #wrapwrap #wrap.cdp .cdp-cab h2::after { transform: scaleX(1); }

  /* ---------- Enlaces de texto ---------- */
  #wrapwrap #wrap.cdp .cdp-enlace { transition: color .2s ease, letter-spacing .2s ease !important; }
  #wrapwrap #wrap.cdp .cdp-enlace::after { content: " \2192"; display: inline-block; transition: transform .2s ease; }
  #wrapwrap #wrap.cdp .cdp-enlace:hover::after { transform: translateX(4px); }

  /* ---------- Preguntas frecuentes ---------- */
  #wrapwrap #wrap.cdp .cdp-faq__item { transition: background-color .2s ease, padding-left .2s ease !important; }
  #wrapwrap #wrap.cdp .cdp-faq__item:hover { background: rgba(255, 121, 0, .05) !important; padding-left: 10px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .cod-avance { display: none; }
}