/* ============================================
   RESPONSIVE.CSS — Breakpoints & Adaptations
   Ps. Giovanni Chicago
   ============================================ */

/* ════════════════════════════════════════════
   TABLET — max-width: 1024px
   ════════════════════════════════════════════ */

@media (max-width: 1024px) {

  /* ── Section Spacing ── */
  .section {
    padding: clamp(3.5rem, 8vh, 6rem) 0;
  }

  /* ── About ── */
  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .about-image-wrapper {
    max-width: 450px;
    margin: 0 auto;
  }

  /* ── Services ── */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Booking ── */
  .booking-wrapper {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  /* ── Contact ── */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  /* ── Locations ── */
  .locations-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }

  /* ── Hero ── */
  .hero-content {
    max-width: 650px;
  }
}

/* ════════════════════════════════════════════
   MOBILE — max-width: 768px
   Optimizado para adultos de 25–50 años buscando
   apoyo psicológico: legibilidad, ritmo de scroll
   cómodo y jerarquía visual clara.
   ════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Reorder Sections on Mobile (Homepage Only) ── */
  body.home-page {
    display: flex;
    flex-direction: column;
  }
  body.home-page #hero      { order: 2; }
  body.home-page #about     { order: 3; }
  body.home-page #services  { order: 4; }
  body.home-page #booking   { order: 5; }
  body.home-page #essays    { order: 6; }
  body.home-page #locations { order: 7; }
  body.home-page #contact   { order: 8; }
  body.home-page .footer    { order: 9; }

  /* ── Container ── */
  .container,
  .container-narrow {
    padding: 0 1.125rem; /* ~18px — cómodo en una mano */
  }

  /* ── Tipografía Global — escala equilibrada ── */
  /* Base body ligeramente reducida pero no apretada */
  body {
    font-size: 15px !important;
    line-height: 1.6 !important; /* subido de 1.5 para mayor comodidad visual */
  }

  h1 {
    font-size: 2rem !important;      /* reducido de 2.2 para que no domine todo */
    line-height: 1.2 !important;
    margin-bottom: 0.75rem !important;
  }

  h2 {
    font-size: 1.5rem !important;    /* reducido de 1.6 */
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 0.5rem !important;
  }

  h3 {
    font-size: 1.15rem !important;   /* reducido de 1.25 */
    line-height: 1.4 !important;
    margin-bottom: 0.4rem !important;
  }

  h4 {
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }

  p {
    font-size: 0.925rem !important;  /* levemente más grande que 0.92 → más legible */
    line-height: 1.65 !important;    /* subido de 1.5 → texto más respirado */
    margin-bottom: 0.75rem !important;
  }

  /* ── Navigation — Menú Móvil ── */
  .nav-toggle {
    display: flex;
  }

  .nav-links {
    display: none;
  }

  /* Cuando el menú está abierto, el nav debe tomar toda la pantalla para que su fondo cubra todo */
  .nav-open .nav {
    height: 100vh !important;
    background: var(--midnight) !important;
  }

  .nav-open .nav-links {
    display: flex;
    position: absolute; /* Cambiado a absolute para que se guíe por el .nav que ahora es 100vh */
    inset: 0;
    background: var(--midnight);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
    z-index: var(--z-nav);
    padding: var(--space-3xl);
  }

  .nav-open .mobile-hide {
    display: none !important;
  }

  .nav-open .nav-link {
    font-size: 1.375rem;            /* más compacto que var(--text-2xl) = 1.5rem */
    color: var(--cream);
  }

  .nav-open .nav-link.active {
    color: var(--gold);
  }

  .nav-open .nav-link::after {
    bottom: -6px;
    height: 2px;
  }

  /* ── Secciones — Espaciado compacto pero no apretado ── */
  .section {
    padding: 2rem 0 !important;     /* reducido de var(--space-xl)=3rem */
  }

  /* Cabeceras centradas en móvil */
  .section-header,
  .booking-info,
  .contact-info {
    text-align: center !important;
  }

  .section-header {
    margin-bottom: 1.5rem !important; /* reducido de var(--space-2xl)=3rem */
  }

  .section-header .divider,
  .booking-info .divider,
  .contact-info .divider {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Lead y subtítulos centrados, más contenidos */
  .lead, .subtitle-text {
    text-align: center !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 0.925rem !important;
    line-height: 1.6 !important;
  }

  /* Ocultar blobs decorativos en móvil */
  .blob {
    display: none !important;
  }

  /* Reducir dividers en móvil */
  .divider {
    margin: 1rem 0 !important;
  }

  /* ── HERO ── */
  .hero-name {
    font-size: clamp(2.25rem, 9vw, 3rem) !important; /* más contenido */
  }

  .hero-tagline {
    font-size: 0.95rem !important;  /* reducido de var(--text-lg)=1.125rem */
    max-width: 100%;
    line-height: 1.6 !important;
    margin-bottom: 1.5rem !important;
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
    gap: 0.75rem !important;
  }

  .hero-cta-group .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .hero-scroll-indicator {
    display: none;
  }

  /* Branding del Hero en móvil — más compacto */
  .hero-brand-logo {
    top: 10px !important;
  }

  .hero-logo-img {
    width: 120px !important;        /* reducido de 140px */
  }

  /* ── SECCIÓN SOBRE MÍ ── */
  .about-grid {
    gap: 1rem !important;           /* más compacto que var(--space-lg) = 1.5rem */
  }

  /* Ocultar el párrafo introductorio redundante en móvil */
  .about-text .lead {
    display: none !important;
  }

  /* Foto de perfil compacta y centrada */
  .about-images-collage {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .about-images-collage .top-photo {
    display: none !important;
  }

  .about-images-collage .main-photo {
    width: 100% !important;
    max-width: 220px !important;    /* reducido de 300px — menos dominio vertical */
    aspect-ratio: 3 / 4 !important;
    align-self: center !important;
    margin: 0 auto !important;
    transform: none !important;
    position: relative !important;
  }

  /* Textos "Sobre Mí" más compactos */
  .about-text {
    padding-top: 0 !important;
  }

  .about-text h2 {
    margin-bottom: 0.5rem !important;
  }

  .about-text p {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
  }

  /* ── TARJETAS DE FILOSOFÍA 1-4 (Horizontales y Compactas) ── */
  .about-philosophy {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    margin-top: 1.25rem !important;
  }

  .philosophy-item {
    display: block !important;
    position: relative !important;
    padding: 0.75rem 0.875rem 0.75rem 48px !important; /* más compacto */
    background: var(--slate) !important;
    border: 1px solid rgba(195, 158, 99, 0.25) !important;
    border-radius: var(--radius-md) !important;
    text-align: left !important;
  }

  .philosophy-item .philosophy-icon {
    position: absolute !important;
    left: 0.875rem !important;
    top: 0.75rem !important;
    margin: 0 !important;
    font-size: 1.1rem !important;   /* reducido de 1.25rem */
    line-height: 1 !important;
    color: var(--gold) !important;
  }

  .philosophy-item h4,
  .philosophy-item h5 {
    font-size: 0.875rem !important;
    margin-top: 0 !important;
    margin-bottom: 2px !important;
    font-weight: 600 !important;
    color: var(--white) !important;
    letter-spacing: 0.01em !important;
  }

  .philosophy-item p {
    font-size: 0.8rem !important;   /* más compacto — texto secundario */
    line-height: 1.45 !important;
    color: var(--cream) !important;
    margin: 0 !important;
  }

  /* ── SECCIÓN SERVICIOS (CARRUSEL HORIZONTAL PARA AHORRAR ESPACIO VERTICAL) ── */
  .services-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 1rem !important;
    padding-bottom: 1rem !important; /* Espacio para no cortar la sombra o el scrollbar */
    /* Evitar que las tarjetas se estiren y generen espacios vacíos */
    align-items: flex-start !important;
    /* Ocultar barra de scroll estándar si es posible (estético) */
    scrollbar-width: none;
  }
  .services-grid::-webkit-scrollbar {
    display: none;
  }

  /* Tarjetas de servicios dentro del carrusel */
  .card.service-card {
    flex: 0 0 85% !important; /* Cada tarjeta ocupa 85% de la pantalla para insinuar la siguiente */
    scroll-snap-align: center !important;
    padding: 1.25rem !important; 
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* DESACTIVAR EFECTO REVEAL EN CARRUSEL (EVITA CARTAS INVISIBLES AL DESLIZAR) */
  .services-grid .service-card.reveal,
  .essays-grid .essay-card.reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    visibility: visible !important;
  }

  /* Ocultar el número decorativo gigante en móvil para no robar espacio */
  .service-number {
    display: none !important;
  }

  /* Icono en posición natural pero más pequeño */
  .service-icon {
    width: 40px !important;
    height: 40px !important;
    padding: 8px !important;
    margin-bottom: 0.75rem !important;
    position: static !important;
  }

  .service-icon svg {
    width: 24px !important;
    height: 24px !important;
  }

  .service-card h3 {
    font-size: 1.15rem !important;
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
    min-height: auto !important;
    line-height: 1.3 !important;
  }

  .service-card p {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1rem !important;
    color: var(--text-on-dark-muted) !important;
    display: block !important;
  }

  /* Botón visible y fácil de tocar */
  .service-card .btn {
    padding: 0.75rem 0 !important;
    font-size: 0.85rem !important;
    text-align: left !important;
    display: inline-block !important;
  }

  /* ── SECCIÓN RESERVAS ── */
  /* Ocultar el bloque de features (Duración / Horarios / Confirmación)
     ya que Calendly lo muestra nativamente — reduce scroll sin perder info */
  .booking-features {
    display: none !important;
  }

  /* El lead de reservas sí se mantiene — da contexto */
  .booking-info .lead {
    display: block !important;
    font-size: 0.9rem !important;
    margin-bottom: 1rem !important;
  }

  .booking-info h2 {
    margin-bottom: 0.25rem !important;
  }

  .booking-wrapper {
    gap: 1rem !important;
  }

  /* Cards de reserva más compactas */
  .step-2-services {
    gap: 0.5rem !important;
  }

  /* Indicadores de pasos compactos */
  .booking-steps {
    flex-wrap: wrap;
    gap: 0.5rem !important;
    justify-content: center;
    margin-bottom: 1rem !important;
    padding-bottom: 0.5rem !important;
  }

  .booking-step-line {
    width: 20px;
  }

  /* Tarjetas de reserva ultra-compactas */
  .step-2-services .service-card {
    padding: 0.75rem !important; /* Padding más pequeño */
  }

  .step-2-services .service-card h4 {
    font-size: 0.95rem !important;
    margin-bottom: 0.25rem !important;
    line-height: 1.2 !important;
  }

  .step-2-services .service-card p {
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0 !important;
  }

  .form-step-title {
    font-size: 0.85rem !important;
    margin-bottom: 0.75rem !important;
  }

  /* ── SECCIÓN ENSAYOS (Vista Inicio - CARRUSEL) ── */
  /* Mostrar todos los ensayos mediante carrusel en lugar de ocultarlos */
  .essay-card.reveal.stagger-2,
  .essay-card.reveal.stagger-3 {
    display: flex !important;
  }

  /* Ajustar el grid de ensayos a un carrusel deslizable horizontal */
  .essays-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 1rem !important;
    padding-bottom: 1rem !important;
    align-items: stretch !important; /* Mantener la misma altura para uniformidad visual */
    scrollbar-width: none;
    margin-top: 1.5rem !important;
  }
  .essays-grid::-webkit-scrollbar {
    display: none;
  }

  /* Card del ensayo dentro del carrusel */
  .essay-card {
    flex: 0 0 85% !important;
    scroll-snap-align: center !important;
    padding: 1.25rem !important;
  }

  /* Reducir títulos y textos del ensayo para móvil */
  .essay-card h3 {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.5rem !important;
  }

  .essay-card p {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }

  /* ── SECCIÓN UBICACIONES ── */
  .locations-grid {
    grid-template-columns: 1fr;
    gap: 1rem !important;
  }

  /* Reducir significativamente el mapa en móvil para ahorrar espacio vertical */
  .location-map {
    aspect-ratio: 16 / 6 !important; 
  }

  /* Ocultar la tarjeta "Próximamente" */
  .location-card-coming {
    display: none !important;
  }

  /* Compactar detalles de ubicación */
  .location-card {
    padding: 1rem !important;
  }

  .location-details {
    gap: 0.75rem !important;
  }

  .location-detail p {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
  }

  .location-detail strong {
    font-size: 0.9rem !important;
  }

  /* ── SECCIÓN CONTACTO ── */
  /* Ocultar toda la sección de contacto en móvil. 
     Los usuarios móviles prefieren agendar directamente o usar el email del footer. */
  #contact {
    display: none !important;
  }

  /* ── CARDS — Padding reducido ── */
  .card,
  .card-highlight,
  .booking-form,
  .contact-form {
    padding: 1.25rem !important;    /* reducido de var(--space-xl)=2rem */
  }

  /* ── Social Links ── */
  .social-links {
    justify-content: center;
  }

  /* ── Footer ── */
  .footer {
    padding: 2rem 0 1.5rem 0 !important;
  }

  .footer-content {
    flex-direction: column;
    gap: 1.25rem !important;
    text-align: center;
    align-items: center !important;
  }

  .footer-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.75rem 1.5rem !important;
    align-items: center !important;
  }

  .footer-copyright {
    font-size: 0.8rem !important;
    opacity: 0.6;
    margin-top: 0.5rem !important;
  }

  /* ── SUBPÁGINAS DE ENSAYOS ── */

  /* Blog hero (encabezado de ensayos.html) */
  .blog-hero {
    padding: 90px 0 1.5rem !important;
  }

  /* Filtros de categoría — táctiles y bien espaciados */
  .blog-filters {
    gap: 0.5rem !important;
    margin-top: 1rem !important;
  }

  .filter-btn {
    padding: 0.5rem 1rem !important;
    font-size: 0.8rem !important;
  }

  /* Lista de ensayos */
  .essay-title {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
  }

  .essay-excerpt {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    margin-bottom: 0.75rem !important;
  }

  .essays-list {
    gap: 1.5rem !important;
    margin-top: 1rem !important;
  }

  /* ── LECTURA DE ARTÍCULO ── */
  main.section {
    padding-top: 90px !important;
  }

  /* Subtítulo del artículo — reducido de 1.5rem */
  .article-header .subtitle-text {
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
  }

  /* Meta del artículo (autor, fecha, tiempo) */
  .article-meta {
    flex-wrap: wrap !important;
    gap: 0.375rem !important;
    font-size: 0.8rem !important;
    justify-content: center !important;
  }

  /* Imagen del hero del artículo */
  .article-hero-image {
    margin-bottom: 1.5rem !important;
  }

  .article-hero-image img {
    max-height: 220px !important;   /* reducido de 450px — no tapa el artículo */
    object-position: center top !important;
  }

  /* Texto del artículo — prioridad legibilidad */
  .article-content {
    font-size: 0.975rem !important;
  }

  .article-content p {
    font-size: 0.975rem !important;
    line-height: 1.75 !important;   /* más aireado para lectura extendida */
    margin-bottom: 1.125rem !important;
  }

  .article-content h2 {
    font-size: 1.25rem !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .article-content blockquote {
    font-size: 1rem !important;
    padding-left: 0.875rem !important;
    margin: 1rem 0 !important;
  }

  /* Letra capital más contenida */
  .drop-cap:first-letter {
    font-size: 2.75rem !important;
    line-height: 0.9 !important;
  }

}

