/* Reverso · landing. Móvil primero: base para ~390 px y luego 640 y 1024 px.
   Colores del logo oficial (marca/colores.json): --hoja es el verde claro del símbolo y --tinta el
   oscuro de las letras. --re es ese mismo verde oscurecido para que el texto blanco se lea (5,3:1). */

:root {
  --re: var(--co-reverso-accion, #47782C);
  --re-osc: #325220;
  --re-claro: #E7F3DF;
  --tinta: var(--co-reverso-tinta, #222F1E);
  --suave: rgba(34, 47, 30, .66);
  --linea: rgba(34, 47, 30, .12);
  --papel: #F8F7F2;
  --salvia: #E5ECDE;
  --arena: #EFE5D3;
  --arena-2: #E3D3B8;
  --tierra: #9B6B47;
  --tierra-cl: #C7A07A;
  --vegetal: #6E4B33;
  --hoja: var(--co-reverso, #B0D07A);
  --barro: #B4532F;
  --cristal: rgba(255, 255, 255, .62);
  --barra: 64px;
  --radio: 22px;
  --lado: 16px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--barra) + 12px); }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: 'Archivo', system-ui, sans-serif; font-weight: 420; font-size: 1rem; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  padding-bottom: 84px; /* deja sitio al dock del móvil */
}
/* grano de papel: da materia a los colores planos */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2.5px solid var(--re); outline-offset: 3px; border-radius: 8px; }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.caja { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--lado); }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--tinta); color: #fff; padding: 10px 14px; border-radius: 10px; }
.saltar:focus { top: 12px; }

/* ---------- Voces tipográficas (una sola familia: Archivo) ---------- */
.titular { font-weight: 760; font-stretch: 84%; letter-spacing: -.028em; line-height: .96; text-wrap: balance; }
.etiqueta { font-weight: 650; font-stretch: 112%; text-transform: uppercase; letter-spacing: .09em; font-size: .7rem; line-height: 1.3; }
.cifra { font-weight: 280; font-stretch: 75%; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.02em; }
.cifra small { font-weight: 420; font-stretch: 100%; letter-spacing: 0; }
.titular .linea { display: block; }

/* El giro: la palabra se voltea como un terrón y enseña su cara verde */
.giro { display: inline-grid; transform: rotateX(180deg); transform-style: preserve-3d; }
.giro__cara { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; color: var(--tierra); }
.giro__cara--verde { transform: rotateX(180deg); color: var(--re); }

