/* Margin Studio — páginas interiores (Servicios, Portfolio, Precios, Contacto, legales) */

/* ---------- Secciones ---------- */
.sec { padding-block: var(--sec); position: relative; }

/* ---------- Cabecera de página ---------- */
.pag-cabeza { padding-top: calc(var(--header-h) + clamp(64px, 10vw, 152px)); padding-bottom: clamp(56px, 8vw, 120px); }
.pag-cabeza .wrap { display: grid; gap: 24px; }
.pag-cabeza .display { max-width: 11em; }
.pag-cabeza .texto { font-size: 1.1875rem; line-height: 1.5; color: var(--fg-2); max-width: 30em; }
@media (min-width: 900px) {
  .pag-cabeza .wrap { grid-template-columns: 7fr 5fr; align-items: end; column-gap: 48px; }
  .pag-cabeza .etiqueta, .pag-cabeza .display { grid-column: 1 / -1; }
  .pag-cabeza .texto { grid-column: 2; }
}

/* ---------- Íconos propios ---------- */
.icono { width: 40px; height: 40px; flex: none; color: var(--fg); }
.icono .det { color: var(--acento); }
.icono svg { width: 100%; height: 100%; overflow: visible; }

/* ---------- Servicios: lista numerada ---------- */
.servicios { border-top: 1px solid var(--linea); }
.servicio {
  position: relative; display: grid; gap: 16px; padding-block: 32px; border-bottom: 1px solid var(--linea);
  grid-template-columns: auto 1fr;
}
.servicio-num { font-size: var(--t-etiqueta); font-weight: 600; letter-spacing: .12em; color: var(--fg-2); font-variant-numeric: tabular-nums; padding-top: .9em; }
.servicio-cuerpo { display: grid; gap: 16px; transition: transform .45s var(--ease-out); }
.servicio-titulo { display: flex; align-items: center; gap: 16px; }
.servicio-titulo h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem); line-height: 1.04; letter-spacing: -0.035em; font-weight: 700; color: var(--fg); }
.servicio .texto { color: var(--fg-2); max-width: 36em; }
.servicio .pildoras { margin-top: 16px; }
.servicio .enlace { margin-top: 16px; }
.servicio .flecha-fila {
  position: absolute; right: 0; top: 36px; font-size: 1.5rem; color: var(--fg);
  opacity: 0; transform: translateX(-8px); transition: opacity .3s var(--ease-out), transform .45s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .servicio:hover .servicio-cuerpo { transform: translateX(12px); }
  .servicio:hover .flecha-fila { opacity: 1; transform: none; }
}
@media (min-width: 900px) {
  .servicio { grid-template-columns: 64px 1fr; padding-block: 44px; }
  .servicio-cuerpo { grid-template-columns: 1.1fr 1fr; column-gap: 48px; align-items: start; padding-right: 48px; }
  .servicio-cuerpo .servicio-titulo { grid-row: span 2; }
  .servicio .pildoras { justify-content: flex-start; }
}

