/* ===========================================================
   Servi Glass Carrasco — sistema visual "Bisel"
   Paleta: grafito profundo + verde vidrio + canto dorado
   Tipografía: Fraunces (display) + Inter (texto)
   =========================================================== */

:root{
  --ink:#14171c;
  --paper:#f4f1ea;
  --paper-2:#fbf9f4;
  --line:#e1ddd2;
  --muted:#6b6f76;
  --primary:#1f6f6b;
  --secondary:#14171c;
  --accent:#caa45d;
  --glass-a:#eef3f3;
  --glass-b:#cfe6e4;
  --radius:18px;
  --bevel: 26px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',Arial,sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:600;margin:0;letter-spacing:-0.01em}
.eyebrow{
  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--primary);
}

/* ---------- Beveled corner: signature shape ---------- */
.bevel{
  clip-path: polygon(var(--bevel) 0, 100% 0, 100% calc(100% - var(--bevel)), calc(100% - var(--bevel)) 100%, 0 100%, 0 var(--bevel));
}
.bevel-sm{ --bevel:14px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  padding:15px 28px;
  background:var(--primary);
  color:#fff;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
  box-shadow:0 10px 24px rgba(31,111,107,.22);
}
.btn:hover{ transform: translateY(-2px); }
.btn.ghost{
  background:transparent;
  color:var(--ink);
  border:1.5px solid var(--ink);
  box-shadow:none;
}
.btn.ghost:hover{ background:var(--ink); color:#fff; }
.btn.gold{ background:var(--accent); color:var(--ink); box-shadow:0 10px 24px rgba(202,164,93,.28); }
.btn.full{ width:100%; }
.btn.danger{ background:#b91c1c; box-shadow:none; }
.btn.small{ padding:10px 16px; font-size:13px; }

/* ===========================================================
   NAVBAR (shared)
   =========================================================== */
.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:24px clamp(20px,5vw,64px);
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(244,241,234,.78);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav.on-dark{
  background:rgba(20,23,28,.6);
  border-bottom:1px solid rgba(255,255,255,.08);
  color:#fff;
}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:20px;font-family:'Fraunces',serif}
.brand img{width:42px;height:42px;object-fit:cover;clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);}
.brand .mark{
  width:42px;height:42px;
  background:linear-gradient(135deg,var(--glass-a),var(--glass-b));
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  position:relative;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
}
.brand .mark::after{
  content:'';
  position:absolute; inset:6px;
  background:linear-gradient(135deg, rgba(255,255,255,.9), transparent 60%);
}
.nav-links{display:flex;align-items:center;gap:28px;font-weight:600;font-size:14px}
.nav-links a{opacity:.8;transition:opacity .15s}
.nav-links a:hover{opacity:1}

/* ===========================================================
   HOME — HERO
   =========================================================== */
.hero{
  background:
    radial-gradient(circle at 85% 12%, rgba(202,164,93,.18), transparent 45%),
    linear-gradient(150deg, var(--secondary) 0%, #1b2128 60%, #0c0e12 100%);
  color:#fff;
  padding-bottom:80px;
}
.hero-inner{
  max-width:1200px;
  margin:0 auto;
  padding:90px clamp(20px,5vw,64px) 40px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:60px;
  align-items:center;
}
.hero h1{
  font-size:clamp(40px,6vw,68px);
  line-height:1.05;
  margin:18px 0 22px;
  font-weight:600;
}
.hero h1 em{ font-style:italic; color:var(--accent); }
.hero p.lead{
  font-size:18px;
  color:#cfd3da;
  max-width:480px;
  line-height:1.7;
  margin-bottom:32px;
}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap}

.hero-visual{
  position:relative;
  aspect-ratio:4/5;
  background:transparent;
  clip-path:none;
  overflow:visible;
  box-shadow:none;
}
.hero-visual .pane{ display:none; }
.hero-visual .tag{ display:none; }

/* ===========================================================
   HOME — STATS / TRUST STRIP
   =========================================================== */