/* ---------- Botones ---------- */
.boton {
  --alto: 52px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--alto); padding: 0 22px; border-radius: 999px; overflow: hidden; isolation: isolate;
  font-weight: 620; font-size: .98rem; letter-spacing: -.005em; white-space: nowrap;
  transition: transform .5s var(--ease), background-color .3s, box-shadow .3s;
}
.boton--chico { --alto: 42px; padding: 0 16px; font-size: .9rem; }
.boton--ancho { width: 100%; }
.boton--verde { background: var(--re); color: #fff; box-shadow: 0 10px 24px -12px rgba(50, 82, 32, .7), inset 0 1px 0 rgba(255, 255, 255, .22); }
.boton--verde::before { /* brote de luz que cruza el botón al pasar */
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--re-osc);
  clip-path: circle(0% at 50% 120%); transition: clip-path .6s var(--ease);
}
.boton--claro { background: #fff; color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea); }
.boton--cristal { background: var(--cristal); color: var(--tinta); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 8px 24px -16px rgba(34, 47, 30, .5); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.boton .ico { transition: transform .5s var(--ease); }
@media (hover: hover) {
  .boton--verde:hover::before { clip-path: circle(140% at 50% 120%); }
  .boton:hover .ico:last-child { transform: translateX(3px); }
  .boton--claro:hover { box-shadow: inset 0 0 0 1.5px var(--re); }
}
.boton:active { transform: scale(.97); }

/* ---------- Barra superior ---------- */
.barra { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--barra); transition: background-color .4s, box-shadow .4s, transform .5s var(--ease); }
.barra.is-solida { background: rgba(248, 247, 242, .78); box-shadow: 0 1px 0 var(--linea); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
.barra.is-oculta { transform: translateY(-100%); }
.barra__in { height: 100%; display: flex; align-items: center; gap: 20px; }
.logo { display: inline-flex; align-items: flex-end; gap: 2px; margin-right: auto; }
.logo__img { display: block; height: 28px; width: auto; }
.barra__nav { display: none; }
.barra__tel { display: none; }
.barra__menu { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--cristal); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.barra__menu .ico { width: 22px; height: 22px; }

.menu { position: fixed; inset: 0; z-index: 80; visibility: hidden; }
.menu.is-abierto { visibility: visible; }
.menu__fondo { position: absolute; inset: 0; background: rgba(34, 47, 30, .3); opacity: 0; transition: opacity .4s; }
.menu.is-abierto .menu__fondo { opacity: 1; }
.menu__panel {
  position: absolute; inset: 8px 8px auto; padding: 72px 20px 20px; border-radius: 26px;
  background: rgba(248, 247, 242, .94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: 0 30px 60px -30px rgba(34, 47, 30, .5);
  transform: translateY(-110%); transition: transform .6s var(--ease);
}
.menu.is-abierto .menu__panel { transform: none; }
.menu__cerrar { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; }
.menu__links { display: grid; margin-bottom: 20px; }
.menu__links a { display: flex; align-items: baseline; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--linea); font-weight: 700; font-stretch: 86%; font-size: 1.7rem; letter-spacing: -.02em; }
.menu__links span { font-weight: 300; font-stretch: 75%; font-size: 1rem; color: var(--re); }
body.is-bloqueado { overflow: hidden; }

/* ---------- Portada ---------- */
.portada {
  position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; overflow: hidden;
  background: radial-gradient(120% 70% at 70% 78%, #F6F1E4 0%, rgba(246, 241, 228, 0) 60%), linear-gradient(180deg, #DDEBDA 0%, #E9F1E3 40%, #F1F2E8 75%, var(--papel) 100%);
}
.portada__escena { position: relative; flex: 1 1 auto; min-height: 380px; margin-top: 4px; }
.diorama { position: absolute; inset: 0; }
.diorama__lienzo { display: block; width: 100%; height: 100%; }
.escena { width: 100%; height: 100%; }
.portada .escena { position: absolute; inset: 0; }
.con-3d .escena, html:not(.con-3d) .diorama { display: none; }
.portada__texto { position: relative; z-index: 2; padding-top: calc(var(--barra) + 24px); }
.portada__antetitulo { display: inline-flex; align-items: center; gap: 10px; color: var(--re-osc); margin-bottom: 18px; }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--re); box-shadow: 0 0 0 4px rgba(71, 120, 44, .16); }
.portada__titular { font-size: clamp(2.6rem, 11.4vw, 7.6rem); margin-bottom: 18px; }
.portada__entrada { max-width: 31rem; font-size: 1.04rem; line-height: 1.5; color: var(--suave); margin-bottom: 24px; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.portada__otra {
  position: absolute; z-index: 3; right: var(--lado); bottom: 22px; display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 15px; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: var(--cristal); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 8px 20px -14px rgba(34, 47, 30, .5);
  opacity: 0; pointer-events: none; transition: opacity .5s, transform .5s var(--ease);
}
.portada__otra.is-visible { opacity: 1; pointer-events: auto; }
.portada__otra:disabled { opacity: .5; cursor: default; }
.portada__otra .ico { width: 15px; height: 15px; }
@media (hover: hover) { .portada__otra:not(:disabled):hover { transform: translateY(-2px); } }
@media (max-width: 639px) { .portada .nube { display: none; } }

/* Vídeo de intro a pantalla completa */
.intro { position: fixed; inset: 0; z-index: 150; background: var(--papel); }
.intro[hidden] { display: none; }
.intro__video { width: 100%; height: 100%; object-fit: cover; }
.intro__saltar { position: absolute; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }

/* ---------- Lo esencial: fichas de cristal sobre los estratos ---------- */
.esencial { position: relative; z-index: 4; margin-top: 0; }
.esencial__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ficha {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 132px; padding: 16px 14px 14px;
  border-radius: var(--radio); background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85), 0 18px 40px -26px rgba(64, 44, 26, .55);
  transition: transform .6s var(--ease), box-shadow .4s;
}
.ficha .etiqueta { color: var(--suave); font-size: .62rem; }
.ficha__dato { margin-top: auto; font-weight: 740; font-stretch: 86%; font-size: 1.32rem; letter-spacing: -.02em; line-height: 1.05; }
.ficha__dato small { font-weight: 500; font-stretch: 100%; font-size: .8rem; letter-spacing: 0; color: var(--suave); }
.ficha__dato .cifra { font-size: 1.9rem; }
.ficha__nota { font-size: .8rem; line-height: 1.3; color: var(--suave); }
.ficha__ir { position: absolute; top: 14px; right: 12px; width: 16px; height: 16px; color: var(--re); transition: transform .5s var(--ease); }
.ficha--verde { background: rgba(71, 120, 44, .9); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 18px 40px -22px rgba(50, 82, 32, .8); }
.ficha--verde .etiqueta, .ficha--verde .ficha__nota { color: rgba(255, 255, 255, .78); }
.ficha--verde .ficha__ir { color: #fff; }
@media (hover: hover) {
  .ficha:hover { transform: translateY(-4px); }
  .ficha:hover .ficha__ir { transform: rotate(-45deg); }
}

/* ---------- Cinta de materiales ---------- */
.cinta { overflow: hidden; margin-top: 56px; border-block: 1px solid var(--linea); padding: 14px 0; }
.cinta__pista { display: flex; align-items: center; gap: 28px; width: max-content; padding-left: 28px; will-change: transform; }
.cinta__pista span { font-weight: 300; font-stretch: 75%; font-size: 2rem; letter-spacing: -.01em; white-space: nowrap; }
.cinta__pista b { font-weight: 650; font-stretch: 112%; font-size: .62rem; letter-spacing: .09em; color: var(--re); vertical-align: .9em; margin-left: 4px; }
.cinta__hoja { width: 26px; height: 24px; fill: var(--hoja); } /* isotipo oficial (#iso) entre materiales */

/* ---------- Secciones y cabeceras ---------- */
.seccion { padding: 96px 0; }
.cabeza { max-width: 46rem; margin-bottom: 36px; }
.cabeza__num { display: flex; align-items: center; gap: 12px; color: var(--suave); margin-bottom: 18px; }
.cabeza__num span { font-weight: 300; font-stretch: 75%; font-size: 1.5rem; letter-spacing: 0; color: var(--re); }
.cabeza__titular { font-size: clamp(2.1rem, 8.6vw, 4.8rem); }
.cabeza__entrada { margin-top: 18px; max-width: 36rem; color: var(--suave); font-size: 1.04rem; }
.subtitulo { display: flex; align-items: center; gap: 8px; color: var(--suave); margin-bottom: 14px; }
.subtitulo .ico { width: 16px; height: 16px; }

/* ---------- Tarifas ---------- */
.vehiculos { display: grid; gap: 8px; margin-bottom: 12px; }
.vehiculo {
  display: grid; grid-template-columns: 108px 1fr auto; align-items: center; column-gap: 12px; text-align: left;
  padding: 12px 16px 12px 12px; border-radius: 18px; background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px var(--linea);
  transition: background-color .35s, box-shadow .35s;
}
.vehiculo::after { content: ""; grid-column: 3; grid-row: 1 / span 2; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--linea); transition: box-shadow .35s var(--ease); }
.vehiculo[aria-selected="true"] { background: #fff; box-shadow: inset 0 0 0 1.5px var(--re), 0 14px 30px -22px rgba(50, 82, 32, .6); }
.vehiculo[aria-selected="true"]::after { box-shadow: inset 0 0 0 6px var(--re); }
.vehiculo__dibujos { grid-row: 1 / span 2; display: flex; align-items: flex-end; gap: 5px; height: 24px; }
.vehiculo__dibujos svg { height: 16px; width: auto; overflow: visible; }
.vehiculo__nom { font-weight: 700; font-stretch: 90%; font-size: 1rem; line-height: 1.2; }
.vehiculo__cap { font-size: .8rem; color: var(--suave); font-variant-numeric: tabular-nums; }

.precios { display: grid; gap: 10px; }
.material {
  position: relative; display: grid; grid-template-columns: 76px 1fr; column-gap: 14px; row-gap: 18px;
  padding: 20px 18px 18px; border-radius: 26px; background: var(--salvia); overflow: hidden;
}
.material--tierra { background: var(--arena); }
.material__monton { width: 76px; height: 57px; overflow: visible; }
.material__nom { font-weight: 720; font-stretch: 88%; font-size: 1.25rem; letter-spacing: -.015em; line-height: 1.1; margin: 4px 0 10px; }
.ler { display: grid; gap: 4px; font-size: .84rem; line-height: 1.3; }
.ler div { display: grid; grid-template-columns: 4.6rem 1fr; gap: 8px; }
.ler dt { font-weight: 640; color: var(--re-osc); font-variant-numeric: tabular-nums; }
.ler dd { color: var(--suave); }
.precio { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: flex-end; gap: 6px; padding-top: 14px; border-top: 1px solid rgba(34, 47, 30, .1); perspective: 500px; }
.precio .cifra { display: inline-block; font-size: 5.4rem; line-height: .82; transform-origin: 50% 50% -20px; }
.precio__ud { display: grid; font-size: 1.6rem; font-weight: 300; font-stretch: 80%; line-height: 1; padding-bottom: 4px; }
.precio__ud small { font-size: .74rem; font-weight: 500; font-stretch: 100%; color: var(--suave); margin-top: 4px; }
/* descarga y nota de IVA en una misma fila: cierran el bloque de precios */
.tarifas__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 16px; }
.tarifas__pie .boton small { font-size: .74rem; font-weight: 450; color: var(--suave); margin-left: 2px; }
.tarifas__iva { font-size: .8rem; color: var(--suave); }

.suplementos { margin-top: 56px; }
.suplementos__lista { display: grid; grid-template-columns: 1fr 1fr; border-top: 1.5px solid var(--tinta); }
.suplementos__lista li { padding: 18px 14px 20px 0; border-bottom: 1px solid var(--linea); }
.suplementos__lista li:nth-child(2n) { padding-left: 14px; border-left: 1px solid var(--linea); }
.suplementos__lista .cifra { display: block; font-size: 2.7rem; line-height: 1; color: var(--re); margin-bottom: 8px; white-space: nowrap; }
.suplementos__lista .cifra small { font-size: .85rem; margin-left: 3px; color: var(--suave); }
.suplementos__lista p { font-size: .88rem; line-height: 1.35; }

.normas { display: grid; gap: 10px; margin-top: 40px; }
.normas__bloque { padding: 22px 20px; border-radius: 26px; background: #fff; box-shadow: inset 0 0 0 1px var(--linea); }
.normas__bloque ul { display: grid; margin-bottom: 4px; }
.normas__bloque li { position: relative; padding: 12px 0 12px 22px; border-bottom: 1px solid var(--linea); font-size: .93rem; line-height: 1.42; }
.normas__bloque li:last-child { border-bottom: 0; }
.normas__bloque li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 9px; height: 9px; border-radius: 0 60% 0 60%; background: var(--hoja); }
.normas__bloque--no { background: #FBF4EF; box-shadow: inset 0 0 0 1px rgba(180, 83, 47, .14); }
.normas__bloque--no .subtitulo { color: var(--barro); }
.normas__bloque--no li::before { border-radius: 2px; width: 10px; height: 1.6px; top: 22px; background: var(--barro); }
.normas__bloque .boton { margin-top: 14px; }

/* ---------- Del hueco al bosque ---------- */
.restauracion { position: relative; background: linear-gradient(180deg, var(--papel), #EEF3E8 30%, #EEF3E8 70%, var(--papel)); }
.restauracion__fijo { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; width: 100%; padding: calc(var(--barra) + 8px) 0 88px; }
.restauracion__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: center; }
.cabeza--compacta { margin-bottom: 0; }
.cabeza--compacta .cabeza__num { margin-bottom: 10px; }
.cabeza--compacta .cabeza__titular { font-size: clamp(1.7rem, 7vw, 3.8rem); }
.restauracion__marco {
  position: relative; aspect-ratio: 1; max-height: 46svh; border-radius: 26px; overflow: hidden;
  background: linear-gradient(180deg, #DDEBDA 0%, #EEF3E6 55%, #F6F1E4 100%);
  box-shadow: 0 30px 60px -40px rgba(64, 44, 26, .55);
}
.con-3d .restauracion__marco { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.nivel {
  position: absolute; top: 12px; right: 12px; display: grid; justify-items: end; gap: 4px; padding: 10px 12px 12px; border-radius: 16px;
  background: var(--cristal); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8);
}
.nivel .etiqueta { font-size: .58rem; color: var(--suave); }
.nivel__cifra { font-size: 2.3rem; line-height: .9; }
.nivel__cifra small { font-size: .9rem; color: var(--suave); }
.nivel__barra { width: 76px; height: 4px; border-radius: 4px; background: rgba(34, 47, 30, .1); overflow: hidden; }
.nivel__lleno { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--tierra-cl), var(--re)); transform-origin: 0 50%; transform: scaleX(0); }

.pasos { display: grid; position: relative; padding-bottom: 16px; }
.paso { grid-area: 1 / 1; display: grid; grid-template-columns: 44px 1fr; gap: 4px 10px; }
.paso > :not(.paso__barra) { opacity: 0; transition: opacity .5s var(--ease), transform .5s var(--ease); transform: translateY(8px); }
.paso.is-activo > :not(.paso__barra) { opacity: 1; transform: none; }
.paso__num { font-size: 2.2rem; line-height: .9; color: var(--re); }
.paso__tit { font-weight: 720; font-stretch: 88%; font-size: 1.25rem; letter-spacing: -.015em; margin-bottom: 2px; }
.paso p { font-size: .92rem; line-height: 1.4; color: var(--suave); }
/* en el móvil, las cuatro barras de progreso en fila debajo del texto activo */
.paso__barra { position: absolute; bottom: 0; left: calc(var(--i) * 25%); width: calc(25% - 6px); height: 3px; border-radius: 3px; background: rgba(34, 47, 30, .12); overflow: hidden; opacity: 1; }
.paso__barra span { display: block; height: 100%; background: var(--re); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.paso:nth-child(1) { --i: 0; } .paso:nth-child(2) { --i: 1; } .paso:nth-child(3) { --i: 2; } .paso:nth-child(4) { --i: 3; }

/* ---------- Cómo llegar ---------- */
.llegar__rejilla { display: grid; gap: 20px; }
.mapa { border-radius: 26px; overflow: hidden; background: #EEF3E8; box-shadow: 0 30px 60px -44px rgba(34, 47, 30, .6); }
.mapa__svg { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1.02; }
.mapa figcaption a { text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 640px) { .mapa__svg { aspect-ratio: 640 / 546; } }
.mapa figcaption { padding: 10px 16px 14px; font-size: .74rem; color: var(--suave); background: #fff; }
.datos { display: grid; }
.datos div { padding: 16px 0; border-bottom: 1px solid var(--linea); }
.datos div:first-child { border-top: 1.5px solid var(--tinta); }
.datos dt { color: var(--suave); margin-bottom: 6px; }
.datos dd { font-size: 1.02rem; line-height: 1.45; }
.datos dd small { display: block; margin-top: 4px; font-size: .86rem; color: var(--suave); }
.datos__coord { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.datos__coord .cifra { font-size: 1.7rem; line-height: 1; }
.copiar { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--re-claro); color: var(--re-osc); }
.copiar .ico { width: 15px; height: 15px; }
.llegar__botones { display: grid; gap: 8px; margin-top: 20px; }

/* ---------- Quiénes somos ---------- */
.nosotros { background: linear-gradient(180deg, var(--papel), var(--arena) 140%); }
.hermanas { display: grid; gap: 8px; }
.hermanas li > * { position: relative; display: grid; gap: 14px; height: 100%; padding: 20px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--linea); transition: transform .6s var(--ease), box-shadow .4s; }
.hermanas img { height: 34px; width: auto; max-width: 160px; object-fit: contain; object-position: left center; }
.hermanas p { font-size: .9rem; line-height: 1.4; color: var(--suave); padding-right: 22px; }
.hermanas b { color: var(--tinta); font-weight: 650; }
.hermanas .ico { position: absolute; top: 20px; right: 18px; width: 16px; height: 16px; color: var(--re); }
@media (hover: hover) { .hermanas a:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1.5px var(--re); } }

/* ---------- Preguntas frecuentes ---------- */
.dudas { padding-bottom: 40px; }
.dudas__lista { display: grid; gap: 8px; }
.dudas details { border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--linea); transition: box-shadow .4s; }
.dudas details[open] { box-shadow: inset 0 0 0 1.5px var(--re); }
.dudas summary { position: relative; display: block; padding: 18px 54px 18px 20px; font-weight: 650; font-size: 1rem; line-height: 1.35; cursor: pointer; list-style: none; }
.dudas summary::-webkit-details-marker { display: none; }
.dudas summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--re-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A6647' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 7v10M7 12h10'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .5s var(--ease); }
.dudas details[open] summary::after { transform: rotate(135deg); }
.dudas details p { padding: 0 20px 20px; color: var(--suave); font-size: .95rem; line-height: 1.5; }
.dudas details a, .acepto a, .pie__legal a, .legal a { color: var(--re-osc); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- Contacto ---------- */
.contacto__rejilla { display: grid; gap: 40px; }
.telefono { display: inline-block; margin: 26px 0 12px; font-size: clamp(3rem, 15.5vw, 8.6rem); line-height: .9; color: var(--re); white-space: nowrap; }
.contacto__mail { display: inline-flex; align-items: center; gap: 10px; font-size: 1.05rem; border-bottom: 1px solid var(--linea); padding-bottom: 4px; }
.formulario { display: grid; gap: 12px; padding: 22px 18px; border-radius: 26px; background: #fff; box-shadow: inset 0 0 0 1px var(--linea), 0 30px 60px -48px rgba(34, 47, 30, .6); }
.campo { display: grid; gap: 6px; }
.campo label, .campo legend { font-size: .8rem; font-weight: 600; color: var(--suave); }
.campo input, .campo textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--linea); background: #F6F5F0; font-size: 1rem; transition: border-color .3s, box-shadow .3s, background-color .3s; }
.campo textarea { resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--re); background: #fff; box-shadow: 0 0 0 4px rgba(71, 120, 44, .14); }
.campo--opciones { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.campo--opciones legend { width: 100%; margin-bottom: 6px; }
.opcion { position: relative; }
.opcion input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.opcion span { display: inline-flex; align-items: center; height: 42px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea); font-size: .92rem; font-weight: 600; cursor: pointer; transition: background-color .3s, color .3s, box-shadow .3s; }
.opcion input:checked + span { background: var(--re); color: #fff; box-shadow: none; }
.opcion input:focus-visible + span { outline: 2.5px solid var(--re); outline-offset: 2px; }
.trampa { position: absolute; left: -9999px; }
.acepto { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; line-height: 1.4; color: var(--suave); }
.acepto input { width: 20px; height: 20px; margin: 0; accent-color: var(--re); flex: none; }
.formulario__aviso { font-size: .86rem; min-height: 1.2em; color: var(--re-osc); }
.formulario__aviso.is-error { color: var(--barro); }

/* ---------- Pie ---------- */
.pie { padding: 24px 0 28px; overflow: hidden; }
.pie__marca { position: relative; display: flex; justify-content: center; padding-top: 6vw; }
/* la palabra es el nombre del logo oficial (reverso-nombre.svg) usado como máscara sobre los estratos */
.pie__palabra {
  position: relative; display: block; width: 94vw; aspect-ratio: 386.8 / 52.1; font-size: 0; color: transparent;
  -webkit-mask: url(../marca/logos/reverso-nombre.svg) center / 100% 100% no-repeat; mask: url(../marca/logos/reverso-nombre.svg) center / 100% 100% no-repeat;
  background: linear-gradient(180deg, #5C9455 0 12%, var(--vegetal) 12% 21%, var(--arena-2) 21% 42%, var(--tierra-cl) 42% 65%, var(--tierra) 65% 84%, #835A3D 84%);
}
.pie__brotes { position: absolute; left: 3%; width: 94%; bottom: calc(100% - 6vw - .5vw); height: 6vw; overflow: visible; }
.pie__brotes path { stroke-linecap: round; fill: none; vector-effect: non-scaling-stroke; }
.pie__in { display: grid; gap: 16px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--linea); }
.pie__grupo { display: flex; align-items: center; gap: 14px; }
.pie__grupo img { height: 30px; width: auto; }
.pie__logo { width: 150px; height: auto; }
.pie__grupo p, .pie__legal { font-size: .8rem; line-height: 1.5; color: var(--suave); }

/* ---------- Dock del móvil ---------- */
.dock {
  position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px; border-radius: 999px;
  background: rgba(248, 247, 242, .72); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 16px 40px -20px rgba(34, 47, 30, .55);
  transition: transform .6s var(--ease), opacity .4s;
}
.dock .boton { --alto: 48px; padding: 0 6px; gap: 5px; font-size: .86rem; } /* tres botones en 375 px */
.dock.is-oculto { transform: translateY(140%); opacity: 0; }

/* ---------- Estado inicial de lo que entra animado (solo con JS) ---------- */
.anim [data-entra] { opacity: 0; }
.anim .portada__titular .linea { opacity: 0; }

/* ======================= 640 px ======================= */
@media (min-width: 640px) {
  :root { --lado: 28px; }
  .esencial__rejilla { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .ficha { min-height: 156px; padding: 20px 18px 18px; }
  .ficha__dato { font-size: 1.6rem; }
  .vehiculos { grid-template-columns: repeat(3, 1fr); }
  .vehiculo { grid-template-columns: 1fr auto; row-gap: 2px; padding: 16px; }
  .vehiculo__dibujos { grid-row: auto; grid-column: 1 / -1; height: 40px; margin-bottom: 10px; }
  .vehiculo::after { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
  .vehiculo__dibujos svg { height: 26px; }
  .precios { grid-template-columns: 1fr 1fr; }
  .suplementos__lista { grid-template-columns: repeat(4, 1fr); }
  .suplementos__lista li, .suplementos__lista li:nth-child(2n) { padding: 22px 18px 24px; border-left: 1px solid var(--linea); }
  .suplementos__lista li:first-child { border-left: 0; padding-left: 0; }
  .normas { grid-template-columns: 1fr 1fr; }
  .llegar__botones { grid-template-columns: 1fr 1fr; }
  .hermanas { grid-template-columns: 1fr 1fr; }
}

/* ======================= 1024 px ======================= */
@media (min-width: 1024px) {
  :root { --lado: 48px; --barra: 76px; }
  body { padding-bottom: 0; }
  .dock { display: none; }
  .barra__nav { display: flex; gap: 4px; }
  .barra__nav a { position: relative; padding: 10px 14px; border-radius: 999px; font-size: .92rem; font-weight: 560; transition: background-color .3s; }
  .barra__nav a:hover { background: rgba(255, 255, 255, .6); }
  .barra__nav a.is-activo { background: #fff; box-shadow: inset 0 0 0 1px var(--linea); }
  .barra__tel { display: inline-flex; }
  .barra__menu { display: none; }
  .logo__img { height: 32px; }

  /* titular a la izquierda y entrada con botones a la derecha, sobre el cielo */
  .portada__texto { padding-top: calc(var(--barra) + 6vh); display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); column-gap: 56px; align-items: end; }
  .portada__antetitulo { grid-column: 1 / -1; justify-self: start; }
  .portada__titular { grid-column: 1; grid-row: 2 / span 2; margin-bottom: 0; font-size: clamp(4.6rem, 6.9vw, 8rem); }
  .portada__entrada { grid-column: 2; grid-row: 2; font-size: 1.12rem; margin-bottom: 22px; align-self: end; }
  .portada__acciones { grid-column: 2; grid-row: 3; padding-bottom: .6rem; }
  .esencial { margin-top: -36px; }
  .portada__escena { min-height: 520px; }
  .portada__otra { bottom: 64px; }
  .ficha { min-height: 184px; padding: 24px 22px 22px; }
  .ficha__dato { font-size: 2rem; }
  .ficha__dato .cifra { font-size: 2.8rem; }
  .ficha .etiqueta { font-size: .66rem; }

  .seccion { padding: 150px 0; }
  .cabeza { margin-bottom: 56px; }
  .cinta { margin-top: 96px; padding: 20px 0; }
  .cinta__pista span { font-size: 3.4rem; }
  .cinta__hoja { width: 36px; height: 33px; }

  .material { grid-template-columns: 96px 1fr; padding: 28px 28px 24px; }
  .material__monton { width: 96px; height: 72px; }
  .material__nom { font-size: 1.5rem; }
  .precio .cifra { font-size: 7.6rem; }

  .normas { grid-template-columns: 1fr 1.3fr; }
  .normas__bloque { padding: 30px 30px 26px; }

  .restauracion__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: auto 1fr; column-gap: 64px; row-gap: 40px; }
  .restauracion__in .cabeza { grid-column: 1; grid-row: 1; align-self: end; }
  .restauracion__marco { grid-column: 2; grid-row: 1 / span 2; aspect-ratio: auto; max-height: none; height: min(66vh, 620px); align-self: center; }
  .pasos { grid-column: 1; grid-row: 2; align-self: start; gap: 4px; padding-bottom: 0; }
  .paso { grid-area: auto; padding: 16px 0 18px; position: relative; }
  .paso > :not(.paso__barra) { opacity: .38; transform: none; }
  .paso.is-activo > :not(.paso__barra) { opacity: 1; }
  .paso__barra { position: absolute; left: 54px; right: 0; bottom: 0; width: auto; }
  .paso p { max-height: 0; overflow: hidden; transition: max-height .6s var(--ease); }
  .paso.is-activo p { max-height: 6em; }
  .nivel { top: 20px; right: 20px; padding: 14px 16px 16px; }
  .nivel__cifra { font-size: 3.2rem; }
  .nivel__barra { width: 110px; }

  .llegar__rejilla { grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; }
  .hermanas { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .contacto__rejilla { grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: center; }
  .dudas__rejilla { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start; }
  .dudas .cabeza { position: sticky; top: calc(var(--barra) + 32px); }
  .dudas summary { padding: 22px 60px 22px 26px; font-size: 1.08rem; }
  .dudas details p { padding: 0 26px 24px; }
  .formulario { grid-template-columns: 1fr 1fr; padding: 32px; gap: 16px; }
  .formulario .subtitulo, .campo--opciones, .campo--ancho, .acepto, .formulario .boton, .formulario__aviso { grid-column: 1 / -1; }
  .pie__in { grid-template-columns: auto 1fr; align-items: end; }
  .pie__legal { text-align: right; }
  .pie__grupo { grid-row: span 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Página legal (legal.html) y 404 ---------- */
.pagina-legal .barra { background: rgba(248, 247, 242, .86); box-shadow: 0 1px 0 var(--linea); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.pagina-legal .dock { grid-template-columns: 1fr 1.4fr; }
.legal { max-width: 52rem; padding-top: calc(var(--barra) + 48px); padding-bottom: 72px; }
.legal__num { color: var(--re); margin-bottom: 14px; }
.legal__titular { font-size: clamp(2.2rem, 9vw, 4.2rem); }
.legal__indice { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 8px; }
.legal__indice a { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--linea); font-size: .9rem; font-weight: 600; color: var(--tinta); text-decoration: none; }
.legal section { padding-top: 44px; }
.legal h2 { font-weight: 760; font-stretch: 84%; font-size: 1.9rem; letter-spacing: -.02em; line-height: 1; margin-bottom: 16px; }
.legal h3 { font-weight: 650; font-size: 1.02rem; margin: 26px 0 6px; }
.legal p { color: var(--suave); line-height: 1.6; margin-top: 10px; max-width: 46rem; }
.legal__datos { display: grid; margin: 18px 0 6px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--linea); }
.legal__datos > div { display: grid; gap: 2px; padding: 14px 18px; border-bottom: 1px solid var(--linea); }
.legal__datos > div:last-child { border-bottom: 0; }
.legal__datos dt { font-weight: 650; font-stretch: 112%; text-transform: uppercase; letter-spacing: .09em; font-size: .66rem; color: var(--re-osc); }
.legal__datos dd { margin: 0; font-size: .95rem; line-height: 1.5; }
.legal__fecha { margin-top: 40px !important; font-size: .85rem; }
.error404 { min-height: 100svh; display: grid; place-content: center; gap: 18px; text-align: center; padding: 96px var(--lado); }
.error404 .cifra { font-size: clamp(6rem, 34vw, 13rem); line-height: .8; color: var(--tierra); }
.error404 .titular { font-size: clamp(1.9rem, 7vw, 3rem); }
.error404 p { color: var(--suave); max-width: 26rem; margin: 0 auto; }
.error404__botones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
@media (min-width: 640px) {
  .legal__datos > div { grid-template-columns: 11rem 1fr; gap: 18px; padding: 16px 22px; }
  .legal__datos dt { padding-top: 4px; }
}