/* Tourism Site Engine V3.0.2.1 — Mobile UX, Footer & Social Share
   Capa final reusable para termas, campings, cabañas, hoteles y portales turísticos. */

.mobile-swipe-hint{display:none;margin:-4px 0 14px;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.02em}

@media (max-width: 820px){
  body{overflow-x:clip}
  .section{padding:60px 0}
  .section-head{margin-bottom:32px}
  .section-head.row-head{gap:8px}
  .section-head.row-head p:last-child{margin:0}
  .split-grid,.plan-grid{gap:32px}

  /* Portada: hero más corto y contenido visible antes. */
  .home-page .hero{min-height:650px;padding-top:76px}
  .home-page .hero-content{padding:52px 0 150px}
  .home-page .hero h1{font-size:clamp(44px,11vw,62px);line-height:.96}
  .home-page .hero-lead{max-width:560px;margin:20px 0 24px;font-size:17px;line-height:1.48}
  .home-page .hero-actions{gap:10px}
  .home-page .hero-facts{grid-template-columns:repeat(3,minmax(0,1fr));border-radius:18px 18px 0 0}
  .home-page .hero-facts div{display:block;padding:14px 12px;text-align:center;border-right:1px solid #e2e7ee;border-bottom:0}
  .home-page .hero-facts div:last-child{border-right:0}
  .home-page .hero-facts strong{font-size:20px;white-space:nowrap}
  .home-page .hero-facts span{margin-top:4px;font-size:10px;line-height:1.25}
  .notice-strip .container{padding-block:13px}
  .notice-strip p{font-size:12px;line-height:1.45}

  /* Portada: contenido y medios con ritmo más móvil. */
  .home-page .feature-image img{max-height:420px}
  .home-page .video-section{padding-block:52px}
  .home-page .video-section .split-grid{gap:24px}
  .home-page .location-section{padding-block:56px}
  .home-page .map-card{height:clamp(255px,60vw,320px);min-height:0;aspect-ratio:auto}
  .home-page .route-card{height:auto;padding:26px 24px}
  .home-page .route-card h3{font-size:27px;margin-bottom:13px}
  .home-page .route-card dl{margin-bottom:14px}
  .home-page .route-card dl div{padding:9px 0}
  .home-page .accommodation-section{padding-block:52px}
  .home-page .accommodation-card{padding:32px 28px;gap:24px;border-radius:26px}
  .home-page .accommodation-actions{align-items:stretch}
  .home-page .accommodation-actions .btn{width:100%}

  /* Footer V3.0.2.1: compacto, social y reusable. */
  .site-footer{padding:44px 0 18px}
  .footer-shell{grid-template-columns:1fr .9fr;grid-template-areas:"brand share" "links links";gap:24px 30px}
  .footer-brand img{width:160px;margin-bottom:10px}
  .footer-brand p{margin:0;line-height:1.45}
  .footer-links{gap:24px}
  .footer-bottom{margin-top:26px;padding-top:15px}

  /* Índices y artículos: menos altura sin eliminar contenido. */
  .guide-hero{min-height:500px}
  .guide-hero-inner{padding-bottom:42px}
  .guides-index-hero,.blog-index-hero{padding:116px 0 54px}
  .guide-content{padding-top:52px}
  .guide-body-section{padding-top:38px}
  .blog-listing,.guides-listing{padding-top:50px}
  .post-hero,.hub-hero{min-height:510px}
}

@media (max-width: 560px){
  .container{width:min(calc(100% - 28px),var(--container))}
  .section{padding:50px 0}
  .eyebrow{margin-bottom:11px;font-size:10px;letter-spacing:.14em}
  .section-copy h2,.section-head h2,.accommodation-card h2,.plan-grid h2{margin-bottom:16px;font-size:34px;line-height:1.04}
  .section-copy .lead{font-size:17px;line-height:1.55}
  .section-copy p,.section-head p{font-size:14px;line-height:1.58}
  .inline-links{margin-top:20px;gap:15px;font-size:13px}

  /* Header / menú: conserva el drawer compacto de V3.0.1.1. */
  .site-header{height:68px}
  .brand{width:112px;height:64px}
  .brand img{width:104px}
  .main-nav{top:68px;max-height:calc(100dvh - 84px);padding:8px 18px 18px;font-size:15px;border-radius:0 0 18px 18px}
  .main-nav a,.main-nav a:nth-child(2),.main-nav a:nth-child(5){padding:13px 5px}
  .main-nav .nav-cta{margin-top:10px;padding:13px 16px}

  /* Hero + facts compactos: tres datos en una sola fila. */
  .home-page .hero{min-height:620px;padding-top:68px}
  .home-page .hero-media img{object-position:center center}
  .home-page .hero-content{padding:42px 0 132px}
  .home-page .hero h1{font-size:42px;letter-spacing:-.035em}
  .home-page .hero h1 small{margin-top:6px;font-size:.38em}
  .home-page .hero-lead{margin:16px 0 20px;font-size:15px;line-height:1.45}
  .home-page .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .home-page .hero-actions .btn{width:auto;min-height:44px;padding:11px 12px;font-size:12px}
  .home-page .hero-facts{width:calc(100% - 24px);grid-template-columns:repeat(3,minmax(0,1fr));border-radius:16px 16px 0 0}
  .home-page .hero-facts div{padding:12px 5px}
  .home-page .hero-facts strong{font-size:18px}
  .home-page .hero-facts span{font-size:9px;overflow-wrap:anywhere}
  .notice-strip .container{padding-block:11px}
  .notice-strip p{font-size:11px}

  /* Introducción e imagen más compactas. */
  .home-page .intro .split-grid{gap:26px}
  .home-page .feature-image img{max-height:310px;aspect-ratio:4/3}

  /* Features 2x2: la información se mantiene pero ocupa la mitad de alto. */
  .home-page .feature-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .home-page .feature-card{min-height:166px;padding:16px 14px;border-radius:16px}
  .home-page .icon-circle{width:36px;height:36px;margin-bottom:12px}
  .home-page .feature-card h3{margin-bottom:7px;font-size:15px;line-height:1.2}
  .home-page .feature-card p{font-size:12px;line-height:1.42}

  /* Galería sigue siendo mosaico, con menos espacio vertical. */
  .home-page .gallery-grid{grid-auto-rows:132px;gap:7px}
  .home-page .gallery-item{border-radius:11px}
  .gallery-actions{margin-top:20px}
  .gallery-actions .btn{min-height:42px;padding:10px 16px;font-size:12px}

  /* Video y mapa. */
  .home-page .video-section{padding-block:46px}
  .home-page .embed-play{padding:8px 12px 8px 8px;font-size:12px}
  .home-page .embed-play-icon{width:34px;height:34px}
  .home-page .location-section{padding-block:48px}
  .home-page .map-card{height:clamp(235px,68vw,285px);aspect-ratio:auto;border-radius:16px}
  .home-page .route-card{padding:22px 19px;border-radius:16px}
  .home-page .route-card h3{font-size:25px}
  .home-page .route-card dl div{display:grid;grid-template-columns:92px 1fr;gap:10px;padding:8px 0}
  .home-page .route-card dd{text-align:right;margin:0;font-size:13px}
  .home-page .route-card dt{font-size:12px}

  /* Alojamiento: CTA comercial claro y a ancho completo. */
  .home-page .accommodation-section{padding-block:42px}
  .home-page .accommodation-card{padding:26px 20px;gap:20px;border-radius:20px}
  .home-page .accommodation-card h2{font-size:31px}
  .home-page .affiliate-note{font-size:10px}

  /* Footer: dos columnas de enlaces + botones sociales, sin scroll innecesario. */
  .site-footer{padding:32px 0 13px}
  .footer-shell{display:grid;grid-template-columns:1fr;grid-template-areas:"brand" "share" "links";gap:18px}
  .footer-brand img{width:145px;margin-bottom:8px;padding:6px 8px;border-radius:11px}
  .footer-brand p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-width:none;font-size:13px;line-height:1.42}
  .footer-share{min-width:0}
  .footer-column h2,.footer-share h2{margin-bottom:8px;font-size:10px;letter-spacing:.12em}
  .social-share-buttons{gap:8px}
  .social-share-btn{width:40px;height:40px;border-radius:11px}
  .social-share-btn svg{width:19px;height:19px}
  .share-status{margin-top:5px;min-height:0}
  .footer-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .footer-column a{padding:2px 0;font-size:12.5px;line-height:1.42}
  .footer-bottom{flex-direction:row;align-items:flex-end;gap:12px;margin-top:20px;padding-top:12px;font-size:10.5px;line-height:1.35}
  .footer-bottom p{max-width:72%}
  .footer-bottom a{margin-left:auto}

  /* Guías y blog de portada: carruseles táctiles CSS, sin librerías. */
  .mobile-swipe-hint{display:block}
  .home-guides .section-head,.home-blog .section-head{margin-bottom:12px}
  .home-guides .guide-card-grid,.home-blog .blog-card-grid{
    display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scroll-padding-inline:0;padding:2px 14vw 12px 1px;margin-right:-14px;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .home-guides .guide-card-grid::-webkit-scrollbar,.home-blog .blog-card-grid::-webkit-scrollbar{display:none}
  .home-guides .guide-card,.home-blog .blog-card{flex:0 0 84%;max-width:310px;scroll-snap-align:start;border-radius:17px}
  .home-guides .guide-card-image,.home-blog .blog-card-media{aspect-ratio:16/10}
  .home-guides .guide-card-body,.home-blog .blog-card-body{padding:17px}
  .home-guides .guide-card h3,.home-blog .blog-card h3{font-size:21px}
  .home-guides .guide-card p,.home-blog .blog-card p{font-size:12.5px;line-height:1.5}

  /* FAQ y formulario: táctiles pero menos altos. */
  .faq-list{gap:8px}
  details{padding:0 16px;border-radius:13px}
  summary{padding:16px 30px 16px 0;font-size:13px;line-height:1.35}
  summary::after{top:11px}
  details p{padding-bottom:16px;font-size:13px;line-height:1.55}
  .plan-section{padding-block:48px}
  .plan-grid{gap:24px}
  .contact-mini{margin-top:18px;padding-top:16px}
  .contact-form{padding:20px 17px;border-radius:18px}
  .contact-form label{margin-bottom:11px}
  .contact-form input:not([type="checkbox"]),.contact-form textarea{padding:11px 12px;border-radius:10px}
  .contact-form textarea{min-height:112px}
  .contact-form .btn{width:100%}

  /* Páginas internas del motor. */
  .guide-hero{min-height:460px;padding-top:68px}
  .guide-hero-inner{padding-bottom:34px}
  .guide-hero h1{font-size:38px;line-height:1.02}
  .guide-hero-inner>p:last-child,.guide-hero-lead{font-size:15px;line-height:1.5}
  .guide-content{padding-top:42px}
  .guide-intro{font-size:17px;line-height:1.62}
  .guide-section{margin-top:40px}
  .guide-section h2{font-size:30px}
  .guide-section p,.guide-section li{font-size:15px;line-height:1.68}
  .guide-toc{padding:16px}
  .guides-index-hero,.blog-index-hero{padding:100px 0 42px}
  .guides-index-hero h1,.blog-index-hero h1{font-size:38px}
  .guides-index-hero > .container > p:last-child,.blog-index-hero .container>p:last-of-type{margin-top:15px;font-size:16px}
  .guide-card-grid,.guide-card-grid-wide,.blog-card-grid,.blog-card-grid-3{gap:16px}
  .guide-card-body,.blog-card-body{padding:19px}
  .guide-card h2,.guide-card h3,.blog-card h2,.blog-card h3{font-size:23px}
  .post-hero,.hub-hero{min-height:470px;padding-top:68px}
  .post-hero h1,.hub-hero h1{font-size:38px}
  .post-hero-lead,.hub-hero-inner>p:last-child{font-size:15px}
  .blog-cluster-band,.hub-seo-note{padding:44px 0}
  .blog-cluster-band h2,.hub-seo-note h2{font-size:30px}

  .legal-page{padding:92px 0 64px}
  .legal-page h1{font-size:38px}
}

@media (max-width: 360px){
  .home-page .hero h1{font-size:38px}
  .home-page .hero-actions{grid-template-columns:1fr}
  .home-page .hero{min-height:650px}
  .home-page .hero-content{padding-bottom:180px}
  .home-page .hero-facts strong{font-size:16px}
  .home-page .feature-card{min-height:174px;padding:14px 12px}
  .home-guides .guide-card,.home-blog .blog-card{flex-basis:88%}
}