/* ===========================
   Cores Corp – CSS común
   =========================== */

/* ====== Variables, resets y base ====== */
:root{
  --bg:#f6f7f9; --ink:#0f172a; --muted:#64748b; --card:#ffffff; --border:#e5e7eb;
  --brand-green:#22c55e; --brand-blue:#0b2b59; --brand-orange:#f59e0b;
  --radius:16px; --shadow:0 8px 24px rgba(2,8,23,.06);
}
*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; overflow-x:hidden; background:var(--bg); color:var(--ink); }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
.container{ max-width:1120px; margin:auto; padding:24px; }

/* ====== Header (estable, sin cambios de altura) ====== */
header{
  position: sticky; top: 0; z-index: 10; background:#fff;
  border-bottom:1px solid var(--border);
  padding:12px 0; /* fijo, no varía => sin temblores */
  transition: box-shadow .25s ease, background-color .25s ease;
  backdrop-filter: saturate(180%) blur(6px);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; }

/* Logo: solo transform visual al hacer shrink */
.brand img{
  height:64px; width:auto; object-fit:contain;
  transition: transform .25s ease, opacity .25s ease;
  will-change: transform;
}
.brand img:hover{ transform: scale(1.03); }
header.shrink{ box-shadow:0 6px 18px rgba(2,8,23,.08); }
header.shrink .brand img{ transform: scale(.92); opacity:.95; }

/* Botón simple */
.btn{
  display:inline-block; padding:10px 16px; border:1px solid var(--border);
  border-radius:12px; background:#fff;
}
.btn:hover{ background:#f3f4f6; }

/* ====== Hero ====== */
.hero{ border-bottom:1px solid var(--border); padding:50px 0 40px; }

/* Base: 1 columna (móvil o cuando se oculte la imagen) */
.hero-inner{ display:grid; gap:20px; align-items:center; grid-template-columns:1fr; }

/* ≥960px: 2 columnas (imagen + texto) */
@media(min-width:960px){
  .hero-inner{ grid-template-columns:1.1fr 1fr; }
}

/* Contenedor gráfico del hero */
.hero-graphic{
  border-radius:16px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow);
  min-height:260px; aspect-ratio:3 / 2;
  background:linear-gradient(135deg,#E7F3EF 0%, #EEF2F7 100%);
}

/* Si usas <img/picture> dentro, cuadra la imagen */
.hero-graphic picture, .hero-graphic img{ display:block; width:100%; height:100%; }
.hero-graphic img{ object-fit:cover; }

/* Tipografía hero */
h1{ font-size:clamp(28px,4vw,40px); margin:0 0 8px; font-weight:800; }
.subtitle{ color:var(--muted); font-size:17px; margin:0 0 10px; }
.cta-row{ margin-top:16px; display:flex; gap:12px; flex-wrap:wrap; }

/* Modo 1 columna forzado (si no hay imagen) */
.hero-inner.one-col{ grid-template-columns:1fr !important; }
.hero-inner.one-col #heroGraphic{ display:none !important; }

/* ====== Cards de marcas ====== */
.grid{ display:grid; gap:20px; margin-top:24px; }
@media(min-width:640px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:960px){ .grid{ grid-template-columns:repeat(3,1fr); } }
.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover{ transform:translateY(-6px); box-shadow:0 12px 28px rgba(0,0,0,.08); }
.stripe{ height:8px; border-radius:var(--radius) var(--radius) 0 0; }
.stripe-green{ background:linear-gradient(90deg,var(--brand-green),#8ee89f); }
.stripe-blue{ background:linear-gradient(90deg,#0d3a75,var(--brand-blue)); }
.stripe-orange{ background:linear-gradient(90deg,#f59e0b,#fdba74); }
.card-body{ padding:18px; }
.card h3{ margin:10px 0 6px; font-size:18px; }
.card p{ margin:0; color:var(--muted); font-size:14px; min-height:40px; }

/* ====== Valores (si decides usarlos) ====== */
.values{ display:grid; gap:16px; margin-top:28px; }
@media(min-width:900px){ .values{ grid-template-columns:repeat(4,1fr); } }
.value{
  display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--border);
  border-radius:14px; padding:14px;
}
.value svg{ flex:0 0 auto; width:28px; height:28px; }
.value b{ display:block; margin-bottom:4px; }

/* ====== Sobre ====== */
.about{ display:grid; gap:24px; margin-top:48px; }
@media(min-width:960px){ .about{ grid-template-columns:1fr 2fr; } }
.about p{ color:#374151; line-height:1.6; margin-bottom:14px; }
.rule{ width:64px; height:4px; background:var(--ink); border-radius:999px; margin-top:12px; }

/* ====== Contacto ====== */
.contact{ margin-top:40px; }
.contact form{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  grid-template-areas:"name email" "message message" "button button";
  gap:12px; max-width:900px; align-items:start;
}
.contact form input[name="name"]{ grid-area:name; }
.contact form input[name="email"]{ grid-area:email; }
.contact form textarea{ grid-area:message; min-height:120px; }
.contact form button{ grid-area:button; }
.contact form input, .contact form textarea{
  width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:12px;
  background:#fff; font-size:16px; outline:none; transition:all .25s ease;
}
.contact form input:focus, .contact form textarea:focus{
  border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.15);
}
.contact form input[name="name"], .contact form input[name="email"]{
  height:46px; display:block;
}
.contact form button{
  justify-self:start; padding:12px 26px; font-size:16px; font-weight:600; letter-spacing:.3px;
  border:none; border-radius:12px; color:#fff;
  background:linear-gradient(135deg,#0b1729 0%,#1e3a8a 60%,#059669 100%);
  cursor:pointer; transition:transform .35s ease, box-shadow .35s ease, background .35s ease;
  box-shadow:0 3px 8px rgba(0,0,0,.1);
}
.contact form button:hover{
  transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.18);
  background:linear-gradient(135deg,#1e3a8a 0%,#059669 60%,#10b981 100%);
}
.contact .success{
  margin-top:12px; padding:12px 14px; border-radius:12px; background:#e8f7ee; color:#166534; display:none;
}

/* ====== Responsive ajustes ====== */
@media(max-width:640px){
  .contact form{ grid-template-areas:"name" "email" "message" "button"; }
  .contact form button{ justify-self:stretch; }
}

/* ====== Footer ====== */
footer{ background:#0b1729; color:#e5e7eb; margin-top:60px; }
.footer-inner{ display:grid; gap:24px; padding:28px 24px; }
@media(min-width:900px){ .footer-inner{ grid-template-columns:1fr 1fr 1fr; } }
.footer-logo img{ height:28px; filter:brightness(0) invert(1); }
.links{ display:grid; gap:6px; font-size:14px; }
.links a{ color:#e2e8f0; }
.links a:hover{ text-decoration:underline; }

/* ====== Cookies ====== */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:9999;
  background:#0b1729; color:#e5e7eb; border-radius:14px; padding:16px;
  box-shadow:0 10px 30px rgba(2,8,23,.25); display:none; max-width:calc(100% - 32px);
}
.cookie-banner p{ margin:0 0 10px; line-height:1.5; }
.cookie-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.cookie-btn{ border:none; border-radius:10px; padding:10px 14px; cursor:pointer; font-weight:600; }
.cookie-accept{ background:#16a34a; color:#fff; }
.cookie-reject{ background:#ef4444; color:#fff; }
.cookie-config{ background:#fff; color:#0b1729; }