.strip{
  max-width:1200px; margin:-46px auto 0;
  padding:0 clamp(20px,5vw,64px);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  position:relative; z-index:2;
}
.strip .stat{
  background:var(--paper-2);
  padding:28px 24px;
  text-align:left;
}
.strip .stat b{ display:block; font-family:'Fraunces',serif; font-size:34px; color:var(--primary); }
.strip .stat span{ font-size:13px; color:var(--muted); }

/* ===========================================================
   HOME — ABOUT / DESCRIPTION SECTION
   =========================================================== */
.section{ padding:100px clamp(20px,5vw,64px); max-width:1200px; margin:auto; }
.section-head{ max-width:640px; margin-bottom:48px; }
.section-head h2{ font-size:clamp(30px,4vw,46px); margin-top:10px; line-height:1.1; }
.section-head p{ color:var(--muted); font-size:17px; line-height:1.7; margin-top:14px; }

.about-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:50px;
  align-items:start;
}
.about-grid .copy p{ font-size:17px; line-height:1.85; color:#3a3d42; }
.about-card{
  background:#fff;
  border:1px solid var(--line);
  padding:34px;
  clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
}
.about-card h3{ font-size:20px; margin-bottom:8px; }
.about-card .divider{ height:1px; background:var(--line); margin:22px 0; }
.about-card .row{ display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; }
.about-card .row .ico{
  width:40px;height:40px; flex:none;
  background:var(--glass-a);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  display:grid; place-items:center;
  color:var(--primary); font-weight:800; font-size:13px;
}
.about-card .row div p{ margin:2px 0 0; color:var(--muted); font-size:14.5px; line-height:1.6; }
.about-card .row div b{ font-size:15px; }

/* ===========================================================
   HOME — MAP
   =========================================================== */
.map-wrap{ border:1px solid var(--line); height:340px; overflow:hidden; clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); }
.map-wrap iframe{ width:100%; height:100%; border:0; }
.map-fallback{
  height:100%; display:grid; place-items:center; text-align:center; padding:30px;
  background:linear-gradient(135deg,var(--glass-a),var(--glass-b)); color:var(--ink);
}

/* ===========================================================
   HOME — CATALOG TEASER (CTA band)
   =========================================================== */
