/* ==========================================================================
   Day Spa — landing
   Diseño convertido desde diseño1.html (lienzo Claude Design) a HTML/CSS estándar.
   Los estilos de maquetación viven inline en index.html (tal como el diseño
   original); aquí van: variables de tema, estados :hover/::after, los huecos
   de imagen y el comportamiento responsive.
   ========================================================================== */
@import url('fonts.css');

:root{
  --a2z-gold:#B67F3D;        /* color de marca */
  --a2z-gold-deep:#8F5D20;
  --ring:1;                  /* 1 = marcos dorados visibles */
  --sec-radius:30px;
  --page-pad:22px;
  --sec-gap:22px;
  --page-max:1288px;
  /* icono del marcador de imagen (se ve solo mientras no hay foto) */
  --ph-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
body{margin:0;background:#E2E5DF;font-family:'DM Sans',system-ui,sans-serif;color:#211E1A;-webkit-font-smoothing:antialiased}
a{color:#9A6524;text-decoration:none}
a:hover{color:#6F4514}
::selection{background:#EBD8B8}
img{max-width:100%}
:focus-visible{outline:2px solid var(--a2z-gold);outline-offset:2px}

/* ---- estados (:hover / ::after) extraídos del diseño ---- */
.x0:hover{background:var(--a2z-gold,#B67F3D);color:#FFFDFB}
.x1::after{content:'';position:absolute;left:20px;bottom:-5px;width:9px;height:9px;background:inherit;border-right:1px solid var(--a2z-gold,#B67F3D);border-bottom:1px solid var(--a2z-gold,#B67F3D);transform:rotate(45deg)}
.x2:hover{transform:translateY(-2px);box-shadow:0 16px 26px -12px rgba(143,93,32,.8);color:#FFF8EF}
.x3::after{content:'';position:absolute;left:24px;bottom:-5px;width:11px;height:11px;background:var(--a2z-gold-deep,#8F5D20);transform:rotate(45deg);border-radius:1px}
.x4:hover{background:#FBF3E7;color:#8A5D26}
.x5::after{content:'';position:absolute;left:22px;bottom:-5px;width:9px;height:9px;background:inherit;border-right:1px solid rgba(182,127,61,.6);border-bottom:1px solid rgba(182,127,61,.6);transform:rotate(45deg)}
.x6:hover{background:var(--a2z-gold,#B67F3D);color:#FFF8EF;transform:translate(2px,-2px)}
.x7:hover{background:var(--a2z-gold,#B67F3D);color:#FFF8EF;transform:translate(2px,-2px)}
.x8:hover{background:var(--a2z-gold,#B67F3D);color:#FFF8EF;transform:translate(2px,-2px)}
.x9:hover{background:#FBF3E7;color:#8A5D26}
.x10::after{content:'';position:absolute;left:20px;bottom:-5px;width:9px;height:9px;background:inherit;border-right:1px solid rgba(182,127,61,.6);border-bottom:1px solid rgba(182,127,61,.6);transform:rotate(45deg)}
.x11:hover{background:var(--a2z-gold,#B67F3D);color:#FFF8EF}
.x12::after{content:'';position:absolute;left:22px;bottom:-5px;width:9px;height:9px;background:inherit;border-right:1px solid var(--a2z-gold,#B67F3D);border-bottom:1px solid var(--a2z-gold,#B67F3D);transform:rotate(45deg)}
.x13:hover{background:var(--a2z-gold,#B67F3D);color:#FFF8EF}
.x14:hover{background:var(--a2z-gold,#B67F3D);color:#FFF8EF}
.x15:hover{background:var(--a2z-gold,#B67F3D);color:#FFF8EF}
.x16:hover{transform:translateY(-2px)}

/* ---- huecos de imagen ----------------------------------------------------
   Cada <div class="slot" id="X"> intenta cargar assets/img/X.jpg.
   Si el archivo no existe todavía, la <img> se retira sola y queda el
   marcador con el nombre. Para publicar una foto real basta con dejar el
   archivo con ese nombre en site/assets/img/.                              */
.slot{position:relative;overflow:hidden;background:#EFEBE4;display:block}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.slot>span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:7px;padding:8px;text-align:center;font-size:11px;color:#8C8579;
  pointer-events:none;outline:1px dashed rgba(33,30,26,.14);outline-offset:-1px}
.slot>span::before{content:'';width:21px;height:21px;background:currentColor;
  -webkit-mask:var(--ph-icon) center/contain no-repeat;mask:var(--ph-icon) center/contain no-repeat}
.slot img+span{display:none}

/* ---- menú móvil ---- */
.nav-btn{display:none;align-items:center;justify-content:center;width:38px;height:38px;padding:0;
  border:1px solid rgba(182,127,61,.45);border-radius:999px;background:#FFFDFB;color:var(--a2z-gold);cursor:pointer}

/* ==========================  RESPONSIVE  ================================= */
@media (max-width:1000px){
  .g-hero{grid-template-columns:1fr!important;gap:34px!important;margin-top:40px!important}
  .g-hero>div:last-child{justify-self:stretch!important;max-width:none!important;height:320px!important}
  .g-trust{grid-template-columns:1fr!important;gap:34px!important}
  .hero-notch{width:124px!important;height:74px!important;border-bottom-right-radius:24px!important}
  .g-about{grid-template-columns:1fr!important;gap:26px!important;align-items:start!important}
}
@media (max-width:820px){
  :root{--sec-radius:22px;--page-pad:14px;--sec-gap:14px}
  .nav-btn{display:inline-flex}
  .nav{flex-wrap:wrap}
  .nav-links{display:none!important;order:3;width:100%;flex-direction:column;align-items:flex-start!important;
    gap:14px!important;padding:16px 2px 4px;border-top:1px solid rgba(182,127,61,.25);margin-top:16px}
  .nav-links.open{display:flex!important}
  .g-plans{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:26px!important}
  .g-testi{grid-template-columns:1fr!important;gap:18px!important;text-align:center;justify-items:center}
  .shop-view{padding-left:0!important;overflow-x:auto!important;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .shop-view::-webkit-scrollbar{display:none}
  .shop-view .track{transform:none!important}
  .shop-view article{scroll-snap-align:start}
  .shop-nav,.shop-dots{display:none!important}
  .ftr{flex-direction:column;text-align:center}
}
@media (max-width:560px){
  .g-plans{grid-template-columns:1fr!important}
  section{padding-left:20px!important;padding-right:20px!important}
  .g-hero>div:last-child{height:260px!important}
  .hero-notch{width:96px!important;height:58px!important;border-bottom-right-radius:20px!important}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}