/* ==========================================================================
   Home de Presento LLC. Se carga después de estilo.css y solo en index.html:
   las páginas legales siguen con su estilo de documento.
   ========================================================================== */

.inicio main { padding-bottom: 0; }
.inicio section + section { margin-top: 0; }
.inicio .cabecera { margin-bottom: 0; background: var(--tinta); border-bottom-color: #ffffff1a; }
.inicio .cabecera .marca { color: var(--papel); }
.inicio .cabecera .marca span { color: #a9bdb3; }
.inicio .navegacion a { color: #a9bdb3; }
.inicio .navegacion a:hover { color: var(--papel); }

/* --- Portada ------------------------------------------------------------- */

.portada {
  background: var(--tinta);
  color: var(--papel);
  padding: 5rem 0 3.5rem;
}

.portada h1 { color: var(--papel); max-width: 20ch; font-size: clamp(2.2rem, 6.5vw, 3.9rem); }
.portada .entrada { color: #c5d3cc; max-width: 42rem; }
.portada .etiqueta { color: #d8a64e; }
.portada strong { color: var(--papel); }

.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2rem 0 3.5rem; }

.boton {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.8rem 1.4rem;
  border: 1px solid currentColor;
  color: inherit;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.boton:hover { background: #ffffff14; }
.boton--lleno { background: #d8a64e; border-color: #d8a64e; color: var(--tinta); }
.boton--lleno:hover { background: #e6b964; }
.boton--claro { background: var(--papel); border-color: var(--papel); color: var(--tinta); }
.boton--claro:hover { background: #fff; }

.frentes {
  list-style: none;
  padding: 1.5rem 0 0;
  margin: 0;
  border-top: 1px solid #ffffff22;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
}
.frentes li { max-width: none; margin: 0; }
.frentes span { display: block; font-family: var(--dato); font-weight: 400; font-size: 0.7rem; color: #d8a64e; letter-spacing: .08em; margin-bottom: .25rem; }

/* --- Bloques ------------------------------------------------------------- */

.bloque { padding: 5rem 0; }
.bloque--tenue { background: var(--superficie); border-top: 1px solid var(--regla); border-bottom: 1px solid var(--regla); }
.titulo-bloque { font-size: clamp(1.6rem, 4vw, 2.25rem); letter-spacing: -0.03em; margin-bottom: 1.5rem; max-width: 24ch; }

/* --- Productos ----------------------------------------------------------- */

.productos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem; }

.producto {
  background: #fff;
  border: 1px solid var(--regla);
  padding: 2rem;
  display: flex;
  flex-direction: column;
}
.producto__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.producto h3 { font-size: 1.75rem; margin: 0; letter-spacing: -0.03em; }
.producto__tipo { font-family: var(--dato); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ocre); margin: .35rem 0 1rem; }
.estado {
  font-family: var(--dato); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: #1d6b45; background: #e3f1e8; padding: .2rem .55rem; white-space: nowrap;
}
.estado::before { content: "● "; }

.lista-corta { padding-left: 1.1rem; font-size: .97rem; }
.lista-corta li { margin-bottom: .3rem; }

.maqueta {
  margin: 1rem 0 1.5rem;
  border: 1px solid var(--regla);
  background: var(--papel);
  font-family: var(--dato);
  font-size: .78rem;
  padding: 0 0 .75rem;
}
.maqueta__barra { display: flex; align-items: center; gap: .3rem; padding: .5rem .75rem; border-bottom: 1px solid var(--regla); background: var(--superficie); margin-bottom: .5rem; }
.maqueta__barra i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--regla); }
.maqueta__barra b { font-weight: 400; color: var(--tinta-suave); margin-left: .5rem; }
.fila { display: flex; justify-content: space-between; padding: .3rem .9rem; border-bottom: 1px dashed var(--regla); }
.fila:first-of-type { color: var(--tinta-suave); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }
.fila:last-child { border-bottom: 0; }
.sube { color: #1d6b45; }

.burbuja { margin: .5rem .9rem; padding: .5rem .75rem; max-width: 80%; background: var(--tinta); color: var(--papel); border-radius: .6rem .6rem 0 .6rem; margin-left: auto; width: fit-content; }
.burbuja--cliente { background: #fff; color: var(--tinta); border: 1px solid var(--regla); border-radius: .6rem .6rem .6rem 0; margin-left: .9rem; }
.burbuja--nota { background: var(--ocre-tenue); color: var(--ocre); border-radius: 0; font-size: .7rem; margin: .5rem auto 0; text-align: center; }

.enlace-producto { margin-top: auto; font-family: var(--display); font-weight: 600; text-decoration: none; color: var(--tinta); border-bottom: 2px solid var(--ocre); align-self: flex-start; padding-bottom: 2px; }

/* --- Servicios ----------------------------------------------------------- */

.servicios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--regla); border: 1px solid var(--regla); margin-top: 2.5rem; }
.servicio { background: var(--papel); padding: 1.75rem 1.5rem; }
.servicio h3 { margin: .5rem 0 .6rem; font-size: 1.2rem; }
.servicio p { font-size: .95rem; color: var(--tinta-suave); margin: 0; }
.servicio__num { font-family: var(--dato); font-size: .7rem; color: var(--ocre); letter-spacing: .08em; }

/* --- Pasos --------------------------------------------------------------- */

.pasos { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; counter-reset: paso; }
.pasos li { max-width: none; border-top: 2px solid var(--tinta); padding-top: 1rem; counter-increment: paso; }
.pasos li::before { content: "Paso " counter(paso); font-family: var(--dato); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ocre); }
.pasos h3 { margin: .4rem 0 .5rem; font-size: 1.3rem; }
.pasos p { color: var(--tinta-suave); margin: 0; }

/* --- Empresa ------------------------------------------------------------- */

.empresa { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: start; }
.empresa .ficha { margin: 2.75rem 0 0; background: #fff; }

/* --- Contacto ------------------------------------------------------------ */

.contacto { background: var(--tinta); color: var(--papel); padding: 4.5rem 0; }
.contacto h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); max-width: 22ch; letter-spacing: -0.03em; }
.contacto p { color: #c5d3cc; margin-bottom: 1.75rem; }

.inicio .pie { border-top: 0; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 56rem) {
  .productos, .empresa { grid-template-columns: 1fr; }
  .servicios { grid-template-columns: 1fr 1fr; }
  .empresa .ficha { margin-top: 0; }
}

@media (max-width: 40rem) {
  .envoltura { padding: 0 1rem; }
  .portada { padding: 3.25rem 0 2.5rem; }
  .bloque { padding: 3.5rem 0; }
  .frentes { grid-template-columns: 1fr 1fr; }
  .servicios, .pasos { grid-template-columns: 1fr; }
  .producto { padding: 1.5rem 1.25rem; }
  .inicio .navegacion { gap: 1rem; }
}