/* Ajustes para celular y tablet (se carga al final). */
html{-webkit-text-size-adjust:100%}
body{overflow-x:clip;-webkit-tap-highlight-color:transparent}
.header{padding-top:env(safe-area-inset-top)}
.footer{padding-bottom:calc(26px + env(safe-area-inset-bottom))}

/* Botones táctiles de al menos 44 px */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
.menu-btn{min-width:46px}

/* Sin efecto hover en pantallas táctiles */
@media (hover:none){.card:hover{transform:none;border-color:var(--gold-lo)}.btn:hover{filter:none}}

/* Menú móvil: que se pueda desplazar si no cabe */
@media (max-width:820px){
  .nav{max-height:calc(100svh - var(--header-h));overflow-y:auto}
}

/* Celular */
@media (max-width:560px){
  .wrap{width:min(100% - 32px,1080px)}
  .brand{min-width:0;gap:10px;font-size:1rem}
  .brand img{width:40px;height:40px}
  .brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


  .section{padding:56px 0}
  .sub{margin-bottom:22px}

  /* Servicios: tarjetas en fila compacta */
  .cards{grid-template-columns:1fr;gap:12px}
  .card{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:6px 14px;padding:14px;text-align:left}
  .card .ico{width:52px;height:52px;font-size:1.5rem}
  .card h3{margin:0;font-size:1.05rem}
  .card .price{font-size:1.5rem}
  .card .btn{grid-column:1/-1;margin-top:4px}

  .hours,.steps{grid-template-columns:1fr;gap:12px}
  .hours li{padding:16px}
  .steps li{padding:16px 14px 16px 64px}
  .steps li::before{left:14px;top:16px}

  .footer-in{justify-content:center;text-align:center}
  .footer-in p{flex-basis:100%;order:3}
}

/* Celulares muy angostos */
@media (max-width:360px){
  .brand span{display:none}
}

/* Celular en horizontal */
@media (max-height:480px){
}