*{
margin:0;
padding:0;
box-sizing:border-box;
}

html {
  scroll-behavior: smooth;
}

/* Scrollbar Minimalista Gris Oscuro */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #0b0b0b;
}

::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 5px;
  border: 2px solid #0b0b0b;
}

::-webkit-scrollbar-thumb:hover {
  background: #444;
}

/* Estilos para navegadores sin webkit */
* {
  scrollbar-width: thin;
  scrollbar-color: #333 #0b0b0b;
}

/* ========================
VARIABLES COLOR
======================== */

:root{

--bg-main:#0b0b0b;
--bg-section:#121212;
--card-bg:#1a1a1a;

--text-main:#ffffff;
--text-soft:#cfcfcf;

--border-soft:#2a2a2a;

--accent:#c9a646;

}

/* ========================
BASE
======================== */

body{

background:var(--bg-main);
color:var(--text-main);

font-family:"Inter", sans-serif;

line-height:1.9;
font-size:clamp(22px,1.6vw,26px);

text-align:center;

text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;

}

html {
  scroll-behavior: smooth;
}

/* ========================
CONTAINER
======================== */

.container{

width:90%;
max-width:1150px;
margin:auto;

}

/* ========================
NAVBAR
======================== */

.header{

background:rgba(10,10,10,0.85);
backdrop-filter:blur(10px);
-webkit-backdrop-filter: blur(10px);

border-bottom:1px solid var(--border-soft);

position:sticky;
top:0;

z-index:100;
transition: all .3s ease;

}

.header.scrolled {
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0.3rem 0;
}

.header-flex{

display:flex;
justify-content:space-between;
align-items:center;

padding:1rem 0;

}

.logo{

height:110px;

}

.header nav a{

margin-left:1.5rem;

text-decoration:none;

color:var(--text-main);

font-family:"Inter", sans-serif;

font-size:clamp(20px,1.3vw,22px);
font-weight:500;

transition:opacity .2s ease;

}

.header nav a:hover{

color: var(--accent);
opacity: 1;

}

.header nav a.active {
  color: var(--accent);
  position: relative;
}

.header nav a.active::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(1);
  transition: transform 0.3s ease;
}

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

.hero{

position:relative;

padding:170px 0;
scroll-margin-top: 120px;

background-image:url("assets/img/hero.jpg");
background-size:cover;
background-position:center;

color:white;

overflow:hidden;

}

.hero::after{

content:"";
position:absolute;

inset:0;

background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,.85));
z-index: 1;

}

.hero-center{

position:relative;
z-index:2;

animation:fadeUp 1.2s ease;

}

.hero-center h1{

font-family:"Cormorant Garamond", serif;

font-size:clamp(64px,5vw,92px);
font-weight:600;

letter-spacing:.5px;

}

.tagline{

margin-top:1.6rem;

font-family:"Inter", sans-serif;

font-size:clamp(26px,2vw,34px);

color:var(--text-soft);

max-width:760px;

margin-left:auto;
margin-right:auto;

}

/* ========================
CAROUSEL
======================== */

.carousel{

margin-top:3rem;

overflow:hidden;

position:relative;

}

.carousel-track{

display:flex;

gap:2.5rem;

width:max-content;

/* La animación se manejará por JS para transiciones de velocidad fluidas */

}

.slide{

flex-shrink:0;

}

.slide img{

width:420px;
height:260px;

object-fit:cover;

border-radius:14px;

transition:all .35s ease;

}

.slide img:hover{

transform:scale(1.07);

box-shadow:0 20px 40px rgba(0,0,0,.6);

}

@keyframes carousel-scroll{

0%{transform:translateX(0);}
100%{transform:translateX(-50%);}

}

/* ========================
SECTIONS
======================== */

.section{

padding:7rem 0;
scroll-margin-top: 120px;

animation:fadeUp 1s ease;

}

#honorarios {
  padding: 10rem 0;
}

#contacto {
  scroll-margin-top: 160px;
}

.section.light{

background:var(--bg-section);

}

/* ========================
PRESENTACIÓN
======================== */

.presentacion-grid{

display:grid;

grid-template-columns:1fr 1.3fr;

gap:90px;

align-items:center;

margin-top:50px;

}

.presentacion-foto img{

width:100%;

max-width:440px;

border-radius:16px;

box-shadow:0 20px 50px rgba(0,0,0,.6);

transition:transform .35s ease;

}

.presentacion-foto img:hover{

transform:scale(1.04);

}

.presentacion-texto{

text-align:left;

}

/* JUSTIFICADO LIMPIO */

