/* =====================================================================
   musgo. estudio web — seções da home
   Depende de tokens.css e components.css.
   ===================================================================== */

/* ---------- Hero ----------
   Título limpo à esquerda; à direita, um celular (moldura em CSS) que rola a
   página inteira (versão móvel) dos projetos. Animação de entrada: só o ● caindo.
   Calmos e contínuos: o celular, o pulso do selo e a faixa de serviços. */
.hero { position: relative; min-height: calc(100svh - 64px); display: flex; padding: 96px 0 var(--s-4); }
.hero__in { width: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-5); }
.hero__meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2);
  padding-bottom: var(--s-2); border-bottom: 1px solid var(--linea);
}
.hero__meta .rotulo { color: var(--musgo); }
.hero__grid { display: grid; gap: var(--s-6); align-items: center; }

.hero__titulo {
  font-size: clamp(2.75rem, 1rem + 5.2vw, 6.75rem);
  font-weight: 600; font-stretch: 78%; line-height: 0.92; letter-spacing: -0.045em;
}
.hero__acento { display: block; color: var(--caramelo-texto); } /* 5.01:1 */
.hero__fin { white-space: nowrap; }
.hero__punto { position: relative; }
.hero__cota { margin-top: var(--s-3); max-width: 560px; }
.hero__lead { margin-top: var(--s-3); max-width: 34ch; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-3); }

/* o ● cai do céu e quica três vezes até virar o ponto final (só com html.anim) */
@keyframes h-caer {
  0%   { transform: translateY(-120vh); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  55%  { transform: translateY(0);      animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  72%  { transform: translateY(-0.4em); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  86%  { transform: translateY(0);      animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  93%  { transform: translateY(-0.12em); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  100% { transform: translateY(0); }
}
.anim .hero__punto { animation: h-caer 0.9s linear 0.5s both; }

/* ---- o celular ---- */
.hero__visual { --ancho-d: min(70vw, 340px); min-width: 0; display: grid; justify-items: center; gap: var(--s-1); }
.hero__aparato { display: grid; justify-items: center; gap: var(--s-2); }
.telefono__info {
  display: flex; justify-content: space-between; gap: var(--s-2); width: var(--ancho-d);
  font-family: var(--f-mono); font-size: var(--mono-s); color: var(--cafe); font-variant-numeric: tabular-nums;
}
.telefono__url [data-vitrina-url] { transition: opacity var(--t-medio) var(--e-out); }
.telefono__url.is-cambiando [data-vitrina-url] { opacity: 0; }

.telefono {
  position: relative; width: var(--ancho-d); aspect-ratio: 9 / 19.2;
  padding: 10px; border-radius: 48px; background: var(--tinta);
  box-shadow:
    inset 0 0 0 1px rgb(243 237 226 / 0.12),
    0 40px 80px -40px rgb(20 38 30 / 0.55),
    0 12px 24px -12px rgb(20 38 30 / 0.35);
}
/* botões laterais, discretos */
.telefono::before, .telefono::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: var(--tinta); }
.telefono::before { left: -3px; top: 22%; height: 9%; box-shadow: 0 calc(var(--ancho-d) * 0.28) 0 var(--tinta); }
.telefono::after { right: -3px; top: 28%; height: 14%; }
.telefono__isla {
  position: absolute; z-index: 3; top: 20px; left: 50%; transform: translateX(-50%);
  width: 28%; height: 24px; border-radius: var(--r-pill); background: var(--tinta);
}
.telefono__pantalla {
  position: relative; display: block; width: 100%; height: 100%;
  overflow: hidden; border-radius: 38px; background: var(--arena); cursor: pointer;
}
.telefono__pantalla:focus-visible { outline: 2px solid var(--caramelo-claro); outline-offset: 2px; }
.telefono__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--e-in-out); }
.telefono__slide.is-activa { opacity: 1; }
.telefono__slide img { width: 100%; height: auto; will-change: transform; }
.telefono__pausa {
  position: absolute; left: 50%; bottom: 16px; transform: translate(-50%, 4px);
  padding: 4px 12px; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--tinta); color: var(--crema);
  font-family: var(--f-mono); font-size: var(--mono-s);
  opacity: 0; transition: opacity var(--t-medio) var(--e-out), transform var(--t-medio) var(--e-out);
}
.telefono.is-pausada .telefono__pausa { opacity: 1; transform: translate(-50%, 0); }

/* selo: foto redonda + hora ao vivo, ao lado da base do celular (sem cobrir a tela) */
.sello-k {
  display: inline-flex; align-items: center; gap: 8px; order: 2;
  padding: 4px 12px 4px 4px; border-radius: var(--r-pill);
  border: 1px solid var(--linea-fuerte); background: var(--papel);
  font-size: var(--step--1); line-height: 1.2; white-space: nowrap;
}
.sello-k img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; background: var(--arena); mix-blend-mode: multiply; }
.sello-k b { font-family: var(--f-mono); font-weight: 500; font-variant-numeric: tabular-nums; }

