/* =========================================================
   TARA KANYAA — Kanyakumari Beach Hotel
   Core stylesheet — design tokens, layout, components
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Sora:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* ---- color tokens ---- */
  --ink:            #0B2233;
  --ink-soft:       #12324a;
  --coral:          #FF6B4A;
  --coral-deep:     #E14F32;
  --dusk:           #F4B860;
  --teal:           #1E6E77;
  --teal-deep:      #124851;
  --sand:           #F6EFE4;
  --sand-dim:       #EDE3D2;
  --white:          #FFFFFF;
  --ink-transparent: rgba(11,34,51,0.72);

  /* day-arc gradient — the signature motif */
  --arc: linear-gradient(90deg, var(--ink) 0%, var(--teal) 28%, var(--coral) 58%, var(--dusk) 100%);
  --arc-soft: linear-gradient(90deg, rgba(30,110,119,.18), rgba(255,107,74,.18), rgba(244,184,96,.22));

  /* ---- type ---- */
  --font-display: 'Fraunces', serif;
  --font-body: 'Sora', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* ---- spacing scale ---- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;

  --radius: 18px;
  --radius-sm: 10px;
  --shadow-soft: 0 20px 60px -25px rgba(11,34,51,0.45);
  --shadow-card: 0 12px 34px -18px rgba(11,34,51,0.35);
  --ease: cubic-bezier(.22,.85,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--sand);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
input,select,textarea{ font-family:inherit; font-size:1rem; }

.container{ max-width:1240px; margin:0 auto; padding:0 var(--space-md); }
@media (max-width:640px){ .container{ padding:0 var(--space-sm); } }

section{ position:relative; }

