:root{
  --red: #E30613;
  --red-dark: #b70510;
  --black: #1a1a1a;
  --dark-gray: #262626;
  --light-gray: #f4f4f4;
  --white: #ffffff;
  --radius: 8px;
}

/* Fuente "Sayes" auto-hosteada: descargala y poné el archivo en
   public/assets/fonts/Sayes.ttf (ver LEEME.txt en esa carpeta).
   Si el archivo no existe, el navegador simplemente sigue de largo
   y usa el fallback 'Satisfy' (Google Fonts) sin romper nada. */
@font-face{
  font-family:'Sayes';
  src:url('../fonts/Sayes.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Segoe UI',Arial,Helvetica,sans-serif;color:var(--black);line-height:1.5;background:var(--white);}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
.container{max-width:1200px;margin:0 auto;padding:0 20px;}

/* ---------- Botones ---------- */
.btn{display:inline-block;padding:12px 28px;border-radius:4px;font-weight:700;text-align:center;cursor:pointer;border:2px solid transparent;transition:all .2s;}
.btn-primary{background:var(--red);color:var(--white);}
.btn-primary:hover{background:var(--red-dark);}
.btn-outline{background:transparent;border-color:var(--white);color:var(--white);}
.btn-outline:hover{background:rgba(255,255,255,.15);}
.btn-block{width:100%;}
.btn-quote{background:var(--red);color:var(--white);padding:10px 22px;}
.admin-icon-link{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#999;
  transition:color .2s;
  margin-left:auto;
  flex-shrink:0;
}
.admin-icon-link:hover{color:var(--red);}
.admin-icon-link svg{width:20px;height:20px;}
/* ---------- Header ---------- */
.site-header{background:var(--white);border-bottom:1px solid #eaeaea;position:sticky;top:0;z-index:50;}
.header-inner{display:flex;align-items:center;gap:14px;padding:14px 20px;flex-wrap:wrap;}
.brand-logo{height:44px;width:auto;}
.search-bar{flex:1;min-width:180px;}
.search-bar input{width:100%;padding:10px 16px;border:1px solid #ddd;border-radius:22px;}
.main-nav ul{display:flex;gap:14px;flex-wrap:wrap;}
.main-nav a{font-weight:600;font-size:.90rem;color:var(--black);}
.main-nav a:hover{color:var(--red);}
.nav-toggle{display:none;background:none;border:none;font-size:1.4rem;cursor:pointer;}

@media (max-width:900px){
  .main-nav{display:none;width:100%;order:5;}
  .main-nav.open{display:block;}
  .main-nav ul{flex-direction:column;gap:10px;padding:10px 0;}
  .nav-toggle{display:block;}
}

/* ---------- Hero ---------- */
.hero{position:relative;color:var(--white);padding:30px 0 50px;background:var(--black);overflow:hidden;}

/* Slider de fondo (1 a 4 imagenes, rotan solas si hay mas de una) */
.hero-slider{position:absolute;inset:0;}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease;}
.hero-slide.active{opacity:1;}

.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.35));z-index:1;}

.hero-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:10px;}
.hero-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.45);border:none;padding:0;cursor:pointer;transition:background .2s;}
.hero-dot.active{background:var(--white);}

.hero-content{position:relative;z-index:2;max-width:720px;}

/* El logo escala con el ancho de pantalla (55% del viewport), con un piso
   y un techo para que no quede ni minusculo en celular ni gigante en 4K */
.hero-brand{position:relative;display:inline-block;width:clamp(240px,55vw,620px);margin-bottom:2.6em;}
.hero-logo{width:100%;display:block;border:6px solid var(--white);box-shadow:0 6px 24px rgba(0,0,0,.35);}

/* Frase "el camino de los sueños" con tipografia manuscrita.
   Posicionada en % del propio logo (hero-brand), asi se mueve/escala junto con el. */
.hero-tagline.font-script{
  font-family:'Sayes','Satisfy',cursive;
  color:var(--white);
  font-size:clamp(1.8rem, 5.5vw, 4rem);
  line-height:1;
  white-space:nowrap;
  position:absolute;
  left:42%;
  bottom:-0.65em;
  z-index:10;
  margin:0;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}
.hero-tagline .relative-n{position:relative;display:inline-block;}
.hero-tagline .tilde-accent{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:0.35em;
  font-size:.55em;
  line-height:1;
  pointer-events:none;
}

