:root {
  --bg: #f9f9f9;          /* fondo principal claro */
  --card: #ffffff;        /* tarjetas y secciones */
  --text: #1a1a1a;        /* texto principal oscuro */
  --muted: #555555;       /* texto secundario gris */
  --orange: #ff6a00;      /* acento principal */
  --orange-2: #ffa366;    /* acento suave */
  --stroke: #e5e5e5;      /* bordes claros */
  --shadow: 0 6px 20px rgba(0,0,0,.08); /* sombras suaves */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:linear-gradient(180deg,#0a0a0a,#0f0f0f 60%,#111);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Helpers */
.container{width:min(1200px,92%); margin-inline:auto}
img{max-width:100%; display:block}
.rounded{border-radius:18px}
.accent{color:var(--orange)}
.lead{color:var(--muted)}
.link{color:var(--orange); text-decoration:none}
.link:hover{text-decoration:underline}
.badge{background:var(--orange); color:#000; padding:.35rem .6rem; border-radius:999px; font-weight:700}
.tag{display:inline-block; background:#181818; border:1px solid #232323; padding:.25rem .6rem; border-radius:999px; color:var(--muted); margin-top:.5rem}

/* Focus visible */
:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; border-radius:8px; }
.btn:focus-visible{ outline-offset:4px; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background:linear-gradient(180deg,var(--orange),#ff5500);
  color:#000; border:none; padding:.9rem 1.2rem; border-radius:14px;
  font-weight:800; letter-spacing:.2px; cursor:pointer; box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--ghost{
  background:transparent; color:var(--text); border:1.5px solid var(--orange); box-shadow:none;
}
.btn--sm{padding:.55rem .9rem; font-weight:700}

/* Header */
.topbar{
  position:sticky; top:0; z-index:40; backdrop-filter:saturate(1.2) blur(12px);
  background:rgba(10,10,10,.6); border-bottom:1px solid #161616;
}
.topbar .container{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0}
.brand{display:flex; align-items:center; gap:.7rem; color:var(--text); text-decoration:none; font-weight:800}
.brand .logo{width:40px; height:40px; object-fit:contain}
.nav{display:flex; gap:1.2rem; align-items:center}
.nav a{color:var(--muted); text-decoration:none; font-weight:600}
.nav a:hover{color:var(--text)}
.hamburger{display:none; background:transparent; border:0; padding:.4rem; cursor:pointer}
.hamburger span{display:block; width:24px; height:2px; background:#1f1e1e; margin:5px 0; transition:.2s}

/* Body sin scroll cuando el menú está abierto */
.no-scroll{ overflow:hidden; }

/* Hero */
.hero{position:relative; padding:80px 0}
.hero__grid{display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center}
.hero__copy h1{font-size:clamp(32px,5vw,52px); line-height:1.08; margin:0 0 .6rem}
.hero__copy .lead{font-size:1.1rem; margin:.2rem 0 1.2rem}
.hero__cta{display:flex; gap:.8rem; flex-wrap:wrap}
.hero__info{margin-top:1rem; display:flex; gap:1rem; align-items:center; color:var(--muted)}
.hero__carousel{position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--stroke); box-shadow:var(--shadow); aspect-ratio: 16 / 10; }
.hero__carousel .slide{position:absolute; inset:0; opacity:0; object-fit:cover; transition:opacity .6s ease}
.hero__carousel .slide.active{opacity:1}
.hero__shape{position:absolute; inset:auto -10% -20% -10%; height:250px; background:
 radial-gradient(500px 120px at 20% 0, rgba(255,106,0,.25), transparent 40%),
 radial-gradient(400px 100px at 80% 20%, rgba(255,163,102,.15), transparent 40%);
 filter:blur(40px); pointer-events:none}

/* Quick cards */
.quick{padding:24px 0 6px}
.quick__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.qcard{
  background:linear-gradient(180deg,#131313,#0f0f0f); border:1px solid #1e1e1e; border-radius:16px; padding:18px;
  text-decoration:none; color:var(--text); transition:transform .2s ease, border-color .2s ease;
}
.qcard:hover{transform:translateY(-4px); border-color:#2a2a2a}
.qicon{font-size:22px; margin-bottom:.2rem;}

/* Secciones */
.section-head{margin-bottom:12px}
.section-head h2{font-size:clamp(26px,3.6vw,36px); margin:0}
.section-head p{color:var(--muted)}

/* Catálogo */
.catalogo{padding:48px 0}
.filters{display:flex; align-items:center; justify-content:space-between; gap:16px; margin:18px 0 12px; flex-wrap:wrap}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chips .chip{
  border:1px solid #242424; background:#121212; color:var(--muted);
  padding:.45rem .8rem; border-radius:999px; cursor:pointer; font-weight:700; transition:.2s
}
.chips .chip.active, .chips .chip:hover{border-color:var(--orange); color:#fff}
.search input{
  background:#111; border:1px solid #242424; border-radius:12px; padding:.75rem 1rem; color:#fff; width:min(340px,80vw)
}
.promo{position:relative; border:1px dashed #2b2b2b; border-radius:14px; padding:10px; margin:6px 0 18px}
.promo__track{display:flex; gap:10px; overflow:auto; scroll-snap-type:x proximity; padding:6px}
.promo__card{
  min-width:240px; background:linear-gradient(180deg,#141414,#101010);
  border:1px solid #232323; border-radius:12px; padding:12px; scroll-snap-align:start;
}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:14px}
.card{
  background:linear-gradient(180deg,#141414,#0f0f0f); border:1px solid #1f1f1f; border-radius:16px; padding:14px; box-shadow:var(--shadow);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-3px); border-color:#2a2a2a; box-shadow:0 12px 30px rgba(0,0,0,.35); }
.pcard__img{aspect-ratio:1/1; border-radius:12px; overflow:hidden; margin-bottom:10px; background:#ffffff}
.pcard__img img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease}
.card:hover .pcard__img img{transform:scale(1.04)}
.pcard__meta{display:flex; align-items:center; justify-content:space-between; gap:6px}
.price{color:var(--orange)}
.empty{text-align:center; color:var(--muted); padding:20px}

/* Servicios */
.servicios{padding:48px 0}
.grid--services{grid-template-columns:repeat(4,1fr)}

/* About */
.about{padding:48px 0}
.about__grid{display:grid; grid-template-columns:1fr 1.2fr; gap:30px}
.about__list{display:grid; gap:8px; padding-left:18px}

/* Blog */
.blog{padding:48px 0}
.blog .card img{border-radius:12px; margin-bottom:12px}

/* Contacto */
.contacto{padding:48px 0}
.contacto__grid{display:grid; grid-template-columns:1.1fr 1fr; gap:24px; align-items:start}
.contacto__info ul{color:var(--muted); line-height:1.8}
.contacto__map iframe{width:100%; height:420px; border:0; border-radius:16px}
form.card{display:grid; gap:10px; margin-top:14px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
label{display:grid; gap:6px; font-size:.95rem; color:var(--muted)}
input, textarea{
  background:#ececec; border:1px solid #222; border-radius:12px; color:#080808; padding:.8rem 1rem; outline:none
}
input:focus, textarea:focus{border-color:var(--orange)}
.form-msg{color:var(--muted); margin:0}

/* Footer */
.footer{border-top:1px solid #161616; padding:28px 0 6px; background:#0a0a0a}
.footer__grid{display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:18px}
.footer__grid h4{margin:0 0 .6rem}
.footer__grid ul{list-style:none; padding:0; margin:0; display:grid; gap:.4rem}
.footer__grid a{text-decoration:none; color:var(--muted)}
.footer__grid a:hover{color:#fff}
.footer__copy{display:flex; justify-content:space-between; align-items:center; gap:10px; border-top:1px solid #161616; padding-top:10px}
.brand--footer .logo{width:32px}

/* WhatsApp float */
.wa-float{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); width:56px; height:56px; display:grid; place-items:center;
  background:#25D366; border-radius:999px; box-shadow:0 12px 30px rgba(0,0,0,.35); z-index:60; transition:transform .2s
}
.wa-float:hover{transform:translateY(-2px)}
.wa-float img{width:28px; height:28px}

/* Animaciones reveal */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.reveal.show{opacity:1; transform:none}
.delay-1{transition-delay:.12s}
.delay-2{transition-delay:.24s}
.delay-3{transition-delay:.36s}

/* Responsive */
@media (max-width: 1024px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .grid--services{grid-template-columns:repeat(2,1fr)}
  .hero__grid{grid-template-columns:1fr}
}
@media (max-width: 800px){
  /* Nav móvil mejorado */
  .nav{
    position:fixed; left:0; right:0; top:56px;
    background:#0b0b0b; border-bottom:1px solid #161616; padding:12px;
    display:grid; gap:6px;
    transform:translateY(-120%); opacity:0; pointer-events:none;
    transition:transform .25s ease, opacity .25s ease;
    max-height:calc(100dvh - 56px); overflow:auto;
  }
  .nav.open{ transform:none; opacity:1; pointer-events:auto; }

  .hamburger{display:block}

  .quick__grid{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr); gap:14px}
  .about__grid, .contacto__grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 520px){
  .grid{grid-template-columns:1fr; gap:12px}
  .footer__grid{grid-template-columns:1fr}
  .hero{ padding:64px 0 40px; }
}

/* Blog Home grid */
#blogHome.grid {
  grid-template-columns: repeat(3, 1fr);
}

.pagination {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.5rem;
}
.pagination button {
  background: #4646464f;
  color: #000000;
  border: none;
  padding: .4rem .8rem;
  cursor: pointer;
  border-radius: 4px;
}
.pagination button.active {
  background: var(--brand);
  font-weight: bold;
}
.pagination button:disabled {
  opacity: .5;
  cursor: default;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
  align-items: stretch; /* <-- fuerza que todas las tarjetas ocupen igual alto */
}

.pcard {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* distribuye contenido */
}

.service-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 0; /* eliminamos padding de .card */
}

.service-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.service-card:hover img {
  transform: scale(1.05);
}

.service-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.75) 100%);
  color: #fff;
}

.service-card__overlay h3 {
  margin: 0 0 .3rem;
  font-size: 1.2rem;
  font-weight: 700;
}

.service-card__overlay p {
  margin: 0;
  font-size: .95rem;
  color: #ddd;
}

/* Forzar que el footer quede al fondo */
html, body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1; /* Empuja el footer hacia abajo */
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* antes tenía 3 columnas */
  gap: 18px;
}

body {
  background:#f0f0f0;
  color: var(--text);
}
.topbar {
  background: rgba(255,255,255,.8);
  border-bottom: 1px solid var(--stroke);
}
.card, .qcard {
  background: var(--card);
  border: 1px solid var(--stroke);
}
.footer {
  background: #fafafa;
  border-top: 1px solid var(--stroke);
}
.link { color: var(--orange); }
.btn--ghost { color: var(--orange); border-color: var(--orange); }

.tag {
  display: inline-block;
  background: #f0f0f0;         /* gris muy claro */
  border: 1px solid #ddd;      /* borde suave */
  padding: .25rem .6rem;
  border-radius: 999px;
  color: #444;                 /* texto gris oscuro */
  font-weight: 600;
  margin-top: .5rem;
}

.brand .logo {
  width: auto;       /* se ajusta proporcionalmente */
  height: 48px;      /* alto fijo (puedes probar 50–60px según se vea) */
  object-fit: contain;
}

.btn, .btn a {
  text-decoration: none !important;
}

/* Chips (categorías) */
.chips .chip {
  border: 1px solid #ddd;
  background: #f9f9f9;
  color: #444;
  padding: .45rem .9rem;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  transition: .2s;
}
.chips .chip.active,
.chips .chip:hover {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}

/* Barra de búsqueda */
.search input {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: .75rem 1rem;
  color: #333;
  width: min(340px,80vw);
}

/* Promo (ofertas) */
.promo {
  border: 1px dashed #ddd;
  background: #fff;
  border-radius: 14px;
  padding: 10px;
  margin: 6px 0 18px;
}
.promo__card {
  min-width: 240px;
  background: #fafafa;
  border: 1px solid #888888;
  border-radius: 12px;
  padding: 12px;
}
.badge {
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  padding: .35rem .7rem;
}

/* Texto dentro de las promos */
.promo__card {
  min-width: 240px;
  background: #3d3d3d;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 12px;
  color: #ff0000; /* texto principal más legible */
}

.promo__card p,
.promo__card span,
.promo__card small {
  color: #ff0000; /* tono más oscuro que el gris actual */
  font-size: .9rem;
}

.service-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}

.service-text {
  flex: 1;
}

.service-text h3 {
  margin: 0 0 8px;
  font-size: 1.4rem;
  font-weight: 700;
}

.service-text p {
  margin: 0 0 10px;
  color: #555;
  line-height: 1.5;
}

.service-img {
  flex: 0 0 200px; /* ancho fijo de imagen */
}

.service-img img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}

/* Responsive: en móvil que sea vertical */
@media (max-width: 768px) {
  .service-item {
    flex-direction: column;
    text-align: center;
  }
  .service-img {
    flex: none;
    width: 100%;
    max-width: 320px;
  }
}

#blogHome.grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

#blogHome.grid {
  grid-template-columns: 1fr; /* fuerza 1 columna en móviles chicos */
  gap: 14px;
}


/* Bloque de blog con más aire */
.highlight {
  padding: 48px 0 80px; /* antes era menos, le damos más espacio abajo */
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 800px){
  .nav{
    position:fixed; left:0; right:0; top:56px;
    background:#fff; /* menú blanco */
    border-bottom:1px solid #e5e5e5;
    padding:12px;
    display:grid; gap:6px;
    transform:translateY(-120%); opacity:0; pointer-events:none;
    transition:transform .25s ease, opacity .25s ease;
    max-height:calc(100dvh - 56px); overflow:auto;
  }
  .nav a{
    color:#333; /* texto oscuro */
    font-weight:600;
    padding:8px 0;
  }
  .nav a:hover{
    color:var(--orange);
  }
}

.service-card img {
  width: 100%;
  height: auto;           /* se adapta proporcionalmente */
  max-height: 280px;      /* limita altura en desktop */
  object-fit: cover;      /* recorta si es necesario */
  display: block;
}

@media (max-width: 768px) {
  .service-card img {
    max-height: 200px; /* menos alto en móvil */
  }
}

/* ===== Blog Home mejorado ===== */
#blogHome .card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 18px;
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
  background: #fff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
}

#blogHome .card img {
  flex: 0 0 38%;
  height: auto;
  max-height: 220px;
  object-fit: cover;
}

#blogHome .card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* fuerza que el botón baje */
  padding: 16px 20px;
}

#blogHome .card-content h3 {
  margin: 0 0 6px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #222;
}

