/* =====================================================================
   ESTUDIO GS · sitio
   Esquema tomado del portfolio de Adobe del estudio (cabecera fija de 65 px,
   grilla de 2 columnas con 5 px de separación, láminas 16:9 a todo el ancho
   separadas 20 px) con el manual de marca:
     tipografía Effra (Light 300 · Regular 400 · Medium 500) vía Adobe Fonts
     colores #1d252c · #6f1d46 · #ee7623 · #a16a38 · #002d5d · blanco
   ===================================================================== */

:root {
  --gris: #1d252c;
  --magenta: #6f1d46;
  --naranja: #ee7623;
  --dorado: #a16a38;
  --azul: #002d5d;
  --blanco: #ffffff;
  --gris-suave: rgba(29, 37, 44, .72);
  --linea: rgba(29, 37, 44, .14);
  --acento: var(--naranja);
  --fuente: "effra", sans-serif;
  --cab: 65px;
  --borde: 7px;
  --ease: cubic-bezier(.23, 1, .32, 1);
}
[data-color="magenta"] { --acento: var(--magenta); }
[data-color="naranja"] { --acento: var(--naranja); }
[data-color="dorado"]  { --acento: var(--dorado); }
[data-color="azul"]    { --acento: var(--azul); }
[data-color="gris"]    { --acento: var(--gris); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--cab); }
body { margin: 0; background: var(--blanco); color: var(--gris); font-family: var(--fuente); font-weight: 300; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
b, strong { font-weight: 500; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--gris); color: var(--blanco); padding: 10px 14px; }
.saltar:focus { top: 10px; }

