/* ==========================================================================
   @importaciones de fuentes
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

/* ==========================================================================
   Variables de Tema – Esquema “Razdelno-Complementario”
   ========================================================================== */
:root{
  /* Colores principales (Corporate + Split-Complementary) */
  --clr-primary-500:#0066B8;  /* azul YPF */
  --clr-primary-600:#004B8A;
  --clr-primary-700:#00345F;

  --clr-accent-500:#FF9900;   /* naranja vibrante */
  --clr-accent-600:#CC7A00;
  --clr-accent-700:#995C00;

  --clr-split-500:#00B894;    /* verde complementario */
  --clr-split-600:#009874;
  --clr-split-700:#007A5C;

  /* Neutros */
  --clr-white:#FFFFFF;
  --clr-light:#F5F7FA;
  --clr-dark-900:#111111;
  --clr-dark-700:#333333;
  --clr-dark-500:#555555;

  /* Gradientes y overlays */
  --gradient-primary:linear-gradient(135deg,var(--clr-primary-600) 0%,var(--clr-primary-500) 100%);
  --gradient-overlay:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.4));

  /* Sombras volumétricas */
  --shadow-soft:0 4px 10px rgba(0,0,0,0.15);
  --shadow-medium:0 8px 20px rgba(0,0,0,0.25);

  /* Radio y transiciones */
  --radius:12px;
  --transition:all .3s ease;
}

/* ==========================================================================
   Reset complementario a Modern-Normalize
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
body, h1,h2,h3,h4,h5,h6,p,ul,ol,figure,blockquote{margin:0;padding:0;}
ul,ol{list-style:none;}
a{text-decoration:none;color:inherit;}
img{display:block;max-width:100%;height:auto;}

/* ==========================================================================
   Tipografía
   ========================================================================== */
body{
  font-family:'IBM Plex Sans',sans-serif;
  font-size:1rem;
  color:var(--clr-dark-700);
  background-color:var(--clr-light);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family:'Inter',sans-serif;
  color:var(--clr-dark-900);
  line-height:1.2;
  text-align:center;
  text-shadow:1px 1px 3px rgba(0,0,0,0.25);
}
h1{font-size:clamp(2.5rem,5vw,4rem);}
h2{font-size:clamp(1.75rem,4vw,2.5rem);}
h3{font-size:1.5rem;}

/* ==========================================================================
   Contenedores utilitarios
   ========================================================================== */
.container{width:90%;max-width:1280px;margin-inline:auto;}
.section{padding:4rem 0;}
.is-two-thirds{width:66.666%;}

/* ==========================================================================
   Header fijo y burger
   ========================================================================== */
.main-header{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  background:var(--gradient-primary);
  color:var(--clr-white);
  box-shadow:var(--shadow-medium);
}
.logo a{font-size:1.6rem;font-weight:700;color:var(--clr-white);}
.nav{display:flex;align-items:center;justify-content:flex-end;}
.nav-list{display:flex;gap:1.5rem;}
.nav-list a{color:var(--clr-white);font-weight:500;position:relative;}
.nav-list a::after{
  content:'';position:absolute;left:0;bottom:-4px;width:0;height:2px;
  background:var(--clr-accent-500);transition:var(--transition);
}
.nav-list a:hover::after{width:100%;}
.burger{
  display:none;background:none;border:none;cursor:pointer;
  width:2rem;height:2rem;position:relative;
}
.burger span,
.burger span::before,
.burger span::after{
  position:absolute;left:0;width:100%;height:2px;background:var(--clr-white);
  transition:var(--transition);
}
.burger span{top:50%;transform:translateY(-50%);}
.burger span::before{content:'';top:-8px;}
.burger span::after{content:'';top:8px;}
/* Responsive nav */
@media(max-width:768px){
  .burger{display:block;}
  .nav-list{position:fixed;top:64px;right:-100%;flex-direction:column;
    background:var(--gradient-primary);width:60%;height:calc(100% - 64px);
    padding:2rem 1rem;transition:var(--transition);}
  .nav-list.open{right:0;}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:80vh;color:var(--clr-white);text-align:center;
  overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;background:var(--gradient-overlay);
  z-index:1;
}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero-content{position:relative;z-index:2;max-width:800px;padding:0 1rem;}
.hero p{font-size:1.25rem;margin-block:1.25rem;}

/* ==========================================================================
   Botones globales
   ========================================================================== */
.btn,
button,
input[type='submit']{
  display:inline-block;
  background:var(--clr-accent-500);
  color:var(--clr-white);
  padding:.75rem 2rem;
  border:none;border-radius:var(--radius);
  font-family:'Inter',sans-serif;
  font-weight:600;
  cursor:pointer;
  transition:var(--transition);
  box-shadow:var(--shadow-soft);
}
.btn:hover,
button:hover,
input[type='submit']:hover{
  background:var(--clr-accent-600);
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,0.2);
}
.btn:active,
button:active,
input[type='submit']:active{
  transform:translateY(0);
  box-shadow:var(--shadow-soft);
}

