/* =============================================================================
   AIQuaPro Prototipos — hoja de estilos del portal.
   Traslada a CSS el lienzo de diseño (diseno/lienzo/*.dc.html):
   negro #050505, rojo AIQuaPro #E30613, Inter 900 en mayúsculas para titulares
   y JetBrains Mono para etiquetas técnicas.
   Mobile-first: los estilos base son para teléfono; @media (min-width) amplía.
   EVOLUTIVO: v1.0.0
   ============================================================================= */

:root {
  --fondo: #050505;
  --sup-1: #09090A;
  --sup-2: #0C0C0D;
  --sup-3: #151516;
  --linea: rgba(255, 255, 255, 0.08);
  --linea-2: rgba(255, 255, 255, 0.14);
  --texto: #F3F1EE;
  --texto-2: #C9C5C0;
  --texto-3: #A9A5A0;
  --texto-4: #6F6B67;
  --rojo: #E30613;
  --rojo-osc: #B91C1C;
  --rojo-halo: rgba(227, 6, 19, 0.22);
  /* Estados del prototipo (misma luminosidad y croma, distinto tono) */
  --e-concepto: #8A8784;
  --e-preventa: #E9A23B;
  --e-desarrollo: #6EA8FE;
  --e-produccion: #4CC38A;
  --radio: 18px;
  --gutter: 16px;
  --sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  color-scheme: dark;
}

@media (min-width: 900px) { :root { --gutter: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--rojo); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Atmósfera ---------- */
.halo { position: absolute; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, var(--rojo-halo) 0%, rgba(227,6,19,0.06) 40%, transparent 68%); }
.rejilla-tecnica { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 30%, transparent 75%); }

/* ---------- Navegación ---------- */
.nav { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px var(--gutter); border-bottom: 1px solid rgba(255,255,255,0.06);
  /* EVOLUTIVO: v1.1.0 — PWA instalada: respeta notch y zonas seguras laterales */
  padding-top: max(16px, env(safe-area-inset-top)); padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.nav-marca { display: flex; align-items: center; gap: 16px; min-width: 0; }
.nav-marca img { height: 28px; width: auto; }
.nav-sep { width: 1px; height: 24px; background: rgba(255,255,255,0.16); display: none; }
.nav-etiqueta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; color: var(--texto-3); display: none; }
.nav-enlaces { display: flex; align-items: center; gap: 12px; }
@media (min-width: 900px) { .nav-enlaces { gap: 20px; } }
.nav-enlaces .secundario { display: none; font-size: 14px; font-weight: 500; color: var(--texto-3); }
.nav-enlaces .secundario:hover { color: var(--texto); }
@media (min-width: 900px) {
  .nav { padding-top: max(22px, env(safe-area-inset-top)); padding-bottom: 22px; }
  .nav-marca img { height: 34px; }
  .nav-sep, .nav-etiqueta, .nav-enlaces .secundario { display: block; }
}

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px;
  padding: 0 24px; border-radius: 999px; border: 1px solid transparent; background: none;
  font-size: 15px; font-weight: 700; white-space: nowrap; transition: transform .2s, background .2s, border-color .2s, box-shadow .2s; }