/* ---------- Cabecera ---------- */
.cab { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--cab); background: var(--blanco); }
.cab__in { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 30px; }
.cab__menu ul { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; }
.cab__menu a { color: var(--azul); text-decoration: none; font-size: 17px; font-weight: 400; white-space: nowrap; padding: 6px 0;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size 240ms var(--ease); }
.cab__menu a:hover { background-size: 100% 1px; }
.cab__menu a[aria-current="page"] { font-weight: 500; }
.cab__logo img { width: 120px; }
.cab__ig { justify-self: end; display: grid; place-items: center; width: 44px; height: 44px; color: var(--azul); }
.cab__btn { display: none; width: 44px; height: 44px; border: 0; background: none; color: var(--azul); cursor: pointer; justify-self: start; }
.cab__btn span, .cab__btn span::before, .cab__btn span::after { display: block; width: 22px; height: 2px; background: currentColor; position: relative; transition: transform 240ms var(--ease), background-color 240ms; }
.cab__btn span::before, .cab__btn span::after { content: ""; position: absolute; left: 0; }
.cab__btn span::before { top: -7px; } .cab__btn span::after { top: 7px; }
.cab__btn[aria-expanded="true"] span { background: transparent; }
.cab__btn[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.cab__btn[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

/* Con seis solapas el menú no entra a los lados del logo centrado: entre 1001 y 1760 px el logo va a la izquierda */
@media (min-width: 1001px) and (max-width: 1760px) {
  .cab__in { grid-template-columns: auto 1fr auto; column-gap: 40px; }
  .cab__logo { order: -1; }
  .cab__menu { justify-self: end; }
}

@media (max-width: 1000px) {
  .cab__in { padding: 0 12px; }
  .cab__btn { display: grid; place-items: center; }
  .cab__menu { position: fixed; inset: var(--cab) 0 0; background: var(--blanco); display: grid; place-items: center;
    opacity: 0; visibility: hidden; transition: opacity 240ms ease, visibility 240ms; }
  .cab__menu.abierto { opacity: 1; visibility: visible; }
  .cab__menu ul { flex-direction: column; align-items: center; gap: 24px; }
  .cab__menu a { font-size: 26px; }
  .cab__logo img { width: 104px; }
}

main { padding-top: var(--cab); }

/* ---------- Portada de sección ---------- */
.intro { min-height: calc(76vh - var(--cab)); display: grid; place-items: center; text-align: center; padding: 60px 20px; }
.intro h1 { font-size: 24px; font-weight: 500; line-height: 1.1; margin: 0 0 10px; color: var(--gris); }
.intro p { font-size: 20px; font-weight: 300; margin: 0 0 30px; color: var(--gris); }
.intro__ig { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(29, 37, 44, .08); color: var(--azul); }
.intro__bajar { display: inline-grid; place-items: center; width: 64px; height: 44px; margin-top: 60px; color: rgba(29, 37, 44, .4); }
.intro__bajar:hover { color: var(--gris); }

/* ---------- Grilla de proyectos ---------- */
.grilla { list-style: none; margin: 0; padding: 0 var(--borde) var(--borde); display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.grilla--tres { grid-template-columns: repeat(3, 1fr); }
.tapa { position: relative; display: block; aspect-ratio: 710 / 537.5; overflow: hidden; color: var(--blanco); text-decoration: none; background: rgba(29, 37, 44, .06); }
.tapa img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.tapa__texto { position: absolute; inset: auto 0 0 0; padding: 26px 30px; display: flex; gap: 10px; align-items: baseline;
  background: linear-gradient(transparent, rgba(29, 37, 44, .62)); opacity: 0; transform: translateY(6px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
.tapa__titulo { font-size: 20px; font-weight: 500; line-height: 1.2; }
.tapa__anio { font-size: 16px; font-weight: 300; }
.tapa__etiqueta { position: absolute; top: 14px; left: 14px; background: var(--acento); color: var(--blanco); font-size: 13px; font-weight: 500; padding: 5px 10px; }
.tapa:focus-visible .tapa__texto, .tapa:hover .tapa__texto { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .tapa:hover img { transform: scale(1.03); } }
@media (hover: none) { .tapa__texto { opacity: 1; transform: none; } }
@media (max-width: 700px) { .grilla, .grilla--tres { grid-template-columns: 1fr; } }

/* ---------- Láminas 16:9 ---------- */
.laminas { display: grid; gap: 20px; padding: 0 var(--borde); }
.lam { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--blanco); }
.lam img { width: 100%; height: 100%; object-fit: cover; }
.lam--imagen img { object-fit: contain; }
.lam h1, .lam h2 { color: var(--acento); font-weight: 500; font-size: clamp(30px, 3.2vw, 56px); line-height: 1.05; letter-spacing: -.005em; margin: 0 0 .45em; }
.lam p { font-size: clamp(14px, 1.08vw, 19px); line-height: 1.5; margin: 0 0 1em; color: var(--gris); max-width: 46em; }
.lam p b { color: var(--acento); }
.lam .barra-v { position: absolute; left: 4.2%; top: 0; width: 6px; height: 46%; background: var(--acento); }
.lam .barra-h { position: absolute; height: 6px; background: var(--acento); }

.lam--portada .lam__texto { position: absolute; left: 9.5%; width: 26%; top: 60%; }
.lam--portada .lam__foto { position: absolute; left: 38.5%; right: 4%; top: 2.6%; bottom: 2.6%; }
.lam--portada p { font-size: clamp(14px, 1.05vw, 18px); }
.lam--partida .barra-h { left: 22.6%; width: 27.5%; top: 8.3%; }
.lam--partida .lam__foto { position: absolute; left: 0; width: 42.2%; top: 14%; bottom: 0; }
.lam--partida .lam__texto { position: absolute; left: 47.4%; right: 6%; top: 14%; }
.lam--partida.invertida .barra-h { left: auto; right: 0; width: 9%; top: 9%; }
.lam--partida.invertida .lam__foto { left: auto; right: 2.5%; width: 52%; top: 4%; bottom: 4%; }
.lam--partida.invertida .lam__texto { left: 6%; right: auto; width: 34%; top: 9%; }
.lam--texto .barra-h { left: 0; width: 9%; top: 18%; }
.lam--texto .lam__texto { position: absolute; left: 9.5%; right: 30%; top: 40%; }
.lam--tres, .lam--dos { display: grid; gap: 1.6%; padding: 0; }
.lam--tres { grid-template-columns: repeat(3, 1fr); }
.lam--dos { grid-template-columns: 1fr 1fr; }
.lam--tres .lam__foto, .lam--dos .lam__foto { min-height: 0; }
.lam--par { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6%; }
.lam--par figure { margin: 0; position: relative; min-height: 0; }
.lam--par figcaption { position: absolute; left: 0; bottom: 0; background: var(--blanco); color: var(--acento); font-weight: 500; font-size: clamp(14px, 1.2vw, 20px); padding: .5em 1em .3em 0; }
.lam--plano .barra-v { height: 40%; }
.lam--plano .lam__texto { position: absolute; left: 9.5%; width: 27%; top: 52%; }
.lam--plano .lam__dato { display: block; color: var(--acento); font-weight: 300; font-size: clamp(40px, 5.4vw, 96px); line-height: 1; margin: 0 0 .25em; }
.lam--plano .lam__foto { position: absolute; left: 38.5%; right: 3%; top: 8%; bottom: 8%; }
.lam--plano .lam__foto img { object-fit: contain; }
.lam--sub { aspect-ratio: auto; padding: 5.5% 0 0; }
.lam--sub .barra-h { left: 0; width: 9%; top: 0; position: relative; display: block; margin-bottom: 30px; }
.lam--sub h2 { padding-left: 9.5%; }
.lam--sub .grilla { padding: 0; margin-top: 2.5%; }
.lam--cierre { background: var(--gris); display: grid; place-items: center; }
.lam--cierre img { width: 22%; height: auto; object-fit: contain; }

@media (max-width: 760px) {
  .laminas { gap: 12px; padding: 0; }
  .lam { aspect-ratio: auto; }
  .lam .barra-v { display: none; }
  .lam--portada, .lam--partida, .lam--plano, .lam--texto { display: flex; flex-direction: column; }
  .lam--portada .lam__foto, .lam--partida .lam__foto, .lam--plano .lam__foto,
  .lam--partida.invertida .lam__foto { position: static; width: 100%; aspect-ratio: 4 / 3; }
  .lam--plano .lam__foto { aspect-ratio: 5 / 2; }
  .lam--portada .lam__texto, .lam--partida .lam__texto, .lam--plano .lam__texto, .lam--texto .lam__texto,
  .lam--partida.invertida .lam__texto { position: static; width: auto; border-left: 5px solid var(--acento); margin: 18px 20px 6px; padding: 4px 0 4px 16px; }
  .lam--partida .barra-h, .lam--texto .barra-h { display: none; }
  .lam--tres, .lam--dos, .lam--par { grid-template-columns: 1fr; gap: 12px; }
  .lam--tres .lam__foto, .lam--dos .lam__foto, .lam--par figure { aspect-ratio: 4 / 3; }
  .lam--imagen { aspect-ratio: 16 / 9; }
  .lam--sub { padding: 30px 0 0; }
  .lam--sub h2 { padding-left: 20px; }
  .lam--sub .barra-h { display: none; }
  .lam--cierre { aspect-ratio: 16 / 9; }
  .lam--cierre img { width: 40%; }
}

/* ---------- Navegación entre proyectos ---------- */
.volver { padding: 26px 30px 0; font-size: 16px; }
.volver a { color: var(--azul); text-decoration: none; }
.volver a:hover { text-decoration: underline; text-underline-offset: 4px; }
.otros { padding: 70px 0 0; }
.otros h2 { text-align: center; color: var(--azul); font-size: 18px; font-weight: 500; margin: 0 0 22px; }

/* ---------- Páginas de texto ---------- */
.pagina { max-width: 1240px; margin: 0 auto; padding: 70px 30px 40px; }
.bloque { position: relative; padding-top: 34px; margin-bottom: 80px; }
.bloque::before { content: ""; position: absolute; left: 0; top: 0; width: 120px; height: 6px; background: var(--acento); }
.bloque h1, .bloque h2 { color: var(--acento); font-size: clamp(30px, 3.2vw, 52px); font-weight: 500; line-height: 1.05; margin: 0 0 24px; }
.bloque p { max-width: 42em; color: var(--gris); }
.bloque p b { color: var(--acento); }
.cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.cols h3 { color: var(--acento); font-size: 22px; font-weight: 500; margin: 0 0 8px; }
.cols p { margin: 0; color: var(--gris-suave); }
.etapas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.etapa__letra { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--acento); color: var(--blanco); font-weight: 500; margin-bottom: 12px; }
.etapa h3 { color: var(--acento); font-size: 20px; font-weight: 500; margin: 0 0 8px; }
.etapa ol { margin: 0; padding-left: 18px; color: var(--gris-suave); }
.etapa li { margin-bottom: 6px; }
@media (max-width: 900px) { .cols, .etapas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cols, .etapas { grid-template-columns: 1fr; } .pagina { padding: 40px 20px; } }

.contacto { display: grid; grid-template-columns: 5fr 7fr; gap: 60px; }
@media (max-width: 900px) { .contacto { grid-template-columns: 1fr; } }
.datos { list-style: none; padding: 0; margin: 30px 0 0; }
.datos li { padding: 16px 0; border-top: 1px solid var(--linea); }
.datos span { display: block; font-size: 14px; font-weight: 500; color: var(--acento); }
.datos a { font-size: 22px; text-decoration: none; overflow-wrap: anywhere; }
.datos a:hover { color: var(--acento); }
.campo { margin: 0 0 20px; border: 0; padding: 0; min-width: 0; }
.doble { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 560px) { .doble { grid-template-columns: 1fr; } }
label, legend { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; padding: 0; }
.opc { font-weight: 300; color: var(--gris-suave); }
input, select, textarea { width: 100%; font: 300 17px/1.4 var(--fuente); color: var(--gris); background: var(--blanco);
  border: 1px solid var(--linea); border-radius: 2px; padding: 12px 14px; min-height: 48px; transition: border-color 200ms, box-shadow 200ms; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(0, 45, 93, .15); }
[aria-invalid="true"] { border-color: var(--magenta); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; margin: 0; font-weight: 300; font-size: 16px; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; min-height: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 9px 16px; border: 1px solid var(--linea); border-radius: 30px; transition: background-color 160ms, color 160ms, border-color 160ms, transform 160ms var(--ease); }
.chip input:checked + span { background: var(--acento); border-color: var(--acento); color: var(--blanco); }
.chip input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }
.chip input:active + span { transform: scale(.97); }
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 28px; border: 0; border-radius: 2px;
  background: var(--acento); color: var(--blanco); font: 500 16px/1 var(--fuente); cursor: pointer; text-decoration: none;
  transition: background-color 200ms, transform 160ms var(--ease); }
.boton:hover { background: var(--gris); }
.boton:active { transform: scale(.97); }
.error { color: var(--magenta); font-weight: 500; }
.trampa { position: absolute; left: -9999px; }
.gracias h2 { color: var(--acento); font-weight: 500; font-size: 32px; margin: 0 0 12px; }
.gracias:focus { outline: none; }

/* ---------- Pie ---------- */
.pie { padding: 90px 20px 110px; text-align: center; font-size: 15px; }
.pie a { display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--azul); }
.pie p { margin: 6px 0 0; }
.flotantes { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: grid; gap: 10px; justify-items: center; }
.arriba { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(29, 37, 44, .08); color: var(--azul); cursor: pointer;
  display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity 240ms, transform 160ms var(--ease); }