/* cajetín: o carimbo de identificação de uma planta de obra */
.cajetin { border: 1px solid var(--bosque); border-radius: var(--r-s); font-size: var(--step--1); background: var(--papel); }
.cajetin__fila { display: grid; grid-template-columns: 112px 1fr; align-items: baseline; gap: var(--s-2); padding: 8px 16px; border-top: 1px solid var(--linea-fuerte); }
.cajetin__fila:first-child { border-top: 0; }
.cajetin dt { font-family: var(--f-mono); font-size: var(--mono-s); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--cafe); }
.cajetin dd { margin: 0; font-weight: 500; }
.cajetin dd small { font-weight: 400; color: var(--musgo); font-size: inherit; }
.cajetin .relojes { color: var(--musgo); }
.cajetin__pie { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--bosque); }
.cajetin__pie span { padding: 8px 16px; font-family: var(--f-mono); font-size: var(--mono-s); color: var(--cafe); }
.cajetin__pie span + span { border-left: 1px solid var(--linea-fuerte); }

@media (min-width: 900px) {
  .hero { padding-top: 112px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(48px, 6vw, 112px); }
  /* 300–340px, sem passar da altura visível da tela (proporção 9:19,2) */
  .hero__visual { --ancho-d: clamp(240px, min(24vw, calc((100svh - 260px) * 0.47)), 340px); justify-items: end; }
  .hero__aparato { grid-template-columns: auto auto; align-items: end; justify-items: end; column-gap: var(--s-3); }
  .sello-k { order: 0; margin-bottom: var(--s-3); }

  /* o carimbo vira uma tira na base, como numa planta */
  .cajetin--tira { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; }
  .cajetin--tira .cajetin__fila { grid-template-columns: 1fr; gap: 4px; border-top: 0; border-left: 1px solid var(--linea-fuerte); }
  .cajetin--tira .cajetin__fila:first-child { border-left: 0; }
  .cajetin--tira .cajetin__pie { display: flex; flex-direction: column; justify-content: center; border-top: 0; border-left: 1px solid var(--bosque); }
  .cajetin--tira .cajetin__pie span { padding: 2px 16px; }
  .cajetin--tira .cajetin__pie span + span { border-left: 0; }
}

/* ---------- Faixa de serviços ---------- */
.faixa--servicios { padding: 16px 0; font-size: var(--step-2); font-weight: 500; letter-spacing: -0.01em; }
.faixa--servicios .punto { background: var(--rosa); }

/* ---------- Trabajos ---------- */
.seccion { padding-block: var(--seccion); }
.seccion__cab { row-gap: var(--s-3); margin-bottom: var(--s-6); align-items: end; }
.seccion__titulo { grid-column: 1 / -1; }
.seccion__titulo .rotulo { display: block; color: var(--cafe); margin-bottom: var(--s-2); }
.seccion__titulo h2 { font-size: var(--step-6); font-weight: 600; font-stretch: 80%; line-height: 0.95; letter-spacing: -0.04em; }
.seccion__titulo sup { font-family: var(--f-mono); font-size: 0.22em; font-weight: 500; letter-spacing: 0; color: var(--caramelo-texto); vertical-align: 2.6em; margin-left: 0.2em; }
.seccion__intro { grid-column: 1 / -1; display: grid; gap: var(--s-2); }
.seccion__intro p { max-width: 44ch; }
.leyenda { display: flex; flex-wrap: wrap; gap: var(--s-1); }
@media (min-width: 900px) {
  .seccion__titulo { grid-column: 1 / 8; }
  .seccion__intro { grid-column: 8 / -1; }
}