#blogHome .card-content p {
  margin: 0 0 12px;
  font-size: .95rem;
  color: #555; /* gris más legible */
  line-height: 1.5;
}

#blogHome .card-content .link {
  margin-top: auto;
  align-self: flex-end;   /* alinea el botón a la derecha */
  font-weight: 700;
  font-size: .95rem;
  color: var(--orange);
  text-decoration: none;
  transition: color .2s;
}
#blogHome .card-content .link:hover {
  color: #ff4400;
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
  #blogHome .card {
    flex-direction: column;
  }
  #blogHome .card img {
    width: 100%;
    max-height: 200px;
  }
  #blogHome .card-content {
    padding: 14px;
  }
}

/* Blog Grid */
#blogGrid.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: stretch; /* todas las tarjetas misma altura */
}

/* Tarjeta del blog */
#blogGrid .card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 14px;
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
  overflow: hidden;
}

/* Imagen fija */
#blogGrid .card img {
  width: 100%;
  height: 200px;       /* altura fija */
  object-fit: cover;   /* recorte proporcional */
  display: block;
}

/* Contenido flexible */
#blogGrid .card-content {
  flex: 1;                       
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
  padding: 16px 20px;
}

#blogGrid .card-content h3 {
  margin: 0 0 6px;
  font-size: 1.2rem;
  font-weight: 700;
}