.arriba.ver { opacity: 1; pointer-events: auto; }
.wa { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--magenta); color: var(--blanco);
  box-shadow: 0 10px 26px -10px rgba(29, 37, 44, .55); transition: transform 160ms var(--ease), background-color 200ms; }
.wa:hover { background: var(--gris); }
.wa:active, .arriba:active { transform: scale(.94); }

/* ---------- Aparición suave ---------- */
.js .lam, .js .tapa { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js .lam.ver, .js .tapa.ver, .js .laminas > .lam:first-child { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .js .lam, .js .tapa { opacity: 1; transform: none; }
  .tapa:hover img { transform: none; }
}

/* ---------- Inicio: logo grande en azul, estudio, contacto y secciones ---------- */
.cab { transition: background-color 300ms ease; }
@media (min-width: 1001px) {
  .cab--azul { background: var(--azul); }
  .cab--azul .cab__menu a, .cab--azul .cab__ig { color: var(--blanco); }
}
@media (max-width: 1000px) { .cab--azul { background: var(--azul); } .cab--azul .cab__btn, .cab--azul .cab__ig { color: var(--blanco); } }
[data-tipo="inicio"] main { padding-top: 0; }
.hero { min-height: 100svh; background: var(--azul); color: var(--blanco); display: grid; place-items: center; align-content: center; gap: 28px; text-align: center; padding: calc(var(--cab) + 40px) 24px 40px; }
.hero__logo { width: min(640px, 78vw); }
.hero__bajada { margin: 0; font-size: clamp(16px, 1.6vw, 22px); font-weight: 300; letter-spacing: .04em; opacity: .85; }
.hero__bajar { color: rgba(255, 255, 255, .7); display: inline-grid; place-items: center; width: 64px; height: 44px; margin-top: 4vh; }
.hero__bajar:hover { color: var(--blanco); }
.inicio-bloque { max-width: 980px; margin: 0 auto; padding: clamp(70px, 11vw, 150px) 24px; position: relative; }
.inicio-bloque .barra-h { display: block; width: 72px; height: 6px; background: var(--acento); margin-bottom: 26px; }
.inicio-bloque h2, .inicio-trabajos h2, .ambiente h2 { color: var(--acento); font-weight: 500; font-size: clamp(32px, 3.6vw, 56px); line-height: 1.05; margin: 0 0 .5em; }
.inicio-bloque p { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.6; margin: 0 0 1em; max-width: 40em; }
.inicio-bloque p b { color: var(--acento); }
.enlace { color: var(--azul); font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; }
.inicio-contacto { border-top: 1px solid var(--linea); }
.canales { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.canales a { display: flex; align-items: center; gap: 14px; padding: 22px; border: 1px solid var(--linea); color: var(--azul); text-decoration: none; height: 100%; transition: background-color 200ms ease, color 200ms ease; }
.canales a:hover { background: var(--azul); color: var(--blanco); }
.canales svg { flex: none; width: 28px; height: 28px; }
.canales span { display: grid; font-size: 17px; font-weight: 500; overflow-wrap: anywhere; }
.canales small { font-size: 13px; font-weight: 300; opacity: .75; }
@media (max-width: 800px) { .canales { grid-template-columns: 1fr; } }
.inicio-trabajos { padding-top: 10px; }
.inicio-trabajos h2, .ambiente h2 { padding: 0 24px; max-width: 980px; margin-left: auto; margin-right: auto; }
.tapa--seccion .tapa__texto { opacity: 1; transform: none; flex-direction: column; gap: 2px; padding-top: 60px; }
.tapa--seccion .tapa__titulo { font-size: clamp(22px, 2.2vw, 32px); }

/* ---------- Por ambientes ---------- */
.chips-amb { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; max-width: 760px; }
.chips-amb a { display: block; padding: 8px 16px; border: 1px solid var(--linea); color: var(--azul); text-decoration: none; font-size: 16px; }
.chips-amb a:hover { background: var(--azul); color: var(--blanco); }
.ambiente { padding: 50px 0 20px; scroll-margin-top: var(--cab); }
.ambiente h2 span { font-size: .45em; font-weight: 300; color: var(--gris-suave); vertical-align: middle; }
.tapa__de { font-size: 15px; font-weight: 300; opacity: .9; }

/* ---------- Lámina de materiales ---------- */
.lam--materiales .barra-h { left: 0; width: 9%; top: 18%; }
.lam--materiales .lam__texto { position: absolute; left: 9.5%; width: 30%; top: 30%; }
.muestras { position: absolute; left: 44%; right: 5%; top: 12%; bottom: 12%; list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3%; }
.muestras li { display: grid; grid-template-rows: 1fr auto auto; gap: 4px; min-height: 0; }
.muestra { display: block; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.muestras b { font-weight: 500; font-size: clamp(13px, 1.1vw, 19px); color: var(--gris); margin-top: 8px; }
.muestras li > span:last-child { font-size: clamp(12px, .9vw, 15px); color: var(--gris-suave); }
@media (max-width: 760px) {
  .lam--materiales { aspect-ratio: auto; padding: 40px 16px; }
  .lam--materiales .barra-h { position: static; display: block; width: 60px; margin-bottom: 20px; }
  .lam--materiales .lam__texto, .muestras { position: static; width: auto; }
  .muestras { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; margin-top: 20px; }
}
.cab--azul .cab__logo { opacity: 0; pointer-events: none; } .cab__logo { transition: opacity 300ms ease; }
/* ---------- Lámina de estado de obra ---------- */
.lam--estado .barra-h { left: 0; width: 9%; top: 18%; }
.lam--estado .lam__texto { position: absolute; left: 9.5%; width: 30%; top: 30%; }
.estado { position: absolute; left: 46%; right: 6%; top: 18%; bottom: 14%; display: grid; grid-template-columns: 1fr 1fr; gap: 6%; }
.estado h3 { margin: 0 0 .8em; font-weight: 500; font-size: clamp(18px, 1.6vw, 28px); color: var(--acento); }
.estado__col--curso h3 { color: var(--naranja); }
.estado ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; }
.estado a { font-size: clamp(14px, 1.2vw, 20px); color: var(--gris); text-decoration: none; border-bottom: 1px solid var(--linea); }
.estado a:hover { border-color: currentColor; }
.estado__col--curso li::before { content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--naranja); margin-right: .5em; }
.estado__col--hecho li::before { content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--acento); margin-right: .5em; }
@media (max-width: 760px) {
  .lam--estado { aspect-ratio: auto; padding: 40px 16px; }
  .lam--estado .barra-h { position: static; display: block; width: 60px; margin-bottom: 20px; }
  .lam--estado .lam__texto, .estado { position: static; width: auto; }
  .estado { margin-top: 24px; }
}
/* ---------- Menú con submenús ---------- */
.cab__menu .con-sub { position: relative; }
.cab__grupo { font: inherit; font-size: 17px; font-weight: 400; color: var(--azul); background: none; border: 0; padding: 6px 0; cursor: pointer; }
.cab__grupo[data-activo] { font-weight: 500; }
.cab__grupo::after, .con-sub > a::after { content: ""; display: inline-block; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin: 0 0 3px 7px; }
.cab__menu .sub { display: none; list-style: none; margin: 0; padding: 0; }
@media (min-width: 1001px) {
  .cab__menu .sub { position: absolute; top: 100%; left: -16px; min-width: 220px; background: var(--blanco); padding: 10px 16px 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .12); flex-direction: column; gap: 6px; }
  .cab__menu .con-sub:hover > .sub, .cab__menu .con-sub:focus-within > .sub, .cab__menu .con-sub.abierto > .sub { display: flex; }
  .cab__menu .sub a { color: var(--azul) !important; font-size: 16px; }
  .cab--azul .cab__grupo { color: var(--blanco); }
}
@media (max-width: 1000px) {
  .cab__menu { overflow-y: auto; align-items: start; padding: 30px 0 60px; }
  .cab__menu .con-sub .sub { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; }
  .cab__menu .sub a { font-size: 18px; font-weight: 300; }
  .cab__grupo { font-size: 26px; pointer-events: none; }
  .cab__grupo::after, .con-sub > a::after { display: none; }
}
/* ---------- Estudio: servicios en colores de marca y desplegables ---------- */
.ayuda { font-size: 15px; color: var(--gris-suave) !important; margin: -10px 0 18px; }
.servicios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-items: start; }
.servicio { background: var(--acento); color: var(--blanco); }
.servicio summary { list-style: none; cursor: pointer; padding: 28px 64px 28px 28px; position: relative; display: block; }
.servicio summary::-webkit-details-marker { display: none; }
.servicio h3 { margin: 0 0 8px; font-size: clamp(22px, 2vw, 30px); font-weight: 500; color: var(--blanco); }
.servicio summary p { margin: 0; color: rgba(255, 255, 255, .88) !important; }
.servicio__mas { position: absolute; right: 26px; top: 32px; width: 22px; height: 22px; }
.servicio__mas::before, .servicio__mas::after { content: ""; position: absolute; left: 0; top: 10px; width: 22px; height: 2px; background: currentColor; transition: transform 240ms var(--ease); }
.servicio__mas::after { transform: rotate(90deg); }
.servicio[open] .servicio__mas::after { transform: rotate(0deg); }
.servicio__detalle { padding: 0 28px 26px; border-top: 1px solid rgba(255, 255, 255, .25); padding-top: 18px; }
.servicio__detalle p { color: var(--blanco) !important; margin: 0 0 .8em; }
.servicio__detalle p b { color: var(--blanco) !important; }
.servicio:hover summary { background: rgba(0, 0, 0, .06); }
.creadora { padding-left: 0; }
.etapa { border-top: 4px solid var(--acento); padding-top: 18px; }
@media (max-width: 760px) { .servicios { grid-template-columns: 1fr; } }
/* ---------- Etiquetas de estado ---------- */
.tapa__etiqueta--final { background: var(--azul); }
.tapa__etiqueta--curso { background: var(--naranja); }
.tapa__etiqueta--virtual { background: var(--magenta); }
/* ---------- Franja de metodología (magenta) ---------- */
.franja { display: flex; justify-content: space-between; align-items: center; gap: 20px; background: var(--magenta); color: var(--blanco); text-decoration: none;
  padding: clamp(36px, 6vw, 80px) clamp(24px, 7vw, 120px); font-size: clamp(26px, 3.4vw, 54px); font-weight: 500; line-height: 1.1; }
