/* ════════════════════════════════════════════════════════════════════
   PH Shangri-La · Separador de apartamentos — MODO LISTA
   ────────────────────────────────────────────────────────────────────
   Esta hoja adopta EL MISMO sistema visual que el separador sobre plano
   (plano.html / theviewboquete): mismos tokens de color, las mismas dos
   fuentes (Barlow Condensed + Inter) y el mismo vocabulario de componentes
   —píldoras, "eyebrow" con línea dorada, tarjetas de dato con subrayado
   oro, chips verdes y los dos CTA (WhatsApp verde + primario verde bosque)—
   para que el cliente que salta entre "plano" y "lista" sienta UN MISMO
   producto.

   Solo cambia lo VISUAL. Se conservan intactas todas las clases que
   emite selector.js y que usa el modo admin:
     #edificios .edificio .nivel-sec .edif-nom .accordion-hd .en-n .en-m
     .en-disp .en-meta .chev .nivel-sec-body .nivel-sec-inner .techo .cuerpo
     .par .celda(.activa/.is-avail/.is-reserved/.is-sold/.ocupada/.cli-bloq/
     .tres/.celda-on) .celda-code .celda-m2 .celda-stat  ·  #detalle
     .det-render .det-stage .plano .det-thumbs .det-body .det-loc .stTag
     .det-model .det-specs .spec .amen-tit .tags .tag .ctas .btn(.btn-primario
     /.btn-wa) .det-note  ·  #condo-amen .condo .panel-info

   Los colores de marca vienen de la BD (projects.brand_main / brand_gold)
   y los inyecta index.php como --pj-main / --pj-gold. NO se cablean aquí.
   ════════════════════════════════════════════════════════════════════ */