#blogGrid .card-content p {
  margin: 0 0 12px;
  font-size: .95rem;
  color: #555;
  line-height: 1.5;
}

/* Botón abajo */
#blogGrid .card-content .link {
  margin-top: auto;
  align-self: flex-start;
  font-weight: 700;
  font-size: .95rem;
  color: var(--orange);
  text-decoration: none;
}
#blogGrid .card-content .link:hover {
  text-decoration: underline;
}

/* Estilos específicos para sección featuredV2 */

#featuredV2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  padding: 20px 0;
}

/* Tarjeta */
#featuredV2 .item-card {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease;
}
#featuredV2 .item-card:hover {
  transform: translateY(-3px);
}

/* Imagen */
#featuredV2 .item-card .img-container {
  aspect-ratio: 1/1;
  background: #f2f2f2;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}
#featuredV2 .item-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Título y descripción */
#featuredV2 .item-card h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: #222;
}
#featuredV2 .item-card p {
  font-size: 0.95rem;
  color: #555;
  flex-grow: 1;
}

/* Meta info */
#featuredV2 .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  font-size: 0.9rem;
}
#featuredV2 .meta .tag {
  background: #f0f0f0;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  color: #444;
}
#featuredV2 .meta .price {
  color: #e85d04;
  font-weight: bold;
}

/* Botón */
#featuredV2 .item-card button {
  margin-top: 12px;
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  background: #ff6a00;
  color: white;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}
#featuredV2 .item-card button:hover {
  background: #ff5500;
}

#featuredV2 .item-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* en lugar de space-between */
  padding: 18px 16px;
  border-radius: 14px;
  gap: 12px; /* espaciado consistente entre bloques */
}

#featuredV2 .item-card .img-container {
  aspect-ratio: 4 / 3; /* menos cuadrado, más natural */
  border-radius: 12px;
  margin-bottom: 0; /* gap se encarga del espacio */
}

#featuredV2 .item-card h3 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  min-height: 2.6em; /* fuerza altura uniforme de título */
}

#featuredV2 .item-card p {
  flex-grow: 1;
  font-size: 0.92rem;
  color: #666;
  line-height: 1.4;
  margin: 0;
  min-height: 3.2em; /* para mantener altura entre tarjetas */
}

#featuredV2 .meta {
  margin-top: auto; /* empuja al fondo si sobra espacio */
  font-size: 0.85rem;
}

#featuredV2 .item-card button {
  width: 100%; /* ancho completo visual */
  margin-top: 10px;
  padding: 10px;
  font-size: 0.95rem;
}