/* Propuesta A · "Editorial Nueva York" · Abogados COBA
   Inspiración: el diseño de los despachos de élite de EE. UU. (Paul, Weiss: blanco, azul marino,
   fotografía en blanco y negro, letra grotesca enorme, esquinas rectas) y la captación de los
   despachos de mayor volumen (Morgan & Morgan: formulario a la vista desde el primer segundo). */

:root {
  --blanco: #ffffff;
  --hueso: #f5f3ef;
  --tinta: #0d0d0d;
  --marino: #111111;
  --marino-2: #2b2b2b;
  --marino-osc: #0a0a0a;
  --acero: #D9B25F;
  --acero-2: #ECE6DA;
  --gris: #5c5852;
  --gris-claro: #8f897f;
  --rojo: #c8102e;
  --verde-wa: #15803d;
  --f-grotesca: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --suave: cubic-bezier(0.2, 0.7, 0.2, 1);
  --cab: 108px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--blanco); color: var(--tinta); font: 17px/1.6 var(--f-grotesca); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
svg { display: block; }
a { color: inherit; }
p, figure { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.03em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--marino-2); outline-offset: 3px; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.envoltura { width: min(1240px, 100% - 48px); margin-inline: auto; }
.saltar { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--marino); color: #fff; padding: 10px 16px; font-weight: 700; text-decoration: none; }
.saltar:focus { top: 12px; }