.casos { border-top: 1px solid var(--linea-fuerte); }
.caso { border-bottom: 1px solid var(--linea-fuerte); }
.caso__titulo { font: inherit; letter-spacing: normal; }
.caso__boton {
  display: grid; width: 100%; text-align: left;
  grid-template-columns: 32px 1fr auto;
  grid-template-areas: "n nombre icono" ". meta meta";
  align-items: center; gap: var(--s-1) var(--s-2);
  padding: var(--s-3) 0;
}
.caso__n { grid-area: n; font-family: var(--f-mono); font-size: var(--mono-s); color: var(--cafe); }
.caso__nombre {
  grid-area: nombre; font-size: var(--step-4); font-weight: 600; font-stretch: 85%; letter-spacing: -0.03em; line-height: 1.05;
  transition: transform var(--t-medio) var(--e-out), color var(--t-medio) var(--e-out);
}
.caso__meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
.caso__tipo { font-family: var(--f-mono); font-size: var(--mono-s); color: var(--cafe); }
.caso__icono {
  grid-area: icono; position: relative; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--linea-fuerte);
  transition: transform var(--t-medio) var(--e-salto), background-color var(--t-medio) var(--e-out), border-color var(--t-medio);
}
.caso__icono::before, .caso__icono::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%, -50%);
}
.caso__icono::before { width: 12px; height: 1.5px; }
.caso__icono::after { width: 1.5px; height: 12px; transition: transform var(--t-medio) var(--e-out); }
.caso__boton:hover .caso__icono { background: var(--caramelo); border-color: var(--caramelo); color: var(--tinta); }
.caso.is-abierto .caso__icono { transform: rotate(180deg); background: var(--bosque); border-color: var(--bosque); color: var(--crema); }
.caso.is-abierto .caso__icono::after { transform: translate(-50%, -50%) scaleY(0); }
.caso__boton:focus-visible { outline-offset: 6px; }

@media (min-width: 900px) {
  .caso__boton {
    grid-template-columns: 64px minmax(0, 1fr) auto 40px;
    grid-template-areas: "n nombre meta icono";
    padding: var(--s-4) 0; gap: var(--s-3);
  }
  .caso__meta { justify-content: flex-end; }
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .caso__boton:hover .caso__nombre { transform: translateX(var(--s-2)); }
}

/* painel: abre com o truque de grid-template-rows 0fr → 1fr */
.caso__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-lento) var(--e-in-out); }
.caso.is-abierto .caso__panel { grid-template-rows: 1fr; }
.caso__panel-in { overflow: hidden; min-height: 0; }
.caso__contenido {
  display: grid; gap: var(--s-4); padding: 0 0 var(--s-5);
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--t-medio) var(--e-out), transform var(--t-lento) var(--e-out);
}
.caso.is-abierto .caso__contenido { opacity: 1; transform: none; transition-delay: 120ms; }

.caso__desc { font-size: var(--step-1); line-height: 1.45; max-width: 36ch; }
.caso__ficha-titulo { margin-top: var(--s-4); color: var(--cafe); }
.caso__datos { display: grid; gap: 0; margin-top: var(--s-1); border-top: 1px solid var(--linea); }
.caso__datos div { display: grid; grid-template-columns: 96px 1fr; gap: var(--s-2); padding: 8px 0; border-bottom: 1px solid var(--linea); font-size: var(--step--1); }
.caso__datos dt { font-family: var(--f-mono); font-size: var(--mono-s); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--cafe); padding-top: 4px; }
.caso__datos dd { margin: 0; font-family: var(--f-mono); font-size: 0.8125rem; line-height: 1.5; }
.caso__enlace { margin-top: var(--s-3); }
.caso__nota { margin-top: var(--s-2); font-size: var(--step--1); color: var(--musgo); max-width: 40ch; }