.hero-title{font-size:1.9rem;font-weight:800;margin-top:35%;text-align: center;}
.hero-subtitle{font-size:1.2rem;margin-bottom:16px;}
.hero-features{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:28px;font-weight:600;}
.hero-features li::before{content:"• ";color:var(--red);}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}

/* ---------- Grillas de categorias (home) ---------- */
.category-grid-section{padding:50px 0;}
.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.category-card{position:relative;height:220px;border-radius:var(--radius);overflow:hidden;background-size:cover;background-position:center;display:block;}
.category-card-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.75));}
.category-card-content{position:absolute;left:20px;bottom:16px;z-index:2;color:var(--white);}
.category-card-content h3{font-size:1.3rem;margin-bottom:4px;}
.subcategory-card{
  position:relative;
  display:block;
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  height:220px;
  box-shadow:0 0 18px rgba(227,6,19,.18);
  transition:transform .35s ease, box-shadow .35s ease;
  background-size:contain;   /* <- esto es lo que te faltaba, no "cover" */
  background-repeat:no-repeat;
  background-position:center;
}
.subcategory-card{
  position:relative;
  display:block;
  height:230px;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--black);
  box-shadow:0 4px 16px rgba(0,0,0,.15);
  transition:transform .3s ease, box-shadow .3s ease;
}
.subcategory-card:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 14px 34px rgba(227,6,19,.35);
}

.subcategory-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--red);
  clip-path:polygon(55% 0, 100% 0, 100% 100%, 20% 100%);
  transition:clip-path .4s ease;
  z-index:0;
}
.subcategory-card:hover::before{
  clip-path:polygon(40% 0, 100% 0, 100% 100%, 5% 100%);
}

.subcategory-card .subcategory-image{
  position:absolute;
  inset:0;
  background-size:contain;
  background-position:right center;
  background-repeat:no-repeat;
  z-index:1;
  transition:transform .4s ease;
}
.subcategory-card:hover .subcategory-image{
  transform:scale(1.06);
}

.subcategory-card .category-card-content{
  z-index:2;
}
.subcategory-card .category-card-content h3{
  color:#fff;
  font-style:italic;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.02em;
}
.subcategory-card .explore-link{
  color:#fff;
}
.explore-link{font-weight:700;color:var(--red);}

@media (max-width:800px){ .category-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .category-grid{grid-template-columns:1fr;} }

