/* ===== Casa Magnolia — variables de marca ===== */
:root {
  --verde-salvia: #8B9A6E;
  --verde-salvia-oscuro: #6f7d56;
  --crema: #F7F2EB;
  --beige: #EAE2D6;
  --gris-claro: #EEEEEE;
  --verde-oscuro: #202B16;
  --verde-oscuro-2: #161d0f;
  --dorado: #C9A24B;
  --texto: #2E2A22;
  --texto-claro: #6b6555;
  --blanco: #FFFFFF;

  --fuente-titulos: 'Cormorant Garamond', 'Georgia', serif;
  --fuente-texto: 'Jost', 'Segoe UI', sans-serif;

  --radio: 6px;
  --sombra: 0 10px 30px rgba(32, 43, 22, 0.08);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== Animaciones de entrada (scroll + carga del hero) ===== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.19s; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 0.26s; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 0.33s; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 0.4s; }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }

body {
  margin: 0;
  font-family: var(--fuente-texto);
  color: var(--texto);
  background: var(--crema);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.contenedor {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  color: var(--verde-oscuro);
  line-height: 1.15;
  margin: 0 0 16px;
}

.etiqueta {
  display: inline-block;
  font-family: var(--fuente-texto);
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--verde-salvia-oscuro);
  margin-bottom: 12px;
}

.titulo-seccion {
  font-size: clamp(28px, 4vw, 42px);
  text-align: center;
  margin-bottom: 8px;
}

.subtitulo-seccion {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
  color: var(--texto-claro);
  font-size: 17px;
}

.centro { text-align: center; }

/* ===== Botones ===== */
.boton {
  display: inline-block;
  padding: 14px 32px;
  border-radius: var(--radio);
  font-family: var(--fuente-texto);
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.boton-primario {
  background: var(--verde-salvia);
  color: var(--blanco);
}
.boton-primario:hover {
  background: var(--verde-salvia-oscuro);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(111, 125, 86, 0.35);
}
.boton-primario:active { transform: translateY(0); box-shadow: none; }

.boton-secundario {
  background: transparent;
  border-color: var(--blanco);
  color: var(--blanco);
}
.boton-secundario:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }

.boton-outline {
  background: transparent;
  border-color: var(--verde-salvia);
  color: var(--verde-salvia-oscuro);
}
.boton-outline:hover { background: var(--verde-salvia); color: var(--blanco); transform: translateY(-2px); }

/* ===== Header ===== */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(32, 43, 22, 0.0);
  transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.3s ease, backdrop-filter 0.4s ease;
  padding: 22px 0;
}
.header.con-fondo {
  background: rgba(32, 43, 22, 0.82);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  padding: 14px 0;
}
.header .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-marca {
  font-family: var(--fuente-titulos);
  font-size: 26px;
  letter-spacing: 4px;
  color: var(--blanco);
  text-transform: uppercase;
}
.header-nav {
  display: flex;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header-nav a {
  position: relative;
  display: inline-block;
  color: var(--blanco);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.9;
  transition: opacity 0.25s ease;
}
.header-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 1px;
  background: var(--dorado);
  transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.header-nav a:hover { opacity: 1; }
.header-nav a:hover::after { right: 0; }

.idioma-toggle {
  font-family: var(--fuente-texto);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--blanco);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer;
}
.idioma-toggle:hover { border-color: var(--dorado); }
.idioma-toggle .idioma-es, .idioma-toggle .idioma-en { opacity: 0.5; }
.idioma-toggle .idioma-es { opacity: 1; font-weight: 600; }
.idioma-toggle.idioma-en-activo .idioma-es { opacity: 0.5; font-weight: 400; }
.idioma-toggle.idioma-en-activo .idioma-en { opacity: 1; font-weight: 600; color: var(--dorado); }

.header-menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--blanco);
  font-size: 28px;
  cursor: pointer;
}

