/* Osito Valiente — hoja de estilo única.
   Variante "inmersiva": el layout es sobrio, la calidez viene de la foto.
   Sin framework, sin build: se edita este archivo y ya está. */

:root {
  --crema: #f6f1e9;
  --blanco: #ffffff;
  --tinta: #1a1614;
  --gris: #6e645a;
  --ambar: #b85c2a;
  --linea: #e2d9cc;
  --max: 1080px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* red de seguridad: la página nunca debe poder desplazarse en horizontal.
     Si algún elemento se pasa de ancho, se recorta aquí en vez de romper
     la lectura en el móvil */
  overflow-x: hidden;
}

body {
  background: var(--crema);
  color: var(--tinta);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 700px) {
  .wrap {
    padding: 0 22px;
  }
}

img {
  max-width: 100%;
}

/* ---------- tipografía ---------- */

h1 {
  font-size: clamp(36px, 6.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
  max-width: 16ch;
  text-wrap: balance;
}
h2 {
  font-size: clamp(27px, 3.8vw, 42px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.13;
  max-width: 18ch;
  text-wrap: balance;
}
h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}

.lead {
  margin-top: 22px;
  font-size: clamp(17px, 2vw, 20px);
  color: var(--gris);
  max-width: min(54ch, 100%);
  line-height: 1.55;
}
.cuerpo p {
  font-size: 17px;
  color: var(--gris);
  margin-top: 18px;
  max-width: min(58ch, 100%);
}
.cuerpo p:first-child {
  margin-top: 0;
}
.cuerpo strong {
  color: var(--tinta);
  font-weight: 600;
}
.cuerpo a {
  color: var(--ambar);
}

.kicker {
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambar);
  font-weight: 600;
  margin-bottom: 20px;
}

/* En el móvil el cuerpo de texto se lee más pequeño que en pantalla grande,
   aunque sean los mismos píxeles: se sube un punto en todo el texto corrido. */
@media (max-width: 820px) {
  .cuerpo p {
    font-size: 18px;
    line-height: 1.62;
  }
  .lead {
    font-size: 18.5px;
  }
  .via-txt,
  .fuente,
  .aviso,
  .pregunta p {
    font-size: 17px;
  }
  .via-lista li {
    font-size: 17px;
  }
  .franja p {
    font-size: 16px;
  }
}

/* ---------- botones ---------- */

.acciones {
  display: flex;
  gap: 13px;
  margin-top: 34px;
  flex-wrap: wrap;
}
/* sólo se muestra en teléfonos, ver la regla de .portada más abajo */
.acciones-movil {
  display: none;
}
.btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 100px;
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-1 {
  background: var(--ambar);
  color: #fff;
}
.btn-1:hover {
  background: var(--tinta);
  color: #fff;
}
.btn-2 {
  color: var(--tinta);
  border-color: var(--linea);
}
.btn-2:hover {
  border-color: var(--tinta);
}
.btn-claro {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
}
.btn-claro:hover {
  background: #fff;
  color: var(--tinta);
  border-color: #fff;
}

/* ---------- cabecera interior (páginas que no son portada) ---------- */

.cab {
  border-bottom: 1px solid var(--linea);
  background: var(--crema);
}
.cab .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 40px;
  font-size: 14px;
  gap: 20px;
  flex-wrap: wrap;
}
@media (max-width: 700px) {
  .cab .wrap {
    padding: 20px 22px;
  }
}
.marca {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--tinta);
}
.menu {
  display: flex;
  gap: 24px;
  align-items: center;
  font-size: 14.5px;
}
/* en móvil el menú de 3 entradas no cabe junto a la marca:
   se reduce el hueco y, si hace falta, salta a la línea siguiente */
@media (max-width: 560px) {
  .menu {
    gap: 16px;
    font-size: 14px;
  }
  .cab .wrap,
  .portada .barra .wrap {
    gap: 10px 16px;
  }
  .portada .barra .wrap {
    flex-wrap: wrap;
  }
}
.menu a {
  color: var(--gris);
  text-decoration: none;
}
.menu a:hover,
.menu a[aria-current] {
  color: var(--tinta);
}

.titular {
  padding: clamp(48px, 6vw, 78px) 0 clamp(30px, 4vw, 44px);
}
.titular h1 {
  font-size: clamp(32px, 5vw, 54px);
  max-width: 20ch;
}