.eyebrow{
  font-family: var(--font-mono);
  font-size:0.75rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color: var(--teal-deep);
  display:inline-flex;
  align-items:center;
  gap:0.6em;
  margin-bottom:var(--space-sm);
}
.eyebrow::before{
  content:"";
  width:28px; height:2px;
  background: var(--arc);
  display:inline-block;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight:600;
  line-height:1.08;
  color: var(--ink);
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(2rem, 6vw, 4rem); font-weight:300; }
h2{ font-size:clamp(2rem, 4.2vw, 3rem); }
h3{ font-size:clamp(1.3rem, 2.4vw, 1.6rem); }
p{ color:#334b58; }
.section-lede{ max-width:620px; color:#3d5866; font-size:1.05rem; }

/* ---- day-arc divider, the signature element ---- */
.day-arc{
  height:3px;
  width:100%;
  background: var(--arc);
  border-radius:3px;
  position:relative;
}
.day-arc--dot{
  position:absolute; top:50%; width:9px; height:9px; border-radius:50%;
  background:var(--white); border:2px solid var(--coral);
  transform:translate(-50%,-50%);
}

/* =========================== BUTTONS =========================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.55em;
  padding:0.95em 1.9em;
  border-radius:999px;
  font-size:0.95rem;
  font-weight:600;
  letter-spacing:0.01em;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background: linear-gradient(120deg, var(--coral), var(--coral-deep));
  color:var(--white);
  box-shadow:0 14px 30px -12px rgba(225,79,50,0.6);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 20px 38px -14px rgba(225,79,50,0.7); }
.btn-ghost{
  background: rgba(255,255,255,0.08);
  border:1.5px solid rgba(255,255,255,0.55);
  color:var(--white);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover{ background:rgba(255,255,255,0.22); transform:translateY(-3px); }
.btn-outline-ink{
  border:1.5px solid var(--ink);
  color:var(--ink);
  background:transparent;
}
.btn-outline-ink:hover{ background:var(--ink); color:var(--white); }
.btn-sm{ padding:0.65em 1.3em; font-size:0.82rem; }
.btn-block{ width:100%; }
.btn-whatsapp{ background:#25D366; color:#fff; }
.btn-whatsapp:hover{ transform:translateY(-3px); filter:brightness(1.06); }

/* =========================== HEADER / NAV =========================== */
.site-header{
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  padding:1.15rem 0;
  transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(11,34,51,0.86);
  backdrop-filter: blur(14px);
  padding:0.7rem 0;
  box-shadow:0 10px 30px -18px rgba(0,0,0,0.5);
}
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.brand{ display:flex; align-items:center; gap:0.65rem; font-family:var(--font-display); font-size:1.35rem; color:var(--white); font-weight:600; }
.brand-mark{
  width:38px; height:38px; border-radius:50%;
  background: var(--arc);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px -6px rgba(0,0,0,0.5);
}
.brand{

    display:flex;

    align-items:center;

    gap:15px;

    color:var(--white);

}


/* Logo */

.brand-logo{

    width:150px;

    height:150px;

    object-fit:contain;

    flex-shrink:0;

}


/* Text Section */

.brand-text{

    display:flex;

    flex-direction:column;

    justify-content:center;

    line-height:1.3;

}


/* Main Text */

.brand-title{

    font-size:1.5rem;

    font-weight:500px;

    color:#ffffff;

}


/* Small Text */

.brand h5{

    display:block;

    margin-top:5px;

    font-size:.65rem;

    letter-spacing:.15em;

    color:aliceblue;

    text-transform:uppercase;

}
@media(max-width:768px){

.brand{

    gap:8px;

}


.brand-logo{

    width:100px;

    height:100px;

}


.brand-title{

    font-size:1.5rem;

    line-height:1;

}


.brand h5{

    display:block;

    font-size:.80rem;

    margin-top:2px;

}


.menu-toggle{

    width:22px;

}


}
.nav-links{ display:flex; align-items:center; gap:2.1rem; }
.nav-links a{
  color:rgba(255,255,255,0.86);
  font-size:0.92rem; font-weight:500;
  position:relative; padding-bottom:5px;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--arc); transition:width .35s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a.active{ color:var(--white); }

.nav-cta{ display:flex; align-items:center; gap:0.9rem; }
.menu-toggle{
  display:none; flex-direction:column; gap:5px; width:26px; z-index:1100;
}
.menu-toggle span{ height:2px; width:100%; background:var(--white); border-radius:2px; transition:transform .35s var(--ease), opacity .3s var(--ease); }
.menu-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2){ opacity:0; }
.menu-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
/*=================================
MOBILE NAVBAR
==================================*/

@media(max-width:992px){

.site-header{

    padding:18px 0;

}


.nav-wrap{

    gap:20px;

}



/*--------------MENU-------------*/

.menu-toggle{

    display:flex;

    margin-left:auto;

}


/*-----------Book Now-------------*/

.nav-cta .btn{

    display:none;

}


/*------------NAV MENU------------*/

.nav-links{

    position:fixed;

    top:0;

    right:-100%;

    width:80%;

    height:100vh;

    padding:120px 40px;

    flex-direction:column;

    align-items:flex-start;

    justify-content:flex-start;

    gap:30px;

    background:

    rgba(11,34,51,.95);

    backdrop-filter:blur(25px);

    -webkit-backdrop-filter:blur(25px);

    transition:.5s ease;

    z-index:999;

}


/* OPEN MENU */

.nav-links.is-open{

    right:0;

}


/* MENU LINKS */

.nav-links a{

    font-size:1.2rem;

    width:100%;

    padding-bottom:15px;

    border-bottom:

    1px solid rgba(255,255,255,.08);

}


/* ACTIVE COLOR */

.nav-links a:hover{

    color:var(--dusk);

}


/* OVERLAY */

.nav-links::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:5px;

    height:100%;

    background:var(--arc);

}


/* BOOK NOW */

.mobile-book{

    width:100%;

    margin-top:20px;

}


.mobile-book .btn{

    width:100%;

}

}

/* =========================== HERO =========================== */
.hero{
  position:relative; height:100svh; min-height:560px;
  display:flex; align-items:center;
  overflow:hidden;
  color:var(--white);
}
.hero-slides{ position:absolute; inset:0; }
.hero-slide{
  position:absolute; inset:0;
  opacity:0;
  transform:scale(1.12);
  transition:opacity 1.6s var(--ease);
  background-size:cover; background-position:center;
}
.hero-slide.is-active{
  opacity:1;
  animation:kenburns 9s ease-in-out forwards;
}
@keyframes kenburns{
  0%{ transform:scale(1.12) translate(0,0); }
  100%{ transform:scale(1.0) translate(-1%,-1%); }
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,34,51,0.35) 0%, rgba(11,34,51,0.25) 45%, rgba(11,34,51,0.92) 100%);
  z-index:1;
}
.hero-content{

  width:650px;

    min-height:500px;

    margin-left:70px;

    margin-top:100px;

    padding:50px;

    border-radius:35px;

    position:relative;

    overflow:hidden;

    z-index:5;

}
.hero-eyebrow{
  font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--dusk); margin-bottom:1rem; display:flex; align-items:center; gap:0.7em;
  opacity:0; animation:riseIn .9s var(--ease) .3s forwards;
}
/*=================================
        MOBILE HERO SECTION
==================================*/