/* ════════════════════════════════════════════
   SMALL MOBILE — max-width: 480px
   ════════════════════════════════════════════ */

@media (max-width: 480px) {

  /* ── Hero más compacto en pantallas muy pequeñas ── */
  #hero {
    min-height: auto !important;
    padding: 160px 0 60px 0 !important; /* Ajusta el espacio vertical para que no quede un hueco gigante abajo */
  }

  .hero-name {
    font-size: clamp(1.875rem, 8.5vw, 2.5rem) !important;
  }

  h2 {
    font-size: 1.375rem !important;
  }

  h3 {
    font-size: 1.05rem !important;
  }

  /* ── Container ── */
  .container,
  .container-narrow {
    padding: 0 1rem;
  }

  /* ── Nav ── */
  .nav-container {
    padding: 0 1rem;
  }

  .nav-logo {
    font-size: 1rem !important;
  }

  /* ── Cards — aún más compactas en pantallas muy pequeñas ── */
  .card,
  .card-highlight,
  .service-card,
  .location-card,
  .booking-form,
  .contact-form {
    padding: 1rem !important;
    border-radius: var(--radius-md);
  }

  /* ── Foto de perfil Sobre Mí ── */
  .about-images-collage .main-photo {
    max-width: 190px !important;    /* más pequeña aún en < 480px */
  }

  /* ── Tarjetas filosofía — padding sin padding-left forzado ── */
  .philosophy-item {
    padding: 0.625rem 0.75rem 0.625rem 44px !important;
  }

  .philosophy-item .philosophy-icon {
    left: 0.75rem !important;
    top: 0.625rem !important;
    font-size: 1rem !important;
  }

  /* ── Número decorativo de servicio ── */
  .service-number {
    display: none !important;
  }

  /* ── Botones ── */
  .btn {
    padding: 0.7rem 1.5rem;
    font-size: 0.75rem;
  }

  /* ── Pasos de reserva ── */
  .booking-step {
    font-size: var(--text-xs);
  }

  .booking-step-line {
    width: 15px;
  }

  /* ── Social Links ── */
  .social-link {
    width: 42px;
    height: 42px;
  }

  /* ── Mapa de ubicación — proporción más alta en pantalla muy chica ── */
  .location-map {
    aspect-ratio: 4 / 2.5 !important;
  }

  /* ── Footer ── */
  .footer-links {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.75rem 1.25rem !important;
    align-items: center;
  }

  .footer-links a {
    font-size: 0.85rem !important;
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0.25rem !important;
  }

  /* ── Tagline del hero más contenido ── */
  .hero-tagline {
    font-size: 0.9rem !important;
  }

  /* ── Sección ensayos en index — imagen de portada compacta ── */
  .essay-card-img-container {
    margin: -1.25rem -1.25rem 1rem -1.25rem !important;
  }

  .essay-card-img-container img {
    height: 180px !important;
    object-fit: cover !important;
  }

  /* ── Artículo — imagen aún más reducida ── */
  .article-hero-image img {
    max-height: 175px !important;
  }
}


/* ════════════════════════════════════════════
   LANDSCAPE MOBILE
   ════════════════════════════════════════════ */

@media (max-height: 500px) and (orientation: landscape) {
  #hero {
    min-height: auto;
    padding: var(--space-4xl) 0;
  }

  .hero-scroll-indicator {
    display: none;
  }
}

/* ════════════════════════════════════════════
   HOVER MEDIA QUERY
   (Disable hover effects on touch devices)
   ════════════════════════════════════════════ */

@media (hover: none) {
  .card:hover,
  .card-highlight:hover,
  .service-card:hover,
  .location-card:hover {
    transform: none;
    box-shadow: none;
  }

  .btn-primary:hover {
    transform: none;
  }

  .btn-outline:hover {
    transform: none;
  }

  .social-link:hover {
    transform: none;
  }
}