/* Layout: landing corporativa de la submarca (una columna ancha, secciones con aire) + al final dos bloques internos: cómo entra en el home de Promtdea y lo que hay que decidir. Marca: violeta Promtdea, punto lima, sobriedad de consultora. */
:root {
  --bg: #0C0B12; --surface: #15131F; --surface-2: #1C1929; --line: #2A2639;
  --fg: #F1EFF7; --muted: #A49FB6; --accent: #A78BFA; --accent-solid: #6D28D9; --on-accent: #FFFFFF;
  --lime: #C6FF3D; --on-lime: #18220A; --warn: #F5C451;
  --display: "Jost", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --bg: #FBFAFD; --surface: #FFFFFF; --surface-2: #F3F1F9; --line: #E3DFEE;
  --fg: #16131F; --muted: #5D586E; --accent: #6D28D9; --accent-solid: #6D28D9; --on-accent: #FFFFFF;
  --lime: #C6FF3D; --on-lime: #18220A; --warn: #9A6200; color-scheme: light; } }
:root[data-theme="light"] {
  --bg: #FBFAFD; --surface: #FFFFFF; --surface-2: #F3F1F9; --line: #E3DFEE;
  --fg: #16131F; --muted: #5D586E; --accent: #6D28D9; --accent-solid: #6D28D9; --on-accent: #FFFFFF;
  --lime: #C6FF3D; --on-lime: #18220A; --warn: #9A6200; color-scheme: light; }

* { box-sizing: border-box; }
body { background: var(--bg); color: var(--fg); font: 400 16px/1.6 var(--body); margin: 0; }
.wrap { max-width: 1160px; margin: 0 auto; padding-inline: 20px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.08; text-wrap: balance; margin: 0; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); font-weight: 600; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); font-weight: 600; }
h3 { font-size: 1.25rem; font-weight: 600; }
p { margin: 0; }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 62ch; }
.etq { font: 500 .76rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 6px; }
section { padding-block: clamp(56px, 8vw, 104px); }
section + section { border-top: 1px solid var(--line); }
.cab { display: grid; gap: 14px; margin-bottom: 40px; max-width: 760px; }

/* marca: «by promt·dea» */
.marca { display: inline-flex; align-items: baseline; gap: .38em; text-decoration: none; color: var(--fg); }
.marca .by { font: 500 .95rem/1 var(--mono); color: var(--muted); letter-spacing: .02em; }
.marca .pd { font: 600 1.45rem/1 var(--display); letter-spacing: -0.02em; display: inline-flex; align-items: baseline; }
.marca .pd i { display: inline-block; width: .3em; height: .3em; border-radius: 50%; background: var(--lime); margin: 0 .05em; transform: translateY(-.58em); }