@media (max-width:768px){

.hero{

    height:100vh;

    min-height:100vh;

    align-items:flex-end;

}


/* Hero Image */

.hero-slide{

    background-position:center center;

    background-size:cover;

}


/* Dark Overlay */

.hero::after{

    background:
    linear-gradient(

    180deg,

    rgba(11,34,51,.20) 0%,

    rgba(11,34,51,.35) 60%,

    rgba(11,34,51,.95) 100%

    );

}


/* Hero Slider Animation */

.hero-slide.is-active{

    animation:
    mobileKenburns 10s ease-in-out forwards;

}


}


/* Mobile Zoom Effect */

@keyframes mobileKenburns{

    0%{

        transform:
        scale(1.08);

    }


    100%{

        transform:
        scale(1);

    }

}
/*===============================
 PREMIUM GLASS EFFECT
================================*/



    .hero-content{

    position:relative;

    z-index:5;

    max-width:650px;

    width:35%;

    min-height:300px;

    margin-left:70px;

    padding:70px 50px;

    border-radius:35px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    overflow:hidden;

}

/* Glass Reflection Effect */

.hero-content::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:35px;

    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);

    background:

    linear-gradient(

    135deg,

    rgba(255,255,255,.15),

    rgba(255,255,255,.06),

    rgba(255,255,255,.04)

    );

    border:1px solid
    rgba(255,255,255,.20);

    box-shadow:

    0 25px 50px
    rgba(0,0,0,.25);

    z-index:-1;

}

/* Premium Border Glow */

.hero-content::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:30px;

    padding:1px;

    background:
    linear-gradient(
    135deg,
    rgba(255,255,255,.5),
    transparent,
    rgba(255,255,255,.3));

    mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    mask-composite:exclude;
    -webkit-mask-composite:xor;

    pointer-events:none;

	
}

.hero-eyebrow::before{ content:""; width:34px; height:2px; background:var(--arc); }
.hero h1{ color:var(--white); max-width:200px; opacity:0; animation:riseIn 1s var(--ease) .5s forwards; }
.hero h1 em{ font-style:italic; color:var(--dusk); }
.hero-sub{ max-width:380px; color:rgba(255,255,255,0.82); margin-top:1.1rem; font-size:1.05rem; opacity:0; animation:riseIn 1s var(--ease) .7s forwards; }
.hero-actions{ display:flex; gap:1rem; margin-top:2.3rem; flex-wrap:wrap; opacity:0; animation:riseIn 1s var(--ease) .9s forwards; }
@keyframes riseIn{ from{ opacity:0; transform:translateY(24px);} to{ opacity:1; transform:translateY(0);} }

.hero-dots{ position:absolute; right:var(--space-md); bottom:var(--space-lg); z-index:3; display:flex; flex-direction:column; gap:0.6rem; }
.hero-dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.4); transition:all .35s var(--ease); cursor:pointer; }
.hero-dot.is-active{ background:var(--coral); transform:scale(1.3); box-shadow:0 0 0 4px rgba(255,107,74,0.25); }

.hero-arc-strip{ position:absolute; left:0; right:0; bottom:0; height:4px; z-index:3; background:var(--arc); }

.scroll-cue{
  position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:0.4rem;
  color:rgba(255,255,255,0.7); font-family:var(--font-mono); font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase;
}
.scroll-cue span.line{ width:1px; height:34px; background:rgba(255,255,255,0.5); position:relative; overflow:hidden; }
.scroll-cue span.line::after{ content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--dusk); animation:scrollLine 1.8s ease-in-out infinite; }
@keyframes scrollLine{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }
/*==========================
Small Laptop
==========================*/

@media(max-width:1366px){

.hero-content{

    width:40%;

    padding:10px 20px;

    margin-left:20px;

    min-height:10px;

}

.hero h1{

    font-size:2rem;

}

.hero-sub{

    font-size:15px;

}

}
/*==========================
Tablet
==========================*/