.btn:active { transform: scale(0.98); }
.btn svg { flex-shrink: 0; }
.btn-rojo { background: var(--rojo); color: #fff; box-shadow: 0 18px 50px -12px rgba(227,6,19,0.65); }
.btn-rojo:hover { background: #F2141F; box-shadow: 0 22px 60px -10px rgba(227,6,19,0.8); }
.btn-borde { border-color: rgba(255,255,255,0.18); color: var(--texto); }
.btn-borde:hover { border-color: var(--rojo); }
.btn-borde-rojo { border-color: rgba(227,6,19,0.6); }
.btn-borde-rojo:hover { background: rgba(227,6,19,0.12); }
.btn-claro { background: var(--texto); color: var(--fondo); font-weight: 800; }
.btn-claro:hover { background: #fff; }
.btn-peligro { border-color: rgba(227,6,19,0.4); color: #FF6B6B; }
.btn-peligro:hover { background: rgba(227,6,19,0.12); }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 13px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.icono-btn { width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid rgba(255,255,255,0.1); background: none; color: var(--texto-2); transition: border-color .2s, color .2s, background .2s; }
.icono-btn:hover { border-color: var(--rojo); color: var(--texto); }
.icono-btn.cuadrado { border-radius: 10px; width: 38px; height: 38px; }

/* ---------- Kicker / titulares ---------- */
.kicker { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; color: var(--rojo); text-transform: uppercase; }
.kicker::before { content: ''; width: 20px; height: 2px; background: var(--rojo); }
.kicker.sin-raya::before { display: none; }
.titular { margin: 0; font-weight: 900; letter-spacing: -0.055em; text-transform: uppercase; line-height: 0.9; text-wrap: balance; }
.titular .rojo, .rojo { color: var(--rojo); }
.etiqueta-mono { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--texto-4); text-transform: uppercase; }
@media (min-width: 900px) { .kicker { font-size: 13px; } .kicker::before { width: 28px; } }

/* ---------- Píldoras de estado ---------- */
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 999px;
  background: rgba(5,5,5,0.72); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto); white-space: nowrap; }
.pill .punto { width: 7px; height: 7px; border-radius: 50%; background: var(--e-concepto); }
/* CORRECTIVO: v1.1.0 — rojo sólido: el texto rojo sobre capturas claras era ilegible */
.pill.destacado { color: #fff; background: var(--rojo); border-color: var(--rojo); }
.punto.concepto { background: var(--e-concepto); } .punto.preventa { background: var(--e-preventa); }
.punto.desarrollo { background: var(--e-desarrollo); } .punto.produccion { background: var(--e-produccion); }
@media (min-width: 900px) { .pill { font-size: 11px; } }

.etiqueta { padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); font-size: 12px; color: var(--texto-3); }

/* ---------- Hero de la galería ---------- */
.hero { position: relative; padding: 40px var(--gutter) 32px; display: grid; gap: 40px; align-items: center; }
.hero-texto { display: flex; flex-direction: column; gap: 20px; position: relative; z-index: 1; }
.hero h1 { font-size: clamp(50px, 14vw, 112px); }
.hero p { margin: 0; max-width: 620px; font-size: 17px; line-height: 1.55; color: var(--texto-3); text-wrap: pretty; }
.hero-acciones { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hero-cifras { font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; color: var(--texto-4); }
.hero-isotipo { display: none; }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); padding-top: 104px; padding-bottom: 72px; }
  .hero-texto { gap: 30px; }
  .hero p { font-size: 20px; }
  .hero-isotipo { position: relative; height: 480px; display: flex; align-items: center; justify-content: center; }
}
.hero-isotipo .anillo { position: absolute; border-radius: 50%; }
.hero-isotipo .a1 { width: 420px; height: 420px; border: 1px solid rgba(227,6,19,0.25); animation: girar 60s linear infinite; }
.hero-isotipo .a2 { width: 540px; height: 540px; border: 1px dashed rgba(255,255,255,0.08); animation: girar 120s linear infinite reverse; }
.hero-isotipo .brillo { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(227,6,19,0.35), transparent 70%); animation: latir 5s ease-in-out infinite; }
.hero-isotipo img { position: relative; width: 232px; height: 232px; filter: drop-shadow(0 0 40px rgba(227,6,19,0.55)); }
.hero-isotipo .lema { position: absolute; font-family: var(--mono); font-size: 11px; color: var(--texto-4); letter-spacing: 0.14em; }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes latir { 50% { transform: scale(1.12); opacity: .7; } }

