:root{
  /* Paleta rojo vino + blanco*/
  --wine:#8B1E2D;
  --wine-700:#711825;
  --brand:#8B1E2D;
  --accent:#8B1E2D;
  --ink:#111827;
  --muted:#4b5563;
  --paper:#ffffff;
  --bg:#ffffff;
  --line:#e5e7eb;
  --radius:clamp(0.75rem, 2vw, 1rem);
  --shadow:0 0.5rem 1.875rem rgba(139,30,45,.15);
  
  /* Tamaños base usando clamp */
  --base-font-size: clamp(14px, 2vw, 18px);
  --spacing-xs: clamp(0.25rem, 1vw, 0.5rem);
  --spacing-sm: clamp(0.5rem, 1.5vw, 0.75rem);
  --spacing-md: clamp(0.75rem, 2vw, 1rem);
  --spacing-lg: clamp(1rem, 3vw, 1.5rem);
  --spacing-xl: clamp(1.5rem, 4vw, 2rem);
  --spacing-2xl: clamp(2rem, 5vw, 3rem);
  --spacing-3xl: clamp(2.5rem, 7vw, 4rem);
}

/* RESET Y BASE */
*{box-sizing:border-box}
html{
  font-size:var(--base-font-size);
  scroll-behavior:smooth;
  overflow-x:hidden;
  width:100%
}
html,body{
  height:100%;
  width:100%;
  margin:0;
  padding:0
}
body{
  font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-size:1rem;
  line-height:1.6;
  overflow-x:hidden;
  position:relative
}
a{color:var(--brand);text-decoration:none}

/* LAYOUT GENERAL */
.page-wrapper{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  width:100%;
  overflow-x:hidden;
  position:relative
}
.main-content{flex:1;width:100%}
/* Mismo fondo que .hero (p. ej. landing mínima): todo el <main> es la banda. */
.main-content--hero{
  background-color:var(--wine-700);
  background-image:
    linear-gradient(135deg, rgba(15, 13, 18, 0.78), rgba(113, 24, 37, 0.82)),
    url("../img/fondo-landing.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:#fff;
  padding:clamp(2rem, 8vh, 4.5rem) clamp(1rem, 4vw, 1.5rem);
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box
}
.main-content--hero a{color:#fff;text-decoration:underline;text-underline-offset:0.15em}
.main-content--hero a:hover{opacity:0.92}

.hero-logo-panel{
  background:rgba(255,255,255,.16);
  border-radius:0.25rem;
  padding:clamp(1rem, 2.5vw, 1.75rem);
  box-shadow:0 0.5rem 2rem rgba(0,0,0,.18);
  max-width:min(100%, 22rem);
  box-sizing:border-box
}

.hero-logo-panel__img{
  display:block;
  width:100%;
  max-width:min(16rem, 100%);
  height:auto;
  margin:0 auto
}
.wrap{
  max-width:min(1100px, 100%);
  margin:auto;
  padding:0 clamp(1rem, 4vw, 1.5rem);
  width:100%;
  box-sizing:border-box
}

/* HEADER Y NAVEGACIÓN */
.site-header{
  position:sticky;
  top:0;
  background:var(--paper);
  box-shadow:0 1px 0 var(--line);
  z-index:10
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:clamp(3.5rem, 8vh, 4.5rem);
  min-height:clamp(3.5rem, 8vh, 4.5rem);
  flex-wrap:wrap;
  gap:clamp(0.25rem, 1vw, 0.5rem);
  padding:clamp(0.5rem, 1.5vh, 0.75rem) 0
}
.brand{
  display:flex;
  align-items:center;
  gap:clamp(0.5rem, 1.5vw, 0.75rem);
  font-weight:700;
  font-size:clamp(0.75rem, 2.5vw, 1rem)
}
.brand img{
  height:clamp(2.5rem, 6vw, 3.5rem);
  width:auto;
  max-height:100%;
  position:relative;
  top:-0.28rem
}
nav{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(0.25rem, 1vw, 0.5rem);
  flex:1 1 auto;
  justify-content:flex-end;
  min-width:0;
  margin-right:clamp(0.5rem, 2vw, 1.5rem)
}
nav a{
  margin-left:0;
  font-weight:600;
  font-size:clamp(0.75rem, 2vw, 1rem);
  padding:clamp(0.25rem, 1vw, 0.5rem) clamp(0.25rem, 1vw, 0.75rem);
  white-space:nowrap;
  flex:0 1 auto
}

/* Dropdown Menu */
.dropdown{
  position:relative;
  display:flex;
  align-items:center
}
.dropdown-toggle{
  cursor:pointer;
  margin-left:0;
  font-weight:600;
  font-size:clamp(0.75rem, 2vw, 1rem);
  padding:clamp(0.25rem, 1vw, 0.5rem) clamp(0.25rem, 1vw, 0.75rem);
  white-space:nowrap;
  flex:0 1 auto;
  text-decoration:none;
  color:var(--brand);
  display:flex;
  align-items:center;
  height:100%
}
.dropdown-menu{
  position:absolute;
  top:100%;
  left:0;
  right:auto;
  background:var(--paper);
  border-radius:var(--radius);
  box-shadow:0 0.5rem 1.5rem rgba(0,0,0,.2);
  min-width:max-content;
  width:max-content;
  max-width:min(calc(100vw - 2rem), 350px);
  opacity:0;
  visibility:hidden;
  transform:translateY(-0.5rem);
  transition:all 0.3s ease;
  z-index:100;
  margin-top:0.5rem;
  padding:clamp(0.5rem, 1.5vw, 0.75rem) 0;
  display:flex;
  flex-direction:column;
  gap:0;
  box-sizing:border-box
}
.dropdown-menu.right-aligned{
  left:auto;
  right:0
}
.dropdown.active .dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0)
}
.dropdown-item{
  display:block;
  padding:clamp(0.625rem, 1.5vw, 0.75rem) clamp(1rem, 2.5vw, 1.25rem);
  color:var(--ink);
  font-weight:600;
  font-size:clamp(0.75rem, 2vw, 0.875rem);
  white-space:nowrap;
  transition:background 0.2s ease, color 0.2s ease;
  text-decoration:none;
  width:100%
}
.dropdown-item:hover{
  background:var(--bg);
  color:var(--brand)
}

