/* ═══════════════════════════════════════════════════════════════════════════
   PMP · Portal 3D
   Hoja única. Es el diseño original, con las capas de parches sucesivas
   (V11, V16, V25, V26, V28, V30, V31) resueltas en una sola definición por
   componente en lugar de siete que se pisaban entre sí a golpe de !important.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --pink:#ed0a66;--purple:#6f2a96;--ink:#111319;--muted:#667085;--line:#e1e5ea;
  --soft:#f5f6f8;--dark:#090b10;--grad:linear-gradient(135deg,#6f2a96 0%,#ed0a66 100%);
  --shadow:0 24px 70px rgba(15,23,42,.16);
  /* Rosa sólo para texto: el #ed0a66 sobre blanco se queda en 4,34:1 y no
     llega al 4,5:1 que exige la norma europea de accesibilidad. */
  --pink-text:#c70857;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:var(--soft);color:var(--ink)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{text-decoration:none;color:inherit}
img{max-width:100%}
.hidden{display:none!important}
.screen{min-height:100vh}
.grow{flex:1}
.kicker{font-size:10px;letter-spacing:2.2px;font-weight:900;color:var(--pink-text)}
:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:400;background:#fff;color:#111;padding:12px 16px;border-radius:0 0 10px 0;font-weight:900}
.skip:focus{left:0}

