/* =========================================================
   hotelesparaperrossantiago.cl — JackCity
   Hero: arte de home-03 (imagen) + contenido HTML indexable.
   CSS puro, sin frameworks, sin build step.
   ========================================================= */

:root{
  --blue:        #075f9f;
  --blue-dark:   #072c50;
  --blue-text:   #0d3d6b;
  --yellow:      #ffd42d;
  --cream:       #faf9f5;
  --text:        #2b3440;
  --text-soft:   #5b6673;
  --white:       #ffffff;
  --font: "Nunito", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  background:var(--cream);
  color-scheme:light;
  font-family:var(--font);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-width:320px;
  background:var(--cream);
  color:var(--text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; }
a{ color:var(--blue); }

.wrap{ width:100%; max-width:1180px; margin:0 auto; padding:0 20px; }
.wrap--narrow{ max-width:820px; }

.sr-only{
  position:absolute!important;
  width:1px!important; height:1px!important;
  margin:-1px!important; padding:0!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.skip-link{
  position:fixed; z-index:10; top:0; left:1rem;
  padding:.7rem 1rem;
  border-radius:0 0 .6rem .6rem;
  color:var(--blue-dark); background:var(--yellow);
  font-weight:900; text-decoration:none;
  transform:translateY(-110%);
  transition:transform .18s ease;
}
.skip-link:focus{ transform:translateY(0); }

:focus-visible{ outline:3px solid var(--yellow); outline-offset:3px; }

/* =========================================================
   HERO
   ========================================================= */

.hero{
  position:relative;
  width:min(100%,1222px);
  margin-inline:auto;
  overflow:hidden;
  background:var(--blue);
}

.hero__art{
  display:block;
  width:100%; height:auto;
  user-select:none;
}

/* Texto del arte: accesible para buscadores y lectores de pantalla */
.hero__semantic{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* Zona activa sobre el botón amarillo dibujado en el arte.
   Porcentajes calculados sobre la imagen de 1222 x 975 px:
   si se reemplaza el arte, recalcular top/left/width/height. */
.hero__cta{
  position:absolute; z-index:2;
  top:59.9%; left:57.2%;
  width:30.3%; height:9.3%;
  border-radius:999px;
  cursor:pointer;
}
.hero__cta:hover{
  background:rgb(255 255 255 / 10%);
  box-shadow:0 0 0 5px rgb(255 255 255 / 28%);
}
.hero__cta:focus-visible{
  outline:5px solid #fff;
  outline-offset:5px;
}

/* CTA tactil solo en movil (el boton del arte queda muy pequeno) */
.cta-mobile{
  display:none;
  margin:0;
  padding:clamp(16px,4vw,24px) 20px 0;
  text-align:center;
  background:var(--cream);
}
@media (max-width:760px){
  .cta-mobile{ display:block; }
  .cta-mobile .cta{ width:min(100%,340px); justify-content:center; font-size:18px; padding:16px 24px; }
}

/* =========================================================
   BENEFICIOS
   ========================================================= */

.features{
  background:var(--cream);
  padding:clamp(10px,2vw,26px) 0 clamp(34px,5vw,58px);
}

.features__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(26px,4vw,34px) clamp(16px,3vw,28px);
  margin:0; padding:0; list-style:none;
}
@media (min-width:860px){
  .features__grid{ grid-template-columns:repeat(4,1fr); }
}

.feature{ text-align:center; }
.feature__icon{
  width:38px; height:38px;
  color:var(--blue);
  margin-bottom:12px;
}
.feature__title{
  margin:0 0 8px;
  font-size:clamp(15px,1.7vw,17px);
  font-weight:800; line-height:1.25;
  color:var(--blue-text);
  text-wrap:balance;
}
.feature__text{
  margin:0;
  font-size:clamp(13.5px,1.5vw,15px);
  color:var(--text-soft);
  text-wrap:balance;
}

/* =========================================================
   CONTENIDO SEO
   ========================================================= */

.content{ padding:0 0 clamp(40px,6vw,70px); }

.content .wrap--narrow{
  background:var(--white);
  border-radius:22px;
  padding:clamp(26px,4.5vw,52px);
  box-shadow:0 10px 34px rgb(3 46 83 / 7%);
}
.content h2{
  margin:0 0 14px;
  font-size:clamp(21px,2.9vw,29px);
  font-weight:900; line-height:1.2;
  color:var(--blue-text);
  text-wrap:balance;
}
.content h2:not(:first-child){ margin-top:clamp(28px,4vw,42px); }
.content h3{
  margin:clamp(22px,3vw,30px) 0 8px;
  font-size:clamp(16.5px,2vw,19px);
  font-weight:800;
  color:var(--blue);
}
.content p{
  margin:0 0 14px;
  font-size:clamp(15px,1.7vw,16.5px);
}
.content strong{ color:var(--blue-text); }

.list{ margin:0 0 14px; padding-left:0; list-style:none; }
.list li{
  position:relative;
  padding-left:26px; margin-bottom:9px;
  font-size:clamp(15px,1.7vw,16.5px);
}
.list li::before{
  content:""; position:absolute; left:6px; top:.62em;
  width:8px; height:8px; border-radius:50%;
  background:var(--yellow);
}

.content__cta{ margin:clamp(24px,3.5vw,32px) 0 0; text-align:center; }

/* Botón de texto (además del arte del hero) */
.cta{
  display:inline-flex; align-items:center; gap:12px;
  padding:15px 30px;
  border-radius:999px;
  background:var(--yellow);
  color:var(--blue-dark);
  font-size:clamp(15px,1.8vw,18px);
  font-weight:900;
  text-decoration:none;
  box-shadow:0 10px 24px rgb(3 46 83 / 18%), inset 0 -3px 0 rgb(0 0 0 / 7%);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.cta:hover,.cta:focus-visible{
  background:#ffdf5c;
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgb(3 46 83 / 24%), inset 0 -3px 0 rgb(0 0 0 / 7%);
}
.cta:active{ transform:translateY(0); }
.cta__arrow{ width:1.1em; height:1.1em; flex:0 0 auto; }

/* =========================================================
   FOOTER
   ========================================================= */

.footer{
  background:var(--cream);
  padding:0 20px clamp(30px,5vw,46px);
  text-align:center;
}
.footer__claim{
  display:flex; align-items:center; justify-content:center; gap:12px;
  flex-wrap:wrap;
  margin:0 0 10px;
  font-size:clamp(15px,2vw,19px);
  font-weight:600;
  color:var(--text-soft);
}
.footer__claim em{ font-style:italic; }
.footer__claim .icon-paw-soft{ width:26px; height:26px; opacity:.7; }
.footer__claim .icon-heart{ width:22px; height:22px; }

.footer__legal{ margin:0; font-size:13px; color:#98a1ab; }
.footer__legal a{ color:var(--blue); text-decoration:none; font-weight:700; }
.footer__legal a:hover{ text-decoration:underline; }

/* =========================================================
   Preferencias / impresión
   ========================================================= */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none!important; animation:none!important; }
}

@media print{
  .hero__cta,.skip-link{ display:none; }
  .content .wrap--narrow{ box-shadow:none; }
}