/* BOTONES Y ENLACES */
.btn{
  display:inline-block;
  padding:clamp(0.625rem, 2vw, 0.9rem) clamp(0.875rem, 2.5vw, 1.1rem);
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  box-shadow:var(--shadow);
  font-weight:700;
  font-size:clamp(0.75rem, 2vw, 1rem);
  transition:all 0.3s ease;
  text-align:center;
  min-width:max-content;
  width:max-content;
  max-width:100%;
  box-sizing:border-box;
  word-wrap:break-word;
  overflow-wrap:break-word
}
.btn:hover{
  transform:translateY(-1px);
  background:var(--wine-700)
}
.btn-accent{background:var(--accent)}
.btn-accent:hover{background:var(--wine-700)}
.link{font-weight:700}

/* HERO SECTION */
.hero{
  background:linear-gradient(135deg, var(--brand), var(--wine-700));
  color:#fff;
  padding:clamp(2rem, 10vh, 6rem) 0
}
.hero.slim{padding:clamp(2rem, 8vh, 4.5rem) 0}
.hero-wrap{
  min-height:clamp(200px, 40vh, 450px);
  padding:clamp(1rem, 5vh, 2.5rem) 0;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.hero-wrap h1{
  font-size:clamp(1.5rem, 5vw + 1rem, 3rem);
  line-height:1.2;
  margin-bottom:clamp(0.75rem, 3vh, 1.5rem);
  font-weight:800
}
.lead{
  opacity:.9;
  max-width:min(720px, 90vw);
  margin-bottom:clamp(1.5rem, 5vh, 3rem);
  font-size:clamp(0.9375rem, 2.5vw, 1.125rem);
  line-height:1.6
}
.hero-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(0.5rem, 2vw, 0.75rem);
  margin-top:clamp(1rem, 4vh, 2rem);
  justify-content:flex-start
}
.hero-buttons .btn{
  white-space:nowrap;
  font-size:clamp(0.6875rem, 2vw, 0.875rem);
  padding:clamp(0.5rem, 1.5vw, 0.75rem) clamp(0.75rem, 2vw, 1rem);
  flex:1 1 auto;
  min-width:min(150px, 100%);
  width:auto
}