.caso__visual { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 30%; gap: var(--s-2); align-items: end; }
.navegador { border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--linea-fuerte); background: var(--papel); }
.navegador__barra { display: flex; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--linea); }
.navegador__barra i { width: 8px; height: 8px; border-radius: 50%; background: var(--linea-fuerte); }
.navegador img { width: 100%; height: auto; aspect-ratio: 1600 / 721; object-fit: cover; object-position: top; background: var(--arena); }

.movil { border: 5px solid var(--tinta); border-radius: 22px; background: var(--tinta); overflow: hidden; }
.movil__pantalla {
  aspect-ratio: 9 / 19; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 17px; background: var(--arena); scrollbar-width: none;
}
.movil__pantalla::-webkit-scrollbar { display: none; }
.movil__pantalla img { width: 100%; height: auto; }

@media (min-width: 900px) {
  .caso__contenido { grid-template-columns: 64px minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-3); padding-bottom: var(--s-6); }
  .caso__info { grid-column: 2; }
  .caso__visual { grid-column: 3; grid-template-columns: minmax(0, 1fr) 24%; }
}

/* miniatura dentro da linha só onde não há cursor (o cursor mostra a imagem flutuante) */
.caso__mini { display: none; }
/* com mouse, quem navega pelo teclado também vê a imagem: aparece dentro da linha ao focar */
@media (hover: hover) and (pointer: fine) {
  .caso__boton { position: relative; }
  .caso__mini {
    display: block; position: absolute; left: 58%; top: 50%; z-index: 2;
    width: 240px; aspect-ratio: 16 / 10; border-radius: var(--r-m); overflow: hidden;
    pointer-events: none; opacity: 0;
    transform: translate(-50%, -50%) rotate(-3deg) scale(0.9);
    transition: opacity var(--t-medio) var(--e-out), transform var(--t-medio) var(--e-out);
    box-shadow: 0 24px 48px -24px rgb(20 38 30 / 0.45);
  }
  .caso__mini img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
  .caso__boton:focus-visible .caso__mini { opacity: 1; transform: translate(-50%, -50%) rotate(-3deg) scale(1); }
  .caso.is-abierto .caso__boton:focus-visible .caso__mini { opacity: 0; } /* aberto, a ficha já mostra as imagens */
}
.casos--sin-js li { padding: var(--s-3) 0; border-bottom: 1px solid var(--linea-fuerte); font-size: var(--step-1); }
@media (hover: none), (pointer: coarse) {
  .caso__boton { grid-template-columns: 32px 1fr auto auto; grid-template-areas: "n nombre mini icono" ". meta meta meta"; }
  .caso__mini { grid-area: mini; display: block; width: 72px; aspect-ratio: 16 / 10; border-radius: var(--r-s); overflow: hidden; background: var(--arena); }
  .caso__mini img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
}

.seccion__pie {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3);
  margin-top: var(--s-6);
}
.seccion__pie p { font-size: var(--step-3); font-weight: 600; font-stretch: 85%; letter-spacing: -0.02em; line-height: 1.1; }

/* ---------- Cabeçalho fixo (aparece ao subir a página) ---------- */
.cabecera.is-fija {
  position: fixed;
  background: rgb(243 237 226 / 0.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
  transition: transform var(--t-medio) var(--e-out);
}
.cabecera.is-fija .cabecera__in { min-height: 64px; }
.cabecera.is-oculta { transform: translateY(-100%); }
.cabecera.menu-abierto { transform: none; background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.caso__visual--solo { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .caso__visual--solo { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Servicios y precios: presupuesto de obra ---------- */
.seccion--linea { border-top: 1px solid var(--linea-fuerte); }
.seccion__titulo h2 .punto { width: 0.16em; height: 0.16em; }

/* fita de obra: o preço de lançamento */
.lanzamiento {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3);
  margin-bottom: var(--s-4); padding: 16px var(--s-3) 16px 56px;
  background: var(--caramelo); color: var(--tinta);   /* 5.54:1 */
  border-radius: var(--r-s); overflow: hidden;
}
.lanzamiento::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 32px;
  background: repeating-linear-gradient(-45deg, var(--tinta) 0 7px, var(--caramelo) 7px 14px);
}
.lanzamiento .rotulo { font-weight: 500; }
.lanzamiento__texto b { font-weight: 700; }

.presupuesto { border: 1px solid var(--bosque); border-radius: var(--r-s); background: var(--papel); }
.presupuesto__cab, .presupuesto__pie {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-3);
  padding: 12px var(--s-3);
  font-family: var(--f-mono); font-size: var(--mono-s); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--cafe);
}
.presupuesto__cab { border-bottom: 1px solid var(--bosque); }
.presupuesto__pie { border-top: 1px solid var(--bosque); text-transform: none; letter-spacing: 0.02em; font-size: var(--mono-s); line-height: 1.5; }