/* ── Botones y ligas ─────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 15px 26px; border: 1.5px solid transparent; font: 700 15.5px/1.1 var(--f-grotesca); letter-spacing: 0.01em; text-decoration: none; cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--suave); }
.btn .ico { width: 18px; height: 18px; transition: transform 0.3s var(--suave); }
.btn:hover .ico { transform: translateX(4px); }
.btn-marino { background: var(--marino); color: #fff; }
.btn-marino:hover { background: var(--marino-2); }
.btn-blanco { background: #fff; color: var(--marino); }
.btn-blanco:hover { background: var(--acero-2); }
.btn-wa { background: var(--verde-wa); color: #fff; }
.btn-wa:hover { background: #126c34; }
.btn-wa:hover .ico { transform: none; }
.btn-chico { min-height: 46px; padding: 12px 20px; font-size: 14.5px; }
.liga { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--marino); text-decoration: none; border-bottom: 1.5px solid var(--acero); padding-bottom: 4px; transition: border-color 0.25s; }
.liga:hover { border-color: var(--marino); }
.liga .ico { width: 18px; height: 18px; transition: transform 0.3s var(--suave); }
.liga:hover .ico { transform: translate(3px, -3px); }
.liga-urgente { color: var(--rojo); border-color: rgba(200, 16, 46, 0.3); }
.liga-urgente:hover { border-color: var(--rojo); }
.punto { width: 9px; height: 9px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 0 rgba(200, 16, 46, 0.55); animation: latido 2s infinite; }
@keyframes latido { 70% { box-shadow: 0 0 0 10px rgba(200, 16, 46, 0); } 100% { box-shadow: 0 0 0 0 rgba(200, 16, 46, 0); } }

/* ── Encabezado: bloque de marca + dos niveles ───────────────────────── */
.cab { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; height: var(--cab); background: #fff; border-bottom: 1px solid var(--acero-2); transition: height 0.35s var(--suave), box-shadow 0.35s; }
.cab.compacta { height: 76px; box-shadow: 0 10px 30px -22px rgba(10, 10, 10, 0.45); }
.logo-bloque { flex: none; width: var(--cab); height: 100%; display: grid; align-content: center; justify-items: start; padding: 0 16px; background: var(--marino); color: #fff; text-decoration: none; transition: width 0.35s var(--suave); }
.cab.compacta .logo-bloque { width: 92px; }
.cab.compacta .logo-bloque span { font-size: 21px; }
.cab.compacta .logo-bloque small { font-size: 8.5px; letter-spacing: 0.18em; }
.logo-bloque span { font: 900 25px/0.9 var(--f-grotesca); letter-spacing: -0.02em; transition: font-size 0.35s var(--suave); }
.logo-bloque small { font: 700 9.5px/1 var(--f-grotesca); letter-spacing: 0.22em; text-transform: uppercase; color: var(--acero); margin-top: 6px; }
.cab-derecha { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(16px, 3vw, 40px); min-width: 0; }
.cab-util { display: flex; justify-content: flex-end; gap: 26px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gris); height: 30px; align-items: center; overflow: hidden; transition: height 0.35s var(--suave), opacity 0.25s; }
.cab-util a { display: inline-flex; align-items: center; gap: 6px; color: var(--verde-wa); text-decoration: none; }
.cab-util .ico { width: 15px; height: 15px; }
.cab.compacta .cab-util { height: 0; opacity: 0; }
.cab-principal { display: flex; align-items: center; justify-content: flex-end; gap: 30px; }
.menu { display: flex; gap: 28px; }
.menu > a { font-size: 15.5px; font-weight: 600; color: var(--tinta); text-decoration: none; padding: 8px 0; position: relative; }
.menu > a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: var(--marino); transition: right 0.35s var(--suave); }
.menu > a:hover::after { right: 0; }
.menu-movil-acciones { display: none; }
.menu-boton { display: none; width: 46px; height: 46px; border: 1.5px solid var(--acero); background: #fff; color: var(--marino); cursor: pointer; place-items: center; }
.menu-boton .ico-cerrar { display: none; }

/* ── Fotografía en blanco y negro (marcadores hasta la sesión de fotos) ─ */
.foto { position: absolute; inset: 0; background-color: #2b2e33; overflow: hidden; }
.foto::after { content: ""; position: absolute; inset: 0; opacity: 0.16; pointer-events: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
.foto-nota { position: absolute; z-index: 3; padding: 7px 12px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.figuras { position: absolute; left: 47%; bottom: 25%; height: 34%; width: auto; fill: rgba(8, 9, 11, 0.88); }
.foto-vestibulo { background:
  linear-gradient(180deg, transparent 0 63%, rgba(255, 255, 255, 0.1) 63% 63.3%, rgba(0, 0, 0, 0.32) 63.3% 100%),
  repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 7vw),
  radial-gradient(55% 60% at 26% 28%, rgba(255, 255, 255, 0.34), transparent 70%),
  linear-gradient(112deg, #7a7e86 0%, #474b52 38%, #24272b 70%, #17191c 100%); }
.foto-equipo { background:
  linear-gradient(180deg, transparent 0 70%, rgba(0, 0, 0, 0.35) 70% 100%),
  repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 5vw),
  radial-gradient(45% 70% at 70% 20%, rgba(255, 255, 255, 0.3), transparent 70%),
  linear-gradient(200deg, #6b6f76, #2a2d32 60%, #141517); }
.foto-equipo .figuras { left: auto; right: 10%; bottom: 18%; height: 46%; }
.foto-pasillo { background:
  linear-gradient(90deg, rgba(0, 0, 0, 0.55), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.55)),
  repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 46px),
  radial-gradient(30% 50% at 50% 45%, rgba(255, 255, 255, 0.55), transparent 70%),
  linear-gradient(180deg, #5b5f66, #2e3136 60%, #1d1f22); }
.foto-escalera { background:
  radial-gradient(60% 60% at 80% 10%, rgba(255, 255, 255, 0.35), transparent 70%),
  repeating-linear-gradient(162deg, #26292d 0 22px, #3a3d43 22px 26px, #2f3237 26px 48px); }
.foto-ventana { background:
  repeating-linear-gradient(90deg, transparent 0 64px, rgba(0, 0, 0, 0.55) 64px 70px),
  repeating-linear-gradient(180deg, transparent 0 84px, rgba(0, 0, 0, 0.5) 84px 90px),
  radial-gradient(70% 80% at 60% 40%, #c9ccd0, #6e7279 60%, #2a2c30); }
.foto-documento { background:
  repeating-linear-gradient(180deg, transparent 0 18px, rgba(20, 22, 26, 0.22) 18px 20px),
  linear-gradient(160deg, #e4e4e1, #b9bbbd 55%, #7d8085); }
.foto-ciudad { background:
  linear-gradient(#2a2c30, #2a2c30) 4% 100% / 9% 36% no-repeat,
  linear-gradient(#33363b, #33363b) 15% 100% / 7% 54% no-repeat,
  linear-gradient(#24262a, #24262a) 25% 100% / 11% 30% no-repeat,
  linear-gradient(#2e3135, #2e3135) 37% 100% / 5% 78% no-repeat,
  linear-gradient(#282a2e, #282a2e) 46% 100% / 10% 44% no-repeat,
  linear-gradient(#313439, #313439) 58% 100% / 8% 60% no-repeat,
  linear-gradient(#26282c, #26282c) 69% 100% / 12% 33% no-repeat,
  linear-gradient(#2d3034, #2d3034) 82% 100% / 7% 50% no-repeat,
  linear-gradient(#232528, #232528) 94% 100% / 10% 27% no-repeat,
  radial-gradient(60% 50% at 70% 25%, rgba(255, 255, 255, 0.5), transparent 70%),
  linear-gradient(180deg, #c3c7cd, #918b82 80%); }
.foto-pachuca { background:
  linear-gradient(#1f2124, #1f2124) 50% 100% / 100% 16% no-repeat,
  linear-gradient(#2b2d31, #2b2d31) 50% 84% / 9% 62% no-repeat,
  linear-gradient(#34373c, #34373c) 50% 84% / 14% 8% no-repeat,
  linear-gradient(#2b2d31, #2b2d31) 12% 100% / 20% 26% no-repeat,
  linear-gradient(#26282b, #26282b) 88% 100% / 22% 30% no-repeat,
  radial-gradient(50% 60% at 50% 18%, rgba(255, 255, 255, 0.5), transparent 70%),
  linear-gradient(180deg, #b4b9c0, #78726a); }

/* ── Portada ─────────────────────────────────────────────────────────── */
.portada { position: relative; overflow: hidden; color: #fff; background: #17191c; min-height: min(100svh, 940px); padding: calc(var(--cab) + 56px) 0 72px; display: flex; align-items: center; }
.portada-foto { animation: acercar 14s var(--suave) both; }
@keyframes acercar { from { transform: scale(1.1); } to { transform: scale(1); } }
.portada::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8, 8, 8, 0.86) 0%, rgba(8, 8, 8, 0.62) 42%, rgba(8, 8, 8, 0.12) 70%, transparent 100%); pointer-events: none; }
.portada-nota { left: 24px; bottom: 22px; }
.portada-panel { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 40%; background: var(--marino); clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%); animation: panel 1.15s var(--suave) 0.1s both; }
@keyframes panel { from { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } to { clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%); } }
.portada-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 470px; gap: 64px; align-items: center; }
.ojo { display: flex; align-items: center; gap: 12px; font: 700 13px/1 var(--f-grotesca); letter-spacing: 0.18em; text-transform: uppercase; color: var(--acero); margin-bottom: 26px; }
.ojo::before { content: ""; width: 34px; height: 2px; background: currentColor; }
.ojo-marino { color: var(--marino); }
.titular { font: 800 clamp(54px, 7.6vw, 116px)/0.9 var(--f-grotesca); letter-spacing: -0.048em; margin-bottom: 30px; }
.titular .l { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.titular .l > span { display: inline-block; transform: translateY(108%); animation: subir 1s var(--suave) forwards; animation-delay: var(--d, 0s); }
.titular em { font: italic 400 1.04em/0.9 var(--f-serif); letter-spacing: -0.02em; color: var(--acero); }
@keyframes subir { to { transform: translateY(0); } }
.entra { opacity: 0; transform: translateY(18px); animation: entrar 0.9s var(--suave) forwards; animation-delay: var(--d, 0s); }
@keyframes entrar { to { opacity: 1; transform: none; } }
.lead { max-width: 560px; font-size: clamp(17px, 1.4vw, 19.5px); line-height: 1.6; color: #E3DDD2; margin-bottom: 28px; }
.sellos { display: flex; flex-wrap: wrap; gap: 12px 26px; }
.sellos li { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; }
.sellos .ico { width: 18px; height: 18px; color: var(--acero); }

.caja-form { position: relative; background: #fff; color: var(--tinta); padding: 30px 30px 24px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6); border-top: 6px solid var(--acero); }
.caja-cabeza { margin-bottom: 18px; }
.caja-titulo { font: 800 30px/1.05 var(--f-grotesca); letter-spacing: -0.03em; color: var(--marino); }
.caja-sub { margin-top: 6px; font-size: 14.5px; color: var(--gris); }

/* ── Cinta de materias ───────────────────────────────────────────────── */
.cinta { overflow: hidden; background: var(--acero); color: var(--marino); padding: 22px 0; }
.cinta-pista { display: flex; align-items: center; gap: 34px; width: max-content; animation: cinta 55s linear infinite; }
.cinta:hover .cinta-pista { animation-play-state: paused; }
.cinta span { font: italic 400 clamp(26px, 2.6vw, 38px)/1 var(--f-serif); white-space: nowrap; }
.cinta i { width: 9px; height: 9px; background: var(--marino); transform: rotate(45deg); flex: none; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* ── Secciones ───────────────────────────────────────────────────────── */
.seccion { padding: clamp(88px, 10vw, 140px) 0; }
.seccion h2 { font-size: clamp(38px, 4.8vw, 66px); line-height: 0.98; letter-spacing: -0.04em; color: var(--marino); }
.cabeza { margin-bottom: clamp(44px, 5vw, 64px); max-width: 820px; }
.gigante { font-size: clamp(64px, 11vw, 170px) !important; line-height: 0.84 !important; letter-spacing: -0.06em !important; color: var(--marino); }
.gigante-chico { font-size: clamp(44px, 6.4vw, 96px) !important; line-height: 0.9 !important; }
.js [data-aparece] { opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--suave), transform 0.9s var(--suave); transition-delay: var(--d, 0s); }
.js [data-aparece].visible { opacity: 1; transform: none; }

.bloque-marino { background: var(--marino); color: #fff; padding: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; justify-content: space-between; }
.bloque-marino h2 { color: #fff; font-size: clamp(52px, 6vw, 92px); line-height: 0.88; letter-spacing: -0.05em; }

/* Por qué COBA */
.porque-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; align-items: stretch; }
.porque .bloque-marino { aspect-ratio: 1; }
.datos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dato { padding: 26px 26px 30px; background: var(--hueso); border-top: 3px solid var(--marino); }
.dato-cifra { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.dato-cifra b { font: 800 clamp(64px, 6.4vw, 96px)/0.9 var(--f-grotesca); letter-spacing: -0.05em; color: var(--marino); font-variant-numeric: tabular-nums; }
.dato-cifra span { font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); }
.dato > p:last-child { color: var(--gris); font-size: 16px; }

/* Materias (lista editorial) */
.materias { padding-top: 0; }
.materias-cabeza { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: end; margin-bottom: 48px; }
.materias-cabeza p { color: var(--gris); font-size: 18px; max-width: 420px; }
.lista-materias { border-bottom: 1px solid var(--acero); }
.fila { display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1.4fr) 56px; gap: 24px; align-items: center; padding: 26px 18px 26px 0; border-top: 1px solid var(--acero); text-decoration: none; color: var(--tinta); transition: background 0.3s, padding 0.4s var(--suave); }
.fila:hover { background: var(--hueso); padding-left: 18px; }
.fila-num { font-size: 14px; font-weight: 700; color: var(--gris-claro); letter-spacing: 0.08em; }
.fila-nombre { font: 400 clamp(34px, 3.8vw, 56px)/1 var(--f-serif); color: var(--marino); letter-spacing: -0.02em; }
.fila-desc { color: var(--gris); font-size: 16.5px; }
.fila-ir { width: 54px; height: 54px; display: grid; place-items: center; border: 1.5px solid var(--acero); color: var(--marino); transition: background 0.3s, color 0.3s, border-color 0.3s; }
.fila:hover .fila-ir { background: var(--marino); border-color: var(--marino); color: #fff; }
.materias-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 30px; margin-top: 30px; }

/* Cómo trabajamos */
.proceso { background: var(--hueso); }
.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.pasos li { border-top: 3px solid var(--marino); padding-top: 22px; }
.paso-num { display: block; font: italic 400 46px/1 var(--f-serif); color: var(--marino-2); margin-bottom: 18px; }
.pasos h3 { font-size: 21px; line-height: 1.2; color: var(--tinta); margin-bottom: 10px; letter-spacing: -0.02em; }
.pasos p { color: var(--gris); font-size: 16px; }
.compromiso { margin-top: clamp(56px, 7vw, 90px); max-width: 980px; font: 400 clamp(28px, 3.4vw, 46px)/1.2 var(--f-serif); color: var(--marino); letter-spacing: -0.015em; }
.compromiso em { font-style: italic; color: var(--marino-2); background: linear-gradient(transparent 62%, var(--acero-2) 62%); }

/* Guías: mosaico editorial */
.mosaico { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(300px, auto); gap: 16px; }
.bloque-guias p { color: #D8CDB8; font-size: 16px; max-width: 320px; }
.tile { position: relative; overflow: hidden; display: block; min-height: 300px; color: #fff; text-decoration: none; background: #222; isolation: isolate; }
.tile-grande { grid-column: span 2; min-height: 420px; }
.tile .foto { transition: transform 1.2s var(--suave); }
.tile:hover .foto { transform: scale(1.06); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 30%, rgba(6, 6, 6, 0.85)); }
.tile .foto-nota { top: 16px; left: 16px; }
.tile-texto { position: absolute; z-index: 2; left: 26px; right: 26px; bottom: 24px; }
.tile-texto small { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acero); margin-bottom: 10px; }
.tile-texto h3 { font: 400 clamp(26px, 2.4vw, 34px)/1.1 var(--f-serif); letter-spacing: -0.01em; }
.tile-grande .tile-texto h3 { font-size: clamp(32px, 3.4vw, 50px); max-width: 640px; }
.tile-texto h3 { background: linear-gradient(#fff, #fff) left bottom / 0 1.5px no-repeat; transition: background-size 0.5s var(--suave); display: inline; }
.tile:hover .tile-texto h3 { background-size: 100% 1.5px; }

/* Equipo */
.equipo { position: relative; min-height: min(86vh, 760px); display: flex; align-items: flex-end; overflow: hidden; color: #fff; }
.equipo-foto { position: absolute; inset: 0; }
.equipo-nota { top: 20px; left: 24px; }
.equipo-envoltura { position: relative; z-index: 2; padding: 0 0 clamp(32px, 5vw, 64px); }
.equipo-caja { max-width: 640px; background: var(--marino); padding: clamp(28px, 4vw, 52px); }
.equipo-caja h2 { color: #fff; font-size: clamp(36px, 4.4vw, 62px); line-height: 0.98; letter-spacing: -0.04em; margin-bottom: 18px; }
.equipo-caja p:last-child { color: #D8CDB8; }
.pilares-seccion { padding-top: clamp(56px, 7vw, 90px); padding-bottom: clamp(56px, 7vw, 90px); }
.pilares { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pilar { border-top: 3px solid var(--marino); padding-top: 26px; }
.pilar-ico { width: 52px; height: 52px; display: grid; place-items: center; background: var(--marino); color: #fff; margin-bottom: 20px; }
.pilar-ico .ico { width: 24px; height: 24px; }
.pilar h3 { font-size: 22px; letter-spacing: -0.02em; margin-bottom: 10px; }
.pilar p { color: var(--gris); font-size: 16px; margin-bottom: 16px; }

/* Opiniones */
.opiniones { background: var(--hueso); }
.opiniones-cabeza { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: end; margin-bottom: 48px; }
.google-nota { border: 1.5px dashed var(--acero); padding: 20px 22px; display: grid; gap: 4px; background: #fff; }
.google-nota b { color: var(--marino); }
.google-nota span { color: var(--gris); font-size: 15px; }
.citas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cita { background: #fff; padding: 30px; display: flex; flex-direction: column; gap: 18px; border-top: 3px solid var(--acero); }
.cita blockquote { margin: 0; font: 400 23px/1.35 var(--f-serif); color: var(--tinta); flex: 1; }
.cita figcaption { font-size: 14px; font-weight: 700; color: var(--gris); }
.ejemplo { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8a5a00; background: #fff4d6; padding: 5px 9px; }

/* Dónde trabajamos */
.lugares { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lugar { position: relative; display: flex; flex-direction: column; background: var(--hueso); min-height: 420px; }
.lugar .foto { position: relative; inset: auto; height: 250px; flex: none; }
.lugar .foto-nota { top: 14px; left: 14px; }
.lugar-texto { padding: 26px; }
.lugar-texto h3 { font-size: 26px; letter-spacing: -0.03em; color: var(--marino); margin-bottom: 8px; }
.lugar-texto p { color: var(--gris); }
.lugar-linea { background: var(--marino); color: #fff; justify-content: flex-end; }
.lugar-linea h3 { color: #fff; font-size: clamp(30px, 3vw, 42px); line-height: 1; }
.lugar-linea p { color: #D8CDB8; margin-bottom: 26px; }

/* Preguntas */
.preguntas-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.preguntas-nota { margin-top: 28px; color: var(--gris); font-size: 17px; max-width: 380px; }
.preguntas-nota a { color: var(--marino); font-weight: 700; }
.faq details { border-top: 1px solid var(--acero); }
.faq details:last-child { border-bottom: 1px solid var(--acero); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 22px; padding: 24px 0; font-size: 19.5px; font-weight: 700; letter-spacing: -0.015em; color: var(--marino); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 34px; height: 34px; border: 1.5px solid var(--acero); background: linear-gradient(var(--marino), var(--marino)) center / 13px 2px no-repeat, linear-gradient(var(--marino), var(--marino)) center / 2px 13px no-repeat; transition: transform 0.4s var(--suave), background-color 0.3s; }
.faq details[open] summary::after { background: linear-gradient(#fff, #fff) center / 13px 2px no-repeat, var(--marino); border-color: var(--marino); }
.faq details p { padding: 0 56px 26px 0; color: var(--gris); font-size: 17px; }
.faq details:target summary, .faq details.resaltada summary { color: var(--marino-2); }

/* Llamado final */
.llamado { background: var(--marino); color: #fff; padding: clamp(72px, 9vw, 120px) 0; }
.llamado-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: end; }
.llamado h2 { font-size: clamp(44px, 6vw, 92px); line-height: 0.92; letter-spacing: -0.05em; }
.llamado h2 em { font: italic 400 1.02em/0.95 var(--f-serif); color: var(--acero); letter-spacing: -0.02em; }
.llamado-acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }

/* ── Formulario (componente compartido .cf-*) ─────────────────────────── */
.cf-progreso { display: flex; gap: 6px; margin-bottom: 12px; font-size: 12px; font-weight: 600; color: var(--gris-claro); }
.cf-progreso li { flex: 1; display: flex; align-items: center; gap: 7px; min-width: 0; }
.cf-progreso li span { width: 24px; height: 24px; display: grid; place-items: center; flex: none; border: 1.5px solid var(--acero); font-size: 11.5px; font-weight: 800; color: var(--gris); }
.cf-progreso li.actual { color: var(--marino); }
.cf-progreso li.actual span { background: var(--marino); border-color: var(--marino); color: #fff; }
.cf-progreso li.hecho span { background: var(--acero-2); border-color: var(--acero); color: var(--marino); }
.cf-progreso em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-barra { height: 3px; background: var(--acero-2); margin-bottom: 22px; }
.cf-barra i { display: block; height: 100%; background: var(--marino); transition: width 0.5s var(--suave); }
.cf-titulo { font-size: 22px; line-height: 1.15; letter-spacing: -0.025em; color: var(--tinta); margin-bottom: 16px; outline: none; }
.cf-materias { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cf-materia { position: relative; display: grid; gap: 3px; align-content: center; min-height: 72px; padding: 13px 14px; border: 1.5px solid var(--acero-2); background: var(--hueso); cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.cf-materia:hover { border-color: var(--marino); background: #fff; }
.cf-materia:has(input:checked) { border-color: var(--marino); background: #fff; box-shadow: inset 4px 0 0 var(--marino); }
.cf-materia input, .cf-chip input { position: absolute; opacity: 0; pointer-events: none; }
.cf-materia strong { font-size: 16.5px; font-weight: 800; color: var(--marino); letter-spacing: -0.01em; }
.cf-materia small { font-size: 12.5px; color: var(--gris); line-height: 1.35; }
.cf-materia:has(input:focus-visible), .cf-chip:has(input:focus-visible) { outline: 2px solid var(--marino-2); outline-offset: 2px; }
.cf-grupo { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.cf-grupo legend { padding: 0; margin-bottom: 9px; font-size: 15px; font-weight: 800; color: var(--tinta); }
.cf-ayuda { font-size: 13px; color: var(--gris); margin: -4px 0 9px; }
.cf-opciones { display: flex; flex-wrap: wrap; gap: 7px; }
.cf-chip { position: relative; cursor: pointer; }
.cf-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; border: 1.5px solid var(--acero-2); background: var(--hueso); font-size: 14px; font-weight: 600; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.cf-chip:hover span { border-color: var(--marino); background: #fff; }
.cf-chip input:checked + span { background: var(--marino); border-color: var(--marino); color: #fff; }
.cf-campo { display: grid; gap: 6px; margin-bottom: 14px; }
.cf-campo label { font-size: 14px; font-weight: 700; }
.cf-campo input, .cf-campo textarea { width: 100%; padding: 14px; border: 1.5px solid var(--acero); border-radius: 0; background: #fff; color: var(--tinta); font: 16px/1.4 var(--f-grotesca); }
.cf-campo textarea { resize: vertical; min-height: 96px; }
.cf-campo input:focus, .cf-campo textarea:focus { outline: none; border-color: var(--marino); box-shadow: 0 0 0 3px var(--acero-2); }
.cf-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cf-acepto { display: flex; gap: 11px; align-items: flex-start; margin: 4px 0; font-size: 13.5px; color: var(--gris); }
.cf-acepto input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--marino); }
.cf-acepto a { color: var(--marino); font-weight: 700; }
.cf-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cf-error { min-height: 20px; margin: 6px 0; color: var(--rojo); font-size: 14px; font-weight: 600; outline: none; }
.cf-acciones { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.cf-acciones .cf-btn:not(.cf-btn-sec) { margin-left: auto; }
.cf-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 26px; border: 1.5px solid transparent; cursor: pointer; font: 700 15.5px/1 var(--f-grotesca); text-decoration: none; color: #fff; background: var(--marino); transition: background 0.25s; }
.cf-btn:hover { background: var(--marino-2); }
.cf-btn:disabled { opacity: 0.6; cursor: wait; }
.cf-btn-sec { background: #fff; border-color: var(--acero); color: var(--marino); }
.cf-btn-sec:hover { background: var(--hueso); }
.cf-wa { background: var(--verde-wa); }
.cf-nota { margin-top: 14px; text-align: center; font-size: 12.5px; color: var(--gris); }
.cf-exito { display: grid; justify-items: center; gap: 12px; padding: 22px 6px; text-align: center; }
.cf-exito-icono { width: 64px; height: 64px; display: grid; place-items: center; background: #e3f3e9; color: var(--verde-wa); }
.cf-exito h3 { font-size: 28px; color: var(--marino); }
.cf-exito p { color: var(--gris); }
.cf-folio strong { color: var(--marino); letter-spacing: 0.06em; }

/* ── Pie ─────────────────────────────────────────────────────────────── */
.pie { background: var(--marino-osc); color: #c9c2b6; padding: 72px 0 30px; font-size: 15px; }
.pie-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 44px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.logo-pie { width: 96px; height: 96px; background: var(--marino); }
.pie-lema { margin-top: 18px; max-width: 320px; }
.pie h4 { font-size: 12.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.pie ul { display: grid; gap: 10px; }
.pie a { text-decoration: none; }
.pie a:hover { color: #fff; }
.pie-final { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; font-size: 13px; color: #9a9387; }
.barra-movil { display: none; }

/* ── Responsivo ──────────────────────────────────────────────────────── */
@media (max-width: 1120px) {
  .portada-grid { grid-template-columns: 1fr; gap: 44px; }
  .portada-panel { display: none; }
  .portada::after { background: linear-gradient(180deg, rgba(8, 8, 8, 0.55), rgba(8, 8, 8, 0.86) 60%); }
  .caja-form { max-width: 620px; }
  .porque-grid { grid-template-columns: 1fr; }
  .porque .bloque-marino { aspect-ratio: auto; min-height: 220px; }
  .materias-cabeza, .opiniones-cabeza, .preguntas-grid, .llamado-grid { grid-template-columns: 1fr; }
  .llamado-acciones { justify-content: flex-start; }
  .mosaico { grid-template-columns: 1fr 1fr; }
  .bloque-guias { grid-column: span 2; min-height: 0; }
  .lugares { grid-template-columns: 1fr 1fr; }
  .lugar-linea { grid-column: span 2; min-height: 0; }
  .pie-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  :root { --cab: 66px; }
  html { scroll-padding-top: 74px; }
  .cab, .cab.compacta { height: var(--cab); }
  .logo-bloque, .cab.compacta .logo-bloque { width: 66px; padding: 0 10px; }
  .logo-bloque span { font-size: 19px; }
  .logo-bloque small { font-size: 7.5px; letter-spacing: 0.18em; }
  .cab-util { display: none; }
  .cab-derecha { justify-content: center; padding: 0 12px; }
  .cab-principal { gap: 10px; }
  .menu { position: fixed; inset: var(--cab) 0 0; z-index: 40; flex-direction: column; justify-content: center; gap: 4px; padding: 30px 28px 60px; background: #fff; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 0.3s, transform 0.3s var(--suave), visibility 0.3s; }
  .menu > a { font-size: 34px; font-weight: 800; letter-spacing: -0.04em; color: var(--marino); padding: 6px 0; }
  .menu > a::after { display: none; }
  .menu-movil-acciones { display: grid; gap: 10px; margin-top: 26px; }
  .menu-abierto .menu { opacity: 1; visibility: visible; transform: none; }
  .menu-abierto { overflow: hidden; }
  .menu-boton { display: inline-grid; }
  .menu-abierto .menu-boton .ico-abrir { display: none; }
  .menu-abierto .menu-boton .ico-cerrar { display: block; }
  .cab-cta { display: none; }
  .fila { grid-template-columns: minmax(0, 1fr) 48px; gap: 8px 16px; padding: 22px 0; }
  .fila:hover { padding-left: 0; background: none; }
  .fila-num { display: none; }
  .fila-desc { grid-column: 1; grid-row: 2; font-size: 15.5px; }
  .fila-ir { grid-column: 2; grid-row: 1 / span 2; width: 48px; height: 48px; }
  .pasos, .pilares, .citas { grid-template-columns: 1fr 1fr; }
  .barra-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: 1.2fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--acero); box-shadow: 0 -12px 30px -20px rgba(10, 10, 10, 0.5); transition: transform 0.35s var(--suave); }
  .barra-movil .btn { min-height: 50px; padding: 12px 14px; font-size: 15px; }
  .en-formulario .barra-movil, .menu-abierto .barra-movil { transform: translateY(110%); }
  .pie { padding-bottom: 110px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .envoltura { width: calc(100% - 32px); }
  .portada { padding-top: calc(var(--cab) + 34px); padding-bottom: 40px; align-items: flex-start; }
  .titular { font-size: clamp(46px, 14.6vw, 64px); margin-bottom: 20px; }
  .ojo { font-size: 11px; letter-spacing: 0.14em; margin-bottom: 18px; }
  .lead { margin-bottom: 20px; }
  .caja-form { padding: 22px 16px 18px; }
  .caja-titulo { font-size: 26px; }
  .portada-nota { display: none; }
  .datos, .mosaico, .lugares, .pasos, .pilares, .citas, .pie-grid { grid-template-columns: 1fr; }
  .bloque-guias, .tile-grande, .lugar-linea { grid-column: auto; }
  .tile-grande { min-height: 340px; }
  .equipo { min-height: 640px; }
  .equipo-envoltura { width: 100%; padding-bottom: 0; }
  .faq details p { padding-right: 0; }
  .cf-materias, .cf-fila { grid-template-columns: 1fr; }
  .cf-materia { min-height: 62px; }
  .cf-progreso em { display: none; }
  .cf-progreso li.actual em { display: inline; }
  .cf-acciones .cf-btn:not(.cf-btn-sec) { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .titular .l > span, .entra { transform: none; opacity: 1; }
  .js [data-aparece] { opacity: 1; transform: none; }
  .cinta-pista { animation: none; }
}

/* ── Marca de COBA (12-oct): el bloque de la izquierda ahora lleva el logo real ── */
.logo-bloque, .cab.compacta .logo-bloque { width: auto; padding: 0 22px; background: #0d0d0d; }
.logo-bloque img { display: block; height: 66px; width: auto; transition: height 0.35s var(--suave); }
.cab.compacta .logo-bloque img { height: 52px; }
.logo-pie { width: auto; height: auto; padding: 20px 24px; display: inline-block; }
.logo-pie img { height: 86px; }
@media (max-width: 760px) {
  .logo-bloque, .cab.compacta .logo-bloque { width: auto; padding: 0 12px; }
  .logo-bloque img, .cab.compacta .logo-bloque img { height: 44px; }
}

/* Plazos que corren (junta 14-oct) */
.plazos { background: var(--hueso); }
.plazos .dato { background: var(--blanco); }
.plazos-datos { grid-template-columns: repeat(3, 1fr); }
.plazos-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 30px; margin-top: 30px; color: var(--gris); font-size: 16px; }
.plazos-pie p { max-width: 640px; }
@media (max-width: 900px) { .plazos-datos { grid-template-columns: 1fr; } }
.compromiso-nota { margin-top: 14px; display: inline-block; padding: 6px 12px; border: 1.5px dashed var(--gris-claro); color: var(--gris); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }