/* =========================================================================
   SOLO PROTOTIPO · NO se migra como clase global
   1) Emulación del widget nav-menu (V3, Elementor Pro): en Elementor estos
      valores se meten en los controles de estilo del widget (ver spec).
   2) Estado "seleccionado" de e-tab: en Elementor se aplica en el estado
      Activo/Seleccionado de la clase .cv-tab desde el editor.
   3) Overlay de depuración de estructura (tecla E).
   ========================================================================= */

/* --- 1 · nav-menu --- */
.proto-menu { display: flex; align-items: center; }
.proto-menu-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.proto-menu-list li { position: relative; }
.proto-menu-list > li > a { display: block; padding: 10px 14px; font-family: var(--cv-font-body); font-size: 0.9375rem; font-weight: 600; color: var(--cv-ink); border-radius: 999px; transition: background-color .3s, color .3s; }
.proto-menu-list > li > a:hover, .proto-menu-list > li:focus-within > a { background-color: rgba(29, 29, 27, .06); }
.proto-has-sub > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.proto-sub { list-style: none; margin: 0; padding: 10px; position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; background: var(--cv-white); border-radius: 18px; box-shadow: 0 24px 60px -20px rgba(29, 29, 27, .35); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .25s, transform .25s, visibility .25s; }
.proto-sub a { display: block; padding: 11px 14px; border-radius: 10px; font-size: .9375rem; font-weight: 500; color: var(--cv-ink); }
.proto-sub a:hover { background: rgba(29, 29, 27, .05); color: var(--cv-red); }
.proto-has-sub:hover > .proto-sub, .proto-has-sub:focus-within > .proto-sub { opacity: 1; visibility: visible; transform: none; }
.proto-sub-2 { top: 0; left: calc(100% + 8px); }
.proto-sub .proto-has-sub > a::after { transform: translateY(-2px) rotate(-45deg); }
.proto-menu-cta { display: none; }
.proto-burger { display: none; width: 44px; height: 44px; border: 0; border-radius: 999px; background: var(--cv-ink); cursor: pointer; padding: 0; position: relative; }
.proto-burger span { position: absolute; left: 13px; right: 13px; height: 2px; background: #fff; transition: transform .3s, top .3s; }
.proto-burger span:first-child { top: 17px; } .proto-burger span:last-child { top: 25px; }
.proto-burger[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.proto-burger[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

@media (max-width: 1024px) {
  .proto-burger { display: block; }
  .proto-menu-list { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 12px var(--cv-gutter) 28px; background: var(--cv-white); border-bottom: 1px solid var(--cv-line); box-shadow: 0 30px 60px -30px rgba(29,29,27,.3); display: none; max-height: calc(100vh - 80px); overflow: auto; }
  .proto-menu.is-open .proto-menu-list { display: flex; }
  .proto-menu-list > li > a { padding: 16px 4px; border-radius: 0; border-bottom: 1px solid var(--cv-line); font-family: var(--cv-font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
  .proto-sub, .proto-sub-2 { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: transparent; padding: 0 0 8px 16px; min-width: 0; }
  .proto-has-sub > a::after { display: none; }
  .proto-menu-cta { display: block; margin-top: 12px; }
  .proto-menu-cta a { text-align: center; border-radius: 999px !important; border: 0 !important; background: var(--cv-ink); color: #fff !important; font-family: var(--cv-font-body) !important; font-size: .875rem !important; letter-spacing: .1em; text-transform: uppercase; }
  .proto-menu-cta:last-child a { background: var(--cv-red); }
}

/* --- 2 · e-tab seleccionado (estado del editor) --- */
.cv-tab[aria-selected="true"] { color: var(--cv-white); border-bottom-color: var(--cv-red); }

/* --- loop: el 2º item es el que Elementor repetirá desde el CPT --- */
.proto-loop-clone { }

/* --- 3 · Overlay de estructura Elementor (tecla E) --- */
body.proto-debug [data-e] { outline: 1px dashed rgba(219, 44, 77, .55); outline-offset: -1px; }
body.proto-debug [data-e]:hover { outline: 2px solid #DB2C4D; }
.proto-debug-tip { position: fixed; z-index: 9999; pointer-events: none; padding: 6px 10px; border-radius: 8px; background: #1D1D1B; color: #fff; font: 600 12px/1.3 ui-monospace, Menlo, monospace; max-width: 420px; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.proto-debug-tip b { color: #FF7A93; font-weight: 700; }
.proto-debug-badge { position: fixed; left: 16px; bottom: 16px; z-index: 9999; padding: 8px 12px; border-radius: 999px; background: #1D1D1B; color: #fff; font: 600 12px/1 ui-monospace, Menlo, monospace; opacity: .85; }
