/* Colores y letras del Manual de Marca Horneante 2026: Lora para títulos, Poppins para el texto.
   Paleta: Red Coffee #1C0B0B, Rose Milk #D49AA1, Hot Sunset #DCA26A, Vanilla Cheese #FAF4D4.
   Hot Sunset es para botones y llamadas a la acción; Rose Milk para bordes y adornos. */
@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400&family=Poppins:wght@300;400;500;600&display=swap");

:root {
  --crema: #faf4d4;      /* Vanilla Cheese: fondo de la página */
  --vainilla: #fffdf5;   /* tarjetas, un tono más claro que el fondo */
  --cafe: #1c0b0b;       /* Red Coffee */
  --cafe-suave: #4a3a35;
  --atardecer: #dca26a;  /* Hot Sunset */
  --rosa: #d49aa1;       /* Rose Milk */
  --borde: rgba(212, 154, 161, .55);
  --titulo: "Lora", Georgia, serif;
  --texto: "Poppins", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--crema);
  color: var(--cafe);
  font-family: var(--texto);
  line-height: 1.6;
}
h1, h2, h3 { font-family: var(--titulo); color: var(--cafe); }
a { color: var(--cafe); }
main { max-width: 720px; margin: 0 auto; padding: 2rem 1rem 3rem; }
.inicio { text-align: center; }
main.inicio { padding-top: 2.4rem; padding-bottom: 1.2rem; }
.inicio .logo { margin-bottom: 2rem; }
/* Cotiza y Rappi: mismo ancho, lado a lado; en celular uno encima del otro */
.pareja { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; max-width: 26.5rem; margin: .5rem auto 0; }
.pareja .boton { text-align: center; font-size: .8rem; padding: .5rem .8rem; white-space: nowrap; }
@media (max-width: 460px) { .pareja { grid-template-columns: 1fr; max-width: 14rem; } }
.logo { width: 205px; max-width: 60%; border-radius: 24px; border: 1px solid var(--rosa); display: block; margin: 0 auto 1.1rem; }
h1 { font-size: 1.7rem; margin: 0 0 .3rem; font-weight: 700; }
h2 { font-size: 1.15rem; margin: 1.8rem 0 .4rem; }
.inicio h1 { margin-top: 2.2rem; }
.lema { font-size: .88rem; line-height: 1.55; color: var(--cafe-suave); margin: 0 auto 1rem; max-width: 30rem; }
/* Los dos botones grandes de pedir, uno encima del otro y del mismo ancho */
.botones { display: flex; flex-direction: column; gap: .6rem; align-items: center; margin-bottom: .7rem; }
.boton {
  display: inline-block; padding: .7rem 1.3rem; border-radius: 999px; text-decoration: none;
  font-family: var(--texto); font-size: .92rem; font-weight: 500; border: 2px solid var(--cafe);
}
/* Botón principal: blanco con borde Hot Sunset; se llena de Hot Sunset al pasar el cursor o tocarlo */
.boton.principal { background: #fff; border-color: var(--atardecer); color: var(--cafe); font-weight: 600; box-shadow: 0 3px 0 var(--atardecer); transition: background .15s, transform .15s; }
.boton.principal:hover, .boton.principal:focus-visible, .boton.principal:active { background: var(--atardecer); }
.boton.principal:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--atardecer); }
.boton.secundario { background: transparent; color: var(--cafe); font-size: .85rem; padding: .55rem 1.1rem; border-width: 1.5px; }
.boton.secundario:hover { background: var(--cafe); color: var(--crema); }
.boton.grande { padding: .9rem 1.4rem; font-size: 1.12rem; border-width: 2.5px; width: min(100%, 26rem); text-align: center; }
.boton.grande small { display: block; font-size: .74rem; font-weight: 500; color: var(--cafe-suave); margin-top: .1rem; }
.datos {
  background: var(--vainilla); border: 1px solid var(--borde); border-radius: 18px; padding: 1.2rem 1.4rem;
  text-align: left; font-size: .93rem;
}
.datos p { margin: .35rem 0; }
.texto { font-size: .95rem; }
.volver { display: inline-block; margin-bottom: 1.2rem; font-size: .88rem; }

/* Separador entre secciones: tres puntos Rose Milk */
.puntos { display: flex; justify-content: center; gap: .7rem; padding: .6rem 0; }
.puntos span { width: 7px; height: 7px; border-radius: 50%; background: var(--rosa); }