@media(max-width:992px){

.hero-content{

    width:55%;

    min-height:450px;

    margin-left:40px;

    padding:60px 40px;

}

.hero h1{

    font-size:3.5rem;

}

.hero-sub{

    font-size:17px;

}

}
@media(max-width:768px){

/* Hero */

.hero{

    min-height:100vh;

    align-items:flex-end;

}


/* Hero Content */

.hero-content{

    width:100%;

    padding:0;

    margin:0;

    min-height:100vh;

    background:none;

    border:none;

    box-shadow:none;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

}


/* Remove Glass Effect */

.hero-content::before,
.hero-content::after{

    display:none;

}


/* Hide Texts */

.hero-eyebrow,
.hero h1,
.hero-sub{

    display:none;

}


/* Buttons */

.hero-actions{

    width:100%;

    padding:0 25px;

    margin-bottom:90px;

    display:flex;

    gap:15px;

    justify-content:center;

    animation:none;

    opacity:1;

}


/* Button */

.hero-actions .btn{

    flex:1;

    text-align:center;

}


/* Scroll */

.scroll-cue{

    display:flex;

    bottom:30px;

}

}/* =========================== FEATURES STRIP =========================== */
.features{
  background:var(--ink);
  padding:var(--space-lg) 0;
  position:relative;
}
.features-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.feature-card{
  padding:1.6rem 1.4rem; border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  transition:transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
.feature-card:hover{ transform:translateY(-6px); background:rgba(255,255,255,0.08); border-color:rgba(244,184,96,0.4); }
.feature-icon{ width:40px; height:40px; margin-bottom:1rem; color:var(--dusk); }
.feature-icon svg{ width:100%; height:100%; }
.feature-card h4{ color:var(--white); font-size:1rem; font-family:var(--font-body); font-weight:600; margin-bottom:0.35rem; }
.feature-card p{ color:rgba(255,255,255,0.6); font-size:0.86rem; margin:0; }

/* =========================== SECTIONS GENERIC =========================== */
.section{ padding:var(--space-xl) 0; }
.section--sand{ background:var(--sand); }
.section--white{ background:var(--white); }
.section--ink{ background:var(--ink); color:var(--white); }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:var(--space-lg); flex-wrap:wrap; }

/* =========================== GALLERY =========================== */
.gallery-track-wrap{ overflow:hidden; }
.gallery-track{ display:flex; gap:1.2rem; width:max-content; animation:slideGallery 34s linear infinite; }
.gallery-track:hover{ animation-play-state:paused; }
@keyframes slideGallery{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.gallery-item{
  width:320px; height:220px; border-radius:var(--radius); overflow:hidden; position:relative; flex:none;
}
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.gallery-item:hover img{ transform:scale(1.12); }
.gallery-item .tag{
  position:absolute; left:0.9rem; bottom:0.9rem; z-index:2;
  color:var(--white); font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em;
  background:rgba(11,34,51,0.55); backdrop-filter:blur(6px); padding:0.35em 0.75em; border-radius:999px;
}
.gallery-item::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(11,34,51,0.65) 100%); }

/* =========================== WHY / GLASS CARDS =========================== */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.glass-card{
  padding:2rem 1.7rem;
  border-radius:var(--radius);
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(255,255,255,0.7);
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow-card);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.glass-card:hover{ transform:translateY(-7px); box-shadow:var(--shadow-soft); }
.glass-card .num{ font-family:var(--font-mono); font-size:0.75rem; color:var(--coral-deep); letter-spacing:0.1em; margin-bottom:0.9rem; display:block; }
.glass-card h4{ font-size:1.15rem; margin-bottom:0.5rem; }
.glass-card p{ font-size:0.9rem; margin:0; }
.glass-card--dark{ background:rgba(11,34,51,0.55); border-color:rgba(255,255,255,0.14); }
.glass-card--dark h4, .glass-card--dark .num{ color:var(--white); }
.glass-card--dark p{ color:rgba(255,255,255,0.7); }

/* =========================== CARDS: ROOMS / PLACES / BLOG =========================== */
.card-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.8rem; }
.card-grid--3{ grid-template-columns:repeat(3,1fr); }
.room-card, .place-card, .blog-card{
  background:var(--white); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.room-card:hover, .place-card:hover, .blog-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-soft); }