/* ===== Hero ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--verde-oscuro-2) url('../images/logo-magnolia.png') center 30% / cover no-repeat;
  color: var(--blanco);
  animation: heroRespirar 24s ease-in-out infinite alternate;
}
@keyframes heroRespirar {
  from { background-position: center 30%; }
  to { background-position: center 22%; }
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16,21,10,0.5) 0%, rgba(16,21,10,0.68) 35%, rgba(16,21,10,0.72) 65%, rgba(16,21,10,0.88) 100%);
}
.hero-contenido {
  position: relative;
  z-index: 2;
  max-width: 680px;
  padding: 0 24px;
}
.hero-contenido .etiqueta { color: var(--dorado); }
.hero-contenido h1 {
  color: var(--blanco);
  font-size: clamp(38px, 6vw, 64px);
  margin-bottom: 20px;
}
.hero-contenido p {
  font-size: 18px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 36px;
}
/* El salto de línea manual del párrafo del hero se ve bien en desktop y en
   móviles normales, pero en pantallas muy angostas (320px) el párrafo ya
   se envuelve solo y ese salto extra lo alarga hasta chocar con los
   botones de abajo — se desactiva ahí y se deja fluir naturalmente. */
.salto-manual { display: none; }
@media (min-width: 360px) {
  .salto-manual { display: inline; }
}
.hero-botones {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6%;
  z-index: 2;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 24px;
}

/* ===== Nosotros ===== */
.seccion { padding: 100px 0; }
.seccion-crema { background: var(--crema); }
.seccion-beige { background: var(--beige); }

.nosotros-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.nosotros-imagen {
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  aspect-ratio: 4/3;
  background: var(--beige);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-claro);
  font-size: 14px;
  text-align: center;
  padding: 20px;
}
.nosotros-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.nosotros-imagen:hover img { transform: scale(1.05); }
.nosotros-texto p { margin-bottom: 18px; color: var(--texto-claro); }
.nosotros-valores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 32px;
}
.valor {
  background: var(--blanco);
  padding: 20px;
  border-radius: var(--radio);
  border-top: 3px solid var(--verde-salvia);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.valor:hover { transform: translateY(-5px); box-shadow: var(--sombra); }
.valor h4 { font-size: 18px; margin-bottom: 6px; }
.valor p { font-size: 14px; margin: 0; color: var(--texto-claro); }

/* ===== Servicios ===== */
.servicios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.servicio-card {
  background: var(--blanco);
  padding: 40px 28px;
  border-radius: var(--radio);
  text-align: center;
  box-shadow: var(--sombra);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.servicio-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 40px rgba(32, 43, 22, 0.14);
}
.servicio-icono {
  width: 84px; height: 84px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--verde-salvia-oscuro);
  font-size: 24px;
}
.servicio-icono img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.servicio-card:hover .servicio-icono img { transform: scale(1.12) rotate(-4deg); }
.servicio-card h3 { font-size: 21px; margin-bottom: 10px; }
.servicio-card p { font-size: 14px; color: var(--texto-claro); margin: 0; }

/* El contenido ampliado de cada servicio vive oculto dentro de la tarjeta
   (nunca se ve ahí) — al hacer clic, main.js lo copia dentro del modal
   compartido de abajo. */
.servicio-detalle { display: none; }

/* ===== Modal de servicio (se abre con clic, no con hover) ===== */
.modal-servicio-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 7, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal-servicio-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.modal-servicio-caja {
  position: relative;
  background: var(--crema);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  max-width: 560px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 40px;
  text-align: left;
  transform: translateY(18px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-servicio-overlay.visible .modal-servicio-caja { transform: translateY(0) scale(1); }
.modal-servicio-caja h3 {
  color: var(--verde-oscuro);
  font-size: 26px;
  margin-bottom: 18px;
  padding-right: 28px;
}
.modal-servicio-caja p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--texto-claro);
  margin-bottom: 16px;
}
.modal-servicio-caja p:last-child { margin-bottom: 0; }
.modal-servicio-cerrar {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--beige);
  color: var(--verde-oscuro);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.modal-servicio-cerrar:hover { background: var(--verde-salvia); color: var(--blanco); transform: rotate(90deg); }