.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 20px; padding-block: 14px; flex-wrap: wrap; }
.nav { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }
.nav a { color: var(--muted); text-decoration: none; font-size: .92rem; }
.nav a:hover { color: var(--fg); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 10px; font: 600 .96rem/1 var(--body); text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.btn.prim { background: var(--accent-solid); color: var(--on-accent); }
.btn.sec { border-color: var(--line); color: var(--fg); background: transparent; }
.btn.lima { background: var(--lime); color: var(--on-lime); }

/* héroe */
.hero { padding-block: clamp(56px, 8vw, 96px); }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.hero-grid > * { min-width: 0; }
.hero h1 b { font-weight: 600; color: var(--accent); }
.paises { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.pais { font: 500 .8rem/1 var(--mono); padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

/* tablero de proyecto (detalle propio del oficio: fases, semanas, entregables) */
.proyecto { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.proyecto .pc { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.proyecto .pc b { font-family: var(--display); font-size: 1.05rem; }
.proyecto .pc span { font: 400 .78rem var(--mono); color: var(--muted); }
.fases { list-style: none; margin: 0; padding: 8px 0; }
.fases li { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 11px 20px; font-size: .93rem; }
.fases .p { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); }
.fases .hecho .p { background: var(--accent); border-color: var(--accent); }
.fases .ya .p { background: var(--lime); border-color: var(--lime); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lime) 25%, transparent); }
.fases .ya { background: var(--surface-2); }
.fases small { font: 400 .76rem var(--mono); color: var(--muted); }
.proyecto .pie { padding: 14px 20px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.proyecto .pie div { display: grid; gap: 2px; }
.proyecto .pie b { font: 500 1.05rem var(--mono); }
.proyecto .pie span { font-size: .74rem; color: var(--muted); }

/* respaldo */
.respaldo { padding-block: 28px; }
.respaldo .wrap { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: .92rem; }
.respaldo b { color: var(--fg); font-weight: 600; }

/* servicios */
.servicios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.serv { background: var(--bg); padding: 28px 24px; display: grid; gap: 12px; align-content: start; }
.serv .num { font: 500 .78rem var(--mono); color: var(--accent); }
.serv p { color: var(--muted); font-size: .95rem; }
.serv ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: .9rem; }
.serv ul li::marker { color: var(--accent); }

/* proceso */
.proceso { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: f; }
.fase { border-top: 2px solid var(--accent); padding-top: 16px; display: grid; gap: 8px; align-content: start; }
.fase:last-child { border-top-color: var(--lime); }
.fase .t { font: 500 .78rem var(--mono); color: var(--muted); }
.fase p { color: var(--muted); font-size: .92rem; }

/* modelos */
.modelos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.modelo { border: 1px solid var(--line); border-radius: 14px; padding: 22px 20px; display: flex; flex-direction: column; gap: 12px; background: var(--surface); min-width: 0; }
.modelo.dest { border-color: var(--accent); }
.modelo .precio { font: 600 1.6rem/1.1 var(--display); }
.modelo .precio small { font: 400 .82rem var(--body); color: var(--muted); }
.modelo p { color: var(--muted); font-size: .92rem; }
.modelo ul { margin: 0; padding-left: 18px; font-size: .88rem; display: grid; gap: 4px; }
.nota { color: var(--muted); font-size: .84rem; margin-top: 16px; }

/* países */
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dos > * { min-width: 0; }
.pais-card { border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px; display: grid; gap: 14px; }
.pais-card dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: .92rem; }
.pais-card dt { color: var(--muted); font: 500 .76rem/1.8 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.pais-card dd { margin: 0; }

/* formación */
.formacion { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.curso { border: 1px solid var(--line); border-radius: 14px; padding: 22px 20px; display: grid; gap: 10px; align-content: start; }
.curso .d { font: 500 .78rem var(--mono); color: var(--accent); }
.curso p { color: var(--muted); font-size: .92rem; }

/* contacto */
.contacto { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: start; }
.contacto > * { min-width: 0; }
.correo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.correo code { font: 500 1rem var(--mono); background: var(--surface-2); border: 1px solid var(--line); padding: 10px 14px; border-radius: 10px; user-select: all; }
form { display: grid; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
label { display: grid; gap: 6px; font-size: .86rem; color: var(--muted); }
input, select, textarea { font: 400 .95rem var(--body); color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; min-height: 44px; width: 100%; }
textarea { min-height: 96px; resize: vertical; }
.ok { color: var(--lime); font-size: .9rem; min-height: 1.4em; }

/* bloques internos */
.interno { background: var(--surface); }
.interno .etq { color: var(--warn); }
.home-mock { border: 1px dashed var(--line); border-radius: 16px; padding: 24px; display: grid; gap: 16px; background: var(--bg); }
.home-mock .cab-m { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.home-mock .cab-m b { font-family: var(--display); font-size: 1.3rem; }
.home-mock .cab-m span { font: 400 .8rem var(--mono); color: var(--muted); }
.campos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.campo { border: 1px solid var(--line); border-radius: 12px; padding: 18px; display: grid; gap: 6px; text-decoration: none; color: var(--fg); background: var(--surface); }
.campo:hover { border-color: var(--accent); }
.campo b { font-family: var(--display); font-size: 1.1rem; }
.campo span { color: var(--muted); font-size: .88rem; }
.campo em { font: 500 .76rem var(--mono); color: var(--accent); font-style: normal; }
.decidir { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 8px; }
.decidir > * { min-width: 0; }
.decidir ol, .decidir ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--muted); font-size: .94rem; }
.decidir li b { color: var(--fg); }
.tabla { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 560px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 500 .74rem var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

footer { padding-block: 36px; border-top: 1px solid var(--line); color: var(--muted); font-size: .86rem; }
footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@media (max-width: 980px) {
  .servicios, .modelos, .formacion { grid-template-columns: 1fr 1fr; }
  .proceso { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 760px) {
  .hero-grid, .dos, .contacto, .decidir, .fila, .campos { grid-template-columns: 1fr; }
  .servicios, .modelos, .formacion, .proceso { grid-template-columns: 1fr; }
  .nav { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .fases .ya .p { animation: late 1.8s ease-in-out infinite; }
  @keyframes late { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--lime) 12%, transparent); } }
}

/* sitio publicado: tres países, idioma, aceptación y enlaces */
.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tres > * { min-width: 0; }
a { color: var(--accent); }
.idioma { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.idioma button { font: 600 .8rem/1 var(--body); border: 0; background: transparent; color: var(--muted); padding: 8px 11px; border-radius: 999px; cursor: pointer; min-height: 32px; }
.idioma button[aria-pressed="true"] { background: var(--accent-solid); color: var(--on-accent); }
.acepto { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; }
.acepto input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; flex: none; }
.ok.error { color: var(--warn); }
footer a { color: var(--muted); }
@media (max-width: 980px) { .tres { grid-template-columns: 1fr; } }
.pais-card{align-content:start}
.tema{font:600 .8rem/1 var(--body);border:1px solid var(--line);background:transparent;color:var(--fg);padding:10px 14px;border-radius:999px;cursor:pointer;min-height:36px;white-space:nowrap}
.tema:hover{border-color:var(--accent)}
@media (max-width:760px){ .top .wrap{gap:10px} .tema{padding:8px 10px} }
.top .wrap{flex-wrap:nowrap}
.nav{gap:16px}
.nav a{white-space:nowrap}
.top .btn.prim{white-space:nowrap;min-height:42px;padding:0 18px}
.nav{flex-wrap:nowrap}
@media (max-width:1500px){ .nav a[href="#paises"],.nav a[href="#contratar"]{display:none} }
@media (max-width:1060px){ .nav{display:none} .top .wrap{justify-content:space-between} }
@media (max-width:560px){ .top .btn.prim{display:none} }