.partida { display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-3); }
.partida + .partida { border-top: 1px solid var(--linea-fuerte); }
.partida--destacada {
  position: relative; z-index: 1;
  background: var(--crema); outline: 1px solid var(--bosque);
  box-shadow: 6px 6px 0 var(--caramelo);
}
.partida--destacada + .partida { border-top-color: transparent; }
.partida__cab { display: grid; gap: var(--s-1); align-content: start; }
.partida__n { color: var(--cafe); }
.partida__nombre { font-size: var(--step-4); font-weight: 600; font-stretch: 85%; letter-spacing: -0.03em; line-height: 1; }
.partida__resumen { color: var(--musgo); max-width: 34ch; }
.partida__precio { display: flex; align-items: baseline; gap: var(--s-1); margin-top: var(--s-2); }
.partida__desde { font-family: var(--f-mono); font-size: var(--mono-s); color: var(--cafe); text-transform: uppercase; letter-spacing: var(--tr-mono); }
.partida__cifra { font-size: var(--step-5); font-weight: 600; font-stretch: 80%; letter-spacing: -0.04em; line-height: 1; }
.partida__unidad { font-size: var(--step-1); font-weight: 500; color: var(--musgo); }
.partida__tags { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); }

.partida__items { display: grid; padding: 0; list-style: none; align-content: start; }
.partida__items li { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; }
.partida__items li.is-base { font-weight: 600; }
.partida__guia { flex: 1; min-width: var(--s-3); border-bottom: 1.5px dotted var(--linea-fuerte); transform: translateY(-4px); }
.partida__inc { font-family: var(--f-mono); font-size: var(--mono-s); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--musgo); }

@media (min-width: 900px) {
  .partida { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-6); padding: var(--s-5) var(--s-4); }
}