/* ===== Video ===== */
.video-wrap {
  max-width: 860px;
  margin: 0 auto;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  aspect-ratio: 16/9;
  background: var(--verde-oscuro);
  position: relative;
}
.video-wrap iframe, .video-wrap video {
  width: 100%; height: 100%; border: 0; display: block;
}
.video-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.7);
  font-size: 15px;
  text-align: center;
  padding: 20px;
}

/* ===== Galería ===== */
.galeria-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 14px;
}
.galeria-grid .foto:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.foto {
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--blanco);
  box-shadow: var(--sombra);
  display: flex; align-items: center; justify-content: center;
  color: var(--texto-claro);
  font-size: 13px;
  text-align: center;
}
.foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.foto:hover img { transform: scale(1.08); }

/* ===== Facebook ===== */
.facebook-wrap {
  max-width: 560px;
  margin: 0 auto;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  background: var(--blanco);
  min-height: 300px;
  display: flex; align-items: center; justify-content: center;
  color: var(--texto-claro);
  text-align: center;
  padding: 40px;
}

/* ===== Contacto ===== */
.contacto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.contacto-info h3 { font-size: 22px; margin-top: 28px; margin-bottom: 8px; }
.contacto-info h3:first-child { margin-top: 0; }
.contacto-info p { color: var(--texto-claro); margin: 0; }
.whatsapp-boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  background: #25D366;
  color: var(--blanco);
  padding: 14px 26px;
  border-radius: var(--radio);
  font-size: 15px;
  letter-spacing: 0.5px;
}
.whatsapp-boton:hover { background: #1ebe57; }

.mapa-wrap {
  margin-top: 6px;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
}
.mapa-wrap iframe { display: block; }

/* ===== Íconos de redes sociales (sección Contacto) ===== */
.redes-contacto {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}
.red-icono {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--blanco);
  box-shadow: var(--sombra);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s;
}
.red-icono:hover { transform: translateY(-3px); opacity: 0.9; }
.red-icono svg { width: 20px; height: 20px; }
.red-facebook { background: #1877F2; }
.red-instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.formulario {
  background: var(--blanco);
  padding: 40px;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.campo { margin-bottom: 18px; }
/* Oculta el campo trampa fuera de la pantalla en vez de display:none —
   algunos bots evitan rellenar campos con display:none, pero no revisan
   la posición real. */
.campo-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.campo label {
  display: block;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--texto-claro);
  margin-bottom: 6px;
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--gris-claro);
  border-radius: var(--radio);
  font-family: var(--fuente-texto);
  font-size: 15px;
  background: var(--crema);
  color: var(--texto);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--verde-salvia);
}
.campo-fila { display: grid; grid-template-columns: 100px 1fr; gap: 10px; }
.campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.formulario-mensaje { margin-top: 14px; font-size: 14px; display: none; }
.formulario-mensaje.exito { color: var(--verde-salvia-oscuro); display: block; }
.formulario-mensaje.error { color: #a94442; display: block; }

/* ===== Botones flotantes (WhatsApp + redes sociales) ===== */
.redes-flotantes {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 90;
}
.redes-flotantes .red-icono {
  width: 46px; height: 46px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.redes-flotantes .red-icono svg { width: 21px; height: 21px; }
.whatsapp-flotante {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: var(--blanco);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  font-size: 28px;
  animation: whatsappPulso 3.2s ease-out infinite;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.whatsapp-flotante:hover {
  transform: scale(1.1);
  animation-play-state: paused;
}
@keyframes whatsappPulso {
  0% { box-shadow: 0 6px 18px rgba(0,0,0,0.25), 0 0 0 0 rgba(37,211,102,0.45); }
  70% { box-shadow: 0 6px 18px rgba(0,0,0,0.25), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 6px 18px rgba(0,0,0,0.25), 0 0 0 0 rgba(37,211,102,0); }
}

/* ===== Footer ===== */
.footer {
  background: var(--verde-oscuro-2);
  color: rgba(255,255,255,0.75);
  padding: 60px 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-marca {
  font-family: var(--fuente-titulos);
  font-size: 24px;
  letter-spacing: 3px;
  color: var(--blanco);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.footer h4 {
  color: var(--blanco);
  font-family: var(--fuente-texto);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 10px; font-size: 14px; }
.footer-abajo {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 24px;
  font-size: 13px;
  text-align: center;
  color: rgba(255,255,255,0.5);
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  /* En pantallas verticales angostas la foto ancha del desktop recorta la
     palabra "MAGNOLIA" (queda "AGNOLI") — esta versión tiene una
     composición más centrada/vertical pensada para ese recorte. */
  .hero {
    background-image: url('../images/logo-magnolia-celular.png');
  }
  .header-nav { display: none; }
  .header-nav.abierto {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--verde-oscuro);
    flex-direction: column;
    padding: 8px 24px 24px;
    gap: 4px;
    box-shadow: var(--sombra);
  }
  .header-nav.abierto a {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .header-nav.abierto a:last-child { border-bottom: none; }
  .header-nav.abierto .idioma-toggle { align-self: flex-start; margin-top: 12px; }
  .header-menu-toggle { display: block; }
  .nosotros-grid, .contacto-grid { grid-template-columns: 1fr; gap: 40px; }
  .servicios-grid { grid-template-columns: 1fr 1fr; }
  .galeria-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  /* En pantallas angostas la imagen del hero se recorta distinto (más
     vertical) y el texto propio de la foto ("Casa de Retiro") queda más
     abajo — se baja el bottom% para que los botones sigan quedando
     despejados debajo de ese texto. */
  .hero-botones { bottom: 12%; }
  /* El grupo de botones flotantes (WhatsApp + redes) mide ~178px de alto
     en este rango (no se achica hasta los 560px) — el colchón de abajo
     tiene que cubrir esa altura completa, no solo la del botón de
     WhatsApp original de antes de agregar Facebook/Instagram. */
  .seccion { padding-bottom: 220px; }
  .footer { padding-bottom: 220px; }
}
@media (max-width: 560px) {
  .servicios-grid { grid-template-columns: 1fr; }
  .campo-doble { grid-template-columns: 1fr; }
  .seccion { padding: 70px 0; }
  /* El grupo de botones flotantes es position:fixed y puede quedar sobre
     el final de cualquier sección al llegar por scroll del menú — un
     colchón extra abajo evita que tape texto real (pasó con la 2da
     tarjeta de "valores" en Nosotros). Aquí los íconos se achican (ver
     abajo) a una pila de ~146px + 18px de offset = 164px de alcance real
     desde el fondo del viewport — el colchón tiene que cubrir eso. */
  .seccion { padding-bottom: 185px; }
  .redes-flotantes { bottom: 18px; right: 18px; gap: 10px; }
  .whatsapp-flotante { width: 50px; height: 50px; font-size: 24px; }
  .redes-flotantes .red-icono { width: 38px; height: 38px; }
  .redes-flotantes .red-icono svg { width: 17px; height: 17px; }
  /* El copyright es lo último de la página — sin este colchón el botón
     flotante se queda encima de esa línea en el fondo del scroll
     (confirmado con captura real: "reservados" quedaba tapado). */
  .footer { padding-bottom: 185px; }
  /* El bloque de Contacto queda en una sola columna a ancho completo —
     la última línea del Horario ("Oficina: ... 5:00 pm") termina justo
     donde se posan los botones flotantes fijos, tapándose en ese punto
     exacto del scroll. Se reserva el ancho de los íconos como margen. */
  .contacto-info { padding-right: 64px; }
}
/* Pantallas muy angostas (iPhone SE 1a gen, Android chicos, 320px): el
   párrafo del hero se envuelve en 3 líneas aunque el salto manual esté
   desactivado, y llegaba a chocar con los botones de abajo (posicionados
   con bottom:% fijo respecto al hero). Se achica un poco la letra para
   que vuelva a caber en 2 líneas. */
@media (max-width: 340px) {
  .hero-contenido p { font-size: 15px; }
  .hero-botones { bottom: 4%; }
  /* Con letter-spacing de 4px "CASA MAGNOLIA" no cabe en una línea bajo
     ~340px y se parte de forma poco prolija junto al ícono de menú. */
  .header-marca { font-size: 20px; letter-spacing: 2px; }
}