/* Revelado inicial orquestado (una sola animación de entrada) */
.revelar { opacity: 0; transform: translateY(18px); animation: revelar .8s cubic-bezier(.2,.7,.2,1) forwards; }
.revelar.d1 { animation-delay: .08s; } .revelar.d2 { animation-delay: .16s; } .revelar.d3 { animation-delay: .24s; }
@keyframes revelar { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .revelar { animation: none; opacity: 1; transform: none; }
  .hero-isotipo .a1, .hero-isotipo .a2, .hero-isotipo .brillo { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Barra de filtros ---------- */
.filtros { position: relative; z-index: 4; display: flex; flex-direction: column; gap: 12px;
  padding: 14px var(--gutter); background: rgba(5,5,5,0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
.chips::-webkit-scrollbar { display: none; }
.chip { flex-shrink: 0; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12);
  background: none; font-size: 14px; font-weight: 600; color: var(--texto-2); display: inline-flex; align-items: center; gap: 8px; transition: all .2s; }
.chip:hover { border-color: rgba(255,255,255,0.3); }
.chip[aria-pressed="true"] { background: var(--texto); color: var(--fondo); border-color: var(--texto); }
.chip .n { opacity: .55; font-weight: 500; }
.filtros-derecha { display: flex; gap: 10px; min-width: 0; }
/* CORRECTIVO: v1.1.0 — en móvil el selector va en su propia fila a ancho completo (antes se aplastaba en 375 px) */
.filtros-derecha { flex-wrap: wrap; }
.filtros-derecha .campo-buscar { flex: 1 1 100%; }
.filtros-derecha .selector { min-width: 0; flex: 1 1 100%; text-overflow: ellipsis; }
.campo-buscar { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px; border-radius: 999px;
  background: var(--sup-2); border: 1px solid rgba(255,255,255,0.1); color: var(--texto-4); }
.campo-buscar:focus-within { border-color: rgba(227,6,19,0.6); }
.campo-buscar input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--texto); font: inherit; font-size: 16px; }
.selector { min-height: 46px; padding: 0 38px 0 16px; border-radius: 999px; background: var(--sup-2); border: 1px solid rgba(255,255,255,0.1);
  color: var(--texto-2); font: inherit; font-size: 14px; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A9A5A0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
@media (min-width: 900px) {
  .filtros { position: sticky; top: 0; flex-direction: row; align-items: center; justify-content: space-between; padding-top: 18px; padding-bottom: 18px; }
  .filtros-derecha { flex-wrap: nowrap; }
  .filtros-derecha .campo-buscar { flex: none; }
  .filtros-derecha .selector { flex: none; }
  .chips { margin: 0; padding: 0; }
  .campo-buscar { width: 320px; flex: none; }
  .filtros-derecha .selector { max-width: 240px; }
  .campo-buscar input { font-size: 14px; }
}

/* ---------- Tarjetas ---------- */
.galeria { padding: 24px var(--gutter) 0; display: flex; flex-direction: column; gap: 20px; }
.rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 700px) { .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 1100px) { .rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .galeria { padding-top: 56px; gap: 32px; } }

.tarjeta { position: relative; display: flex; flex-direction: column; background: var(--sup-2); border: 1px solid var(--linea);
  border-radius: var(--radio); overflow: hidden; transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .35s; }
.tarjeta:hover { transform: translateY(-6px); border-color: rgba(227,6,19,0.45); box-shadow: 0 40px 90px -40px rgba(227,6,19,0.45); }
.tarjeta-portada { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #111; }
.tarjeta-portada > img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.tarjeta:hover .tarjeta-portada > img { transform: scale(1.04); }
.tarjeta-portada::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(12,12,13,0.95)); pointer-events: none; }
.tarjeta-portada .pills { position: absolute; top: 14px; left: 14px; z-index: 1; display: flex; gap: 8px; }
.tarjeta-cuerpo { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tarjeta h3 { margin: 0; font-size: 24px; line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; }
.tarjeta p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--texto-3);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta-pie { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; color: var(--texto-4); font-family: var(--mono); font-size: 12px; }
.tarjeta-pie svg { color: var(--rojo); transition: transform .3s; }
.tarjeta:hover .tarjeta-pie svg { transform: translateX(4px); }
.tarjeta .enlace-total { position: absolute; inset: 0; z-index: 2; }
@media (min-width: 900px) { .tarjeta-cuerpo { padding: 22px 24px 24px; gap: 10px; } .tarjeta h3 { font-size: 26px; } }