/* ==========================================================================
   Secciones de texto genéricas
   ========================================================================== */
.text-section{padding:4rem 0;}
.text-section p{max-width:800px;margin:1rem auto;font-size:1.1rem;}

/* ==========================================================================
   Progress Bars
   ========================================================================== */
progress{
  -webkit-appearance:none;appearance:none;width:100%;height:1rem;border-radius:var(--radius);
  overflow:hidden;margin-bottom:1.5rem;
}
progress::-webkit-progress-bar{background:var(--clr-light);}
progress::-webkit-progress-value{background:var(--clr-split-500);transition:width 1s linear;}
progress::-moz-progress-bar{background:var(--clr-split-500);}

/* ==========================================================================
   Toggles
   ========================================================================== */
.toggle-group{display:flex;gap:2rem;justify-content:center;margin-top:2rem;flex-wrap:wrap;}
.toggle-group label{position:relative;padding-left:3rem;font-weight:600;cursor:pointer;}
.toggle-group input{position:absolute;opacity:0;}
.toggle-group .lever{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:2.5rem;height:1.25rem;background:var(--clr-dark-500);border-radius:1rem;
  transition:var(--transition);
}
.toggle-group .lever::after{
  content:'';position:absolute;top:2px;left:2px;width:1rem;height:1rem;
  background:var(--clr-white);border-radius:50%;transition:var(--transition);
}
.toggle-group input:checked + .lever{background:var(--clr-accent-500);}
.toggle-group input:checked + .lever::after{left:calc(100% - 1rem - 2px);}

/* ==========================================================================
   Cards (Portfolio, Awards, etc.)
   ========================================================================== */
.card-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-top:3rem;
}
.card{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--clr-white);border-radius:var(--radius);box-shadow:var(--shadow-soft);
  transition:var(--transition);overflow:hidden;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-medium);}
.card-image{width:100%;height:200px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.card-image img{width:100%;height:100%;object-fit:cover;margin:0 auto;}
.card-content{padding:1.5rem;}
.card-content h3{margin-bottom:.75rem;color:var(--clr-primary-600);}
.card-content p{font-size:1rem;color:var(--clr-dark-700);}

/* ==========================================================================
   Sección Contacto
   ========================================================================== */
.contact-section{padding:4rem 0;background:var(--gradient-primary);color:var(--clr-white);}
.contact-section form{max-width:700px;margin:0 auto;display:grid;gap:1.5rem;}
.contact-section label{display:flex;flex-direction:column;font-weight:600;}
.contact-section input,
.contact-section textarea{
  padding:.75rem 1rem;border-radius:var(--radius);border:2px solid transparent;
  font-family:'IBM Plex Sans',sans-serif;resize:vertical;
}
.contact-section input:focus,
.contact-section textarea:focus{outline:none;border-color:var(--clr-accent-500);}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{
  background:var(--clr-dark-900);color:var(--clr-light);padding:2.5rem 0;text-align:center;
}
.footer nav{margin-bottom:1rem;}
.footer a{color:var(--clr-accent-500);margin:0 .5rem;transition:var(--transition);}
.footer a:hover{color:var(--clr-accent-700);text-decoration:underline;}
.social a{font-weight:600;}

/* ==========================================================================
   Enlaces “Leer más”
   ========================================================================== */
.read-more{
  color:var(--clr-accent-500);font-weight:600;position:relative;padding-right:1.2rem;
}
.read-more::after{
  content:'→';position:absolute;right:0;top:0;transition:var(--transition);
}
.read-more:hover::after{right:-4px;}

/* ==========================================================================
   Éxito (success.html)
   ========================================================================== */
.page-success{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--clr-light);padding:2rem;text-align:center;
}
.page-success h1{color:var(--clr-split-600);margin-bottom:1rem;}

/* ==========================================================================
   Privacy & Terms Padding
   ========================================================================== */
.page-legal{padding-top:100px;padding-bottom:4rem;}

/* ==========================================================================
   Animaciones – “RotoSketch”
   ========================================================================== */
@keyframes sketch-in{
  0%{stroke-dasharray:1000;stroke-dashoffset:1000;}
  100%{stroke-dashoffset:0;}
}
.sketch-path{animation:sketch-in 2s ease forwards;}

/* ==========================================================================
   Parallax (hero)
   ========================================================================== */
@supports (background-attachment:fixed){
  .hero{background-attachment:fixed;}
}

/* ==========================================================================
   Glassmorphism utility
   ========================================================================== */
.glass{
  backdrop-filter:blur(12px) saturate(150%);
  background:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.25);
  border-radius:var(--radius);
}

/* ==========================================================================
   Responsive Utility
   ========================================================================== */
@media(max-width:576px){
  .toggle-group{gap:1rem;}
  .nav-list{width:80%;}
  .contact-section form{gap:1rem;}
}
.burger{
  display: none;
}