/* ---------- portada: foto a sangre ---------- */

.portada {
  position: relative;
  height: min(92vh, 780px);
  min-height: 520px;
  overflow: hidden;
}
.portada > picture,
.portada > img {
  display: block;
  width: 100%;
  height: 100%;
}
.portada img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* la foto ancha tiene el interior desenfocado a la izquierda y la escena a la
     derecha. Encuadrando hacia la derecha, el texto cae sobre el fondo tranquilo
     y ni el osito ni la cara quedan debajo. */
  object-position: 62% 30%;
  display: block;
}
/* En móvil la portada era casi el doble de alta que ancha: con esa proporción
   cualquier foto apaisada se recorta por los lados y deja fuera al osito o la
   cara. Dos cambios juntos: la portada se hace más baja (cabe más ancho de
   foto) y se sirve abrazo-vendaje-movil.jpg, un recorte vertical 4:5 hecho
   sobre el original, desde el <picture> del index. */
@media (max-width: 820px) {
  .portada {
    height: min(74vh, 620px);
    min-height: 460px;
  }
  .portada img {
    object-position: 42% 20%;
  }
}
/* el recorte vertical sólo entra en teléfonos (<=600px, igual que el <picture>
   del index). Entre 600 y 820 la portada sigue siendo ancha y usa el 16:9. */