/* Portada generada (sin captura): tipografía + isotipo sobre halo rojo */
.portada-generada { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 20px;
  background: radial-gradient(120% 90% at 80% 0%, color-mix(in srgb, var(--acento, #E30613) 30%, transparent), #0E0E0F 60%); }
.portada-generada::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 28px 28px; }
.portada-generada img { position: absolute; right: -30px; top: -20px; width: 46%; opacity: 0.18; }
.portada-generada span { position: relative; font-size: clamp(34px, 9vw, 60px); font-weight: 900; letter-spacing: -0.06em; line-height: 0.88;
  text-transform: uppercase; color: rgba(243,241,238,0.92); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Tarjeta destacada: en escritorio, imagen en marco de navegador + texto */
.destacada { border-color: rgba(227,6,19,0.35); box-shadow: 0 40px 120px -40px rgba(227,6,19,0.35); }
.destacada h3 { font-size: 34px; font-weight: 900; text-transform: uppercase; letter-spacing: -0.045em; line-height: .95; }
.destacada .cliente { font-size: 15px; color: var(--texto-3); }
.destacada .acciones { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.destacada .btn { position: relative; z-index: 3; }
/* En móvil la destacada usa la captura a sangre, sin marco de navegador */
@media (max-width: 899px) {
  .destacada .marco-navegador { height: 100%; border: 0; border-radius: 0; box-shadow: none; }
  .destacada .marco-navegador .barra { display: none; }
}
@media (min-width: 900px) {
  .destacada { flex-direction: row; min-height: 440px; }
  .destacada .tarjeta-portada { flex: 1.35; aspect-ratio: auto; }
  .destacada .tarjeta-portada::after { display: none; }
  .destacada .marco-navegador { position: absolute; inset: 44px 0 0 44px; border-radius: 12px 0 0 0; }
  .destacada .tarjeta-cuerpo { flex: 1; padding: 48px; gap: 16px; justify-content: center; }
  .destacada h3 { font-size: 56px; }
  .destacada p { font-size: 17px; color: var(--texto-2); -webkit-line-clamp: 4; }
  .destacada .acciones { padding-top: 22px; border-top: 1px solid var(--linea); }
}

/* EVOLUTIVO: v1.1.0 — con 3 prototipos o menos todos van en formato grande y se alternan */
.destacada .acciones .meta-formatos { display: none; }
@media (min-width: 900px) {
  .destacada .acciones .meta-formatos { display: inline; }
  .destacada.invertida { flex-direction: row-reverse; }
  .destacada.invertida .marco-navegador { inset: 44px 44px 0 0; border-radius: 0 12px 0 0; }
  .destacada.invertida .tarjeta-portada .pills { left: auto; right: 14px; }
}
.galeria-editorial { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 900px) { .galeria-editorial { gap: 32px; } }

/* Marco de navegador reutilizable */
.marco-navegador { overflow: hidden; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; background: #19191A;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6); display: flex; flex-direction: column; }
.marco-navegador .barra { height: 30px; flex-shrink: 0; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #19191A; }
.marco-navegador .barra i { width: 8px; height: 8px; border-radius: 50%; background: #3A3A3C; }
.marco-navegador .barra .url { margin-left: 12px; font-family: var(--mono); font-size: 11px; color: var(--texto-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marco-navegador .lienzo { position: relative; flex: 1; overflow: hidden; background: #111; }
.marco-navegador .lienzo > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Estado vacío */
.vacio { padding: 72px 24px; text-align: center; border: 1px dashed rgba(255,255,255,0.12); border-radius: var(--radio);
  display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--texto-3); }
.vacio img { width: 72px; opacity: .6; }
.vacio h3 { margin: 0; font-size: 22px; color: var(--texto); font-weight: 800; }

/* Esqueletos de carga */
.esqueleto { background: linear-gradient(90deg, #0E0E0F 0%, #161617 50%, #0E0E0F 100%); background-size: 200% 100%; animation: brillo 1.4s infinite; border-radius: var(--radio); }
@keyframes brillo { to { background-position: -200% 0; } }

/* ---------- Pie ---------- */
.pie { position: relative; margin-top: 72px; padding: 48px var(--gutter) 28px; border-top: 1px solid rgba(255,255,255,0.06);
  background: radial-gradient(60% 120% at 50% 100%, rgba(227,6,19,0.14), transparent 70%); }
.pie-cta { display: flex; flex-direction: column; gap: 22px; }
.pie h2 { font-size: clamp(36px, 7vw, 72px); }
.pie-legal { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; margin-top: 48px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.06); font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--texto-4); text-transform: uppercase; }
@media (min-width: 900px) {
  .pie { margin-top: 120px; padding-top: 88px; padding-bottom: 40px; }
  .pie-cta { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .pie-legal { flex-direction: row; justify-content: space-between; margin-top: 80px; font-size: 12px; }
}

/* EVOLUTIVO: v1.1.3 — acceso discreto al panel en el pie */
.pie-meta { display: inline-flex; align-items: center; gap: 16px; }
/* EVOLUTIVO: v1.2.1 — separador visible entre «Área privada» y la versión */
.pie-sep { width: 1px; height: 14px; background: rgba(255,255,255,0.16); }
/* EVOLUTIVO: v1.2.1 — «Área privada» en la barra superior: discreto, con candado; en móvil solo el icono */
.area-privada { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px;
  padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); color: var(--texto-3); font-size: 13px; font-weight: 600; transition: color .2s, border-color .2s; }
.area-privada:hover, .area-privada:focus-visible { color: var(--texto); border-color: var(--rojo); }
.area-privada span { display: none; }
@media (min-width: 900px) { .area-privada { padding: 0 16px; } .area-privada span { display: inline; } }
.acceso-equipo { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--texto-4); transition: color .2s; }
.acceso-equipo:hover, .acceso-equipo:focus-visible { color: var(--rojo); }

/* ---------- Ficha ---------- */
.ficha-hero { position: relative; padding: 24px var(--gutter) 36px; display: grid; gap: 32px; align-items: center; }
.ficha-hero .texto { display: flex; flex-direction: column; gap: 16px; position: relative; z-index: 1; }
.ficha-hero h1 { font-size: clamp(46px, 13vw, 96px); overflow-wrap: anywhere; }
.ficha-hero .cliente { margin: 0; font-size: 15px; color: var(--texto-3); }
.ficha-hero .cliente strong { color: var(--texto); font-weight: 600; }
.ficha-hero .resumen { margin: 0; max-width: 560px; font-size: 17px; line-height: 1.6; color: var(--texto-2); text-wrap: pretty; }
.ficha-hero .acciones { display: none; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.meta-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; border-top: 1px solid var(--linea); }
.meta-cifras div { padding: 14px 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.meta-cifras b { font-size: 16px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.meta-cifras div + div { padding-left: 12px; }
.meta-cifras .etiqueta-mono { letter-spacing: 0.08em; }
@media (min-width: 900px) { .meta-cifras .etiqueta-mono { letter-spacing: 0.16em; } }
.ficha-visual { position: relative; }
.ficha-visual .marco-navegador { aspect-ratio: 16 / 10.8; box-shadow: 0 50px 120px -30px rgba(0,0,0,0.9), 0 0 0 8px rgba(255,255,255,0.02); }
@media (min-width: 900px) {
  .ficha-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; padding-top: 80px; padding-bottom: 88px; }
  .ficha-hero .texto { gap: 24px; }
  .ficha-hero .resumen { font-size: 19px; }
  .ficha-hero .acciones { display: flex; }
  .meta-cifras b { font-size: 26px; }
}
/* CORRECTIVO: v1.1.2 — el icono no se encoge cuando el texto ocupa varias líneas en móvil */
.aviso-privado svg { flex-shrink: 0; }
.aviso-privado { display: flex; align-items: center; gap: 10px; margin: 16px var(--gutter) 0; padding: 12px 16px; border-radius: 12px;
  background: rgba(233,162,59,0.08); border: 1px solid rgba(233,162,59,0.3); color: #F2C27A; font-size: 13px; }

.pestanas { position: sticky; top: 0; z-index: 6; display: flex; gap: 24px; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none;
  background: rgba(5,5,5,0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--linea); }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a { flex-shrink: 0; padding: 16px 0; font-size: 15px; font-weight: 600; color: var(--texto-4); border-bottom: 2px solid transparent; transition: color .2s; }
.pestanas a:hover { color: var(--texto-2); }
.pestanas a.activa { color: var(--texto); font-weight: 700; border-bottom-color: var(--rojo); }
@media (min-width: 900px) { .pestanas { gap: 36px; } .pestanas a { padding: 18px 0; } }

.seccion { padding: 32px var(--gutter) 0; display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 60px; }
.seccion-cab { display: flex; flex-direction: column; gap: 14px; }
.seccion-cab h2 { font-size: clamp(28px, 6vw, 40px); letter-spacing: -0.04em; }
@media (min-width: 900px) {
  .seccion { padding-top: 88px; gap: 20px; }
  .seccion-cab { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
.seccion-cab .titulos { display: flex; flex-direction: column; gap: 8px; }
.herramientas { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.conmutador { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--sup-2); border: 1px solid rgba(255,255,255,0.1); }
.conmutador button { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: none;
  font-size: 13px; font-weight: 600; color: var(--texto-3); transition: background .2s, color .2s; }
.conmutador button[aria-pressed="true"] { background: var(--texto); color: var(--fondo); font-weight: 700; }
.conmutador.rojo button[aria-pressed="true"] { background: var(--rojo); color: #fff; }

/* Prototipo embebido */
.embebido { border-radius: var(--radio); overflow: hidden; border: 1px solid rgba(255,255,255,0.1); background: var(--sup-2); }
.embebido .barra { height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.embebido .barra i { width: 8px; height: 8px; border-radius: 50%; background: #3A3A3C; }
.embebido .barra .url { margin-left: 16px; flex: 1; max-width: 460px; padding: 6px 14px; border-radius: 8px; background: var(--fondo);
  font-family: var(--mono); font-size: 12px; color: var(--texto-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.embebido .barra .aviso { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--texto-4); letter-spacing: 0.1em; }
.escenario { position: relative; height: 760px; max-height: 80vh; background: #111; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.escenario.movil { background-color: var(--fondo); background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px); background-size: 22px 22px; }
/* EVOLUTIVO: v1.2.3/v1.2.4 — cada prototipo se muestra con el color de SU diseño (campo `tema`).
   El servidor reescribe las consultas `prefers-color-scheme` del HTML/CSS/JS (src/servicios/tema.js);
   el `color-scheme` en línea del iframe solo ajusta el lienzo por defecto del marco. */
.escenario > iframe.escritorio { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
/* Teléfono: 390×844 escalado por JS para que quepa en el escenario */
.telefono { position: relative; width: 414px; height: 868px; flex-shrink: 0; border-radius: 56px; background: #0E0E0F; padding: 12px;
  border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 60px 140px -30px #000, inset 0 0 0 2px rgba(255,255,255,0.04); transform-origin: center center; }
.telefono iframe { width: 390px; height: 844px; border: 0; border-radius: 44px; background: #fff; display: block; }
.escenario .halo-escenario { position: absolute; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(227,6,19,0.18), transparent 65%); pointer-events: none; }
.escenario .medida { position: absolute; bottom: 14px; font-family: var(--mono); font-size: 11px; color: var(--texto-4); letter-spacing: 0.12em; }

/* CTA para abrir en teléfono (en móvil no se incrusta el iframe: atraparía el scroll) */
.abrir-movil { display: flex; flex-direction: column; gap: 16px; }
.abrir-movil .marco-navegador { aspect-ratio: 16 / 10.8; }

/* ---------- Visor PDF ---------- */
.visor-pdf { position: relative; display: flex; border-radius: var(--radio); overflow: hidden; border: 1px solid rgba(255,255,255,0.1); background: var(--sup-2); height: 78vh; min-height: 460px; max-height: 900px; }
.visor-pdf.completa { position: fixed; inset: 0; z-index: 100; height: auto; max-height: none; border-radius: 0; border: 0; }
.visor-miniaturas { display: none; width: 170px; flex-shrink: 0; overflow-y: auto; padding: 16px; border-right: 1px solid rgba(255,255,255,0.06); background: var(--sup-1); scrollbar-width: thin; scrollbar-color: #2A2A2C transparent; }
.visor-miniaturas button { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 0; margin-bottom: 14px; border: 0; background: none; }
.visor-miniaturas .mini { width: 100%; border-radius: 6px; overflow: hidden; border: 2px solid transparent; background: #1A1A1B; min-height: 60px; }
.visor-miniaturas canvas { width: 100%; height: auto; display: block; }
.visor-miniaturas span { font-family: var(--mono); font-size: 11px; color: var(--texto-4); text-align: center; }
.visor-miniaturas button[aria-current="true"] .mini { border-color: var(--rojo); }
.visor-miniaturas button[aria-current="true"] span { color: var(--texto); }
.visor-principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* CORRECTIVO: v1.0.0 — barra arriba también en móvil: abajo quedaba tapada por la barra de acción fija */
.visor-barra { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.08); background: var(--sup-2); }
.visor-barra .grupo { display: flex; align-items: center; gap: 8px; }
.visor-barra .zoom { display: none; }
.visor-barra .pagina { font-family: var(--mono); font-size: 14px; color: var(--texto-4); display: flex; align-items: center; gap: 6px; }
.visor-barra .pagina input { width: 48px; min-height: 36px; text-align: center; border-radius: 8px; background: var(--fondo); border: 1px solid rgba(255,255,255,0.1); color: var(--texto); font: inherit; font-size: 14px; }
.visor-barra .nivel { font-family: var(--mono); font-size: 13px; color: var(--texto-2); width: 56px; text-align: center; }
.visor-paginas { flex: 1; overflow: auto; background: var(--sup-3); padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 14px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.visor-paginas .pag { position: relative; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,0.55); flex-shrink: 0; }
.visor-paginas .pag canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.visor-paginas .pag .num { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 6px; background: rgba(5,5,5,0.7); font-family: var(--mono); font-size: 11px; color: #fff; opacity: 0; transition: opacity .2s; }
.visor-paginas .pag:hover .num { opacity: 1; }
.visor-estado { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; color: var(--texto-3); font-size: 14px; pointer-events: none; }
.girando { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.1); border-top-color: var(--rojo); animation: girar .8s linear infinite; }
@media (min-width: 900px) {
  .visor-miniaturas { display: block; }
  .visor-barra { padding: 12px 18px; }
  .visor-barra .zoom { display: flex; }
  .visor-paginas { padding: 36px; gap: 28px; }
}

/* ---------- Sobre el proyecto / ficheros ---------- */
.proyecto { display: grid; gap: 40px; }
.proyecto .descripcion { margin: 0; font-size: 17px; line-height: 1.75; color: var(--texto-2); white-space: pre-line; text-wrap: pretty; }
.proyecto .etiquetas { display: flex; gap: 8px; flex-wrap: wrap; }
.lista-ficheros { display: flex; flex-direction: column; gap: 10px; }
.fichero { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--sup-2); border: 1px solid var(--linea); transition: border-color .2s; min-width: 0; }
.fichero:hover { border-color: rgba(227,6,19,0.45); }
.fichero .ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: rgba(227,6,19,0.12); color: var(--rojo); display: flex; align-items: center; justify-content: center; }
.fichero .datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fichero .datos b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fichero .datos span { font-family: var(--mono); font-size: 11px; color: var(--texto-4); }
.fichero > svg { color: var(--texto-3); flex-shrink: 0; }
details.todos summary { cursor: pointer; font-size: 14px; color: var(--texto-3); padding: 8px 0; list-style: none; }
details.todos summary::-webkit-details-marker { display: none; }
details.todos summary:hover { color: var(--texto); }
@media (min-width: 900px) { .proyecto { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 64px; } .proyecto .descripcion { font-size: 18px; } }

/* Barra de acción fija en móvil */
.barra-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; gap: 10px;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, var(--fondo) 35%); }
.barra-movil .btn { flex: 1; min-height: 54px; font-size: 16px; }
.barra-movil .icono-btn { width: 54px; height: 54px; background: var(--sup-2); }
@media (min-width: 900px) { .barra-movil { display: none; } }
.espaciador-movil { height: 96px; }
@media (min-width: 900px) { .espaciador-movil { display: none; } }

/* ---------- Visor inmersivo (capa a pantalla completa) ---------- */
.inmersivo { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: var(--fondo); animation: aparecer .25s ease-out; }
@keyframes aparecer { from { opacity: 0; } }
.inmersivo-barra { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 60px;
  padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top)); border-bottom: 1px solid var(--linea); background: var(--sup-1); }
.inmersivo-barra .izq { display: flex; align-items: center; gap: 12px; min-width: 0; }
.inmersivo-barra .izq img { width: 26px; height: 26px; display: none; }
.inmersivo-barra .izq b { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inmersivo-barra .izq .etiqueta-mono { display: none; }
.inmersivo-barra .der { display: flex; align-items: center; gap: 8px; }
.inmersivo .conmutador { display: none; }
.inmersivo .escenario { flex: 1; height: auto; max-height: none; }
@media (min-width: 900px) {
  .inmersivo-barra { padding-left: 20px; padding-right: 20px; }
  .inmersivo-barra .izq img, .inmersivo-barra .izq .etiqueta-mono { display: block; }
  .inmersivo .conmutador { display: inline-flex; }
}

/* ---------- Avisos flotantes ---------- */
.avisos { position: fixed; z-index: 500; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 32px)); }
.aviso { padding: 14px 18px; border-radius: 14px; background: #1A1A1B; border: 1px solid rgba(255,255,255,0.12); font-size: 14px; box-shadow: 0 20px 50px rgba(0,0,0,0.6); animation: revelar .3s ease-out; }
.aviso.error { border-color: rgba(227,6,19,0.6); }
.aviso.ok { border-color: rgba(76,195,138,0.5); }

/* ---------- Campos de formulario (compartidos: panel y ventana Compartir) ---------- */
/* EVOLUTIVO: v1.2.0 — movidos desde admin.css para usarlos también en la ficha */
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* CORRECTIVO: v1.1.4 — excluye el contenedor del ojo, que también es un <span> hijo del label */
.campo > span:not(.campo-clave) { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--texto-4); text-transform: uppercase; }
.campo input, .campo textarea, .campo select {
  width: 100%; min-height: 46px; padding: 11px 14px; border-radius: 10px; background: var(--fondo); border: 1px solid rgba(255,255,255,0.12);
  color: var(--texto); font: inherit; font-size: 16px; }
.campo textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: 0; border-color: rgba(227,6,19,0.7); }
.campo input[type="color"] { padding: 4px; height: 46px; cursor: pointer; }
.campo .ayuda { font-size: 12px; color: var(--texto-4); }
.dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .campo input, .campo textarea, .campo select { font-size: 14px; } }


/* ---------- Ventana modal «Compartir» (EVOLUTIVO: v1.2.0) ---------- */
.modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: aparecer .2s ease-out; }
.modal-caja { width: 100%; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 16px;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); background: var(--sup-1); border: 1px solid var(--linea);
  border-radius: 22px 22px 0 0; box-shadow: 0 -30px 80px rgba(0,0,0,0.6); }
@media (min-width: 700px) {
  .modal { align-items: center; padding: 24px; }
  .modal-caja { max-width: 540px; border-radius: 22px; padding: 28px; }
}
.modal-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.modal-cab h2 { margin: 4px 0 0; font-size: 24px; font-weight: 900; letter-spacing: -0.03em; text-transform: uppercase; line-height: 1.05; }
.modal-ayuda { margin: 0; font-size: 14px; line-height: 1.55; color: var(--texto-3); }
.compartir-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 700px) { .compartir-form { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .compartir-form .btn { grid-column: 1 / -1; } }
.compartir-exito { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px; background: rgba(76,195,138,0.08); border: 1px solid rgba(76,195,138,0.35); }
.compartir-exito .etiqueta-mono { color: var(--e-produccion); }
.compartir-exito code { font-family: var(--mono); font-size: 13px; color: var(--texto); overflow-wrap: anywhere; }
.compartir-exito .acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.compartir-lista { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--linea); }
.compartir-vacio { margin: 0; font-size: 14px; color: var(--texto-4); text-align: center; padding: 8px 0; }
.enlace-fila { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 12px; background: var(--sup-2); border: 1px solid var(--linea); }
.enlace-fila .datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.enlace-fila .datos b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enlace-fila .datos span { font-family: var(--mono); font-size: 11px; color: var(--texto-4); }
.enlace-fila.caducado { opacity: .55; }
.enlace-fila .icono-btn { width: 44px; height: 44px; }
.icono-btn.peligro:hover { border-color: var(--rojo); color: #FF6B6B; }
.icono-btn[disabled] { opacity: .4; pointer-events: none; }

/* ---------- 404 ---------- */
.pagina-404 { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px; text-align: center; position: relative; overflow: hidden; }
.pagina-404 h1 { font-size: clamp(90px, 25vw, 220px); }
.pagina-404 p { margin: 0; color: var(--texto-3); font-size: 18px; }