/* ─── Conmutador de idioma ────────────────────────────────────────────────── */
.langSwitcher{position:fixed;right:16px;top:16px;z-index:220;display:flex;align-items:center;gap:4px;padding:5px;background:rgba(255,255,255,.96);border:1px solid rgba(17,19,25,.10);border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.langSwitcher a{min-width:34px;height:30px;border:0;border-radius:999px;background:transparent;color:#465065;font-size:10px;font-weight:900;letter-spacing:.6px;display:grid;place-items:center}
.langSwitcher a.active{background:var(--grad);color:#fff}
.langSwitcher span{font-size:9px;color:#a0a7b2}

/* ═══ LOGIN ═══════════════════════════════════════════════════════════════ */
#loginScreen{
 display:grid;grid-template-columns:1.12fr .88fr;min-height:100vh;
 background:radial-gradient(circle at 13% 18%,rgba(237,10,102,.19),transparent 28%),
 radial-gradient(circle at 88% 4%,rgba(111,42,150,.27),transparent 29%),
 linear-gradient(135deg,#080a0f,#111722 58%,#251326);
}
.loginLeft{padding:44px 52px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.loginLeft:after{content:"";position:absolute;width:540px;height:540px;border-radius:50%;right:-185px;bottom:-185px;border:1px solid rgba(255,255,255,.08);box-shadow:0 0 0 92px rgba(255,255,255,.025),0 0 0 184px rgba(255,255,255,.012)}
/* Sin la flecha blanca: el logo va limpio sobre el fondo oscuro. */
.loginMark{position:relative;z-index:2;width:fit-content;margin-top:2px}
.loginMark img{display:block;width:min(300px,52vw);height:auto;filter:drop-shadow(0 10px 26px rgba(0,0,0,.42))}
.loginCopy{position:relative;z-index:2;max-width:760px;margin-top:auto;margin-bottom:40px}
.loginCopy h1{font-size:58px;line-height:1.03;margin:14px 0 8px}
.brandByline{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:#f7f9fc}
.brandByline::before{content:"";width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,#ed0a66,#6f2a96);box-shadow:0 0 0 4px rgba(255,255,255,.06)}
.loginCopy p{font-size:17px;line-height:1.65;color:#dce1ea;max-width:680px}
.metrics{display:flex;flex-wrap:wrap;gap:10px;position:relative;z-index:2}
.metric{font-size:11px;padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.loginRight{background:#fff;display:flex;align-items:center;justify-content:center;padding:34px}
.loginCard{width:min(430px,100%)}
.loginCardBrand{display:flex;justify-content:center;margin:0 auto 22px}
.loginCardBrand img{display:block;width:min(320px,88%);height:auto}
.loginCard h2{font-size:30px;margin:0 0 6px}
.sub{font-size:14px;line-height:1.55;color:var(--muted);margin-bottom:20px}
.field{margin-bottom:13px}
.field label{display:block;font-size:12px;font-weight:900;margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;padding:14px;border:1px solid #b9c0ca;border-radius:12px;outline:0;background:#fff;color:var(--ink)}
/* El outline:0 de arriba tiene más especificidad que la regla global de
   :focus-visible, así que el anillo de foco no llegaba nunca a los campos:
   quedaba un halo del 10 % invisible. Se devuelve aquí, con la especificidad
   suficiente para ganar. */
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--pink)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,
.contactField input:focus-visible,.contactField textarea:focus-visible{
 outline:3px solid var(--pink);outline-offset:2px;border-color:var(--pink)}
.field .hint{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.45}
.field .bad{font-size:11px;color:#a4211a;font-weight:800;margin-top:5px;display:none}
.field.err input{border-color:#a4211a}
.field.err .bad{display:block}
.check{display:flex;gap:8px;align-items:flex-start;font-size:11px;color:#4c5665;line-height:1.45;margin:3px 0 13px}
.check input{margin-top:2px;width:16px;height:16px;flex:0 0 auto}
.check a{text-decoration:underline;color:var(--pink-text);font-weight:700}
.loginBtn{width:100%;padding:14px;border:0;border-radius:12px;background:var(--grad);color:#fff;font-weight:900;box-shadow:0 12px 28px rgba(237,10,102,.23)}
.loginBtn:disabled{opacity:.55;cursor:progress}
.loginLinks{display:flex;justify-content:space-between;margin-top:13px;gap:10px;flex-wrap:wrap}
.loginLinks a{border:0;background:none;padding:0;color:#3d4657;font-size:11px;font-weight:800;text-decoration:underline}
.error{display:none;margin-top:9px;color:#a4211a;font-size:12px;font-weight:800}
.error.show{display:block}
.notice{margin:0 0 16px;padding:12px 14px;border-radius:11px;font-size:12px;line-height:1.55;border:1px solid}
.notice.ok{background:#effaf3;border-color:#bfe3cb;color:#1d6b3a}
.notice.warn{background:#fff8ec;border-color:#f0dcb4;color:#7a5312}
.notice.bad{background:#fff4f3;border-color:#f0c4c0;color:#8c1d16}

/* ═══ CABECERA ════════════════════════════════════════════════════════════ */
/* El hueco de la derecha lo ocupa el conmutador ES/EN, que va fijo sobre la
   ventana. Sin esta reserva, el último botón de la barra queda debajo y no
   se puede pulsar. En móvil el conmutador baja al pie y no hace falta. */
.appHeader{height:72px;background:#090b10;color:#fff;display:flex;align-items:center;gap:13px;padding:0 118px 0 22px;position:sticky;top:0;z-index:30;box-shadow:0 7px 22px rgba(0,0,0,.14)}
.navBtn{padding:9px 11px;border-radius:9px;border:1px solid #454d5a;background:#141922;color:#fff;font-size:11px}
.navBtn:hover{border-color:#6d7686}
.contactBtn{border-color:rgba(237,10,102,.55);background:linear-gradient(135deg,rgba(111,42,150,.38),rgba(237,10,102,.32));font-weight:900;letter-spacing:.3px}
.userChip{font-size:11px;padding:9px 11px;border-radius:999px;background:#1a2029;border:1px solid #454d5a;color:#e7eaef}
/* Flecha blanca de cabecera: se mantiene, es la del diseño original. */
.headerBrandRibbon{height:70px;width:285px;display:flex;align-items:center;position:relative;margin-left:-18px;padding-left:22px;overflow:hidden;isolation:isolate;filter:drop-shadow(0 10px 20px rgba(0,0,0,.12))}
.headerBrandRibbon::before{content:"";position:absolute;inset:0;background:#fff;clip-path:polygon(0 0,88% 0,100% 50%,88% 100%,0 100%);z-index:-2}
.headerBrandRibbon::after{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:linear-gradient(180deg,#7b2bbd,#f00569);z-index:-1}
.headerBrandRibbon img{display:block;width:225px;max-height:54px;height:auto;object-fit:contain}

/* ═══ INSTRUCCIONES ═══════════════════════════════════════════════════════ */
#introScreen{background:#f5f6f8}
.introHero{padding:46px 28px 66px;color:#fff;background:radial-gradient(circle at 15% 12%,rgba(237,10,102,.19),transparent 25%),radial-gradient(circle at 86% 5%,rgba(111,42,150,.29),transparent 27%),linear-gradient(135deg,#0b1018,#171d29 60%,#271629)}
.introInner{max-width:1260px;margin:0 auto;display:grid;grid-template-columns:1.08fr .92fr;gap:30px;align-items:center}
.introInner h1{font-size:48px;line-height:1.04;margin:12px 0 15px}
.introInner p{font-size:16px;line-height:1.65;color:#dde3eb}
.introAction{margin-top:22px;padding:13px 18px;border:0;border-radius:12px;background:var(--grad);color:#fff;font-weight:900}
.visualCard{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);border-radius:24px;padding:22px;display:grid;gap:12px}
.visualLine{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:rgba(255,255,255,.06)}
.visualLine b{font-size:13px}
.visualLine .visualText{display:block;font-size:11px;color:#d5dbe5;margin-top:3px}
/* El número: en el original .visualLine span ganaba en especificidad a
   .visualNum y lo volvía un bloque de 11 px descolocado arriba a la
   izquierda. Con su propia regla y sin competencia queda centrado. */
.visualNum{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;font-weight:900;font-size:14px;line-height:1;margin:0;padding:0}
.introContent{max-width:1260px;margin:-30px auto 0;padding:0 28px 48px}
.stepsPanel{background:#fff;border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:var(--shadow)}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.step{border:1px solid var(--line);border-radius:17px;padding:16px}
.step .n{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;font-weight:900;font-size:13px;line-height:1;margin-bottom:11px}
.step h3{font-size:14px;margin:0 0 6px}
.step p{font-size:11px;line-height:1.5;color:var(--muted);margin:0}

/* ═══ CATÁLOGO ════════════════════════════════════════════════════════════ */
#catalogScreen{background:#f4f6f8}
.catalogHero{padding:38px 28px 54px;color:#fff;background:linear-gradient(135deg,#0c1118,#171e29 58%,#241525)}
.catalogInner{max-width:1260px;margin:0 auto}
.catalogInner h1{font-size:42px;margin:8px 0 10px}
.catalogInner p{max-width:900px;color:#dce2eb;line-height:1.65;font-size:16px}
.catalogContent{max-width:1260px;margin:-22px auto 0;padding:0 28px 50px}
.catalogPanel{background:#fff;border:1px solid var(--line);border-radius:26px;padding:24px;box-shadow:var(--shadow)}
.familyGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.familyCard{border:1px solid var(--line);border-radius:22px;padding:20px;background:linear-gradient(180deg,#fff,#fafbfc);position:relative;overflow:hidden}
.familyCard:after{content:"";position:absolute;width:190px;height:190px;right:-75px;top:-75px;border-radius:50%;background:radial-gradient(circle,rgba(237,10,102,.12),rgba(237,10,102,0) 68%)}
.familyTop{display:flex;align-items:flex-start;gap:14px;position:relative;z-index:1}
.familyIcon{flex:0 0 auto;width:56px;height:90px;border-radius:10px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;line-height:14px;font-weight:900;box-shadow:0 10px 24px rgba(111,42,150,.24)}
.familyCard h3{font-size:28px;margin:3px 0 7px}
.familySales{position:relative;z-index:1;margin:14px 0 2px;color:#535c6b;font-size:12px;line-height:1.55;min-height:56px}
.labelCard{border-color:#e6c8dc;background:linear-gradient(180deg,#fff,#fff7fb)}
.labelCard .familyIcon{font-size:10px;line-height:14px}
.statusOk{display:inline-block;font-size:10px;font-weight:900;padding:7px 9px;border-radius:999px;background:#eaf8ef;color:#1c6a39}
.formatGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:18px;position:relative;z-index:1}
.formatBtn{padding:10px;border-radius:10px;border:1px solid #cdd3db;background:#f5f7f9;color:#293244;font-weight:900;font-size:11px;text-align:left}
.formatBtn:hover{border-color:var(--pink);background:#fff8fb}
.formatBtn small{display:block;color:#68717f;font-size:9px;font-weight:600;margin-top:3px}
.catalogFooter{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:18px}
.mini{border:1px solid var(--line);border-radius:18px;padding:17px;background:#fff;min-height:136px}
.mini h4{margin:0 0 7px;font-size:18px}
.mini p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}

/* ═══ CONFIGURADOR ════════════════════════════════════════════════════════ */
#configScreen{background:#eef1f4}
.configGrid{height:calc(100vh - 72px);display:grid;grid-template-columns:minmax(650px,1fr) 400px}
.stage{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 20%,#fff 0,#fff 42%,#f4f5f5 73%,#e8eaeb 100%)}
.stage:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 18%,rgba(255,255,255,.96),rgba(255,255,255,0) 28%),radial-gradient(circle at 32% 28%,rgba(255,255,255,.84),rgba(255,255,255,0) 25%),radial-gradient(circle at 72% 28%,rgba(255,255,255,.84),rgba(255,255,255,0) 25%)}
#viewer{position:absolute;inset:0}
#viewer canvas{display:block;width:100%;height:100%}
.stageTitle{position:absolute;z-index:5;left:22px;top:24px;color:#101318;pointer-events:none}
.stageTitle h1{font-size:27px;margin:0}
.loader{position:absolute;z-index:20;left:50%;top:50%;transform:translate(-50%,-50%);padding:12px 15px;border-radius:10px;background:rgba(255,255,255,.96);color:#111;border:1px solid #cfd4dc;font-size:11px;display:none;box-shadow:0 12px 30px rgba(15,23,42,.12);max-width:70%;text-align:center;line-height:1.5}
.stageBrand{position:absolute;z-index:6;left:18px;bottom:18px;pointer-events:none}
.stageBrand img{display:block;width:165px;height:auto;filter:drop-shadow(0 5px 10px rgba(0,0,0,.16))}
.views{position:absolute;z-index:6;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.views button{padding:9px 12px;background:#fff;border:1px solid #b6bdc6;border-radius:5px;font-size:10px;color:#2b3340}
.views button.on{border:2px solid var(--pink);font-weight:900}
.panel{background:#fff;border-left:1px solid var(--line);padding:17px;overflow:auto}
.panel h2{font-size:17px;margin:5px 0 13px}
.card{border:1px solid var(--line);border-radius:9px;padding:12px;margin-bottom:10px}
.card h3{font-size:10px;margin:0 0 9px;letter-spacing:.5px}
.spec{display:flex;justify-content:space-between;gap:10px;font-size:10px;padding:5px 0;border-bottom:1px solid #eceff2}
.spec:last-child{border-bottom:0}
.spec span{color:#5f6875}
.full{width:100%;padding:11px;border-radius:7px;font-weight:900;margin-top:7px}
.dark{background:#111319;color:#fff;border:0}
.outline{background:#fff;border:1px solid #b8bfc8;color:var(--ink)}
.cta{background:var(--grad);color:#fff;border:0}
.full:disabled{opacity:.45;cursor:not-allowed}
.drop{min-height:90px;border:1.5px dashed #b3bac3;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;cursor:pointer;background:#fff}
.drop:hover,.drop.over{border-color:var(--pink);background:#fffafd}
.drop .up{font-size:23px;color:var(--pink-text);font-weight:900}
.drop strong{font-size:11px}
.drop small{font-size:9px;color:#5f6875}
.filename{font-size:10px;color:var(--purple);font-weight:800;margin-top:7px;word-break:break-all}
.ctrl{display:block;font-size:10px;color:#454e5c;margin:8px 0}
.ctrl input{width:100%}
.row{display:flex;gap:10px}
.row>div{flex:1;min-width:0}
select{width:100%;padding:8px;border:1px solid #b8bfc8;border-radius:5px;background:#fff;font-size:11px;color:var(--ink)}
.statusPill{font-size:10px;padding:7px 9px;border-radius:999px;background:#eef0f3;color:#59626f;font-weight:800;display:inline-block}
.statusPill.ready{background:#eaf8ef;color:#1c6a39}
.help{font-size:10px;color:#5c6673;line-height:1.45;margin-top:8px}

/* ═══ VENTANAS ════════════════════════════════════════════════════════════ */
.modal{position:fixed;inset:0;background:rgba(5,8,12,.78);z-index:80;display:none;align-items:center;justify-content:center;padding:16px}
.modal.show{display:flex}
.editorCard{width:min(1080px,94vw);max-height:92vh;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.38);display:grid;grid-template-rows:auto 1fr auto}
.modalHead{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.modalHead h3{margin:0;font-size:18px}
.modalHead p{margin:3px 0 0;color:var(--muted);font-size:11px}
.modalBody{padding:14px;overflow:auto;background:#f5f6f8}
.canvasWrap{max-width:820px;margin:0 auto;background:#fff;border-radius:12px;padding:12px;box-shadow:0 10px 30px rgba(18,24,36,.10)}
#editorCanvas{display:block;max-width:100%;width:auto;height:auto;max-height:50vh;margin:0 auto;border:1px solid #111;background:#fff}
.frontBack{display:flex;justify-content:space-around;font-weight:900;font-size:15px;padding-top:6px}
.editorTools{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.editorTools label{font-size:10px;color:#454e5c}
.editorTools input{width:100%}
.modalFoot{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap;background:#fff}
.modalFoot button{padding:10px 13px;border-radius:8px;font-weight:900}
#videoModal .editorCard{width:min(1160px,96vw);height:min(820px,94vh)}
.videoBody{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 20%,#fff 0,#f5f7f9 36%,#e5eaee 68%,#d6dde3 100%)}
#videoViewer{position:absolute;inset:0}
#videoViewer canvas{display:block;width:100%;height:100%}
.videoLabel{position:absolute;left:20px;top:18px;z-index:2;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.86);border:1px solid rgba(17,19,25,.12);font-size:10px;letter-spacing:1px;color:#111}
.recording{position:absolute;right:20px;top:18px;z-index:3;display:none;color:#fff;background:#a4211a;padding:7px 10px;border-radius:999px;font-size:10px;font-weight:900}
.videoFoot{padding:12px 16px;display:flex;gap:9px;justify-content:flex-end;border-top:1px solid #d9dde4;flex-wrap:wrap}
.videoFoot button{padding:10px 13px;border-radius:8px;font-weight:900}
.videoGhost{background:#fff;color:#111;border:1px solid #b8bfc8}
.videoPink{background:var(--grad);color:#fff;border:0}

/* Formulario grande (contacto y presupuesto) */
.contactCard{width:min(760px,95vw);max-height:92vh;overflow:auto;background:#fff;border-radius:22px;box-shadow:0 30px 90px rgba(0,0,0,.38)}
.contactHead{padding:22px 24px 16px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:14px}
.contactHead h3{font-size:28px;margin:4px 0 5px}
.contactHead p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.contactBody{padding:22px 24px 24px}
.contactGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contactField{display:flex;flex-direction:column;gap:6px}
.contactField.full{grid-column:1/-1}
.contactField label{font-size:10px;font-weight:900;letter-spacing:.5px;color:#333b48}
.contactField input,.contactField textarea{width:100%;border:1px solid #b9c0ca;border-radius:10px;padding:12px 13px;outline:none;background:#fff;color:#111}
.contactField textarea{min-height:130px;resize:vertical}
.contactField input:focus,.contactField textarea:focus{border-color:var(--pink)}
.contactActions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.contactActions button{padding:11px 16px;border-radius:9px;font-weight:900}
.contactPrivacy{margin-top:12px;font-size:10px;color:#666f7d;line-height:1.5}
.contactPrivacy a{text-decoration:underline}

#toast{position:fixed;z-index:120;right:15px;bottom:15px;background:#111;color:#fff;padding:11px 13px;border-radius:7px;font-size:11px;box-shadow:0 4px 18px rgba(0,0,0,.28);display:none;max-width:min(420px,88vw);line-height:1.5}

/* ═══ PÁGINAS AUXILIARES ══════════════════════════════════════════════════
   Verificación, recuperación, cuenta, legales y administración. Mismo
   lenguaje visual que el portal, en una columna. */
.plainWrap{min-height:100vh;display:flex;flex-direction:column;background:var(--soft)}
.plainMain{flex:1;width:100%;max-width:860px;margin:0 auto;padding:38px 24px 60px}
.plainNarrow{max-width:520px}
.plainCard{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:var(--shadow)}
.plainCard h1{font-size:30px;margin:6px 0 10px}
.plainCard h2{font-size:20px;margin:26px 0 10px}
.plainCard h3{font-size:15px;margin:20px 0 8px}
.plainCard p,.plainCard li{font-size:14px;line-height:1.7;color:#39414e}
.plainCard ul,.plainCard ol{padding-left:20px}
.plainCard a{color:var(--pink-text);text-decoration:underline}
.plainCard table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13px}
.plainCard th,.plainCard td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
.plainCard th{background:#f7f8fa;font-size:12px}
.plainHead{background:#090b10;color:#fff;padding:0 118px 0 22px;height:72px;display:flex;align-items:center;gap:12px}
.plainHead a.brand{display:flex;align-items:center}
.plainHead img{height:34px;width:auto;background:#fff;border-radius:6px;padding:4px 8px}
.siteFoot{background:#0b0e14;color:#aeb6c2;font-size:11px;line-height:1.7;padding:26px 22px}
.siteFootInner{max-width:1260px;margin:0 auto;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.siteFoot a{text-decoration:underline;color:#dfe4ec}
.siteFoot nav{display:flex;gap:14px;flex-wrap:wrap}

/* Aviso de cookies */
.cookieBar{position:fixed;left:0;right:0;bottom:0;z-index:200;background:#0b0e14;color:#e8ebf0;padding:16px 20px;box-shadow:0 -10px 30px rgba(0,0,0,.28)}
.cookieInner{max-width:1100px;margin:0 auto;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.cookieCopy{flex:1;min-width:260px}
.cookieInner p{margin:0;font-size:12px;line-height:1.6}
.cookieNow{margin-top:7px!important;font-size:11px;color:#9aa3b0}
.cookieWhen{color:#727c8a}
.cookieInner a{text-decoration:underline}
.cookieBtns{display:flex;gap:8px;flex-wrap:wrap}
.cookieBtns button{padding:11px 15px;border-radius:9px;font-weight:900;font-size:12px;border:1px solid #4a5262;background:#141922;color:#fff}
.cookieBtns button.acc{background:var(--grad);border:0}

/* Tablas del panel de administración */
.adminTable{width:100%;border-collapse:collapse;font-size:12px;background:#fff}
.adminTable th,.adminTable td{border-bottom:1px solid var(--line);padding:10px;text-align:left;vertical-align:top}
.adminTable th{background:#f7f8fa;font-size:11px;letter-spacing:.4px}
.adminTable tr:hover td{background:#fcfcfd}
.tag{display:inline-block;font-size:10px;font-weight:900;padding:4px 8px;border-radius:999px;background:#eef0f3;color:#59626f}
.tag.ok{background:#eaf8ef;color:#1c6a39}
.tag.wait{background:#fff8ec;color:#7a5312}
.tag.no{background:#fff4f3;color:#8c1d16}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.toolbar input,.toolbar select{padding:10px;border:1px solid #b9c0ca;border-radius:9px;font-size:13px}
.btn{display:inline-block;padding:11px 15px;border-radius:9px;font-weight:900;font-size:13px;border:1px solid #b8bfc8;background:#fff;color:var(--ink)}
.btn.cta{background:var(--grad);color:#fff;border:0}
.btn.dark{background:#111319;color:#fff;border:0}
/* Un botón dentro de .plainCard sigue siendo un botón: el subrayado de
   .plainCard a es para los enlaces del texto corrido, no para estos. */
.plainCard .btn{text-decoration:none}

/* ═══ ADAPTACIÓN A PANTALLAS PEQUEÑAS ═════════════════════════════════════ */
@media(max-width:1050px){
 #loginScreen,.introInner,.steps,.familyGrid,.catalogFooter,.configGrid{grid-template-columns:1fr}
 .loginLeft{min-height:48vh}
 .loginCopy h1{font-size:44px}
 .configGrid{height:auto}
 .stage{height:70vh;min-height:620px}
 .panel{border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:760px){
 .appHeader,.plainHead{height:auto;min-height:72px;padding:9px 10px;gap:7px;flex-wrap:wrap;align-content:center}
 .headerBrandRibbon{width:190px;height:58px;margin-left:-10px;padding-left:15px}
 .headerBrandRibbon img{width:145px}
 .appHeader .grow{display:none}
 .appHeader .navBtn{font-size:9px;padding:8px 9px}
 .contactBtn{margin-left:auto}
 .langSwitcher{right:10px;top:auto;bottom:10px}
 .loginLeft{padding:28px 20px 22px}
 .loginCopy{margin-bottom:18px}
 .loginCopy h1{font-size:40px}
 .loginCopy p{font-size:14px}
 .loginMark img{width:min(220px,60vw)}
 .metrics{gap:6px}
 .metric{font-size:9px;padding:7px 9px}
 .loginRight{padding:24px 18px 86px}
 .loginCard{width:100%}
 .introHero{padding:34px 18px 48px}
 .introInner h1{font-size:34px}
 .introInner p{font-size:14px}
 .introContent,.catalogContent{padding-left:18px;padding-right:18px}
 .visualCard{padding:15px}
 .visualLine{padding:11px}
 .steps{grid-template-columns:1fr 1fr}
 .step:last-child{grid-column:1/-1}
 .catalogHero{padding:32px 18px 54px}
 .catalogInner h1{font-size:34px}
 .catalogInner p{font-size:14px}
 .familyCard h3{font-size:24px}
 .configGrid{display:block;height:auto}
 .stage{height:58svh;min-height:430px}
 .panel{border-left:0;border-top:1px solid var(--line);padding:12px 12px 90px}
 .stageTitle{top:14px;left:14px}
 .stageTitle h1{font-size:22px}
 .stageBrand{left:10px;bottom:76px}
 .stageBrand img{width:112px}
 .views{bottom:10px;left:8px;right:8px;transform:none;width:auto;gap:5px}
 .views button{padding:7px 8px;font-size:8px;flex:0 0 auto}
 .row{gap:7px}
 .card{padding:11px}
 .full{padding:12px 10px}
 .editorCard{width:98vw;max-height:96svh;border-radius:14px}
 .modal{padding:6px;align-items:flex-end}
 .modalHead{padding:11px 12px}
 .modalBody{padding:8px}
 .modalFoot{padding:9px 10px}
 .editorTools{grid-template-columns:1fr 1fr}
 .videoBody{min-height:52svh}
 .videoFoot button{flex:1 1 180px}
 .contactCard{width:100%;max-height:94svh;border-radius:18px 18px 0 0}
 .contactHead{padding:18px 16px 13px}
 .contactHead h3{font-size:23px}
 .contactBody{padding:16px}
 .contactGrid{grid-template-columns:1fr}
 .contactField.full{grid-column:auto}
 .contactActions button{flex:1}
 .plainMain{padding:24px 16px 48px}
 .plainCard{padding:20px}
 .adminTable{font-size:11px}
 .adminTable th,.adminTable td{padding:7px}
}
@media(max-width:430px){
 .steps{grid-template-columns:1fr}
 .step:last-child{grid-column:auto}
 .formatGrid{grid-template-columns:1fr}
 .stage{height:54svh;min-height:390px}
 .views{max-height:78px;overflow:auto}
}

@media (prefers-reduced-motion:reduce){
 *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

@media print{
 .appHeader,.plainHead,.siteFoot,.cookieBar,.langSwitcher,.views,.panel{display:none!important}
}

/* ─── Pie dentro del portal ───────────────────────────────────────────────────
   El portal es una aplicación de tres pantallas sin recarga, así que el pie
   se repite en cada una. En el configurador no cabe una franja al fondo —la
   pantalla la ocupa entera el visor—, así que los enlaces van al final del
   panel lateral, que sí se desplaza. */
.panelLegal{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
 font-size:10px;line-height:1.9;color:var(--muted)}
.panelLegal a{text-decoration:underline;color:#3d4657}
.panelLegal a:hover{color:var(--pink-text)}