/* ---------- Calculadora ---------- */
.calculadora {
  display: grid; gap: var(--s-5); margin-top: var(--s-5);
  padding: var(--s-4) var(--s-3); border-radius: var(--r-l);
}
.calculadora__titulo { font-size: var(--step-4); font-weight: 600; font-stretch: 85%; letter-spacing: -0.03em; line-height: 1; }
.opciones { border: 0; padding: 0; margin: var(--s-4) 0 0; min-width: 0; }
.opciones legend { padding: 0; margin-bottom: var(--s-1); color: var(--musgo-claro); }
.opciones__grupo { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.opcion { position: relative; }
.opcion input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.opcion span {
  display: inline-flex; align-items: center; gap: var(--s-1); min-height: 48px; padding: 0 var(--s-3);
  border: 1px solid var(--linea-clara); border-radius: var(--r-pill); font-weight: 500;
  transition: background-color var(--t-medio) var(--e-out), color var(--t-medio) var(--e-out), border-color var(--t-medio);
}
.opcion span small { font-family: var(--f-mono); font-size: var(--mono-s); font-weight: 400; opacity: 0.8; }
.opcion:hover span { border-color: var(--crema); }
.opcion input:checked + span { background: var(--crema); color: var(--bosque); border-color: var(--crema); }
.opcion input:focus-visible + span { outline: 2px solid var(--caramelo-claro); outline-offset: 3px; }

.interruptor { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 48px; margin-top: var(--s-3); cursor: pointer; font-weight: 500; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor__pista {
  position: relative; flex: none; width: 46px; height: 26px; border-radius: var(--r-pill);
  border: 1px solid var(--linea-clara); background: transparent;
  transition: background-color var(--t-medio) var(--e-out), border-color var(--t-medio);
}
.interruptor__bola {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--crema);
  transition: transform var(--t-medio) var(--e-salto), background-color var(--t-medio);
}
.interruptor input:checked + .interruptor__pista { background: var(--caramelo-claro); border-color: var(--caramelo-claro); }
.interruptor input:checked + .interruptor__pista .interruptor__bola { transform: translateX(20px); background: var(--tinta); }
.interruptor input:focus-visible + .interruptor__pista { outline: 2px solid var(--caramelo-claro); outline-offset: 3px; }
.interruptor__nota { font-family: var(--f-mono); font-size: var(--mono-s); font-weight: 400; color: var(--musgo-claro); }

.calculadora__resultado { display: grid; gap: var(--s-2); align-content: start; }
.desglose { display: grid; border-top: 1px solid var(--linea-clara); }
.desglose div { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linea-clara); }
.desglose dd { margin: 0; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.desglose .partida__guia { border-bottom-color: var(--linea-clara); }
.calculadora__total { display: grid; gap: 4px; margin-top: var(--s-2); }
.calculadora__total .rotulo { color: var(--musgo-claro); }
.calculadora__cifra { font-size: var(--step-6); font-weight: 600; font-stretch: 80%; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.calculadora__lanz { font-family: var(--f-mono); font-size: var(--mono-s); color: var(--caramelo-claro); min-height: 1.4em; }
.calculadora__resultado .btn { justify-self: start; margin-top: var(--s-2); }
.calculadora__nota { font-size: var(--step--1); color: var(--musgo-claro); }

@media (min-width: 900px) {
  .calculadora { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--s-7); padding: var(--s-6) var(--s-5); }
}

/* ---------- Proceso: cronograma ---------- */
.crono { position: relative; }
.crono__rail { position: absolute; left: 7px; top: 12px; bottom: 12px; width: 2px; background: var(--linea); }
.crono__barra { position: absolute; inset: 0; background: var(--bosque); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
.crono__punto {
  position: absolute; left: -7px; top: -8px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--burdeos); will-change: transform;
}
.crono__lista { display: grid; padding: 0; list-style: none; }
.crono__paso { position: relative; display: grid; gap: var(--s-1); padding: 0 0 var(--s-6) var(--s-6); }
.crono__paso:last-child { padding-bottom: 0; }
.crono__nodo {
  position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--linea-fuerte); background: var(--crema);
  transition: background-color var(--t-medio) var(--e-out), border-color var(--t-medio), transform var(--t-medio) var(--e-salto);
}
.crono__paso.is-activa .crono__nodo { background: var(--caramelo); border-color: var(--bosque); transform: scale(1.15); }
.crono__meta { display: flex; align-items: center; gap: var(--s-2); }
.crono__n { font-family: var(--f-mono); font-size: var(--mono-s); color: var(--cafe); transition: color var(--t-medio); }
.crono__paso.is-activa .crono__n { color: var(--burdeos); }
.crono__tag {
  padding: 4px 12px; border: 1px solid var(--linea-fuerte); border-radius: var(--r-pill);
  font-family: var(--f-mono); font-size: var(--mono-s); letter-spacing: var(--tr-mono); text-transform: uppercase;
}
.crono__cuerpo h3 { font-size: var(--step-3); font-weight: 600; font-stretch: 85%; letter-spacing: -0.02em; }
.crono__cuerpo p { margin-top: var(--s-1); max-width: 46ch; color: var(--musgo); }

@media (min-width: 900px) {
  .crono__paso { grid-template-columns: 200px minmax(0, 1fr); column-gap: var(--s-4); padding-left: var(--s-7); padding-bottom: var(--s-7); }
  .crono__meta { flex-direction: column; align-items: flex-start; gap: var(--s-1); padding-top: 8px; }
  .crono__cuerpo h3 { font-size: var(--step-4); }
}

