:root { --madera: #C08A4B; --acero: #26343F; --gris: #5b6670; --linea: #e4e6e8; }
* { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body { font-family: 'Manrope', system-ui, sans-serif; color: var(--acero); background: #fff; line-height: 1.55; font-size: 17px }
a { color: inherit }
.ancho { max-width: 1080px; margin: 0 auto; padding: 0 24px }
.fila { display: flex; align-items: center; justify-content: space-between; gap: 16px }

.barra { position: sticky; top: 0; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--linea); z-index: 5 }
.barra .fila { height: 68px }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 19px }
nav { display: flex; align-items: center; gap: 26px; font-weight: 600; font-size: 15px }
nav a { text-decoration: none }
nav a:hover { color: var(--madera) }
.boton { background: var(--acero); color: #fff !important; padding: 10px 18px; text-decoration: none; font-weight: 700 }
.boton:hover { background: var(--madera) }
.boton.grande { display: inline-block; padding: 15px 28px; font-size: 17px; margin-top: 34px }

.portada { padding-top: 96px; padding-bottom: 96px; border-bottom: 1px solid var(--linea) }
.etq { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--madera) }
h1 { font-size: clamp(40px, 7vw, 76px); line-height: 1.04; font-weight: 800; letter-spacing: -.025em; margin: 18px 0 26px; max-width: 900px }
.entrada { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.5; color: var(--gris); max-width: 760px }

.bloque { padding-top: 76px; padding-bottom: 76px; border-bottom: 1px solid var(--linea) }
h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 34px }
h3 { font-size: 19px; font-weight: 800; margin-bottom: 14px }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; font-size: 18px; color: var(--gris) }
.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px }
ul { list-style: none }
ul li { padding: 7px 0 7px 22px; position: relative; font-weight: 600; border-top: 1px solid var(--linea) }
ul li:before { content: ''; position: absolute; left: 0; top: 16px; width: 9px; height: 9px; background: var(--madera) }
.pie { font-size: 15px; color: var(--gris); margin-top: 16px }
.aviso { margin-top: 48px; padding: 26px 28px; border-left: 4px solid var(--madera); background: #faf7f3 }
.aviso h3 { margin-bottom: 6px }
.aviso p { color: var(--gris) }

.tarifas { width: 100%; border-collapse: collapse }
.tarifas th { text-align: left; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); padding: 0 0 12px; border-bottom: 2px solid var(--acero) }
.tarifas td { padding: 20px 0; border-bottom: 1px solid var(--linea); vertical-align: top }
.tarifas td:first-child { font-weight: 800; width: 26% }
.tarifas td:nth-child(2) { color: var(--gris); padding-right: 20px }
.tarifas td:last-child, .tarifas th:last-child { text-align: right; white-space: nowrap }
.tarifas td:last-child { font-weight: 800; font-size: 22px; color: var(--madera) }
.tarifas td span { font-size: 14px; font-weight: 600; color: var(--gris) }

.reglas { list-style: none; counter-reset: r; max-width: 760px }
.reglas li { counter-increment: r; padding: 16px 0 16px 52px; position: relative; border-top: 1px solid var(--linea); color: var(--gris); font-size: 18px }
.reglas li:before { content: counter(r, decimal-leading-zero); position: absolute; left: 0; top: 16px; font-weight: 800; color: var(--madera) }
.reglas b { color: var(--acero) }

.contacto { background: var(--acero); color: #fff; padding: 84px 0 }
.contacto .entrada { color: #c9d0d6 }
.canales { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px }
.canales a { text-decoration: none; font-weight: 700; padding: 14px 20px; border: 1px solid rgba(255,255,255,.35) }
.canales a:hover { border-color: var(--madera); color: var(--madera) }

.final { padding-top: 26px; padding-bottom: 40px; font-size: 14px; color: var(--gris) }

.legal { padding-top: 64px; padding-bottom: 80px; max-width: 820px }
.legal h1 { font-size: clamp(32px, 5vw, 48px) }
.legal h2 { font-size: 21px; margin: 34px 0 10px }
.legal p, .legal li { color: var(--gris); margin-bottom: 10px }
.legal ol { padding-left: 22px }

@media (max-width: 760px) {
  nav a:not(.boton) { display: none }
  .dos, .tres { grid-template-columns: 1fr; gap: 28px }
  .portada { padding-top: 60px; padding-bottom: 60px }
  .bloque { padding-top: 54px; padding-bottom: 54px }
  .tarifas thead { display: none }
  .tarifas td { display: block; padding: 4px 0; border: 0; width: auto !important; text-align: left !important }
  .tarifas tr { display: block; padding: 16px 0; border-bottom: 1px solid var(--linea) }
  .final { flex-direction: column; align-items: flex-start }
}