/* ==========================================================================
  Automayor – Bright Neo-Brutalism Theme
  Compatible with Bulma 0.9.x
  Author: AI
  ========================================================================== */

/* ---------- CSS Variables ------------------------------------------------ */
:root{
  /* Base Colors (Bright palette) */
  --clr-bg:            #fffcf5;
  --clr-text:          #222222;
  --clr-primary:       #01d9ff;
  --clr-primary-dark:  #00b6d6;
  --clr-secondary:     #ffbf00;
  --clr-secondary-dark:#d9a000;
  --clr-accent:        #ff4f5e;
  --clr-accent-dark:   #d93645;
  --clr-info:          #6c5ce7;
  --clr-info-dark:     #5345c4;

  /* Gradients */
  --gradient-main: linear-gradient(135deg,var(--clr-primary) 0%,var(--clr-secondary) 100%);
  --gradient-dark: linear-gradient(135deg,var(--clr-primary-dark) 0%,var(--clr-accent-dark) 100%);

  /* Typography */
  --font-heading: 'Inter',sans-serif;
  --font-body:    'IBM Plex Sans',sans-serif;

  /* Misc */
  --radius:      4px;
  --duration:    .35s;
  --ease-spring: cubic-bezier(.68,-0.55,.27,1.55); /* elastic feel */
}

/* ---------- Global Reset / Base ----------------------------------------- */
*,
*::before,
*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--clr-text);
  background:var(--clr-bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- Typography --------------------------------------------------- */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  font-weight:800;
  line-height:1.2;
  margin:0 0 .5em;
}

.section:not(:last-child){margin-bottom:3rem;}

header {
  margin-bottom: 0 !important;
}

/* ---------- Utilities ---------------------------------------------------- */
.text-center{ text-align:center !important; }
.read-more{
  position:relative;
  font-weight:600;
  color:var(--clr-accent);
  transition:color var(--duration) ease;
}
.read-more::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:100%;
  height:2px;
  background:var(--clr-accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--duration) var(--ease-spring);
}
.read-more:hover::after{ transform:scaleX(1); }

/* ---------- Buttons (Global) -------------------------------------------- */
.btn,
button,
input[type='submit']{
  appearance:none;
  border:none;
  font-family:var(--font-heading);
  font-weight:700;
  padding:.75rem 1.75rem;
  border-radius:var(--radius);
  background:var(--clr-secondary);
  color:var(--clr-text);
  cursor:pointer;
  transition:
    transform   var(--duration) var(--ease-spring),
    box-shadow  var(--duration) ease,
    background  var(--duration) ease,
    color       var(--duration) ease;
}
.btn--primary{ background:var(--clr-primary); color:#fff; }
.btn--accent{  background:var(--clr-accent);  color:#fff; }

.btn:hover,
button:hover,
input[type='submit']:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 10px 18px rgba(0,0,0,.15);
}
.btn:active,
button:active,
input[type='submit']:active{
  transform:translateY(0) scale(.98);
}

/* ---------- Navbar ------------------------------------------------------- */
.navbar,
header.section{
  background:var(--clr-primary);
}
.navbar-item,
.navbar-burger span{
  color:#fff;
  font-family:var(--font-heading);
  font-weight:600;
}
.navbar-item:hover{ background:rgba(255,255,255,.05); }

/* ---------- Hero Section ------------------------------------------------- */
.hero{
  position:relative;
  color:#fff;                     /* ВАЖНО: белый текст */
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.4));
  z-index:0;
}
.hero-body{ position:relative; z-index:1; }
.hero .title{font-size:3.5rem;}
.hero .subtitle{font-size:1.35rem;}

/* Parallax utility */
.parallax{ background-attachment:fixed; }

/* ---------- Section: Methodology / Partners / Workshops / Press ---------- */
#metodologia .box,
#partners .image,
#talleres .card,
#prensa .card{
  border:4px solid var(--clr-text);
}

/* ---------- Card Layout (strict centration) ----------------------------- */
.card,
.item,
.testimonial,
.team-member,
.product-card{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:var(--clr-bg);
  border:4px solid var(--clr-text);
  border-radius:var(--radius);
  transition:transform var(--duration) var(--ease-spring);
}
.card:hover{ transform:translateY(-6px) rotate(-.5deg); }

.image-container{
  width:100%;
  height:250px;                 /* fixed height */
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.image-container img{
  width:100%;
  height:100%;
  object-fit:cover;             /* СТРОГО: object-fit для корректного отображения */
  margin:0 auto;                /* СТРОГО: центрируем */
}

/* ---------- Elastic Animation Helper ------------------------------------ */
@keyframes spring-in{
  0%  {transform:scale(.85);}
  80% {transform:scale(1.05);}
  100%{transform:scale(1);}
}
.animate-spring{ animation:spring-in .6s var(--ease-spring) both; }

/* ---------- Glassmorphism ------------------------------------------------ */
.glass{
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.3);
}

/* ---------- Switch (Day/Night) ------------------------------------------ */
.modo-noche{
  --clr-bg:#1d1d1d;
  --clr-text:#e5e5e5;
}
.modo-noche body{background:var(--clr-bg); color:var(--clr-text);}
.modo-noche .section{background:transparent;}

/* ---------- Success Page ------------------------------------------------- */
body.success-page{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;             /* ВАЖНО */
}

/* ---------- Legal Pages (privacy, terms) -------------------------------- */
section.legal,
body.legal-page .section:first-child{ padding-top:100px; } /* ВАЖНО */

/* ---------- Footer ------------------------------------------------------- */
footer.section{
  background:var(--clr-primary);
  color:#fff;
}
footer a{
  color:#fff;
  font-weight:700;
  margin:0 .35rem;
  position:relative;
  overflow:hidden;
  padding-bottom:2px;
  transition:color var(--duration) ease;
}
footer a::before{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:3px;
  background:var(--clr-secondary);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--duration) var(--ease-spring);
}
footer a:hover{
  color:var(--clr-secondary);
}
footer a:hover::before{
  transform:scaleX(1);
}

/* ---------- Social Links as “icons” ------------------------------------- */
.social-link{
  font-size:1.1rem;
  letter-spacing:.5px;
}
.social-link::before{
  content:"◆";
  display:inline-block;
  margin-right:.35rem;
  transform:scale(.7);
}

/* ---------- Hoverable Section Gradient ---------------------------------- */
.section-gradient{
  background:var(--gradient-main);
  color:#fff;
}

/* ---------- Background Image Helper ------------------------------------- */
.bg-cover{
  background-size:cover !important;
  background-repeat:no-repeat !important;
}

/* ---------- Partners Grid ------------------------------------------------ */
.partners-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:2rem;
  align-items:center;
  justify-items:center;
}

/* ---------- Contact Form ------------------------------------------------- */
form.box{
  border:4px solid var(--clr-secondary);
}
textarea:focus,
input:focus{
  outline:none;
  border-color:var(--clr-primary);
  box-shadow:0 0 0 2px var(--clr-primary);
}

/* ---------- Responsive Helpers ------------------------------------------ */
@media (max-width:768px){
  .hero .title{ font-size:2.4rem; }
  .hero .subtitle{ font-size:1.1rem; }
  .image-container{ height:200px; }
}