/* Página principal */
.menu-top { max-width: 960px; margin: 0 auto; padding: 1rem 1rem 0; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; justify-content: center; align-items: center; font-size: .88rem; }
.menu-top a { text-decoration: none; color: var(--cafe-suave); }
.menu-top a:hover { color: var(--cafe); text-decoration: underline; }
.menu-top a.pedir { background: #fff; border: 1.5px solid var(--atardecer); color: var(--cafe); font-weight: 600; padding: .25rem .9rem; border-radius: 999px; }
.menu-top a.pedir:hover { text-decoration: none; background: var(--atardecer); }
/* Fotos del equipo en "Quiénes somos": cuadradas y se turnan (portada.js), en celular y en computador */
.fotos-equipo { position: relative; aspect-ratio: 1; width: min(100%, 26rem); margin: 0 auto 1.1rem; border-radius: 22px; border: 1px solid var(--rosa); overflow: hidden; background: var(--crema); }
.fotos-equipo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.fotos-equipo img.activa { opacity: 1; }
/* En celular los botones grandes de pedir quedan justo debajo: el del menú sobra (Andrés, 2-nov-2026) */
@media (max-width: 899px) { .menu-top a.pedir { display: none; } }
.seccion { max-width: 960px; margin: 0 auto; padding: 1.8rem 1rem 2.2rem; scroll-margin-top: 1rem; }
.seccion h2 { font-size: 1.45rem; font-weight: 400; text-align: center; margin: 0 0 .4rem; }
#nosotros { padding-top: 1.2rem; padding-bottom: 1.4rem; }
#nosotros h2 { margin-bottom: .8rem; }
.seccion .bajada { text-align: center; color: var(--cafe-suave); max-width: 38rem; margin: 0 auto 1.6rem; font-size: .88rem; }
.nosotros { background: var(--vainilla); border: 1px solid var(--borde); border-radius: 18px; padding: 1.1rem 1.25rem; max-width: 560px; margin: 0 auto; }
.nosotros p { margin: 0 0 .5rem; font-size: .8rem; line-height: 1.5; }
.nosotros .cita { font-family: var(--titulo); font-style: italic; font-size: 1.05rem; line-height: 1.4; color: var(--cafe); border-left: 3px solid var(--atardecer); padding-left: .75rem; margin-bottom: .75rem; }
.nosotros .firma { font-size: .78rem; color: var(--cafe-suave); margin: 0; }
.servicios { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; max-width: 880px; margin: 0 auto; }
.servicio { background: var(--vainilla); border: 1px solid var(--borde); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.servicio img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.servicio .texto-s { padding: .8rem .9rem .9rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; font-size: .8rem; line-height: 1.5; }
.servicio h3 { font-weight: 400; font-size: 1.08rem; margin: 0; }
.servicio p { margin: 0; color: var(--cafe-suave); }
.servicio .boton { margin-top: auto; align-self: flex-start; font-size: .78rem; padding: .45rem .95rem; }
/* En celular cada servicio va en una fila: foto a la izquierda y texto a la derecha */
@media (max-width: 600px) {
  .servicio { flex-direction: row; }
  .servicio img { width: 36%; aspect-ratio: auto; min-height: 100%; flex: none; }
  .servicio .texto-s { padding: .7rem .8rem; font-size: .76rem; gap: .35rem; }
  .servicio h3 { font-size: .98rem; line-height: 1.25; }
  .servicio .boton { font-size: .74rem; padding: .38rem .8rem; }
}

/* Clientes: un solo recuadro con logos y el nombre pequeño debajo */
.marcas { background: var(--vainilla); border: 1px solid var(--borde); border-radius: 22px; padding: 1.4rem 1rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem 1.2rem; }
.marca { margin: 0; width: 88px; display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center; }
.marca-logo { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--borde); background: var(--crema); display: flex; align-items: center; justify-content: center; overflow: hidden; font-family: var(--titulo); font-size: 1.35rem; color: var(--cafe); }
.marca-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; background: #fff; }
/* Los logos que ya vienen redondos o cuadrados con fondo propio (fotos de perfil) llenan el círculo */
.marca-logo.con-logo img { object-fit: cover; padding: 0; }
.marca figcaption { font-size: .72rem; line-height: 1.25; color: var(--cafe-suave); }
.marca-logo.mas { background: var(--atardecer); border-color: var(--atardecer); font-family: var(--texto); font-size: 1.8rem; font-weight: 500; }
a.marca-tu { text-decoration: none; }
.marca-logo.tu { background: #fff; border: 2px dashed var(--atardecer); font-size: 2rem; }
a.marca-tu:hover .marca-logo.tu { background: var(--atardecer); border-style: solid; }
.pie-tu { font-size: .72rem; line-height: 1.25; color: var(--cafe); font-weight: 600; }
@media (max-width: 480px) { .marca-logo.tu { font-size: 1.6rem; } .pie-tu { font-size: .66rem; } }
.club { text-align: center; font-size: .85rem; color: var(--cafe-suave); margin: 1rem auto 0; max-width: 32rem; }
.club a { font-weight: 600; color: var(--cafe); white-space: nowrap; }
@media (max-width: 480px) {
  .marcas { gap: .9rem .7rem; padding: 1.2rem .8rem; }
  .marca { width: 66px; }
  .marca-logo { width: 52px; height: 52px; font-size: 1.1rem; }
  .marca figcaption { font-size: .66rem; }
}
.contacto { max-width: 680px; margin: 0 auto; }

/* Portada: la foto y el logo del menú solo se ven en computador */
.marca-nav, .hero-foto { display: none; }

/* ===== Versión computador (desde 900 px) ===== */
@media (min-width: 900px) {
  .menu-top { max-width: 1100px; padding: 1rem 1.5rem; justify-content: flex-end; gap: .4rem 1.4rem; font-size: .9rem;
    position: sticky; top: 0; z-index: 15; background: var(--crema); border-bottom: 1px solid var(--borde); }
  .menu-top .marca-nav { display: inline-flex; align-items: center; gap: .6rem; margin-right: auto;
    font-family: var(--titulo); font-weight: 700; font-size: 1.1rem; color: var(--cafe); }
  .menu-top .marca-nav:hover { text-decoration: none; }
  .marca-nav img { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--rosa); }

  main.inicio { max-width: 1100px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: center;
    text-align: left; padding: 3.5rem 1.5rem 2.5rem; }
  .hero-texto { display: flex; flex-direction: column; align-items: flex-start; }
  .hero-texto .logo { display: none; }
  .hero-texto h1 { order: 1; font-size: 2.7rem; line-height: 1.15; margin: 0 0 .7rem; }
  .hero-texto .lema { order: 2; font-size: 1.02rem; text-align: left; margin: 0 0 1.8rem; max-width: 32rem; }
  .hero-texto .botones { order: 3; align-items: flex-start; width: 100%; margin-bottom: .8rem; }
  .hero-texto .pareja { order: 4; margin: 0; width: 100%; max-width: 26rem; }
  .hero-foto { display: block; position: relative; aspect-ratio: 4 / 3; border-radius: 22px; border: 1px solid var(--rosa); overflow: hidden; background: var(--crema); }
  .hero-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
  .hero-foto img.activa { opacity: 1; }

  .seccion { padding: 2.6rem 1.5rem 3rem; }
  .seccion h2 { font-size: 1.75rem; }
  .nosotros { max-width: 960px; display: grid; grid-template-columns: 1fr 1.6fr; gap: 2.4rem; align-items: center; padding: 2.2rem 2.4rem; }
  .nosotros .cita { font-size: 1.65rem; margin: 0; border-left-width: 4px; padding-left: 1.1rem; }
  .nosotros p { font-size: .92rem; }
  .servicios { max-width: 1000px; gap: 1.2rem; }
  .servicio .texto-s { font-size: .86rem; padding: 1rem 1.1rem 1.1rem; }
  .servicio h3 { font-size: 1.2rem; }
  .contacto { max-width: 820px; }
  .contacto .datos { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem 2.2rem; padding: 1.4rem 1.8rem; }
}

/* Botón flotante para volver arriba: aparece al bajar por la página */
.arriba { position: fixed; right: 1rem; bottom: 1rem; z-index: 20; width: 46px; height: 46px; border-radius: 50%;
  background: #fff; border: 2px solid var(--atardecer); color: var(--cafe); display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: 1.3rem; font-weight: 600; box-shadow: 0 3px 0 var(--atardecer);
  opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s, transform .2s, background .15s; }
.arriba.visible { opacity: 1; pointer-events: auto; transform: none; }
.arriba:hover, .arriba:focus-visible { background: var(--atardecer); }
footer {
  margin-top: 1.5rem; padding: 1.4rem 1rem 2.5rem; text-align: center;
  font-size: .8rem; color: var(--crema); background: var(--cafe);
}
footer a { color: var(--crema); }