@media (max-width: 600px) {
  .portada img {
    object-position: center 22%;
  }
  /* En el teléfono los botones salen de la foto y se apoyan debajo, sobre fondo
     oscuro liso: el osito deja de quedar tapado justo donde el pulgar toca.
     El titular y el subtítulo siguen dentro de la imagen, que es donde
     funcionan. La foto se acorta para dejarles sitio. */
  .portada {
    height: min(62vh, 520px);
    min-height: 380px;
  }
  /* el subtítulo también sale de la foto en el teléfono: junto con los botones
     forma el bloque de texto que va debajo, y así la imagen queda limpia. */
  .portada .txt {
    padding-bottom: 24px;
  }
  .portada .txt .sub {
    display: none;
  }
  .acciones-movil .sub-movil {
    color: rgba(255, 255, 255, 0.86);
    font-size: 16.5px;
    line-height: 1.55;
    margin: 0 0 22px;
  }
  /* los botones de la portada se ocultan aquí: en el teléfono los sirve el
     bloque .acciones-movil que va justo debajo de la foto, sobre banda oscura.
     Así el osito no queda tapado justo donde el pulgar va a tocar. */
  .portada .acciones {
    display: none;
  }
  .acciones-movil {
    display: block;
    background: var(--tinta);
    padding: 22px 0 26px;
    overflow: hidden;
  }
  .acciones-movil > .wrap {
    max-width: 100%;
    box-sizing: border-box;
  }
  .acciones-movil .acciones {
    display: flex;
    margin-top: 0;
    flex-wrap: nowrap;
    gap: 10px;
  }
  .acciones-movil .btn {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
  }
}
.portada::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(20, 14, 10, 0.9) 0%,
    rgba(20, 14, 10, 0.45) 45%,
    rgba(20, 14, 10, 0.18) 100%
  );
}
.portada .barra {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 3;
}
.portada .barra .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 40px;
  font-size: 14px;
}
@media (max-width: 700px) {
  .portada .barra .wrap {
    padding: 22px 22px;
  }
}
.portada .barra .marca,
.portada .barra .menu a {
  color: #fff;
}
.portada .barra .menu a {
  color: rgba(255, 255, 255, 0.78);
}
.portada .barra .menu a:hover {
  color: #fff;
}
.portada .estado {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}
.portada .txt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  color: #fff;
  padding-bottom: clamp(42px, 6vw, 72px);
}
.portada .sub {
  margin-top: 24px;
  font-size: clamp(16.5px, 2vw, 20px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  /* min() statt 50ch allein: en móvil 50ch es más ancho que la pantalla
     y el texto se salía por la derecha */
  max-width: min(50ch, 100%);
}

/* ---------- franja oscura de cifras ---------- */

.franja {
  background: var(--tinta);
  color: #fff;
}
.franja .wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  padding: 52px 40px;
}
@media (max-width: 700px) {
  .franja .wrap {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 40px 22px;
  }
}
.franja .n {
  font-size: clamp(32px, 4.4vw, 46px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.franja .n small {
  font-size: 0.52em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}
.franja p {
  margin-top: 10px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.5;
}

/* ---------- secciones ---------- */

section {
  padding: clamp(64px, 8vw, 100px) 0;
}
section.fino {
  padding: clamp(48px, 6vw, 72px) 0;
}
/* En móvil el hueco entre el titular y la sección siguiente se suma dos veces
   (el padding inferior de .titular más el superior de .fino) y deja un vacío
   raro antes del primer párrafo. */
@media (max-width: 820px) {
  .titular + section.fino {
    padding-top: 6px;
  }
}
.blanco {
  background: var(--blanco);
}

.alterno {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 66px);
  align-items: center;
}
@media (max-width: 820px) {
  .alterno {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}
.alterno img {
  width: 100%;
  height: clamp(300px, 40vw, 460px);
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
/* en móvil la foto va a sangre: ocupa todo el ancho de la pantalla y pierde
   las esquinas redondeadas. En una pantalla estrecha cada margen cuesta
   espacio real, y así la imagen respira igual que la portada. */
@media (max-width: 820px) {
  .alterno img {
    height: clamp(300px, 78vw, 460px);
    border-radius: 0;
    width: 100vw;
    max-width: 100vw;
    /* saca la imagen del padding lateral del .wrap sin tocar el HTML */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}
.alterno.invertido > :first-child {
  order: 2;
}

/* En móvil la foto sube por encima del texto, sea cual sea el orden del HTML.
   En escritorio la imagen sostiene la columna de texto a su lado; apilada
   debajo, el visitante se traga tres párrafos seguidos antes de ver nada.
   Poniéndola delante, la sección empieza por la imagen y el texto llega
   después, ya partido en trozos legibles. */
@media (max-width: 820px) {
  .alterno > img {
    order: -1;
  }
  .alterno.invertido > :first-child {
    order: 0;
  }
}

/* Párrafos algo más cortos y con más aire entre ellos en pantalla estrecha:
   un bloque de texto continuo es lo que convierte esta página en un muro. */
@media (max-width: 820px) {
  .alterno .cuerpo p + p {
    margin-top: 20px;
  }
}

/* pasos numerados */
.pasos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 46px;
}
@media (max-width: 820px) {
  .pasos {
    grid-template-columns: 1fr;
  }
}
.paso {
  background: var(--crema);
  padding: 32px 28px;
}
/* en móvil las tarjetas tenían mucho aire para muy poco texto:
   se aprieta el espacio y se sube el cuerpo de letra, que a 15px
   en una pantalla pequeña se lee apretado */
@media (max-width: 820px) {
  .paso {
    padding: 24px 22px;
  }
  .paso .i {
    width: 27px;
    height: 27px;
    margin-bottom: 12px;
  }
  .paso b {
    font-size: 17px;
    margin-bottom: 6px;
  }
  .paso p {
    font-size: 16.5px;
  }
}
.blanco .paso {
  background: var(--blanco);
}
.paso .i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ambar);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
}
.paso b {
  display: block;
  font-size: 15.5px;
  margin-bottom: 8px;
  font-weight: 600;
}
.paso p {
  font-size: 15px;
  color: var(--gris);
  line-height: 1.55;
}

/* cita sobre foto */
.destacado {
  position: relative;
  overflow: hidden;
}
.destacado > img {
  width: 100%;
  height: clamp(300px, 42vw, 480px);
  object-fit: cover;
  display: block;
}
.destacado::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 14, 10, 0.62);
}
/* en móvil la foto se recorta más estrecha y el motivo queda justo detrás
   del texto: se oscurece más para que la cita siga siendo legible */
@media (max-width: 700px) {
  .destacado::after {
    background: rgba(20, 14, 10, 0.76);
  }
}
.destacado .txt {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
}
.destacado blockquote {
  color: #fff;
  font-size: clamp(21px, 3.4vw, 36px);
  line-height: 1.32;
  letter-spacing: -0.02em;
  font-weight: 500;
  max-width: 22ch;
  text-wrap: balance;
}
.destacado .fuente {
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  max-width: min(46ch, 100%);
}