.card-media{ position:relative; height:230px; overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.room-card:hover .card-media img, .place-card:hover .card-media img{ transform:scale(1.1); }
.card-badge{
  position:absolute; top:0.9rem; left:0.9rem; z-index:2;
  background:var(--white); color:var(--ink);
  font-family:var(--font-mono); font-size:0.7rem; padding:0.35em 0.8em; border-radius:999px;
}
.card-badge--dark{ background:rgba(11,34,51,0.7); color:var(--white); backdrop-filter:blur(6px); }
.card-body{ padding:1.6rem; }
.card-body h3{ margin-bottom:0.5rem; }
.card-meta{ display:flex; align-items:center; gap:0.5rem; font-family:var(--font-mono); font-size:0.75rem; color:var(--teal-deep); margin-bottom:0.8rem; }
.tag-list{ display:flex; flex-wrap:wrap; gap:0.5rem; margin:0.9rem 0 1.2rem; }
.tag-list li{ font-size:0.78rem; padding:0.35em 0.75em; background:var(--sand-dim); border-radius:999px; color:var(--ink-soft); display:flex; align-items:center; gap:0.35em; }
.tag-list li svg{ width:12px; height:12px; color:var(--teal); }
.card-footer{ display:flex; align-items:center; justify-content:space-between; padding-top:1.1rem; border-top:1px dashed #e2d8c4; }
.price{ font-family:var(--font-display); font-size:1.4rem; color:var(--coral-deep); }
.price span{ font-family:var(--font-mono); font-size:0.72rem; color:#7a8b93; font-weight:400; }
.availability{ font-family:var(--font-mono); font-size:0.72rem; color:var(--teal-deep); display:flex; align-items:center; gap:0.4em; }
.availability::before{ content:""; width:7px; height:7px; border-radius:50%; background:#2fae5a; }

/* =========================== SCROLL REVEAL =========================== */
[data-reveal]{ opacity:0; transform:translateY(32px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in-view{ opacity:1; transform:translateY(0); }
[data-reveal="fade"]{ transform:none; }
[data-reveal-group] > *{ transition-delay: calc(var(--i,0) * 90ms); }

/* =========================== TESTIMONIAL / STATS ARC =========================== */
.arc-stats{ display:flex; justify-content:space-between; align-items:center; padding:2.6rem 0; position:relative; }
.arc-stats::before{ content:""; position:absolute; top:50%; left:0; right:0; height:1px; background:rgba(255,255,255,0.15); }
.arc-stat{ position:relative; text-align:center; padding:0 1rem; background:var(--ink); }
.arc-stat .n{ font-family:var(--font-display); font-size:2.4rem; color:var(--dusk); }
.arc-stat .l{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.6); }

/* =========================== FORMS =========================== */
.form-panel{ background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow-soft); padding:2.6rem; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; }
.field{ display:flex; flex-direction:column; gap:0.5rem; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:0.8rem; font-weight:600; color:var(--ink-soft); font-family:var(--font-mono); letter-spacing:0.03em; }
.field input, .field select, .field textarea{
  padding:0.85em 1em; border-radius:var(--radius-sm); border:1.5px solid #E2D8C4; background:#FCFAF5;
  transition:border-color .3s, box-shadow .3s;
  color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(30,110,119,0.14);
}
.field.error input, .field.error select{ border-color:var(--coral-deep); box-shadow:0 0 0 4px rgba(225,79,50,0.12); }
.field-error-msg{ font-size:0.76rem; color:var(--coral-deep); display:none; font-family:var(--font-mono); }
.field.error .field-error-msg{ display:block; }
.radio-group{ display:flex; gap:0.9rem; }
.radio-chip{
  flex:1; text-align:center; padding:0.8em 0.6em; border-radius:var(--radius-sm); border:1.5px solid #E2D8C4;
  cursor:pointer; font-size:0.86rem; font-weight:600; transition:all .3s var(--ease);
}
.radio-chip input{ display:none; }
.radio-chip.is-active{ border-color:var(--coral); background:rgba(255,107,74,0.08); color:var(--coral-deep); }
.form-foot{ display:flex; gap:1rem; margin-top:1.6rem; flex-wrap:wrap; }
.form-success{
  display:none; text-align:center; padding:3rem 1.5rem;
}
.form-success.is-visible{ display:block; }
.form-success svg{ width:56px; height:56px; color:#2fae5a; margin:0 auto 1rem; }

/* =========================== FOOTER =========================== */
.site-footer{ background:var(--ink); color:rgba(255,255,255,0.72); padding:var(--space-lg) 0 var(--space-md); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:var(--space-lg); }
.footer-grid h5{ color:var(--white); font-family:var(--font-body); font-size:0.9rem; letter-spacing:0.04em; margin-bottom:1.1rem; }
.footer-grid ul li{ margin-bottom:0.7rem; font-size:0.9rem; }
.footer-grid ul li a:hover{ color:var(--dusk); }
.footer-brand p{ color:rgba(255,255,255,0.6); font-size:0.9rem; max-width:280px; margin-top:0.8rem; }
.footer-social{ display:flex; gap:0.8rem; margin-top:1.3rem; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,0.2);
  display:flex; align-items:center; justify-content:center; transition:all .3s var(--ease);
}
.footer-social a:hover{ background:var(--arc); border-color:transparent; transform:translateY(-3px); }
.footer-social svg{ width:16px; height:16px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.1); padding-top:1.6rem; display:flex; justify-content:space-between; font-size:0.8rem; color:rgba(255,255,255,0.5); flex-wrap:wrap; gap:0.8rem; }

/* =========================== FLOATING ICONS =========================== */
.floating-icons{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:900;
  display:flex; flex-direction:column; gap:0.8rem;
  opacity:0; pointer-events:none; transform:translateY(20px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.floating-icons.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0); }
.floating-icons a{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 26px -10px rgba(0,0,0,0.4); color:#fff; transition:transform .3s var(--ease);
}
.floating-icons a:hover{ transform:scale(1.1); }
.fi-whatsapp{ background:#25D366; }
.fi-instagram{ background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.floating-icons svg{ width:24px; height:24px; }

/* =========================== PAGE HERO (inner pages) =========================== */
.page-hero{
  position:relative; padding:9.5rem 0 5rem; color:var(--white); overflow:hidden;
  background:linear-gradient(120deg, var(--ink) 0%, var(--teal-deep) 100%);
}
.page-hero h1{
    background:linear-gradient(
        135deg,
        #FFF4C4 0%,
        #E6C068 30%,
        #D4AF37 60%,
        #B8860B 100%
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
.page-hero::before{
  content:""; position:absolute; inset:0; opacity:0.5;
  background:radial-gradient(circle at 85% 20%, rgba(255,107,74,0.35), transparent 55%),
             radial-gradient(circle at 10% 90%, rgba(244,184,96,0.28), transparent 50%);
}
.page-hero .container{ position:relative; z-index:1; }
.breadcrumb{ font-family:var(--font-mono); font-size:0.78rem; color:rgba(255,255,255,0.65); margin-top:1rem; }
.breadcrumb a{ color:var(--dusk); }

/* =========================== MISC ICON UTIL =========================== */
.icon-circle{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--arc-soft); color:var(--teal-deep); flex:none;
}
.icon-circle svg{ width:24px; height:24px; }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; }
.split img{ border-radius:var(--radius); box-shadow:var(--shadow-card); }
.stat-row{ display:flex; gap:2.2rem; margin-top:1.8rem; flex-wrap:wrap; }
.stat-row .n{ font-family:var(--font-display); font-size:2rem; color:var(--coral-deep); }
.stat-row .l{ font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:#5c7580; }

.map-embed{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-card); border:none; width:100%; height:420px; }

.search-bar{ display:flex; gap:0.8rem; margin-bottom:2.5rem; max-width:460px; }
.search-bar input{ flex:1; padding:0.85em 1.1em; border-radius:999px; border:1.5px solid #E2D8C4; background:var(--white); }
.search-bar button{ padding:0.85em 1.4em; border-radius:999px; background:var(--ink); color:var(--white); font-weight:600; }
.chip-filters{ display:flex; gap:0.6rem; flex-wrap:wrap; margin-bottom:2.2rem; }
.chip-filters button{
  padding:0.5em 1.1em; border-radius:999px; border:1.5px solid #E2D8C4; font-size:0.82rem; font-weight:600; color:var(--ink-soft);
  transition:all .3s var(--ease);
}
.chip-filters button.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; }

.back-to-top{
  position:fixed; right:1.4rem; bottom:6.6rem; z-index:900;
  width:44px; height:44px; border-radius:50%; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:all .4s var(--ease);
}
.back-to-top.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0); }

.loader{
  position:fixed; inset:0; z-index:5000; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
.loader.is-hidden{ opacity:0; visibility:hidden; }
.loader-mark{ width:54px; height:54px; border-radius:50%; background:var(--arc); animation:pulseLoader 1.1s ease-in-out infinite; }
@keyframes pulseLoader{ 0%,100%{ transform:scale(0.85); opacity:0.7;} 50%{ transform:scale(1.05); opacity:1;} }