/* ---------- Portfolio ---------- */
.obras { display: grid; gap: clamp(72px, 9vw, 128px); }
.obra { display: grid; gap: 24px; }
.obra-escena {
  position: relative; background: var(--hueso); border-radius: var(--r-md); overflow: hidden;
  aspect-ratio: 4 / 3; padding: 7% 18% 12% 7%;
}
.obra-escena .marco { box-shadow: 0 1px 0 rgba(30, 36, 26, .06), 0 24px 48px -28px rgba(30, 36, 26, .35); }
.marco-movil {
  position: absolute; right: 6%; bottom: -10%; width: 23%;
  background: var(--oliva-negro); border-radius: 22px; padding: 6px;
  box-shadow: 0 24px 48px -24px rgba(30, 36, 26, .45);
}
.marco-movil img { width: 100%; height: auto; border-radius: 16px; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; background: var(--oliva-profundo); }
.obra-texto { display: grid; gap: 8px; }
.obra-cabeza { display: flex; align-items: baseline; gap: 16px; }
.obra-num { font-size: var(--t-etiqueta); font-weight: 600; letter-spacing: .12em; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.obra-nombre { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); line-height: 1; letter-spacing: -0.04em; font-weight: 700; color: var(--fg); }
.obra-meta { font-size: var(--t-seccion); font-weight: 600; color: var(--fg); letter-spacing: -0.01em; }
.obra .proy-desc { margin-top: 4px; }
.obra .pildoras { margin-top: 12px; }
.obra .proy-enlace { margin-top: 12px; }
@media (min-width: 900px) {
  .obras { grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .obra:nth-child(even) { margin-top: 160px; }
}
@media (hover: hover) and (pointer: fine) {
  .obra-escena .marco, .marco-movil { transition: transform .6s var(--ease-out); }
  .obra:hover .obra-escena .marco { transform: translateY(-6px); }
  .obra:hover .marco-movil { transform: translateY(-12px); }
}

/* ---------- Precios ---------- */
.precios-bloque + .precios-bloque { margin-top: clamp(80px, 10vw, 144px); }
.precios-cabeza { display: grid; gap: 12px; margin-bottom: 40px; }
.precios-cabeza .texto { color: var(--fg-2); }
.tarifas { display: grid; gap: 16px; }
.tarifa {
  background: var(--hueso); border-radius: var(--r-md); padding: 28px 24px; display: grid; gap: 16px; align-content: start;
  color: var(--carbon); position: relative;
}
.tarifa h3 { font-size: var(--t-seccion); font-weight: 600; color: var(--oliva-negro); letter-spacing: -0.01em; }
.tarifa .precio { display: flex; align-items: baseline; gap: 6px; color: var(--oliva-negro); }
.tarifa .precio b { font-size: clamp(3rem, 2.2rem + 2.6vw, 4.5rem); font-weight: 700; letter-spacing: -0.05em; line-height: .9; }
.tarifa .precio span { font-size: 1rem; font-weight: 600; }
.tarifa .plazo { font-size: var(--t-pequeno); font-weight: 600; letter-spacing: .02em; color: var(--texto-secundario); }
.tarifa .desc { color: var(--carbon); border-top: 1px solid var(--arena); padding-top: 16px; }
.tarifa--destacada { background: var(--oliva-negro); color: #E3DFD5; }
.tarifa--destacada h3, .tarifa--destacada .precio { color: var(--piedra); }
.tarifa--destacada .plazo { color: #B9B5AA; }
.tarifa--destacada .desc { color: #E3DFD5; border-color: #4A5340; }
.recomendado {
  justify-self: start; font-size: var(--t-etiqueta); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--oliva-negro); background: var(--oliva-claro); border-radius: var(--r-pill); padding: 6px 10px; line-height: 1;
}
.nota-precios { margin-top: 24px; display: grid; gap: 8px; max-width: 46em; }
.nota-precios p { color: var(--fg-2); }
.nota-precios strong { color: var(--fg); font-weight: 600; }
.nota-destacada {
  margin-top: 24px; display: flex; gap: 16px; align-items: center; padding: 20px 24px; border-radius: var(--r-md);
  border: 1px solid var(--linea); color: var(--fg); font-weight: 600; font-size: 1.125rem; letter-spacing: -0.01em;
}
.condiciones { display: grid; gap: 0; border-top: 1px solid var(--linea); }
.condiciones li { padding-block: 20px; border-bottom: 1px solid var(--linea); display: grid; grid-template-columns: 40px 1fr; color: var(--fg-texto); }
.condiciones li span { font-size: var(--t-etiqueta); font-weight: 600; letter-spacing: .12em; color: var(--fg-2); padding-top: .3em; }
@media (min-width: 900px) {
  .tarifas { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .tarifa { padding: 36px 32px; min-height: 100%; }
  .precios-dos { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
}

/* ---------- Contacto ---------- */
.vias { border-top: 1px solid var(--linea); }
.via {
  display: grid; gap: 8px; padding-block: 28px; border-bottom: 1px solid var(--linea); color: var(--fg);
  transition: background-color .3s var(--ease-out);
}
.via-tipo { font-size: var(--t-etiqueta-grande); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--acento); }
.via-dato {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: clamp(1.25rem, 5.4vw, 3.5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05;
  overflow-wrap: anywhere;
}
.via-dato .flecha { flex: none; font-size: .6em; transition: transform .35s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  a.via:hover .via-dato .flecha { transform: translate(4px, -4px); }
  a.via:hover .via-dato .t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
}
.contacto-nota { margin-top: 32px; color: var(--fg-2); }
@media (min-width: 900px) {
  .via { grid-template-columns: 200px 1fr; align-items: center; padding-block: 36px; }
}

/* ---------- Textos legales ---------- */
.legal { max-width: 44em; }
.legal h2 { font-size: var(--t-seccion); font-weight: 600; color: var(--fg); margin-top: 48px; margin-bottom: 12px; letter-spacing: -0.01em; }
.legal p, .legal li { color: var(--fg-texto); line-height: 1.6; }
.legal p + p { margin-top: 12px; }
.legal ul { list-style: none; display: grid; gap: 8px; margin-top: 12px; }
.legal li { padding-left: 20px; position: relative; }
.legal li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--acento); }
.legal a { color: var(--fg); text-decoration: underline; text-underline-offset: .15em; }
.legal .actualizado { margin-top: 48px; color: var(--fg-2); font-size: var(--t-pequeno); }

/* ---------- Cierre común ---------- */
.cierre-pag .wrap { display: grid; gap: 28px; justify-items: start; }
.cierre-pag .titulo { max-width: 14em; }
.cierre-pag .texto { color: var(--fg-2); font-size: 1.1875rem; line-height: 1.5; }

/* ---------- Piezas compartidas con Inicio ---------- */
.marco { background: var(--hueso); border-radius: var(--r-md); overflow: hidden; box-shadow: 0 0 0 1px rgba(30, 36, 26, .08); }
.marco-barra { display: flex; gap: 6px; align-items: center; height: 28px; padding-inline: 12px; background: var(--hueso); border-bottom: 1px solid var(--arena); }
.marco-barra i { width: 8px; height: 8px; border-radius: 50%; background: var(--arena); }
.marco img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: var(--oliva-profundo); }
.pildoras { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.pildoras li {
  font-size: .8125rem; font-weight: 600; line-height: 1; padding: 8px 12px;
  border-radius: var(--r-pill); border: 1px solid var(--linea); color: var(--fg);
}
.proy-desc { color: var(--fg-2); max-width: 30em; }