/* ============================================
   CHOCOMELLOS — Estilos responsive
   Mobile-first desde 375px
   ============================================ */

/* ==========================================
   TABLET — desde 768px
   ========================================== */
@media (max-width: 1024px) {
  .pie-pagina__interior {
    grid-template-columns: 1fr 1fr;
    gap: var(--espacio-2xl);
  }

  .proceso-regalo__pasos {
    grid-template-columns: 1fr 1fr;
  }

  .proceso-regalo__pasos::before {
    display: none;
  }

  .galeria-inspiracion__grid {
    columns: 2;
  }
}

@media (max-width: 900px) {
  .encabezado__nav {
    display: none;
  }

  .encabezado__acciones .boton-principal {
    display: none;
  }

  .encabezado__hamburguesa {
    display: flex;
  }

  .portada__interior {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .portada__imagen {
    order: -1;
    max-width: 360px;
    margin: 0 auto;
  }

  .portada__botones {
    justify-content: center;
  }

  .portada__decorativos {
    display: none;
  }

  .caminos__grid {
    grid-template-columns: 1fr 1fr;
  }

  .servicios__grid {
    grid-template-columns: 1fr 1fr;
  }

  .eventos__bloques {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   MÓVIL — hasta 640px
   ========================================== */
@media (max-width: 640px) {
  :root {
    --alto-encabezado: 100px;
  }

  .contenedor {
    padding: 0 var(--espacio-lg);
  }

  .seccion {
    padding: var(--espacio-4xl) 0;
  }

  /* Encabezado */
  .encabezado__logo img {
  height: 166px;
  margin-top: 25px;
  }

  /* Portada */
  .portada {
    padding-top: calc(var(--alto-encabezado) + var(--espacio-2xl));
    padding-bottom: var(--espacio-3xl);
  }

  .portada__titulo {
    font-size: var(--texto-3xl);
  }

  /* Caminos emocionales */
  .caminos__grid {
    grid-template-columns: 1fr;
  }

  .camino-item {
    flex-direction: row;
    text-align: left;
    gap: var(--espacio-md);
  }

  .camino-item__emoji {
    font-size: 2rem;
    flex-shrink: 0;
  }

  /* Servicios */
  .servicios__grid {
    grid-template-columns: 1fr;
  }

  /* Constructor */
  .constructor-regalo__opciones {
    grid-template-columns: 1fr 1fr;
  }

  .constructor-regalo__pregunta {
    font-size: var(--texto-xl);
  }

  .constructor-regalo__navegacion {
    flex-direction: column;
  }

  /* Ideas regalo */
  .ideas-regalo__filtros {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--espacio-sm);
    flex-wrap: nowrap;
  }

  .ideas-regalo__filtro {
    white-space: nowrap;
  }

  .ideas-regalo__grid {
    grid-template-columns: 1fr;
  }

  /* Galería */
  .galeria-inspiracion__grid {
    columns: 1;
  }

  .galeria-inspiracion__filtros {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: var(--espacio-sm);
  }

  /* Proceso */
  .proceso-regalo__pasos {
    grid-template-columns: 1fr;
    gap: var(--espacio-xl);
  }

  .proceso-regalo__paso {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-md);
    text-align: left;
  }

  .proceso-regalo__numero {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    margin: 0;
  }

  /* Eventos */
  .eventos__cabecera {
    flex-direction: column;
  }

  /* Preguntas */
  .pregunta-item__encabezado {
    padding: var(--espacio-md) var(--espacio-lg);
  }

  .pregunta-item__respuesta-interior {
    padding: var(--espacio-md) var(--espacio-lg) var(--espacio-md);
  }

  /* Pie de página */
  .pie-pagina__interior {
    grid-template-columns: 1fr;
    gap: var(--espacio-xl);
  }

  .pie-pagina {
    padding: var(--espacio-3xl) 0 var(--espacio-lg);
  }

  .pie-pagina__base {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Botón WhatsApp flotante */
  .boton-whatsapp-flotante {
    bottom: var(--espacio-lg);
    right: var(--espacio-lg);
    width: 52px;
    height: 52px;
  }

  /* Llamado final */
  .llamado-final .boton-principal {
    padding: 1rem var(--espacio-xl);
    font-size: var(--texto-base);
  }
}

/* ==========================================
   MÓVIL MUY PEQUEÑO — hasta 380px
   ========================================== */
@media (max-width: 380px) {
  .constructor-regalo__opciones {
    grid-template-columns: 1fr;
  }

  .portada__botones {
    flex-direction: column;
    align-items: center;
  }

  .portada__botones .boton-principal,
  .portada__botones .boton-secundario {
    width: 100%;
    justify-content: center;
  }
}