/* LUVA-DEV · Aero Glass
   Cristal oscuro con reflejos discretos y texto de alto contraste.
   Las animaciones se limitan a transform y opacity. */
:root {
  --aero-edge: rgba(178, 227, 255, .24);
  --aero-edge-strong: rgba(196, 244, 255, .48);
  --aero-shadow: 0 18px 46px rgba(0, 6, 20, .34), inset 0 1px 0 rgba(236, 249, 255, .13);
  --aero-sheen: linear-gradient(134deg, rgba(255,255,255,.16), rgba(255,255,255,.035) 38%, transparent 63%);
}

/* El fondo iluminado hace que el cristal se perciba realmente translúcido. */
.hero {
  background:
    radial-gradient(ellipse 45% 64% at 88% 37%, rgba(20,126,201,.27), transparent 90%),
    radial-gradient(ellipse 44% 70% at 3% 79%, rgba(6,151,164,.12), transparent 90%),
    linear-gradient(160deg, #071320, #0a1c33 58%, #071726);
}
.services {
  background:
    radial-gradient(ellipse 57% 70% at 5% 3%, rgba(40,135,220,.19), transparent 75%),
    radial-gradient(ellipse 45% 80% at 100% 100%, rgba(16,167,138,.12), transparent 76%),
    linear-gradient(145deg, #071523, #091b2b);
}
.catalogs {
  background:
    radial-gradient(ellipse 60% 75% at 98% 25%, rgba(21,177,165,.19), transparent 73%),
    radial-gradient(ellipse 65% 75% at 4% 93%, rgba(40,110,207,.17), transparent 72%),
    linear-gradient(130deg, #071725, #0a2334 63%, #081927);
}
.projects {
  background:
    radial-gradient(ellipse 60% 80% at 12% 20%, rgba(43,132,214,.16), transparent 75%),
    radial-gradient(ellipse 50% 72% at 98% 78%, rgba(60,83,197,.17), transparent 74%),
    linear-gradient(150deg, #061421, #0b1c2f);
}
.about {
  background:
    radial-gradient(ellipse 55% 90% at 90% 38%, rgba(24,154,219,.18), transparent 78%),
    linear-gradient(125deg, #091727, #0b2136);
}
.contact {
  background:
    radial-gradient(ellipse 50% 95% at 18% 90%, rgba(21,165,203,.18), transparent 75%),
    linear-gradient(145deg, #071421, #0b2034);
}

/* Navegación flotante con luz en el borde superior e inferior. */
.site-header {
  background: rgba(7,22,40,.73);
  border-bottom: 1px solid rgba(175,226,255,.2);
  box-shadow: 0 1px 0 rgba(233,249,255,.08) inset, 0 12px 32px rgba(0,9,24,.22);
  backdrop-filter: blur(17px) saturate(150%);
  -webkit-backdrop-filter: blur(17px) saturate(150%);
}
.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 5%, rgba(55,183,255,.65) 45%, rgba(85,235,213,.45) 70%, transparent);
}
.main-nav a.active { color: #9be5ff; }
.menu-toggle {
  background: linear-gradient(145deg, rgba(55,116,166,.35), rgba(8,28,51,.77));
  border-color: var(--aero-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}

/* Insignias y botones como pequeñas cápsulas de cristal. */
.hero-chips span, .catalog-tags span, .hero-note .share-home {
  background: linear-gradient(140deg, rgba(71,160,204,.2), rgba(12,42,69,.55));
  border: 1px solid rgba(142,221,248,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 5px 16px rgba(0,10,22,.17);
}
.hero-chips span { color: #dbf5ff; }
.catalog-tags span { color: #d5fff1; }
.btn-primary {
  background: linear-gradient(135deg, #198be5, #1473c6 62%, #105dba);
  border: 1px solid rgba(163,228,255,.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.29), 0 12px 30px rgba(14,131,239,.29);
}
.btn-green {
  background: linear-gradient(135deg, #10d99b, #03b880 68%, #048e7d);
  border: 1px solid rgba(168,255,224,.52);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 10px 28px rgba(0,161,117,.22);
}
.btn-outline {
  background: linear-gradient(140deg, rgba(71,130,189,.23), rgba(9,35,62,.55));
  border-color: rgba(153,218,254,.44);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.btn:hover { filter: brightness(1.08); }

/* Anillos y pantalla del portátil: vidrio templado con reflejo interno. */
.hero-art::before {
  content: "";
  position: absolute;
  inset: 13% 5%;
  border-radius: 50%;
  border: 1px solid rgba(117,215,255,.17);
  box-shadow: 0 0 52px rgba(39,178,255,.09), inset 0 0 45px rgba(51,180,231,.06);
  transform: rotate(-14deg);
  pointer-events: none;
}
.laptop-screen {
  background: linear-gradient(138deg, rgba(29,87,130,.8), rgba(5,17,33,.93) 59%, rgba(14,52,81,.84));
  border-color: #2a4964;
  box-shadow:
    inset 0 0 0 1px rgba(171,226,250,.27),
    inset 0 1px 28px rgba(120,202,255,.14),
    0 0 48px rgba(27,136,215,.22);
}
.laptop-screen::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 7px;
  background: linear-gradient(118deg, rgba(250,255,255,.14), transparent 37%, transparent 72%, rgba(69,177,250,.08));
  pointer-events: none;
}
.art-tag, .demo-sticker {
  background: linear-gradient(135deg, rgba(63,124,166,.37), rgba(6,25,44,.88));
  border-color: rgba(170,226,251,.34);
  box-shadow: var(--aero-shadow);
  backdrop-filter: blur(10px) saturate(145%);
  -webkit-backdrop-filter: blur(10px) saturate(145%);
}

/* Beneficios en cuatro piezas individuales de cristal. */
.benefit-row { border-top: 0; padding-top: 12px; gap: 14px; }
.benefit {
  padding: 15px 13px;
  border: 1px solid rgba(155,219,253,.16);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(60,129,181,.16), rgba(10,34,58,.47));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 24px rgba(0,8,19,.14);
}
.icon-bubble {
  background: linear-gradient(150deg, rgba(70,166,220,.27), rgba(15,59,95,.55));
  border: 1px solid rgba(163,220,252,.21);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}

/* Tarjetas principales Aero: brillo direccional, bordes de luz y profundidad. */
.service-card {
  isolation: isolate;
  border: 1px solid rgba(166,224,253,.27);
  border-radius: 22px;
  background: linear-gradient(143deg, rgba(52,103,160,.28), rgba(11,28,48,.81) 82%);
  box-shadow: var(--aero-shadow);
  backdrop-filter: blur(9px) saturate(125%);
  -webkit-backdrop-filter: blur(9px) saturate(125%);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, filter .3s ease;
}
.service-card.blue   { background: linear-gradient(143deg,rgba(26,116,190,.35),rgba(10,29,53,.81) 80%); }
.service-card.green  { background: linear-gradient(143deg,rgba(12,130,107,.3),rgba(10,31,48,.81) 80%); }
.service-card.violet { background: linear-gradient(143deg,rgba(102,79,163,.3),rgba(15,27,52,.81) 80%); }
.service-card.orange { background: linear-gradient(143deg,rgba(151,100,53,.28),rgba(27,30,44,.81) 80%); }
.service-card::before {
  background: var(--aero-sheen);
  opacity: 1;
  transition: opacity .3s;
}
.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(250px circle at var(--glow-x, 50%) var(--glow-y, 8%), rgba(175,235,255,.15), transparent 75%);
  opacity: .4;
  transition: opacity .3s;
}
.service-card > * { position: relative; z-index: 1; }
.service-card:hover {
  transform: translateY(-7px);
  border-color: rgba(195,241,255,.57);
  box-shadow: 0 26px 56px rgba(0,8,26,.44), 0 0 22px rgba(63,162,231,.13), inset 0 1px 0 rgba(255,255,255,.32);
}
.service-card:hover::after { opacity: 1; }
.service-icon {
  background: linear-gradient(150deg, rgba(166,226,255,.13), rgba(39,94,135,.07));
  border: 1px solid rgba(183,235,255,.18);
  border-radius: 13px;
  width: 59px;
  height: 58px;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}
.service-card > a {
  background: rgba(8,29,48,.44);
  border-color: color-mix(in srgb,var(--accent) 68%,white);
}
.service-card > a:hover { background: rgba(101,195,233,.12); }

/* Cobertura y aclaraciones sin bloque blanco opaco. */
.coverage-strip {
  background: linear-gradient(135deg,rgba(52,109,152,.42),rgba(13,40,65,.71));
  color: #f3faff;
  border: 1px solid rgba(173,231,255,.29);
  box-shadow: var(--aero-shadow);
  border-radius: 20px;
}
.coverage-strip .strip-symbol { color: #81dcff; }
.coverage-strip strong { color: #fff; }
.coverage-strip p { color: #c6dbea; }

/* Fichas del catálogo: pequeñas láminas de cristal sobre la aurora verde. */
.catalog-features > div {
  padding: 13px 14px;
  border: 1px solid rgba(140,225,219,.18);
  border-radius: 15px;
  background: linear-gradient(125deg,rgba(59,130,141,.17),rgba(11,40,55,.32));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.catalog-features > div > span {
  background: linear-gradient(135deg,rgba(46,197,170,.28),rgba(9,64,69,.7));
  border-color: rgba(97,238,204,.37);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.demo-window {
  box-shadow: 0 35px 85px rgba(0,8,20,.54), 0 0 0 1px rgba(215,255,249,.65), 0 0 0 8px rgba(100,240,218,.055);
}
.demo-window:hover { box-shadow: 0 43px 93px rgba(0,8,20,.64), 0 0 0 1px rgba(215,255,249,.65), 0 0 0 8px rgba(100,240,218,.09); }

/* Portafolio y presentación: paneles superpuestos y brillantes. */
.project {
  isolation: isolate;
  border: 1px solid rgba(172,224,254,.24);
  border-radius: 22px;
  background: linear-gradient(145deg,rgba(56,109,161,.26),rgba(8,25,45,.79));
  box-shadow: var(--aero-shadow);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.project:hover {
  border-color: rgba(189,242,255,.55);
  box-shadow: 0 24px 55px rgba(0,7,22,.43), 0 0 20px rgba(52,152,226,.11), inset 0 1px 0 rgba(255,255,255,.21);
}
.project-info { background: linear-gradient(180deg,rgba(36,80,119,.24),rgba(7,26,48,.5)); }
.project-badge {
  background: linear-gradient(135deg,rgba(82,151,192,.38),rgba(8,24,42,.83));
  border: 1px solid rgba(207,241,255,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.about-panel {
  border: 1px solid rgba(179,232,255,.31);
  border-radius: 24px;
  background: linear-gradient(145deg,rgba(64,136,191,.34),rgba(8,29,52,.76));
  box-shadow: var(--aero-shadow), 0 0 35px rgba(40,137,205,.07);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  position: relative;
  overflow: hidden;
}
.about-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--aero-sheen);
  pointer-events: none;
}
.about-panel > * { position: relative; }
.contact-box {
  border: 1px solid rgba(177,231,254,.39);
  border-radius: 26px;
  background:
    linear-gradient(125deg,rgba(60,132,179,.31),rgba(7,29,53,.84) 74%),
    radial-gradient(circle at 5% 0%,rgba(118,220,249,.14),transparent 55%);
  box-shadow: 0 25px 65px rgba(0,8,26,.42), inset 0 1px 0 rgba(235,252,255,.21), 0 0 0 5px rgba(117,217,255,.025);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.whatsapp-float {
  background: linear-gradient(140deg,rgba(31,215,155,.95),rgba(3,148,112,.97));
  border-color: rgba(211,255,236,.63);
  box-shadow: 0 12px 31px rgba(0,117,82,.42), inset 0 1px 0 rgba(255,255,255,.35);
}
.site-footer {
  background: linear-gradient(145deg,rgba(7,24,43,.95),#050e18);
  border-top: 1px solid rgba(141,203,243,.16);
}

/* En navegadores sin desenfoque, los fondos siguen siendo legibles. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header,.main-nav { background: #09182a; }
  .service-card,.about-panel,.contact-box,.art-tag,.demo-sticker { background-color: #10263c; }
}
@media (max-width: 760px) {
  .main-nav {
    background: rgba(9,26,46,.95);
    border-bottom-color: rgba(164,223,251,.31);
    box-shadow: 0 18px 36px rgba(0,7,21,.55), inset 0 1px 0 rgba(255,255,255,.11);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .benefit-row { gap: 9px; }
  .benefit { padding: 12px 10px; border-radius: 13px; }
  .service-card { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
  .about-panel,.contact-box { backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
}
@media (max-width: 490px) {
  .benefit { padding: 10px 8px; }
  .service-card { border-radius: 19px; }
  .coverage-strip { border-radius: 17px; }
  .contact-box { border-radius: 21px; }
  .hero-chips span { padding: 7px 9px; }
}
@media (hover: none), (pointer: coarse) {
  .service-card:hover,.project:hover { transform: none; }
  .service-card::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art::before,.service-card::after { animation: none !important; }
  .service-card,.project,.btn { transition: none !important; }
}

/* Tercer proyecto: catálogo real de S&E Perfumería */
@media (min-width: 1081px) {
  .projects-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.project-perfume .project-visual {
  background:
    radial-gradient(circle at 52% 36%, rgba(240,171,193,.32), transparent 58%),
    linear-gradient(145deg,#39213c,#211d37 64%,#122738);
}
.project-perfume .project-badge { color:#ffedf5; }
/* Vista genérica de perfumes: ilustración SVG del mismo estilo que los demás proyectos. */
.project-perfumery .project-visual {
  background: radial-gradient(circle at 50% 45%, #395273, #162c49 62%, #0a1b34);
}
.perfume-artwork {
  display: block;
  width: min(290px, 87%);
  height: auto;
  max-height: 205px;
  overflow: visible;
  transform: rotate(-4deg) translateY(14px);
  filter: drop-shadow(0 22px 30px rgba(0, 6, 20, .48));
  transition: transform .3s ease;
}
.project-perfumery:hover .perfume-artwork {
  transform: rotate(-1deg) translateY(7px);
}
@media (max-width: 490px) {
  .perfume-artwork { width: min(280px, 85%); }
}
@media (prefers-reduced-motion: reduce) {
  .perfume-artwork { transition: none; }
}
.projects-grid .project-info { display:flex; flex-direction:column; }
.projects-grid .project-info p { flex:1; }
.project-live-link {
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:17px;
  padding:10px 13px;
  background:linear-gradient(135deg,rgba(69,150,194,.23),rgba(12,45,68,.4));
  border:1px solid rgba(163,228,254,.35);
  border-radius:999px;
  color:#aee8ff;
  font-size:12px;
  font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  transition:background .25s,transform .25s;
}
.project-live-link:hover {
  background:rgba(52,145,183,.38);
  transform:translateY(-2px);
  color:#fff;
}
@media (max-width:760px) {
  .projects-grid { grid-template-columns:1fr; }
  .perfume-preview { max-width:300px; }
}
@media (prefers-reduced-motion:reduce) {
  .perfume-preview,.project-live-link { transition:none; }
}


/* Información de facturación: señal discreta, sin avales oficiales. */
.invoice-available {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  max-width: 310px;
  padding: 12px 14px;
  border: 1px solid rgba(148, 224, 221, .32);
  border-radius: 13px;
  background: linear-gradient(125deg, rgba(55, 143, 147, .17), rgba(8, 39, 58, .42));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 24px rgba(0,13,29,.16);
}
.invoice-available svg {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 5px;
  color: #69eac3;
  border: 1px solid rgba(133, 241, 212, .25);
  border-radius: 9px;
  background: rgba(34, 139, 120, .18);
}
.invoice-available strong {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 750;
  color: #eafff7;
}
.invoice-available small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: #a9ced2;
  line-height: 1.4;
}
@media (max-width: 760px) {
  .invoice-available { max-width: 100%; }
}

/* Cuarto proyecto: formularios y entrevistas; vista genérica, sin datos privados. */
@media (min-width: 1081px) {
  .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.project-interviews .project-visual {
  background:
    radial-gradient(circle at 50% 40%, rgba(72,157,198,.3), transparent 67%),
    radial-gradient(circle at 92% 84%, rgba(46,199,177,.15), transparent 56%),
    linear-gradient(140deg, #11243c, #0b1b34 75%);
}
.forms-artwork {
  display: block;
  width: min(320px, 89%);
  height: auto;
  max-height: 211px;
  transform: rotate(-4deg) translateY(14px);
  filter: drop-shadow(0 18px 27px rgba(0,7,22,.48));
  transition: transform .32s ease;
}
.project-interviews:hover .forms-artwork {
  transform: rotate(-1deg) translateY(8px);
}
.project-private-note {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 35px;
  margin-top: 17px;
  padding: 9px 13px;
  border: 1px solid rgba(160,215,233,.24);
  border-radius: 999px;
  background: linear-gradient(130deg,rgba(66,118,148,.16),rgba(12,39,59,.31));
  color: #a9c5d5;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
}
@media (max-width: 490px) {
  .forms-artwork { width: min(300px, 89%); }
}
@media (prefers-reduced-motion: reduce) {
  .forms-artwork { transition: none; }
}