/* ---------- Sobre mí ---------- */
.sobre__grid { display: grid; gap: var(--s-6); }
.sobre__rotulo { display: block; color: var(--cafe); margin-bottom: var(--s-2); }
.sobre__titulo { font-size: var(--step-6); font-weight: 600; font-stretch: 80%; line-height: 0.95; letter-spacing: -0.04em; }
.sobre__titulo span { display: block; }
.sobre__acento { color: var(--caramelo-texto); } /* 5.01:1 */
.sobre__lead { margin-top: var(--s-4); font-size: var(--step-1); line-height: 1.5; max-width: 44ch; }
.sobre__parrafo { margin-top: var(--s-2); color: var(--musgo); max-width: 52ch; }
.sobre__horario { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--linea); }
.sobre__hora { display: grid; gap: 4px; }
.sobre__hora .rotulo { color: var(--cafe); }
.sobre__hora b { font-family: var(--f-mono); font-size: var(--step-2); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.sobre__figura { --vano: 72px; position: relative; justify-self: end; width: min(72%, 380px); margin-top: var(--s-6); }
.sobre__foto { aspect-ratio: 840 / 919; overflow: hidden; border-radius: var(--r-m); background: var(--crema); }
.sobre__foto img { width: 100%; height: 100%; object-fit: cover; }
.sobre__figura figcaption {
  display: flex; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-1);
  font-family: var(--f-mono); font-size: var(--mono-s); letter-spacing: 0.02em; color: var(--cafe);
}
.sobre__figura figcaption span:last-child { white-space: nowrap; }

/* o prumo: prego + linha + o ponto como peso, no vão à esquerda da foto */
.plomada { position: absolute; top: -64px; left: calc(var(--vano) / -2); height: calc(64px + 44%); width: 2px; pointer-events: none; }
.plomada__clavo { position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--bosque); }
.plomada__brazo { position: absolute; inset: 0; transform-origin: 50% 0; }
.plomada__cuerda { position: absolute; top: 0; bottom: 12px; left: 0; width: 1px; background: var(--bosque); transform-origin: 50% 0; }
.plomada__peso { position: absolute; bottom: 0; left: -11px; width: 24px; height: 24px; border-radius: 50%; background: var(--burdeos); }
.plomada__grado {
  position: absolute; top: calc(100% + 10px); left: -22px; white-space: nowrap;
  font-family: var(--f-mono); font-size: var(--mono-s); color: var(--cafe); font-variant-numeric: tabular-nums;
}

@media (min-width: 900px) {
  .sobre__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(96px, 10vw, 160px); align-items: center; }
  .sobre__figura { --vano: clamp(96px, 10vw, 160px); width: 100%; max-width: 480px; margin-top: 0; }
  .plomada { top: -120px; height: calc(120px + 44%); }
}


/* três princípios grandes */
.principios { margin-top: var(--s-8); padding: 0; list-style: none; border-top: 1px solid var(--bosque); }
.principio { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-1) var(--s-2); padding: var(--s-4) 0; border-bottom: 1px solid var(--linea-fuerte); }
.principio__n { font-family: var(--f-mono); font-size: var(--mono-s); color: var(--cafe); padding-top: 0.7em; transition: color var(--t-medio); }
.principio__titulo { font-size: var(--step-5); font-weight: 600; font-stretch: 80%; letter-spacing: -0.04em; line-height: 1; }
.principio__texto { grid-column: 2; color: var(--musgo); max-width: 40ch; }
.principio:hover .principio__n { color: var(--burdeos); }
@media (min-width: 900px) {
  .principio { grid-template-columns: 64px minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-4); align-items: baseline; padding: var(--s-5) 0; }
  .principio__texto { grid-column: 3; }
}