:root{
  /* ── Marca (index.php la sobreescribe desde la BD) ── */
  --pj-main:#1F3D2B;  --pj-gold:#C8A96E;

  /* ── Sistema visual de plano.html (idéntico) ── */
  --sp-secondary:#F7CA77;   /* dorado claro: selección */
  --sp-lightgreen:#277C6A;
  --sp-offwhite:#EFEFEF;    /* fondo de página y del cuerpo del detalle */
  --sp-surface:#FFFFFF;     /* tarjetas */
  --sp-border:#D8D8D0;
  --sp-text:#1A2A24;
  --sp-text-muted:#5E6E68;

  /* ── Estados de /api/apartments.php (mismos hex que plano.html) ── */
  --st-avail:#277C6A;  --st-immediate:#3AAB8E;  --st-reserved:#7D7D7D;  --st-sold:#565656;

  /* ── Aliases que ya usaba el resto del CSS: mapeados al mismo sistema,
        así un cambio de marca baja a todo desde --pj-main/--pj-gold. ── */
  --bosque:var(--pj-main);  --oro:var(--pj-gold);
  --bosque2:#2F4A44;        --bosque3:#277C6A;
  --oro2:#F7CA77;           --oro-deep:#9C7F4D;
  --marfil:var(--sp-offwhite);  --paper:var(--sp-surface);  --blanco:#fff;
  --linea:var(--sp-border);     --linea2:#C6C6C0;
  --carbon:var(--sp-text);      --muted:var(--sp-text-muted);  --topo:#7D7D7D;
  --disp:var(--st-avail);  --res:var(--st-reserved);  --vend:var(--st-sold);  --inmediata:var(--st-immediate);

  --sh:0 1px 2px rgba(28,58,42,.05),0 12px 30px -20px rgba(28,58,42,.26);
  --sh-soft:0 6px 24px rgba(31,61,43,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Inter', Arial, sans-serif;background:#fff;
  color:var(--sp-text);line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:24px 24px 64px}

/* ════════════════════════════════════════════════════════════════════
   Barra superior — VERDE de marca con el logo como marca de agua de fondo
   (mismo lenguaje que el header del plano). Logo centrado y DOS acciones
   tipo píldora: "Inicio" (izq) y "Ver en plano" (der).
   ════════════════════════════════════════════════════════════════════ */
.topbar{background:linear-gradient(155deg,#254A31 0%,var(--pj-main) 52%,#15301F 100%);
  display:flex;align-items:center;justify-content:center;padding:16px 24px;
  position:relative;overflow:hidden;
  border-bottom:1px solid rgba(200,169,110,.30);box-shadow:0 6px 22px rgba(0,0,0,.18)}
.topbar-logo{position:relative;z-index:1;height:48px;width:auto;display:block}

.overlay-home{
  position:absolute;
  top:20px;
  left:20px;
  z-index:20;

  display:inline-flex;
  align-items:center;
  gap:7px;

  text-decoration:none;
  white-space:nowrap;

  font-family:inherit;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.01em;

  color:var(--pj-main);
  background:var(--pj-gold);
  border:1px solid var(--pj-gold);
  border-radius:999px;

  padding:9px 16px;

  box-shadow:0 4px 14px rgba(200,169,110,.32);

  transition:
      background .2s,
      color .2s,
      border-color .2s,
      transform .2s;
}

.overlay-home svg{
  width:14px;
  height:14px;
}

.overlay-home:hover{
  background:var(--oro2);
  border-color:var(--oro2);
  transform:translateY(-1px);
}

.overlay-home:active{
  transform:scale(.98);
}

.overlay-home:focus-visible{
  outline:2px solid var(--sp-secondary);
  outline-offset:2px;
}

@media(max-width:600px){
  .overlay-home{
      top:12px;
      left:12px;
      padding:8px 12px;
      font-size:.7rem;
  }
}

/* Marca de agua: logo grande tenue a un lado + líneas fluidas */
.topbar-wm{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.topbar-wm-logo{position:absolute;right:-30px;top:50%;transform:translateY(-50%);
  height:220%;width:auto;opacity:.06;filter:brightness(0) invert(1)}
.topbar-wm-lines{position:absolute;inset:0;width:100%;height:100%;opacity:.14}
.topbar-wm-lines path{stroke:var(--pj-gold)}

/* Acciones de la barra (píldoras) */
.topbar-cta,.topbar-plano{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;white-space:nowrap;
  font-family:inherit;font-size:.78rem;font-weight:700;letter-spacing:.01em;
  border-radius:999px;padding:9px 16px;
  transition:background .2s,color .2s,border-color .2s,transform .2s}
.topbar-cta svg,.topbar-plano svg{width:14px;height:14px}

/* "Inicio": píldora de contorno dorado sobre verde */
.topbar-cta{left:24px;color:var(--oro2);background:rgba(200,169,110,.10);
  border:1px solid rgba(200,169,110,.55)}
.topbar-cta:hover{background:var(--oro);color:var(--pj-main);border-color:var(--oro);transform:translateY(-50%) translateY(-1px)}
.topbar-cta:active{transform:translateY(-50%) scale(.98)}

/* "Ver en plano": píldora dorada sólida — la acción destacada */
.topbar-plano{right:24px;color:var(--pj-main);background:var(--pj-gold);
  border:1px solid var(--pj-gold);box-shadow:0 4px 14px rgba(200,169,110,.32)}
.topbar-plano:hover{background:var(--oro2);border-color:var(--oro2);transform:translateY(-50%) translateY(-1px)}
.topbar-plano:active{transform:translateY(-50%) scale(.98)}
.topbar-plano:focus-visible,.topbar-cta:focus-visible{outline:2px solid var(--sp-secondary);outline-offset:2px}

@media(max-width:600px){
  .topbar-logo{height:40px}
  .topbar-cta{left:12px;padding:8px 12px;font-size:.7rem}
  .topbar-plano{right:12px;padding:8px 12px;font-size:.7rem}
  .topbar-plano .lbl{display:none}   /* en pantalla estrecha, el botón de plano queda solo con icono */
}

/* ════════════════════════════════════════════════════════════════════
   Encabezado — YA NO es una banda verde. Vive sobre el FONDO CLARO de la
   página, separado de la barra superior: la marca de agua y las líneas
   fluidas quedan SOLO en .topbar. Aquí: "eyebrow" en oro profundo con
   línea dorada, título Barlow en verde bosque y subtítulo atenuado.
   ════════════════════════════════════════════════════════════════════ */
.head{text-align:center;margin:6px 0 28px;padding:22px 10px 0}
.kicker{display:inline-flex;align-items:center;gap:10px;
  font-family:'Barlow Condensed', sans-serif;font-size:.82rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--oro-deep);font-weight:600;margin-bottom:12px}
.kicker::before,.kicker::after{content:"";width:24px;height:2px;background:var(--pj-gold)}
.head h1{font-family:'Barlow Condensed', sans-serif;font-weight:700;font-size:clamp(1.9rem,4.4vw,2.7rem);
  color:var(--pj-main);line-height:1.05;letter-spacing:.5px;text-transform:uppercase}
.head h1 em{color:var(--pj-gold);font-style:normal}
.head p{color:var(--sp-text-muted);max-width:560px;margin:12px auto 0;font-size:.98rem}
.ayuda{text-align:center;color:var(--sp-text-muted);font-size:.84rem;margin:-4px 0 24px}

/* ════════════════════════════════════════════════════════════════════
   Layout principal — izquierda: niveles + leyenda · derecha: detalle.
   ════════════════════════════════════════════════════════════════════ */
.main{display:block}
.main.cliente{display:grid;grid-template-columns:440px minmax(0,1fr);gap:30px;align-items:start}
.col-izq{display:flex;flex-direction:column;gap:16px;min-width:0}
.main.cliente .detalle{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(315px,.95fr);
  position:sticky;top:22px;align-self:start;max-height:calc(100vh - 44px);overflow:auto}
.main.cliente .det-render{border-bottom:none;border-right:1px solid var(--sp-border);display:flex;flex-direction:column}
.main.cliente .det-stage{aspect-ratio:auto;flex:1;min-height:240px}

/* ════════════════════════════════════════════════════════════════════
   Niveles (tarjetas apiladas). Superficie blanca + borde + sombra suave,
   como los paneles de plano.html. El "techo" es un acento verde de marca.
   ════════════════════════════════════════════════════════════════════ */
#edificios{display:flex;flex-direction:column;gap:16px}
.edificio{display:flex;flex-direction:column;background:var(--sp-surface);border:1px solid var(--sp-border);
  border-radius:14px;box-shadow:var(--sh);overflow:hidden}
.edif-nom{padding:13px 15px 11px;border-bottom:1px solid var(--sp-border);display:flex;align-items:baseline;
  justify-content:space-between;gap:8px;flex-wrap:wrap;text-align:left}
.edif-nom .en-n{font-family:'Barlow Condensed', sans-serif;font-weight:700;font-size:1.28rem;
  text-transform:uppercase;letter-spacing:.5px;color:var(--pj-main);line-height:1}
.edif-nom .en-m{font-family:'Barlow Condensed', sans-serif;font-size:.74rem;letter-spacing:1px;
  text-transform:uppercase;color:var(--sp-text-muted);font-weight:600}
.techo{height:5px;background:linear-gradient(180deg,var(--pj-main),var(--bosque2))}
.cuerpo{padding:12px}
.par{display:flex;flex-wrap:wrap;gap:8px;flex:1}

/* ── Celda de unidad — análoga al polígono .ap del plano. El estado se lee
     por el borde izquierdo y por el punto; hover en dorado; seleccionada
     con anillo verde + check dorado, igual que la selección del plano. ── */
.celda{flex:1 1 84px;min-width:80px;text-align:left;cursor:pointer;background:var(--sp-surface);
  border:1px solid var(--linea2);border-left:4px solid var(--st-avail);border-radius:11px;
  padding:9px 10px;font:inherit;position:relative;transition:.16s;
  display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.celda:hover{transform:translateY(-2px);border-color:var(--pj-gold);
  box-shadow:0 8px 18px -12px rgba(28,58,42,.5)}
.celda:focus-visible{outline:3px solid var(--sp-secondary);outline-offset:2px}
.celda-code{font-family:'Barlow Condensed', sans-serif;font-weight:700;font-size:1rem;
  letter-spacing:.4px;color:var(--sp-text);line-height:1}
.celda-rec,.celda-m2{font-family:'Barlow Condensed', sans-serif;font-size:.76rem;letter-spacing:.3px;
  color:var(--sp-text-muted);font-weight:600}
.celda-stat{display:inline-flex;align-items:center;gap:5px;font-size:.6rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.3px;color:var(--st-avail)}
.celda-stat i{width:7px;height:7px;border-radius:50%;background:var(--st-avail)}

/* Badge opcional (algunos proyectos lo usan para el modelo) */
.celda-badge{position:absolute;top:8px;right:8px;font-size:.55rem;font-weight:800;letter-spacing:.04em;
  color:var(--oro-deep);background:rgba(200,169,110,.16);border:1px solid rgba(200,169,110,.4);
  padding:2px 6px;border-radius:6px}

/* Seleccionada: anillo verde + check dorado (eco de la selección del plano) */
.celda.activa{border-color:var(--pj-main);border-left-color:var(--pj-main);
  box-shadow:0 0 0 2px var(--pj-main),0 12px 20px -12px rgba(28,58,42,.5)}
.celda.activa::after{content:"✓";position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:50%;
  background:var(--pj-main);color:var(--sp-secondary);font-size:.7rem;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.celda.activa .celda-badge{display:none}

/* Estados no disponibles */
.celda.is-immediate{border-left-color:var(--st-immediate)}
.celda.is-immediate .celda-stat{color:var(--st-immediate)} .celda.is-immediate .celda-stat i{background:var(--st-immediate)}
.celda.is-reserved{border-left-color:var(--st-reserved)}
.celda.is-reserved .celda-stat{color:var(--st-reserved)} .celda.is-reserved .celda-stat i{background:var(--st-reserved)}
.celda.is-sold{border-left-color:var(--st-sold)}
.celda.is-sold .celda-stat{color:var(--st-sold)} .celda.is-sold .celda-stat i{background:var(--st-sold)}

/* Bloqueada para el cliente (reservado / vendido): apagada y sin hover */
.celda.cli-bloq{background:var(--sp-offwhite);cursor:not-allowed;box-shadow:none}
.celda.cli-bloq:hover{background:var(--sp-offwhite);transform:none;box-shadow:none;border-color:var(--linea2)}
.celda.cli-bloq .celda-code{color:var(--st-reserved)}

/* Marca de 3 recámaras: filo dorado superior (como el acento oro del plano) */
.celda.tres{box-shadow:inset 0 3px 0 var(--pj-gold)}
.celda.tres.activa{box-shadow:0 0 0 2px var(--pj-main),inset 0 3px 0 var(--pj-gold)}

/* Filtros (atenúan lo que no cumple) */
#edificios.f-avail .celda:not(.is-avail){opacity:.32;filter:grayscale(.4)}
#edificios.f-mod .celda:not(.celda-on){opacity:.28;filter:grayscale(.5)}

/* ════════════════════════════════════════════════════════════════════
   Leyenda — píldoras con punto redondo por estado, mismo lenguaje que
   la .legend / .leg-item de plano.html.
   ════════════════════════════════════════════════════════════════════ */
.leyenda{display:flex;flex-wrap:wrap;gap:8px;padding:2px 2px}
.leyenda .lg{display:inline-flex;align-items:center;gap:8px;background:var(--sp-surface);
  border:1px solid var(--sp-border);padding:7px 14px;border-radius:100px;
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:var(--pj-main)}
.leyenda i{width:10px;height:10px;border-radius:50%;border:none;display:inline-block}
.lg-d i{background:var(--st-avail)}
.lg-r i{background:var(--st-reserved)}
.lg-v i{background:var(--st-sold)}

/* ════════════════════════════════════════════════════════════════════
   Detalle (columna derecha). Composición calcada del modal de plano.html:
   cabecera/eyebrow dorada + pastilla de estado, tarjetas de dato con
   subrayado oro, chips verdes y los dos CTA en píldora.
   ════════════════════════════════════════════════════════════════════ */
.detalle{background:var(--sp-surface);border:1px solid var(--sp-border);border-radius:16px;
  box-shadow:var(--sh);overflow:hidden}
.det-render{background:linear-gradient(180deg,#fff,#F5F5F3);border-bottom:1px solid var(--sp-border);
  padding:18px;position:relative}
.det-stage{aspect-ratio:16/10;background:var(--sp-offwhite);border-radius:12px;overflow:hidden;
  border:1px solid var(--sp-border);display:flex;align-items:center;justify-content:center}
.det-stage img{width:100%;height:100%;object-fit:contain;background:var(--sp-offwhite)}
.det-stage.photo img{object-fit:cover}
.plano{display:block;width:100%;height:100%;object-fit:contain}

/* Miniaturas — píldoras/cuadros con borde que se marca en verde al activarse */
.det-thumbs{display:flex;gap:8px;margin-top:11px}
.det-thumbs button{flex:1;aspect-ratio:1/1;border-radius:9px;overflow:hidden;border:2px solid transparent;
  background:var(--sp-offwhite);cursor:pointer;padding:0;transition:.15s}
.det-thumbs img{width:100%;height:100%;object-fit:cover}
.det-thumbs button.on{border-color:var(--pj-main)}
.det-thumbs button:hover{border-color:var(--pj-gold)}
.det-thumbs button[data-kind="plan"] img{object-fit:contain;background:var(--sp-offwhite)}

.det-body{padding:20px 24px 22px}
.det-loc{font-family:'Barlow Condensed', sans-serif;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--oro-deep);font-weight:600;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Pastilla de estado — mismos tintes que .lp-tag / .modal-tag del plano */
.det-loc .stTag{font-family:'Barlow Condensed', sans-serif;padding:3px 11px;border-radius:999px;
  font-size:.62rem;letter-spacing:.09em;font-weight:700;text-transform:uppercase}
.stTag.d{background:rgba(39,124,106,.12);color:var(--sp-lightgreen)}
.stTag.r{background:rgba(125,125,125,.18);color:#5E6E68}
.stTag.v{background:rgba(86,86,86,.18);color:#4D4D4D}
.det-body h2{font-family:'Barlow Condensed', sans-serif;font-weight:700;font-size:1.7rem;
  text-transform:uppercase;letter-spacing:.5px;color:var(--pj-main);margin:7px 0 2px;line-height:1.02}
.det-model{font-size:.9rem;color:var(--sp-text);font-weight:600;margin-bottom:14px}
.det-model em{font-style:normal;color:var(--pj-gold)}

/* Tarjetas de dato — calcadas de .modal-stat (blanco + subrayado oro) */
.det-specs{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:14px}
.spec{background:var(--sp-surface);border:1px solid var(--sp-border);border-bottom:2px solid var(--pj-gold);
  border-radius:9px;padding:11px 6px;text-align:center}
.spec .v{font-family:'Barlow Condensed', sans-serif;font-size:1.2rem;color:var(--pj-main);line-height:1;font-weight:700}
.spec .l{font-family:'Barlow Condensed', sans-serif;font-size:.62rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--sp-text-muted);margin-top:4px;font-weight:600}

/* Amenidades de la unidad — chips verdes (como .model-chip del plano) */
.amen-tit{font-family:'Barlow Condensed', sans-serif;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sp-text-muted);font-weight:600;margin-bottom:8px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.tag{font-size:.78rem;font-weight:600;color:var(--sp-lightgreen);background:rgba(39,124,106,.10);
  border:none;padding:5px 11px;border-radius:100px}

/* CTA — píldoras idénticas a las del modal del plano */
.ctas{display:flex;flex-direction:column;gap:10px}
.btn{font-family:inherit;font-size:.92rem;font-weight:700;padding:13px 18px;border-radius:100px;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1px solid transparent;transition:background .2s,transform .2s,box-shadow .2s;width:100%}
.btn svg{width:19px;height:19px;flex:none}
.btn-primario{background:var(--pj-main);color:#fff;box-shadow:0 4px 16px rgba(31,61,43,.22)}
.btn-primario:hover{background:var(--sp-lightgreen);transform:translateY(-2px)}
.btn-wa{background:#25D366;color:#fff;box-shadow:0 4px 16px rgba(37,211,102,.28)}
.btn-wa:hover{background:#1EBF5A;transform:translateY(-2px)}
.det-note{font-size:.72rem;color:var(--sp-text-muted);margin-top:13px;line-height:1.55}
.fade{animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ════════════════════════════════════════════════════════════════════
   Panel del condominio (lo usa el admin; en cliente se oculta vía JS).
   Se conserva con el mismo lenguaje por si un proyecto lo muestra.
   ════════════════════════════════════════════════════════════════════ */
.panel-info{display:flex;flex-direction:column;gap:14px;max-width:440px}
.condo{background:var(--sp-surface);border:1px solid var(--sp-border);border-radius:14px;
  box-shadow:var(--sh);padding:18px 20px}
.condo-kicker{font-family:'Barlow Condensed', sans-serif;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--oro-deep);font-weight:600;margin-bottom:6px}
.condo-tit{font-family:'Barlow Condensed', sans-serif;font-weight:700;font-size:1.4rem;
  text-transform:uppercase;letter-spacing:.5px;color:var(--pj-main);line-height:1.05;margin-bottom:6px}
.condo-sub{font-size:.9rem;color:var(--sp-text-muted);margin-bottom:12px}
.condo-amen{display:flex;flex-wrap:wrap;gap:6px}
.condo-amen span{font-size:.78rem;font-weight:600;color:var(--sp-lightgreen);
  background:rgba(39,124,106,.10);padding:5px 11px;border-radius:100px}

/* ════════════════════════════════════════════════════════════════════
   Acordeón de pisos — SOLO se colapsa en móvil (≤900px). El wrapper vive
   siempre en el DOM; el CSS decide cuándo el colapso y el chevron se ven.
   ════════════════════════════════════════════════════════════════════ */
.nivel-sec-body{display:grid;grid-template-rows:1fr;
  transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1)}
.nivel-sec-inner{overflow:hidden;min-height:0}
.chev{display:none}
.en-disp{display:none}

/* ── Layout responsivo ── */
@media(max-width:1024px){
  .main.cliente{grid-template-columns:1fr}
  .main.cliente .detalle{grid-template-columns:1fr;position:static;max-height:none;overflow:visible}
  .main.cliente .det-render{border-right:none;border-bottom:1px solid var(--sp-border)}
}

/* ── Acordeón ACTIVO solo en móvil/tablet (≤900px) ── */
@media(max-width:900px){
  .nivel-sec.collapsed .nivel-sec-body{grid-template-rows:0fr}
  .accordion-hd{cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s}
  .accordion-hd:hover{background:rgba(31,61,43,.04)}
  .accordion-hd:focus-visible{outline:3px solid var(--pj-gold);outline-offset:-2px;border-radius:14px 14px 0 0}
  .en-meta{display:inline-flex;align-items:center;gap:8px}
  .en-disp{display:inline-flex;font-family:'Barlow Condensed', sans-serif;font-size:.72rem;font-weight:600;
    letter-spacing:.04em;color:var(--st-avail);background:rgba(39,124,106,.10);
    border:1px solid rgba(39,124,106,.25);padding:2px 9px;border-radius:999px;transition:opacity .2s}
  .nivel-sec:not(.collapsed) .en-disp{opacity:0;pointer-events:none}
  .chev{display:block;width:18px;height:18px;color:var(--sp-text-muted);flex-shrink:0;
    transition:transform .28s cubic-bezier(.4,0,.2,1)}
  .nivel-sec.collapsed .chev{transform:rotate(-90deg)}
}

@media(max-width:560px){
  .wrap{padding:20px 16px 56px}
  .det-specs{grid-template-columns:repeat(2,1fr)}
  .celda{flex:1 1 100%}
  .head h1{font-size:1.75rem}
}
:focus-visible{outline:3px solid var(--pj-gold);outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .celda:hover,.btn:hover{transform:none}
}