/* GRID Y CARDS */
.grid{
  padding:clamp(2rem, 6vh, 3.5rem) 0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(260px, 100%),1fr));
  gap:clamp(1rem, 3vw, 1.25rem)
}
.card{
  background:var(--paper);
  border-radius:var(--radius);
  padding:clamp(1rem, 3vw, 1.5rem);
  box-shadow:var(--shadow);
  transition:transform 0.3s ease, box-shadow 0.3s ease
}
.card:hover{
  transform:translateY(-0.25rem);
  box-shadow:0 0.875rem 2.5rem rgba(139,30,45,.2)
}
.card h3{
  margin-top:0;
  font-size:clamp(1rem, 2.5vw, 1.25rem);
  font-weight:700;
  line-height:1.3
}
.card p{
  font-size:clamp(0.875rem, 2vw, 1rem);
  line-height:1.6;
  margin:0.5em 0
}

/* SECCIONES Y TÍTULOS */

.section{padding:clamp(2rem, 7vh, 3.5rem) 0}

/* PÁGINAS DE SERVICIOS */
.service-hero{
  background:linear-gradient(135deg, var(--brand), var(--wine-700));
  color:#fff;
  padding:clamp(3rem, 8vh, 5rem) 0
}
.service-hero h1{
  font-size:clamp(2rem, 5vw, 3.5rem);
  font-weight:800;
  line-height:1.2;
  margin:0
}
.service-section{
  padding:clamp(3rem, 8vh, 5rem) 0;
  min-height:clamp(200px, 30vh, 400px)
}
.service-section.white{
  background:var(--paper);
  color:var(--ink)
}
.service-section.wine{
  background:var(--wine-700);
  color:#fff
}
.centered{text-align:center}
h2{
  font-size:clamp(1.25rem, 4vw + 0.5rem, 2.25rem);
  font-weight:800;
  line-height:1.2;
  margin:0 0 clamp(0.75rem, 3vh, 1.5rem)
}
.cta{
  text-align:center;
  padding:clamp(2rem, 7vh, 3.5rem) 0
}
.cta .wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(0.75rem, 3vh, 1.5rem)
}

/* FOOTER: bloque principal + copyright en el mismo contenedor */

.site-footer{
  margin-top:auto;
  width:100%
}

/* Landing temporal: enlaces "Sitio" e "Especialidades" del pie sin navegación */
.page-landing-temp .footer-menu-inner > .footer-column:nth-child(2) a,
.page-landing-temp .footer-menu-inner > .footer-column:nth-child(3) a{
  pointer-events:none;
  cursor:default
}
.page-landing-temp .footer-menu-inner > .footer-column:nth-child(2) a:hover,
.page-landing-temp .footer-menu-inner > .footer-column:nth-child(3) a:hover{
  color:#e5e7eb;
  padding-left:0
}
.page-landing-temp .footer-menu-inner > .footer-column:nth-child(2) ul li:nth-child(4) a{
  pointer-events:auto;
  cursor:pointer
}
.page-landing-temp .footer-menu-inner > .footer-column:nth-child(2) ul li:nth-child(4) a:hover{
  color:#fff;
  padding-left:.35rem
}

.footer-menu{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:flex-start;
  padding:clamp(0.5rem, 1.1vw, 0.85rem) clamp(1rem, 4vw, 2.5rem)
    clamp(0.45rem, 1vw, 0.75rem);
  background:linear-gradient(135deg, #1f1418 0%, #2d1218 50%, var(--wine-700) 100%);
  color:#f9fafb;
  position:relative;
  overflow:hidden;
  width:100%;
  box-sizing:border-box
}

.footer-menu::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, transparent, var(--brand), rgba(255,255,255,.35), transparent)
}

/* Sobrepone .wrap: sin max-width 1100px centrado (evita franjas vacías en pantallas anchas) */
.footer-menu .footer-menu-inner.wrap{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  max-width:none;
  width:100%;
  margin:0;
  padding:0;
  gap:0;
  box-sizing:border-box;
  flex:0 0 auto
}

.footer-copyright{
  width:100%;
  margin:clamp(0.25rem, 0.75vw, 0.45rem) 0 0;
  padding:clamp(0.35rem, 0.95vw, 0.5rem) 0 0;
  border-top:1px solid rgba(255,255,255,.12);
  text-align:center;
  box-sizing:border-box;
  position:relative;
  z-index:1;
  flex:0 0 auto
}

.footer-copyright p{
  margin:0;
  padding:0;
  font-size:clamp(0.5625rem, 1.15vw, 0.6875rem);
  color:rgba(249,250,251,.88);
  line-height:1.3
}