/* ---------- Pagina de categoria ---------- */
.category-page{padding:40px 0 70px;}
.category-page-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:20px;flex-wrap:wrap;gap:8px;}
.category-page-header h1{font-size:2rem;}
.items-count{color:#666;}
.category-description{margin-bottom:30px;color:#444;}

.items-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.item-card{border:1px solid #eee;border-radius:var(--radius);overflow:hidden;background:var(--white);box-shadow:0 1px 4px rgba(0,0,0,.05);transition:box-shadow .2s, border-color .2s;}
.item-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.1);border-color:#f5d0d2;}
.item-image{height:170px;background-size:cover;background-position:center;background-color:var(--light-gray);}
.item-body{padding:14px;}
.item-body h3{font-size:1rem;margin-bottom:12px;min-height:2.4em;transition:color .2s;}
.item-card:hover .item-body h3{color:var(--red);}
.item-card .btn-outline{background:transparent;border-color:#ddd;color:var(--black);}
.item-card:hover .btn-outline{background:var(--red);border-color:var(--red);color:var(--white);}

@media (max-width:1000px){ .items-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:700px){ .items-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:460px){ .items-grid{grid-template-columns:1fr;} }

.empty-state{color:#888;padding:40px 0;text-align:center;}

/* ---------- Breadcrumb ---------- */
.breadcrumb{padding:18px 0 6px;font-size:.9rem;color:#777;}
.breadcrumb a{color:#777;}
.breadcrumb a:hover{color:var(--red);}
.breadcrumb-current{color:var(--black);font-weight:600;}

/* ---------- Pagina de producto ---------- */
.product-page{padding:10px 0 70px;}
.product-layout{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-top:20px;}
.product-gallery{align-self:start;}
.product-thumbs{display:flex;flex-direction:column;gap:10px;}
.product-thumb{width:64px;height:64px;object-fit:cover;border-radius:6px;border:2px solid #eee;cursor:pointer;}
.product-thumb.active{border-color:var(--red);}
.product-main-image{flex:0 1 auto;
  border:1px solid #eee;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(#fff);
  display:flex;
  align-items:center;
  justify-content:center;}
.product-main-image img{width:100%;
  height:auto;
  max-height:480px;
  object-fit:contain;}

.product-info h1{color:var(--red);font-size:2rem;margin-bottom:12px;}
.product-info h2{font-size:1.15rem;margin:22px 0 10px;}
.product-badge{display:inline-block;background:var(--light-gray);color:#444;padding:5px 14px;border-radius:20px;font-size:.85rem;font-weight:600;}

.product-specs{border:1px solid #eee;border-radius:var(--radius);overflow:hidden;}
.spec-row{display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #f0f0f0;}
.spec-row:last-child{border-bottom:none;}
.spec-row:nth-child(odd){background:#fafafa;}
.spec-name{color:#777;}
.spec-value{font-weight:700;text-align:right;}

.product-description{color:#444;line-height:1.6;}

.btn-info-whatsapp{display:block;text-align:center;background:var(--black);color:var(--white);padding:14px;border-radius:4px;font-weight:700;margin-top:26px;}
.btn-info-whatsapp:hover{background:#000;}

@media (max-width:800px){
  .product-layout{grid-template-columns:1fr;gap:24px;}
  .product-gallery{flex-direction:column-reverse;}
  .product-thumbs{flex-direction:row;}
}

/* ---------- Pagina estatica (curriculum) ---------- */
.static-page{padding:40px 0 70px;}
.static-page-hero{height:280px;background-size:cover;background-position:center;border-radius:var(--radius);margin-bottom:24px;background-color:var(--light-gray);}
.static-page-content{color:#333;max-width:800px;}

/* ---------- Formulario cotizacion ---------- */
.quote-page{padding:50px 0 90px;max-width:640px;}
.quote-form{display:flex;flex-direction:column;gap:16px;margin-top:24px;}
.quote-form label{font-weight:600;display:flex;flex-direction:column;gap:6px;}
.quote-form input,.quote-form textarea{padding:10px 12px;border:1px solid #ccc;border-radius:4px;font-family:inherit;font-size:1rem;}
.alert{padding:14px 16px;border-radius:6px;margin:16px 0;}
.alert-success{background:#e6f7e9;color:#1a7a2e;border:1px solid #b7e3c1;}
.alert-error{background:#fdeaea;color:#a3151c;border:1px solid #f3b8bb;}

/* ---------- Footer ---------- */
.site-footer{background:var(--black);color:#ccc;padding:48px 0 0;margin-top:60px;}
.footer-inner{display:grid;grid-template-columns:3.5fr 1fr;gap:40px;align-items:start;padding-bottom:30px;}
.footer-col h3{color:var(--white);font-size:1.3rem;margin-bottom:12px;}
.footer-col h4{color:var(--white);font-size:1rem;margin-bottom:14px;}
.footer-col-cta p{color:#bbb;line-height:1.6;max-width:420px;margin-bottom:20px;}
.footer-cta-divider{padding-top:4px;}
.footer-quote-btn{display:inline-block;}
 
.footer-contact-item{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.footer-icon{width:18px;height:18px;flex-shrink:0;color:var(--red);}
.footer-contact-item a{color:#ddd;}
.footer-contact-item a:hover{color:var(--white);text-decoration:underline;}
 
.footer-bottom{position:relative;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;border-top:1px solid #333;padding:52px 10px 10px 10px;font-size:.85rem;color:#888;}
.footer-dev-credit{display:flex;flex-direction:column;align-items:center;gap:4px;color:#aaa;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
.footer-dev-credit:hover{color:var(--white);}
.surtek-tagline{font-size:.68rem;letter-spacing:.03em;color:#888;}
.surtek-logo{height:34px;width:auto;}
 
@media (max-width:800px){
  .footer-inner{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;text-align:center;}
  .footer-dev-credit{position:static;transform:none;}
}
 
/* ---------- Boton flotante de WhatsApp ---------- */
.floating-whatsapp{
  position:fixed;
  right:22px;
  bottom:22px;
  width:58px;
  height:58px;
  background:#25D366;
  color:var(--white);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
  z-index:200;
  transition:transform .2s;
}
.floating-whatsapp:hover{transform:scale(1.08);}
.floating-whatsapp svg{width:32px;height:32px;}