/* ---------- Opiniones ---------- */
.opiniones__lista { display: grid; gap: var(--s-5); padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.opinion { display: grid; gap: var(--s-3); align-content: start; padding-top: var(--s-3); border-top: 1px solid var(--bosque); }
.opinion blockquote { font-size: var(--step-2); line-height: 1.35; letter-spacing: -0.01em; }
.opinion blockquote::before { content: "«"; color: var(--caramelo-texto); }
.opinion blockquote::after { content: "»"; color: var(--caramelo-texto); }
.opinion__autor { display: grid; gap: 4px; font-size: var(--step--1); }
.opinion__autor b { font-weight: 600; font-size: var(--step-0); }
.opinion__autor span { font-family: var(--f-mono); font-size: var(--mono-s); color: var(--cafe); }

/* ---------- FAQ ---------- */
.faq-grid { row-gap: var(--s-5); }
.faq-grid__cab { grid-column: 1 / -1; }
.faq-grid__cab h2 { font-size: var(--step-5); }
.faq-grid__nota { margin-top: var(--s-3); color: var(--musgo); }
.faq-grid .faq { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .faq-grid__cab { grid-column: 1 / 6; align-self: start; position: sticky; top: 120px; }
  .faq-grid .faq { grid-column: 7 / -1; }
}
.faq--numerada summary { display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; gap: var(--s-2); align-items: center; }
.faq__n { font-family: var(--f-mono); font-size: var(--mono-s); font-weight: 400; color: var(--cafe); transition: color var(--t-medio); }
.faq--numerada details[open] .faq__n { color: var(--burdeos); }
.faq--numerada summary:hover .faq__q { color: var(--caramelo-texto); }
.faq__q { transition: color var(--t-medio); }
.faq--numerada .faq__respuesta { padding-left: calc(40px + var(--s-2)); }

/* abertura suave onde o navegador suporta (progressivo: os outros só abrem) */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size var(--t-medio) var(--e-out), content-visibility var(--t-medio) allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}

/* ---------- Contacto ---------- */
.contacto { padding-block: var(--seccion); }
.contacto__rotulo { display: block; color: var(--musgo-claro); margin-bottom: var(--s-2); }
.contacto__titulo {
  font-size: clamp(4.5rem, 1rem + 17vw, 17rem); font-weight: 600; font-stretch: 75%;
  line-height: 0.82; letter-spacing: -0.055em; margin-left: -0.04em;
}
.contacto__grid { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
.contacto__info { display: grid; gap: var(--s-4); align-content: start; }
.contacto__lead { font-size: var(--step-2); line-height: 1.35; max-width: 26ch; }
.contacto__info .btn { justify-self: start; }
.contacto__datos { display: grid; border-top: 1px solid var(--linea-clara); }
.contacto__datos div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-2); align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--linea-clara); }
.contacto__datos dt { font-family: var(--f-mono); font-size: var(--mono-s); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--musgo-claro); }
.contacto__datos dd { margin: 0; overflow-wrap: anywhere; }
.contacto__datos .relojes { color: var(--musgo-claro); }
.contacto__info .disponible { justify-self: start; }

.formulario { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-4) var(--s-3); border: 1px solid var(--linea-clara); border-radius: var(--r-l); }
.formulario__titulo { font-size: var(--step-3); font-weight: 600; font-stretch: 85%; letter-spacing: -0.02em; }
.formulario__campos { display: grid; gap: var(--s-3); }
.campo { display: grid; gap: 8px; }
.campo label { font-weight: 500; }
.campo__opc { font-family: var(--f-mono); font-size: var(--mono-s); font-weight: 400; color: var(--musgo-claro); }
.campo input, .campo textarea {
  width: 100%; min-height: 48px; padding: 12px 0;
  background: transparent; border: 0; border-bottom: 1px solid rgb(243 237 226 / 0.45); border-radius: 0;
  color: var(--crema); font-size: var(--step-1); line-height: 1.4;
  transition: border-color var(--t-rapido), box-shadow var(--t-rapido);
}
.campo textarea { resize: vertical; min-height: 112px; }
.campo input:focus-visible, .campo textarea:focus-visible {
  outline: none; border-bottom-color: var(--caramelo-claro); box-shadow: 0 2px 0 var(--caramelo-claro);
}
.campo.is-error input, .campo.is-error textarea { border-bottom-color: var(--rosa); }
.campo__error { color: var(--rosa); font-size: var(--step--1); }       /* 5.84:1 */
.campo__ayuda { color: var(--musgo-claro); font-size: var(--step--1); }
.formulario .btn { justify-self: start; }
.formulario__nota { color: var(--musgo-claro); font-size: var(--step--1); }
.formulario__nota .enlace { color: var(--crema); }
.formulario__estado { font-family: var(--f-mono); font-size: var(--mono-s); color: var(--caramelo-claro); min-height: 1.4em; }

@media (min-width: 720px) {
  .formulario__campos { grid-template-columns: 1fr 1fr; }
  .campo--ancho { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .contacto__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--s-7); }
  .formulario { padding: var(--s-5); }
}