.footer-column{
  flex:1;
  min-width:200px;
  margin:0 var(--spacing-md) clamp(0.25rem, 0.85vw, 0.5rem);
  box-sizing:border-box;
  transition:transform .25s ease
}

.footer-column:first-child{
  flex:2;
  min-width:min(100%, 320px)
}

.footer-column:hover{transform:translateY(-2px)}

.footer-column h4{
  font-size:clamp(0.65625rem, 1.25vw, 0.8125rem);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.055em;
  color:#fecaca;
  position:relative;
  padding-bottom:0.1rem;
  margin:0 0 0.28rem
}

.footer-column h4::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:2.5rem;
  height:2px;
  background:linear-gradient(90deg, var(--brand), transparent);
  border-radius:1px
}

.footer-column ul{
  list-style:none;
  padding:0;
  margin:0
}

.footer-column ul li{margin-bottom:0.12rem}

.footer-column ul li a{
  font-size:clamp(0.625rem, 1.25vw, 0.75rem);
  font-weight:500;
  color:#e5e7eb;
  transition:color .2s ease, padding-left .2s ease;
  position:relative;
  padding-left:0;
  display:inline-block
}

.footer-column ul li a:hover{
  color:#fff;
  padding-left:.35rem
}

.footer-column ul li a[href*="google.com/maps"]{
  display:block;
  line-height:1.38;
  max-width:280px
}

.footer-brand-section{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:clamp(0.4rem, 1vw, 0.65rem);
  width:100%;
  min-width:0
}

.footer-brand-image{
  /* Evita que el min-width intrínseco de la PNG estire todo el flex row */
  flex:0 0 clamp(4rem, 12vw, 6.25rem);
  width:clamp(4rem, 12vw, 6.25rem);
  max-width:clamp(4rem, 12vw, 6.25rem);
  min-width:0;
  transition:transform .25s ease
}

.footer-brand-image:hover{transform:scale(1.03)}

.footer-brand-image img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.25))
}

.footer-brand-text{
  font-size:clamp(0.65625rem, 1.25vw, 0.75rem);
  line-height:1.38;
  color:#e5e7eb;
  text-align:left;
  flex:1;
  min-width:0;
  word-wrap:break-word
}

.squared-border{
  border-radius:0;
  padding:0.08rem 0 0.08rem var(--spacing-sm);
  border-left:3px solid rgba(254,202,202,.45)
}

@media (max-width:768px){
  .footer-menu{padding:var(--spacing-sm) var(--spacing-md)}
  .footer-menu-inner{flex-direction:column}
  .footer-column{
    flex:100%!important;
    margin:0 0 var(--spacing-xs);
    min-width:100%
  }
  .footer-brand-section{
    flex-direction:column;
    align-items:center;
    text-align:center
  }
  .footer-brand-text{
    border-left:none;
    padding-left:0;
    padding-top:var(--spacing-xs);
    text-align:center
  }
  .squared-border{border-left:none}
  .footer-column ul li a[href*="google.com/maps"]{max-width:none}
}

@media (max-width:480px){
  .footer-column:first-child{min-width:100%}
}

/* FORMULARIOS */

.form .form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(250px, 100%),1fr));
  gap:clamp(0.75rem, 2vw, 1rem)
}
.form label{
  display:flex;
  flex-direction:column;
  font-weight:600;
  gap:clamp(0.25rem, 1vw, 0.5rem);
  font-size:clamp(0.75rem, 2vw, 1rem)
}
.form input, .form textarea{
  border:1px solid var(--line);
  border-radius:clamp(0.625rem, 1.5vw, 0.75rem);
  padding:clamp(0.625rem, 2vw, 0.875rem);
  font:inherit;
  font-size:clamp(0.875rem, 2vw, 1rem);
  width:100%;
  box-sizing:border-box
}

  /* ANIMACIONES */

.reveal{
  opacity:0;
  transform:translateY(1rem);
  transition:all .7s ease
}
.reveal.is-visible{
  opacity:1;
  transform:none
}
.reveal-up{
  opacity:0;
  transform:translateY(1.5rem);
  transition:all .9s cubic-bezier(.2,.8,.2,1)
}
.reveal-up.is-visible{
  opacity:1;
  transform:none
}
.delay-1{transition-delay:.12s}
.delay-2{transition-delay:.24s}