.cta-band{
  background:linear-gradient(135deg, var(--primary), #14504d);
  color:#fff;
  margin:0 clamp(20px,5vw,64px) 0;
  padding:64px clamp(28px,5vw,72px);
  clip-path: polygon(36px 0, 100% 0, 100% calc(100% - 36px), calc(100% - 36px) 100%, 0 100%, 0 36px);
  display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;
  max-width:1200px; margin-left:auto; margin-right:auto;
}
.cta-band h2{ color:#fff; font-size:clamp(26px,3.4vw,40px); max-width:520px; }
.cta-band p{ color:#d7eae8; margin-top:10px; max-width:480px; }

/* ===========================================================
   CATALOG PAGE
   =========================================================== */
.catalog-hero{
  background:var(--secondary); color:#fff;
  padding:70px clamp(20px,5vw,64px) 56px;
}
.catalog-hero h1{ font-size:clamp(34px,5vw,54px); margin:14px 0; }
.catalog-hero p{ color:#cfd3da; max-width:560px; line-height:1.7; }

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:30px;
  padding:50px clamp(20px,5vw,64px);
  max-width:1300px;
  margin:auto;
}

/* Cards adapt to image: image keeps its natural ratio, no forced crop */
.card{
  background:#fff;
  border:1px solid var(--line);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  display:flex; flex-direction:column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow:0 26px 50px rgba(20,23,28,.1); }
.card .photo{ width:100%; background:linear-gradient(135deg,var(--glass-a),#fff); overflow:hidden; }
.card .photo img{ width:100%; height:auto; display:block; }
.card .fake-mirror{
  width:100%; aspect-ratio:4/3;
  background:linear-gradient(135deg,#e7f1f0,#fff 55%,#cfe6e4);
  display:grid; place-items:center;
  position:relative;
}
.card .fake-mirror::after{
  content:'Imagen referencial';
  font-size:12px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase;
}
.card-body{ padding:24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card-body h3{ font-size:21px; }
.card-body p.desc{ color:var(--muted); font-size:14.5px; line-height:1.6; margin:0; }
.card-body .feat{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 0; padding:0; list-style:none; }
.card-body .feat li{
  font-size:12px; font-weight:600; color:var(--primary);
  background:var(--glass-a); padding:6px 10px;
  border:1px solid var(--line);
}
.card-body .price-row{ margin-top:auto; padding-top:14px; border-top:1px solid var(--line); }
.card-body .price-row .from{ font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); font-weight:700; }
.card-body .price-row strong{ display:block; font-family:'Fraunces',serif; font-size:26px; margin-top:2px; }
.card-body .price-row small{ display:block; color:var(--muted); font-size:12.5px; margin-top:4px; }
.card-body .actions{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.card-body .actions .btn{ flex:1; }

/* ===========================================================
   CONFIGURE PAGE
   =========================================================== */
.config-page{ padding:50px clamp(20px,5vw,64px) 80px; min-height:100vh; background:var(--paper); }
.back{ display:inline-flex; align-items:center; gap:8px; margin-bottom:28px; font-weight:700; color:var(--primary); }
.config-card{
  max-width:1180px; margin:auto; background:#fff; border:1px solid var(--line);
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  clip-path: polygon(36px 0, 100% 0, 100% calc(100% - 36px), calc(100% - 36px) 100%, 0 100%, 0 36px);
}
.config-card .photo{ background:linear-gradient(135deg,var(--glass-a),#fff); display:flex; align-items:center; min-height:420px; }
.config-card .photo img{ width:100%; height:100%; object-fit:contain; }
.config-card .photo .fake-mirror{ width:100%; height:100%; aspect-ratio:auto; }
.config-card .content{ padding:48px; display:flex; flex-direction:column; }
.config-card h1{ font-size:clamp(28px,3.6vw,38px); margin:12px 0 14px; }
.config-card .desc{ color:var(--muted); line-height:1.75; font-size:16px; }
.config-card .ref-note{
  margin-top:14px; padding:14px 16px; font-size:13.5px; color:var(--ink);
  background:var(--glass-a); border-left:3px solid var(--primary);
}
.quote-box{ display:grid; gap:14px; margin-top:26px; }
.quote-box .dims{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.quote-box label{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); display:grid; gap:6px; }
.quote-box input{
  width:100%; padding:14px; border:1px solid var(--line); background:var(--paper-2);
  font-size:15px; font-family:'Inter',sans-serif;
}
.quote-box input:focus{ outline:2px solid var(--primary); outline-offset:1px; }
.result{
  padding:22px; background:var(--secondary); color:#fff;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  line-height:1.9; font-size:14.5px;
}
.result .total{ font-family:'Fraunces',serif; font-size:26px; color:var(--accent); margin-top:6px; }
.result .disc{ color:#9fe3da; }

/* Variant list (medidas y precios) */
.variant-list{ display:flex; flex-direction:column; gap:10px; margin-top:22px; }
.variant-row{
  display:grid; grid-template-columns:1fr auto auto; gap:16px; align-items:center;
  border:1px solid var(--line); padding:14px 16px; background:var(--paper-2);
}
.variant-info{ display:flex; flex-direction:column; gap:2px; }
.variant-info strong{ font-size:15px; }
.variant-info span{ font-size:13px; color:var(--muted); }
.variant-price{ font-family:'Fraunces',serif; font-size:18px; font-weight:600; white-space:nowrap; }
.variant-qty{ display:flex; align-items:center; gap:6px; }
.variant-qty .qty-btn{
  width:32px; height:32px; border:1px solid var(--line); background:#fff;
  font-size:16px; font-weight:700; cursor:pointer; color:var(--ink);
}
.variant-qty .qty-input{
  width:50px; text-align:center; padding:8px 4px; border:1px solid var(--line); background:#fff; font-size:14px;
}
.quote-actions{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }
.quote-actions .btn{ flex:1; min-width:160px; }

@media(max-width:540px){
  .variant-row{ grid-template-columns:1fr; gap:10px; }
  .variant-price{ font-size:16px; }
}

/* ===========================================================
   FOOTER
   =========================================================== */
footer.site-footer{
  background:var(--secondary); color:#cfd3da;
  padding:60px clamp(20px,5vw,64px) 28px;
}
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; max-width:1200px; margin:auto; }
.foot-grid h4{ color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:.14em; margin-bottom:16px; }
.foot-grid p, .foot-grid a{ font-size:14.5px; line-height:1.8; color:#cfd3da; display:block; }
.foot-grid a:hover{ color:var(--accent); }
.foot-bottom{
  max-width:1200px; margin:36px auto 0; padding-top:24px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13px; color:#9aa0aa;
}

/* ===========================================================
   404
   =========================================================== */
.center{ min-height:100vh; display:grid; place-content:center; text-align:center; gap:14px; background:var(--secondary); color:#fff; }
.center h1{ font-size:90px; color:var(--accent); }

/* ===========================================================
   ADMIN
   =========================================================== */
.admin-bg{
  min-height:100vh; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--secondary),#1b2128 60%,#0c0e12);
}
.login{
  width:min(420px,92vw); background:#fff; padding:40px; display:grid; gap:14px;
  clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px);
}
.login h1{ font-size:26px; }
.login p.sub{ color:var(--muted); margin:-6px 0 6px; font-size:14px; }
.login input{ width:100%; padding:14px; border:1px solid var(--line); background:var(--paper-2); }
.alert{ background:#fee2e2; color:#991b1b; padding:12px 14px; font-size:14px; }

.admin{ display:grid; grid-template-columns:260px 1fr; min-height:100vh; background:var(--paper); }
.admin aside{
  background:var(--secondary); color:#fff; padding:30px 22px; position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column;
}
.admin aside .brand{ color:#fff; margin-bottom:36px; }
.admin aside nav{ display:flex; flex-direction:column; gap:6px; flex:1; }
.admin aside nav a{
  padding:12px 14px; font-size:14px; font-weight:600; color:#cfd3da;
  border-left:2px solid transparent;
}
.admin aside nav a:hover{ color:#fff; }
.admin aside nav a.active{ color:#fff; background:rgba(255,255,255,.06); border-left:2px solid var(--accent); }
.admin aside form button{
  width:100%; margin-top:16px; padding:12px 14px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); color:#fff; font-size:13px; cursor:pointer;
}
.admin main{ padding:40px clamp(20px,4vw,48px); max-width:1100px; }
.admin main .top{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:30px; gap:16px; flex-wrap:wrap; }
.admin main .top h1{ font-size:32px; }
.admin main .top p{ color:var(--muted); margin-top:6px; }

.kpi-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px; margin-bottom:30px; }
.kpi{ background:#fff; border:1px solid var(--line); padding:24px; clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
.kpi b{ display:block; font-family:'Fraunces',serif; font-size:34px; color:var(--primary); }
.kpi span{ font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; }

.panel{ background:#fff; border:1px solid var(--line); padding:30px; margin-bottom:26px; clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); }
.panel h2{ font-size:22px; margin-bottom:6px; }
.panel .hint{ color:var(--muted); font-size:14px; margin-bottom:18px; }

table{ width:100%; border-collapse:collapse; }
td,th{ padding:14px; border-bottom:1px solid var(--line); text-align:left; font-size:14.5px; }
th{ font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.inline{ display:inline; }
.inline button{ border:0; background:#fee2e2; color:#991b1b; padding:8px 12px; cursor:pointer; font-size:13px; }
.tag-pill{ padding:4px 10px; font-size:12px; font-weight:700; border-radius:999px; }
.tag-pill.on{ background:#dcfce7; color:#166534; }
.tag-pill.off{ background:#f1f5f9; color:#64748b; }

.form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.form-grid label{ display:grid; gap:6px; font-size:13px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.form-grid input, .form-grid textarea, .form-grid select{
  width:100%; padding:13px; border:1px solid var(--line); background:var(--paper-2); font-size:14.5px; font-family:'Inter',sans-serif;
}
.form-grid textarea{ min-height:110px; grid-column:1/-1; resize:vertical; }
.form-grid .full{ grid-column:1/-1; }
.form-grid input:focus, .form-grid textarea:focus{ outline:2px solid var(--primary); outline-offset:1px; }
.check{ display:flex; align-items:center; gap:10px; flex-direction:row; }
.check input{ width:auto; }
.color-row{ display:flex; gap:14px; align-items:center; }
.color-row input[type=color]{ width:56px; height:46px; padding:4px; cursor:pointer; }
.field-note{ font-size:12.5px; color:var(--muted); font-weight:500; text-transform:none; letter-spacing:0; margin-top:4px; }
.discount-helper{
  background:var(--glass-a); border:1px solid var(--line); padding:16px; font-size:13.5px; color:var(--ink); line-height:1.7;
  grid-column:1/-1;
}

/* --- Hamburguesa --- */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:40px; height:40px;
  background:none; border:none; cursor:pointer; padding:6px;
  z-index:50;
}
.nav-toggle span{
  display:block; width:100%; height:2px;
  background:currentColor; border-radius:2px;
  transition:transform .3s ease, opacity .3s ease;
}
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media(max-width:540px){
  .variant-row{ grid-template-columns:1fr; gap:10px; }
  .variant-price{ font-size:16px; }
}

@media(max-width:900px){
  /* Nav móvil */
  .nav-toggle{ display:flex; }
  .nav-links{
    display:none;
    position:fixed; inset:0; top:0;
    flex-direction:column; justify-content:center; align-items:center;
    gap:32px; font-size:22px;
    background:rgba(14,17,22,0.97);
    backdrop-filter:blur(12px);
    z-index:45;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ color:#fff; opacity:1; }

  /* Hero */
  .hero-inner{ grid-template-columns:1fr; gap:40px; padding-top:60px; }
  .hero-visual{ max-width:320px; margin:0 auto; }
  .mirror-wrap{ width:100%; }

  /* About */
  .about-grid{ grid-template-columns:1fr; }

  /* Config */
  .config-card{ grid-template-columns:1fr; }
  .config-card .photo{ min-height:260px; }
  .config-card .content{ padding:28px; }
  .quote-box .dims{ grid-template-columns:1fr 1fr; }

  /* Admin */
  .admin{ grid-template-columns:1fr; }
  .admin aside{ height:auto; position:relative; }

  /* Footer */
  .foot-grid{ grid-template-columns:1fr; }

  /* Stats strip */
  .strip{ grid-template-columns:repeat(2,1fr); margin-top:0; }

  /* CTA band */
  .cta-band{ flex-direction:column; text-align:center; }

  /* Sección */
  .section{ padding:60px clamp(16px,4vw,40px); }
}

@media(max-width:480px){
  .hero h1{ font-size:32px; }
  .hero p.lead{ font-size:16px; }
  .hero-visual{ max-width:280px; }
  .strip{ grid-template-columns:1fr 1fr; }
  .strip .stat b{ font-size:26px; }
  .about-card{ padding:22px; }
  .config-card .content{ padding:20px; }
  .quote-box .dims{ grid-template-columns:1fr; }
  .cta-band{ padding:36px 22px; }
  .mirror-outer{ border-radius:14px; }
  .mirror-surface{ border-radius:11px; }
  .card-body .actions{ flex-direction:column; }
  .section{ padding:40px 16px; }
}

/* ===========================================================
   ESPEJO LED INTERACTIVO — Hero
   3 modos: fria / calida / ambar
   =========================================================== */

/* Variables por modo (se cambian con JS) */
:root {
  --led-color:   #e8f4ff;
  --led-glow:    rgba(200,230,255,0.9);
  --led-wall:    rgba(180,215,255,0.40);
  --led-border:  rgba(220,240,255,0.85);
  --led-tint:    rgba(200,225,255,0.07);
  --led-reflect: rgba(210,235,255,0.18);
  --led-inner:   rgba(210,235,255,0.65);
}

/* Wrapper: reemplaza .hero-visual, mantiene aspect-ratio */
.mirror-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  clip-path: none !important;
  overflow: visible !important;
}

/* --- Halos en la pared --- */
.wall-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: var(--led-wall);
  filter: blur(28px);
  transition: background 0.7s ease, opacity 0.7s ease;
  opacity: 1;
}
.wall-left  { left:-14%; top:12%; width:14%; height:76%; border-radius:50%; background:linear-gradient(to right, transparent, var(--led-wall)); }
.wall-right { right:-14%; top:12%; width:14%; height:76%; border-radius:50%; background:linear-gradient(to left, transparent, var(--led-wall)); }
.wall-top   { top:-10%; left:8%; width:84%; height:12%; background:radial-gradient(ellipse, var(--led-wall), transparent 70%); }
.wall-bottom{ bottom:-10%; left:15%; width:70%; height:10%; background:radial-gradient(ellipse, var(--led-wall), transparent 70%); filter:blur(20px); }

/* --- Marco exterior --- */
.mirror-outer {
  position: relative;
  width: 88%;
  height: 88%;
  border-radius: 18px;
  background: linear-gradient(145deg, #2a3340, #1a2030);
  padding: 3px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.07),
    0 0 28px 6px var(--led-glow),
    0 0 55px 14px var(--led-wall),
    0 28px 70px rgba(0,0,0,0.75),
    inset 0 1px 0 rgba(255,255,255,0.10);
  transition: box-shadow 0.6s ease;
}

/* Borde luminoso del LED */
.mirror-outer::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  border: 2px solid var(--led-border);
  pointer-events: none;
  box-shadow: inset 0 0 14px var(--led-inner);
  transition: border-color 0.6s ease, box-shadow 0.6s ease;
  z-index: 5;
}

/* --- Tiras LED visibles --- */
.led-strip {
  position: absolute;
  pointer-events: none;
  z-index: 6;
  border-radius: 50%;
  background: linear-gradient(to right, transparent, var(--led-color) 35%, var(--led-color) 65%, transparent);
  filter: blur(1.5px);
  opacity: 1;
  transition: background 0.5s ease, opacity 0.5s ease;
}
.led-top    { top:1px;    left:12%; width:76%; height:3px; }
.led-bottom { bottom:1px; left:12%; width:76%; height:3px; }
.led-left   { left:1px;  top:12%; height:76%; width:3px;
  background: linear-gradient(to bottom, transparent, var(--led-color) 35%, var(--led-color) 65%, transparent); }
.led-right  { right:1px; top:12%; height:76%; width:3px;
  background: linear-gradient(to bottom, transparent, var(--led-color) 35%, var(--led-color) 65%, transparent); }

/* --- Superficie del espejo --- */
.mirror-surface {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
}

/* Fondo oscuro como un espejo real */
.mirror-bg {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #1c2535 0%, #141c28 45%, #0e1520 100%);
}

/* Tinte del color LED sobre el espejo */
.mirror-tint {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, var(--led-tint) 0%, transparent 65%);
  transition: background 0.6s ease;
  z-index: 1;
}

/* Reflejos de luz de los LEDs sobre la superficie */
.mirror-reflect-left {
  position: absolute; left:0; top:10%; width:28%; height:80%;
  background: linear-gradient(to right, var(--led-reflect), transparent);
  z-index: 2; transition: background 0.6s ease;
}
.mirror-reflect-right {
  position: absolute; right:0; top:10%; width:28%; height:80%;
  background: linear-gradient(to left, var(--led-reflect), transparent);
  z-index: 2; transition: background 0.6s ease;
}
.mirror-reflect-top {
  position: absolute; top:0; left:10%; width:80%; height:22%;
  background: linear-gradient(to bottom, var(--led-reflect), transparent);
  z-index: 2; transition: background 0.6s ease;
}

/* Escena reflejada */
.mirror-scene { position:absolute; inset:0; z-index:3; }

/* Punto de luz del techo reflejado */
.reflect-light {
  position: absolute;
  top: 7%; left: 52%;
  width: 55px; height: 55px;
  background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(5px);
}

/* Toallas reflejadas */
.reflect-towel {
  position: absolute;
  border-radius: 3px;
  background: rgba(55,65,80,0.55);
}
.reflect-towel.t1 { right:22%; top:24%; width:16px; height:52px; transform:rotate(-4deg); }
.reflect-towel.t2 { right:28%; top:22%; width:11px; height:46px; transform:rotate(3deg); background:rgba(45,55,70,0.45); }

/* Estante pequeño */
.reflect-shelf {
  position: absolute;
  bottom: 30%; left: 10%;
  width: 30px; height: 5px;
  background: rgba(60,70,85,0.4);
  border-radius: 2px;
}

/* Destello animado */
.mirror-sheen {
  position: absolute;
  top: 0; left: -60%;
  width: 38%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.07), transparent);
  animation: mirrorSheen 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes mirrorSheen {
  0%   { left: -60%; }
  40%  { left: 120%; }
  100% { left: 120%; }
}

/* --- Botones táctiles en el espejo --- */
.mirror-buttons {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  z-index: 10;
}
.mbtn {
  width: 28px; height: 28px;
  background: rgba(20,28,40,0.65);
  border: 1.5px solid rgba(255,255,255,0.35);
  cursor: pointer;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
  backdrop-filter: blur(6px);
  display: flex; align-items:center; justify-content:center;
  position: relative;
}
.mbtn:hover { border-color: rgba(255,255,255,0.7); }

/* Ícono cuadrado para modo luz */
.mbtn-mode {
  border-radius: 5px;
  box-shadow: 0 0 8px var(--led-glow);
}
.mbtn-mode::after {
  content: '';
  width: 10px; height: 10px;
  border: 1.5px solid var(--led-color);
  border-radius: 2px;
  background: rgba(255,255,255,0.08);
  transition: border-color 0.4s, background 0.4s;
}

/* Ícono circular power */
.mbtn-power { border-radius: 50%; }
.mbtn-power::before {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  transition: border-color 0.3s;
}
.mbtn-power::after {
  content: '';
  position: absolute;
  top: 5px; left: 50%;
  transform: translateX(-50%);
  width: 1.5px; height: 5px;
  background: rgba(255,255,255,0.5);
  border-radius: 1px;
}

/* --- Estado APAGADO --- */
.mirror-wrap.off .wall-glow      { opacity: 0; }
.mirror-wrap.off .mirror-outer   { box-shadow: 0 28px 60px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.04); }
.mirror-wrap.off .mirror-outer::after { border-color: rgba(80,90,110,0.25); box-shadow: none; }
.mirror-wrap.off .led-strip      { opacity: 0; }
.mirror-wrap.off .mirror-tint    { opacity: 0; }
.mirror-wrap.off .mirror-reflect-left,
.mirror-wrap.off .mirror-reflect-right,
.mirror-wrap.off .mirror-reflect-top { opacity: 0; }
.mirror-wrap.off .mbtn-mode      { box-shadow: none; }
.mirror-wrap.off .mbtn-mode::after { border-color: rgba(255,255,255,0.2); }

/* Transición suave al apagar */
.mirror-outer, .led-strip, .mirror-tint,
.mirror-reflect-left, .mirror-reflect-right, .mirror-reflect-top,
.wall-glow { transition: all 0.6s ease; }

/* Ripple al tocar */
@keyframes mirrorRipple {
  0%   { opacity:0.6; transform:scale(0.4); }
  100% { opacity:0;   transform:scale(1.6); }
}
.mirror-ripple {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, var(--led-tint) 0%, transparent 60%);
  pointer-events: none;
  z-index: 20;
  animation: mirrorRipple 0.55s ease-out forwards;
}