a.franja:hover span:last-child { transform: translateX(8px); }
.franja span:last-child { transition: transform 240ms var(--ease); }
.metodologia { margin-top: 20px; }
.metodologia .pagina { padding-top: 60px; }
/* ---------- Botones de WhatsApp con mensaje ---------- */
.boton-wa { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 18px; background: #25d366; color: #fff !important; text-decoration: none; font-weight: 500; font-size: 16px; border-radius: 999px; }
.boton-wa svg { width: 22px; height: 22px; }
.boton-wa:hover { filter: brightness(.95); }
.servicio .boton-wa { background: var(--blanco); color: var(--acento) !important; }
.planificando { background: rgba(111, 29, 70, .06); padding: 50px clamp(24px, 4vw, 60px) 44px; --acento: var(--magenta); }
.planificando::before { background: var(--magenta); }
.servicios .servicio:nth-child(5) { grid-column: auto; }
.ejemplos { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 10px !important; }
.ejemplos a { color: var(--blanco); font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.6); }
.cab__menu .sub li.menor a { font-size: 14px; opacity: .8; }
.cab__menu .sub li:not(.menor) + li.menor { border-top: 1px solid var(--linea); padding-top: 8px; margin-top: 4px; }
.ver-ig { text-align: center; margin: 40px 0 10px; }
.ver-ig a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border: 1px solid var(--linea); color: var(--azul); text-decoration: none; font-weight: 500; }
.ver-ig a:hover { background: var(--azul); color: var(--blanco); }
.cab__menu .sub li.nivel2 a { padding-left: 14px; font-size: 15px; opacity: .85; }
.cab__menu .sub li.nivel2 a::before { content: "– "; }
@media (max-width: 1000px) { .cab__menu .sub li.nivel2 a { padding-left: 0; font-size: 16px; } }