:root{
  --accent:#e67e22;      /* naranja principal */
  --accent-2:#ff6b35;    /* naranja secundario / rojo-anaranjado */
  --accent-3:#ffd28a;    /* naranja claro / amarillo pálido */
  --yellow:#f4d03f;      /* amarillo brillante */
  --blue:#2874a6;        /* azul profundo */
  --red:#c0392b;         /* rojo */
  /* Updated background colors to a warmer, fresher cream/peach palette */
  --bg:#fff8e6;
  --panel:#fffaf3;
  --text:#222;
  --muted:#6b6b6b;
  --card:#ffffff;
  --shadow: rgba(34,34,34,0.08);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  /* use a softer warm gradient for page background */
  background:linear-gradient(180deg,var(--bg),#fff3ea);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 20px;
  /* tweak header tint to harmonize with new warm palette */
  background:linear-gradient(90deg, rgba(246,190,120,0.08), rgba(255,220,185,0.04));
  border-bottom:1px solid rgba(211,84,0,0.06);
  box-shadow:0 2px 8px rgba(0,0,0,0.02);
  position:sticky;
  top:0;
  z-index:10;
}
.brand{display:flex;gap:14px;align-items:center}
.logo{width:72px;height:72px;object-fit:cover;border-radius:12px;box-shadow:0 6px 18px rgba(211,84,0,0.12)}
.site-header h1{margin:0;font-size:1.15rem;color:var(--text);letter-spacing:0.2px}
.tag{margin:0;font-size:0.86rem;color:var(--muted)}
.top-nav a{margin-left:14px;color:var(--accent);text-decoration:none;font-size:0.95rem;padding:8px 10px;border-radius:8px;transition:all .18s ease}
.top-nav a:hover{background:linear-gradient(90deg,var(--accent) 0%, var(--accent-2) 100%);color:#fff;transform:translateY(-2px);box-shadow:0 6px 14px rgba(255,122,45,0.12)}
.hero{display:flex;flex-wrap:wrap;gap:18px;padding:24px;align-items:center}
.hero-image{width:360px;max-width:44%;border-radius:14px;object-fit:cover;box-shadow:0 10px 30px rgba(0,0,0,0.08);border:4px solid rgba(255,188,128,0.18)}
.hero-text{flex:1;min-width:240px;background:linear-gradient(180deg, rgba(255,254,250,0.95), rgba(255,247,240,0.92));padding:18px;border-radius:12px;box-shadow:0 6px 18px var(--shadow)}
.hero-text h2{margin-top:0;color:var(--accent);font-size:1.35rem}
.hero-text p{color:var(--muted);line-height:1.5}
.section{padding:20px;margin-top:12px}
.cards h3, .section h3{margin:0 0 14px 0;color:var(--accent)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.card{background:linear-gradient(180deg,var(--panel),var(--card));padding:14px;border-radius:12px;box-shadow:0 8px 20px var(--shadow);transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,0.12)}
.card img{width:100%;height:150px;object-fit:cover;border-radius:8px;border:1px solid rgba(0,0,0,0.03)}
.two-column{display:flex;gap:22px;flex-wrap:wrap}
.two-column > div{flex:1;min-width:220px}
aside{width:240px;min-width:180px;background:linear-gradient(180deg,#fff,#fffaf5);padding:14px;border-radius:12px;box-shadow:0 8px 18px rgba(0,0,0,0.04)}
.services-list{list-style:none;padding:0;margin:8px 0 0 0}
.services-list li{margin:8px 0;color:var(--muted);padding-left:8px;position:relative}
.services-list li::before{content:"•";color:var(--accent);position:absolute;left:0}
.contact-grid{display:flex;gap:20px;flex-wrap:wrap}
.contact-form{background:linear-gradient(180deg,var(--card),#fffefc);padding:14px;border-radius:12px;min-width:260px;flex:1;box-shadow:0 10px 26px rgba(0,0,0,0.06)}
.contact-form label{display:block;font-size:0.92rem;margin-bottom:10px;color:var(--muted)}
.contact-form input,.contact-form textarea{width:100%;padding:10px;border:1px solid #f0d8c9;border-radius:8px;margin-top:8px;background:#fff}
.contact-form input:focus,.contact-form textarea:focus{outline:none;box-shadow:0 6px 20px rgba(255,122,45,0.08);border-color:var(--accent)}
.contact-form button{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;border:0;padding:12px 16px;border-radius:10px;margin-top:10px;cursor:pointer;box-shadow:0 8px 20px rgba(255,122,45,0.12);transition:transform .15s ease}
.contact-form button:hover{transform:translateY(-3px)}
.status{margin-top:8px;color:var(--accent-2);font-weight:600}
.site-footer{text-align:center;padding:14px;color:var(--muted);font-size:0.9rem;background:linear-gradient(180deg,#fff,#fff8f2);border-top:1px solid rgba(211,84,0,0.04);margin-top:20px}
@media (max-width:720px){
  .hero{flex-direction:column;align-items:center;padding:16px}
  .hero-image{max-width:100%;width:100%}
  .top-nav{display:none}
  .brand .logo{width:64px;height:64px}
}