/* tabla de lotes */
.tabla {
  margin-top: 42px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 12px;
  overflow: hidden;
}
.fila {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  padding: 22px 30px;
  border-bottom: 1px solid var(--linea);
  align-items: center;
}
.fila:last-child {
  border-bottom: 0;
}
.fila.cab-tabla {
  background: var(--crema);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris);
  font-weight: 600;
  padding: 15px 30px;
}
.fila b {
  font-weight: 600;
  font-size: 17px;
}
.fila .imp {
  font-weight: 600;
  color: var(--ambar);
  font-size: 17px;
}
@media (max-width: 700px) {
  .fila {
    grid-template-columns: 1fr 1fr;
    padding: 18px 20px;
  }
  .fila.cab-tabla {
    padding: 13px 20px;
  }
  .fila > :nth-child(3) {
    grid-column: 1/-1;
    color: var(--gris);
    font-size: 14px;
  }
}

.nota {
  margin-top: 26px;
  font-size: 15px;
  color: var(--gris);
  max-width: min(64ch, 100%);
  line-height: 1.6;
  padding-left: 16px;
  border-left: 2px solid var(--ambar);
}

/* dos vías: empresas / particulares */
.dos-vias {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: 48px;
  align-items: stretch;
}
@media (max-width: 820px) {
  .dos-vias {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.via {
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: clamp(28px, 3.4vw, 40px);
  display: flex;
  flex-direction: column;
  background: var(--crema);
}
.blanco .via {
  background: var(--blanco);
}
.via:first-child {
  border-color: var(--ambar);
  border-width: 1.5px;
}
.via-tipo {
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ambar);
  margin-bottom: 14px;
}
.via h3 {
  font-size: clamp(21px, 2.6vw, 26px);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.via-txt {
  font-size: 16px;
  color: var(--gris);
  line-height: 1.55;
}
/* la lista se estira para que el botón y el pie queden a la misma altura
   en las dos tarjetas, aunque el texto de arriba tenga distinto largo */
.via-lista {
  list-style: none;
  margin: 24px 0 26px;
  border-top: 1px solid var(--linea);
  flex: 1 0 auto;
}
.via-lista li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--linea);
  font-size: 16px;
}
.via-lista span {
  color: var(--gris);
}
.via-lista b {
  font-weight: 600;
  font-size: 17px;
}
.via .btn {
  align-self: flex-start;
}
/* el pie ocupa una altura mínima fija en las dos tarjetas, para que el borde
   inferior coincida aunque solo una de ellas lleve texto aclaratorio */
.via-pie {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--gris);
  line-height: 1.5;
  min-height: 4.5em;
}
@media (max-width: 820px) {
  .via-pie {
    min-height: 0;
  }
}

/* aviso (p.ej. "todavía no podemos emitir certificado fiscal") */
.aviso {
  background: #fbf3ec;
  border: 1px solid #ebd9c9;
  border-radius: 10px;
  padding: 20px 24px;
  font-size: 15px;
  color: #6b4a34;
  line-height: 1.6;
  max-width: min(66ch, 100%);
}
.aviso strong {
  color: #4a3325;
}

/* preguntas */
.pregunta {
  border-top: 1px solid var(--linea);
  padding: 26px 0;
}
.pregunta:last-child {
  border-bottom: 1px solid var(--linea);
}
.pregunta p {
  font-size: 16.5px;
  color: var(--gris);
  max-width: min(62ch, 100%);
}

/* ---------- cta final ---------- */

.cta {
  background: var(--blanco);
  border-top: 1px solid var(--linea);
}
.cta .wrap {
  padding: clamp(58px, 7vw, 88px) 40px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 44px;
  align-items: center;
}
@media (max-width: 820px) {
  .cta .wrap {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 56px 22px;
  }
}
.precio .n {
  font-size: clamp(40px, 5.4vw, 60px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ambar);
}
.precio small {
  display: block;
  margin-top: 10px;
  color: var(--gris);
  font-size: 14.5px;
}

/* ---------- pie ---------- */

footer {
  background: var(--tinta);
  color: rgba(255, 255, 255, 0.6);
  font-size: 13.5px;
}
footer .wrap {
  padding: 44px 40px;
}
@media (max-width: 700px) {
  footer .wrap {
    padding: 36px 22px;
  }
}
.pie-cols {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
footer a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}
.pie-nota {
  margin-top: 22px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.42);
  max-width: min(58ch, 100%);
  line-height: 1.5;
}
.pie-legal {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
}

/* ---------- utilidades ---------- */
.centro {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}