.presentacion-texto p{

max-width:820px;

margin:0;

text-align:justify;

text-justify:inter-word;

hyphens:none;

word-break:normal;

overflow-wrap:normal;

line-height:1.9;

}

/* ========================
TITLES
======================== */

h2{

font-family:"Cormorant Garamond", serif;

font-size:clamp(42px,3vw,56px);

margin-bottom:2.2rem;

color:var(--accent);

}

h3{

font-family:"Cormorant Garamond", serif;

font-size:clamp(28px,2vw,36px);

margin-bottom:14px;

}

h4{

font-family:"Cormorant Garamond", serif;

font-size:clamp(22px,1.5vw,28px);

margin-top:10px;

}

/* ========================
TEXT
======================== */

p{

font-family:"Inter", sans-serif;

max-width:840px;

margin:auto;
margin-bottom:1.8rem;

color:var(--text-soft);

font-size:clamp(22px,1.4vw,26px);

}

/* ========================
SERVICIOS
======================== */

.casos-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:3rem;

margin-top:3rem;

}

.caso-card{

background:var(--card-bg);

padding:3rem;

border-radius:16px;

border:1px solid var(--border-soft);

transition:all .35s ease;

}

.caso-card:hover{

transform:translateY(-8px) scale(1.02);

box-shadow:0 20px 50px rgba(0,0,0,.6);
border: 1px solid var(--accent);

}

/* ========================
SERVICIOS EXPANSIÓN
======================== */

.servicios-extra{

display:none;

margin-top:20px;

}

.servicios-extra ul{

list-style:none;

margin-top:16px;

padding:0;

}

.servicios-extra li{

font-family:"Inter", sans-serif;

padding:10px 0;

border-bottom:1px solid var(--border-soft);

font-size:clamp(20px,1.2vw,22px);

}

.servicios-toggle,
.servicios-close{

margin-top:18px;

font-family:"Inter", sans-serif;

background:#ffffff;
color:#000;

border:none;

padding:14px 30px;

border-radius:26px;

cursor:pointer;

font-size:clamp(18px,1.2vw,22px);

transition:.3s;

}

.servicios-toggle:hover,
.servicios-close:hover{

background:var(--accent);

}

/* ========================
CONTACTO
======================== */

.contact-icons{

display:flex;

justify-content:center;

gap:2.5rem;

margin-top:3rem;

}

.contact-icons a{

font-family:"Inter", sans-serif;

text-decoration:none;

background:#ffffff;
color:#000;

padding:18px 36px;

border-radius:34px;

font-size:clamp(20px,1.4vw,24px);

transition:all .25s ease;

}

.contact-icons a:hover{

transform:scale(1.07);

background:var(--accent);

}

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

.footer{

font-family:"Inter", sans-serif;

margin-top:5rem;

padding:2rem;

border-top:1px solid var(--border-soft);

color:var(--text-soft);

text-align: center;
display: flex;
flex-direction: column;
align-items: center;

/* un poco más chico para que entre todo */

font-size:clamp(15px,0.9vw,17px);

}

.footer p{

white-space: nowrap;
font-size: clamp(12px, 0.8vw, 17px); /* Scalable to keep it in one line */

}

/* ========================
WHATSAPP FLOAT
======================== */

.whatsapp{

position:fixed;

right:22px;
bottom:22px;

background:#25d366;

color:white;

font-size:34px;

width:72px;
height:72px;

display:flex;

align-items:center;
justify-content:center;

border-radius:50%;

text-decoration:none;

box-shadow:0 10px 30px rgba(0,0,0,.6);

transition:transform .3s ease;

}

.whatsapp:hover{

transform:scale(1.15);

}

/* ========================
ANIMACIONES
======================== */

@keyframes fadeUp{

from{

opacity:0;
transform:translateY(40px);

}

to{

opacity:1;
transform:translateY(0);

}

}

.fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: all .8s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes fadeHero {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================
RESPONSIVE
======================== */

@media(max-width:900px){

.hero{

padding:120px 0;

}

.hero-center h1{

font-size:clamp(48px,8vw,60px);

}

.carousel-track{

gap:1rem;

}

.slide img{

width:280px;
height:180px;

}

.presentacion-grid{

grid-template-columns:1fr;

text-align:center;

}

.presentacion-texto{

text-align:left;

}

.presentacion-texto p{

text-align:left;

}

.presentacion-foto img{

margin:auto;

}

.casos-grid{

grid-template-columns:1fr;

}

.contact-icons{

flex-direction:column;

gap:1.5rem;

}

}