/* ==========================================================================
   home.css — Portada replicada al milímetro desde la referencia de diseño
   (index.html + css/variables.css + comun.css + inicio.css).
   TODO el CSS va scopeado bajo .lic-ref-home para no afectar al header/footer
   del tema ni al resto del sitio. Se encola SOLO en template-home.php.
   ========================================================================== */

/* ---- Variables de la referencia (scopeadas al contenedor de la home) ---- */
.lic-ref-home {
  --tinta: #1A1A2E;
  --tinta-rgb: 26, 26, 46;
  --tinta-suave: #4A4A66;
  --papel: #FFFFFF;
  --papel-gris: #F5F6FA;
  --borde: #E3E4EC;
  --magenta: #1090A0;
  --magenta-hover: #0C757F;
  --magenta-rgb: 16, 144, 160;
  --cian: #00B3D6;
  --cian-hover: #0093B0;
  --amarillo: #FFC400;
  --negro-k: #101018;
  --sombra: 0 6px 24px rgba(26, 26, 46, 0.08);
  --sombra-hover: 0 12px 32px rgba(26, 26, 46, 0.15);
  --sombra-sutil: 0 2px 8px rgba(0, 0, 0, 0.04);
  --radio: 12px;
  --radio-sm: 8px;
  --radio-lg: 20px;
  --fuente-titulo: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fuente-cuerpo: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --transicion: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  font-family: var(--fuente-cuerpo);
  color: var(--tinta);
  background: var(--papel);
  line-height: 1.6;
  font-size: 16px;
}

.lic-ref-home *,
.lic-ref-home *::before,
.lic-ref-home *::after { box-sizing: border-box; }

.lic-ref-home h1,
.lic-ref-home h2,
.lic-ref-home h3,
.lic-ref-home h4 { font-family: var(--fuente-titulo); line-height: 1.15; }

.lic-ref-home a { color: inherit; text-decoration: none; transition: var(--transicion); }
.lic-ref-home img { max-width: 100%; display: block; }

/* ---- Compartidos (comun.css) ---- */
.lic-ref-home .contenedor { max-width: 1480px; margin: 0 auto; padding: 0 24px; }

.lic-ref-home .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--fuente-titulo); font-weight: 600; font-size: 16.5px;
  padding: 15px 30px; border-radius: var(--radio-sm); border: none; cursor: pointer;
  transition: var(--transicion); position: relative; overflow: hidden;
}
.lic-ref-home .btn::after {
  content: ''; position: absolute; top: 0; left: -50%; width: 200%; height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg); transition: 0.75s; opacity: 0;
}
.lic-ref-home .btn:hover::after { left: 125%; opacity: 1; }
.lic-ref-home .btn:hover { transform: translateY(-2px); }
.lic-ref-home .btn-primario { background: var(--magenta); color: #fff; box-shadow: 0 5px 16px rgba(16,144,160,0.35); }
.lic-ref-home .btn-primario:hover { background: var(--magenta-hover); box-shadow: 0 8px 20px rgba(16,144,160,0.5); }
.lic-ref-home .btn-secundario { background: #fff; color: var(--tinta); border: 2px solid var(--tinta); }
.lic-ref-home .btn-secundario:hover { background: var(--papel-gris); }

.lic-ref-home section { padding: 64px 0; }
.lic-ref-home .titulo-seccion { text-align: center; max-width: 720px; margin: 0 auto 42px; }
.lic-ref-home .titulo-seccion h2 { font-size: clamp(26px, 3.6vw, 36px); margin-bottom: 10px; font-weight: 800; }
.lic-ref-home .titulo-seccion p { color: var(--tinta-suave); font-size: 17px; }
.lic-ref-home .ver-todo { display: block; text-align: center; margin-top: 30px; font-weight: 600; color: var(--magenta); }
.lic-ref-home .ver-todo:hover { color: var(--magenta-hover); text-decoration: underline; }

.lic-ref-home .foto {
  background: repeating-linear-gradient(45deg, #EDEEF4, #EDEEF4 12px, #E4E5EE 12px, #E4E5EE 24px);
  display: grid; place-items: center; color: var(--tinta-suave); font-size: 12.5px;
  font-weight: 600; text-align: center; padding: 8px; overflow: hidden; transition: var(--transicion);
}
.lic-ref-home .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lic-ref-home .foto:has(img) { padding: 0; background: none; }

/* ===== 4. Hero con collage ===== */
.lic-ref-home .hero { padding: 56px 0 64px; background: linear-gradient(180deg, #fff, var(--papel-gris)); }
.lic-ref-home .hero .contenedor { display: grid; grid-template-columns: 1fr 1.1fr; gap: 52px; align-items: center; }
.lic-ref-home .hero h1 { font-size: clamp(32px, 4.6vw, 50px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 18px; color: var(--tinta); }
.lic-ref-home .hero h1 em { font-style: normal; color: var(--magenta); position: relative; display: inline-block; }
.lic-ref-home .hero h1 em::after { content: ''; position: absolute; bottom: 2px; left: 0; width: 100%; height: 4px; background: var(--cian); border-radius: 2px; z-index: -1; }
.lic-ref-home .hero p.sub { font-size: 18.5px; color: var(--tinta-suave); margin-bottom: 28px; max-width: 480px; }
.lic-ref-home .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.lic-ref-home .hero-rating { font-size: 14.5px; color: var(--tinta-suave); display: flex; align-items: center; gap: 6px; }
.lic-ref-home .hero-rating .estrellas { color: var(--amarillo); letter-spacing: 1px; font-size: 16px; }
.lic-ref-home .collage { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 170px); gap: 12px; }
.lic-ref-home .collage .foto { border-radius: var(--radio); box-shadow: var(--sombra-sutil); transition: var(--transicion); cursor: pointer; position: relative; }
.lic-ref-home .collage .foto::before { content: ''; position: absolute; inset: 0; background: rgba(var(--magenta-rgb), 0.1); opacity: 0; transition: var(--transicion); z-index: 1; }
.lic-ref-home .collage .foto:hover::before { opacity: 1; }
.lic-ref-home .collage .foto:hover { transform: scale(1.02); box-shadow: var(--sombra-hover); }
.lic-ref-home .collage .foto:nth-child(1) { grid-column: 1/3; grid-row: 1/3; }
@media(max-width:900px) {
  .lic-ref-home .hero .contenedor { grid-template-columns: 1fr; gap: 32px; }
  .lic-ref-home .collage { grid-template-rows: repeat(2, 130px); }
}

/* ===== 5. Barra de confianza ===== */
.lic-ref-home .barra-confianza { background: var(--tinta); color: #fff; padding: 24px 0; }
.lic-ref-home .barra-confianza .contenedor { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.lic-ref-home .item-conf { display: flex; align-items: center; gap: 13px; }
.lic-ref-home .item-conf .ico { font-size: 28px; flex: none; background: rgba(255,255,255,0.08); width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; }
.lic-ref-home .item-conf b { display: block; font-family: var(--fuente-titulo); font-size: 15px; }
.lic-ref-home .item-conf span { font-size: 13px; color: #C9C9DC; }
@media(max-width:900px) { .lic-ref-home .barra-confianza .contenedor { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media(max-width:480px) { .lic-ref-home .barra-confianza .contenedor { grid-template-columns: 1fr; } }

/* ===== 6. Categorías ===== */
.lic-ref-home .grid-categorias { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.lic-ref-home .tarjeta-cat { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-sutil); transition: var(--transicion); }
.lic-ref-home .tarjeta-cat:hover { box-shadow: var(--sombra-hover); transform: translateY(-4px); border-color: var(--magenta); }
.lic-ref-home .tarjeta-cat .foto { aspect-ratio: 1/1; }
.lic-ref-home .tarjeta-cat .info { padding: 14px 16px 18px; text-align: center; }
.lic-ref-home .tarjeta-cat h3 { font-size: 16.5px; margin-bottom: 3px; color: var(--tinta); }
.lic-ref-home .tarjeta-cat .desde { font-size: 13.5px; color: var(--tinta-suave); }
.lic-ref-home .tarjeta-cat .desde b { color: var(--magenta); }
@media(max-width:900px) { .lic-ref-home .grid-categorias { grid-template-columns: repeat(2, 1fr); } }

/* ===== 7. Promo diseñador ===== */
.lic-ref-home .promo-lab { background: var(--papel-gris); }
.lic-ref-home .promo-lab .contenedor { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; }
.lic-ref-home .captura-lab { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.lic-ref-home .captura-lab .barra-app { background: var(--tinta); display: flex; gap: 6px; padding: 10px 14px; }
.lic-ref-home .captura-lab .barra-app i { width: 10px; height: 10px; border-radius: 50%; background: #3A3A55; }
.lic-ref-home .captura-lab .lienzo { padding: 30px; display: grid; place-items: center; background: #F9F9FB; }
.lic-ref-home .captura-lab .lienzo svg { filter: drop-shadow(0 8px 16px rgba(0,0,0,0.06)); animation: lic-float 4s ease-in-out infinite; }
@keyframes lic-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.lic-ref-home .lista-check { list-style: none; display: grid; gap: 13px; margin: 22px 0 28px; }
.lic-ref-home .lista-check li { display: flex; gap: 11px; font-size: 16px; }
.lic-ref-home .lista-check li::before { content: "✓"; flex: none; width: 23px; height: 23px; border-radius: 50%; background: var(--cian); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; margin-top: 2px; }
@media(max-width:900px) { .lic-ref-home .promo-lab .contenedor { grid-template-columns: 1fr; gap: 32px; } }

/* ===== 8. Ocasiones ===== */
.lic-ref-home .grid-ocasiones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lic-ref-home .tarjeta-oca { position: relative; border-radius: var(--radio); overflow: hidden; aspect-ratio: 16/10; box-shadow: var(--sombra-sutil); }
.lic-ref-home .tarjeta-oca .foto { position: absolute; inset: 0; transition: transform 0.5s ease; }
.lic-ref-home .tarjeta-oca:hover .foto { transform: scale(1.06); }
.lic-ref-home .tarjeta-oca .velo { position: absolute; inset: auto 0 0 0; background: linear-gradient(to top, rgba(16,16,24,0.9) 0%, rgba(16,16,24,0.4) 70%, transparent 100%); padding: 40px 18px 16px; color: #fff; z-index: 2; }
.lic-ref-home .tarjeta-oca h3 { font-size: 18px; font-weight: 700; }
.lic-ref-home .tarjeta-oca span { font-size: 13px; color: #D9D9E6; }
@media(max-width:900px) { .lic-ref-home .grid-ocasiones { grid-template-columns: 1fr 1fr; } }
@media(max-width:560px) { .lic-ref-home .grid-ocasiones { grid-template-columns: 1fr; } }

/* ===== 9. Garantía ===== */
.lic-ref-home .garantia { background: var(--tinta); color: #fff; text-align: center; }
.lic-ref-home .garantia .insignia { width: 78px; height: 78px; margin: 0 auto 20px; border-radius: 50%; background: var(--amarillo); color: var(--negro-k); display: grid; place-items: center; font-size: 34px; font-weight: 800; box-shadow: 0 4px 15px rgba(255,196,0,0.3); }
/* El h2 global es color tinta, el mismo que el fondo de esta sección: el título desaparecía. */
.lic-ref-home .garantia h2 { color: #fff; font-size: clamp(26px, 3.6vw, 36px); margin-bottom: 14px; }
.lic-ref-home .garantia p { color: #E4E4F0; max-width: 640px; margin: 0 auto 14px; font-size: 17px; line-height: 1.55; }
.lic-ref-home .garantia .garantia-nota { color: #B8B8D0; font-size: 15px; margin-bottom: 28px; }

/* ===== 10. Reseñas ===== */
.lic-ref-home .cabecera-resenas { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 38px; flex-wrap: wrap; }
.lic-ref-home .nota-global { font-family: var(--fuente-titulo); font-weight: 800; font-size: 54px; color: var(--tinta); }
.lic-ref-home .grid-opiniones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lic-ref-home .opinion { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 24px; box-shadow: var(--sombra-sutil); transition: var(--transicion); }
.lic-ref-home .opinion:hover { box-shadow: var(--sombra); border-color: var(--magenta); }
.lic-ref-home .estrellas { color: var(--amarillo); letter-spacing: 2px; font-size: 15px; }
.lic-ref-home .opinion p { font-size: 15px; margin: 12px 0 16px; color: var(--tinta-suave); font-style: italic; }
.lic-ref-home .opinion .autor { font-weight: 600; font-size: 14px; }
.lic-ref-home .opinion .autor span { display: block; font-weight: 400; color: var(--tinta-suave); font-size: 13px; }
.lic-ref-home .resenas-pendiente { text-align: center; color: var(--tinta-suave); font-size: 16px; max-width: 620px; margin: 0 auto; }
@media(max-width:900px) { .lic-ref-home .grid-opiniones { grid-template-columns: 1fr; } }

/* ===== 11. Plantillas ===== */
.lic-ref-home .grid-plantillas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lic-ref-home .tarjeta-pla { border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; background: #fff; transition: var(--transicion); box-shadow: var(--sombra-sutil); }
.lic-ref-home .tarjeta-pla:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: var(--magenta); }
.lic-ref-home .tarjeta-pla .foto { aspect-ratio: 1/1; background: #fdfdfd; }
.lic-ref-home .tarjeta-pla p { padding: 12px 14px; font-size: 14px; font-weight: 600; text-align: center; color: var(--tinta); }
@media(max-width:900px) { .lic-ref-home .grid-plantillas { grid-template-columns: repeat(2, 1fr); } }

/* ===== 12. FAQ ===== */
.lic-ref-home .faq { max-width: 840px; margin: 0 auto; }
.lic-ref-home .faq details { background: #fff; border: 1px solid var(--borde); border-radius: 10px; margin-bottom: 11px; overflow: hidden; transition: var(--transicion); }
.lic-ref-home .faq details:hover { border-color: var(--tinta-suave); }
.lic-ref-home .faq summary { cursor: pointer; padding: 17px 20px; font-family: var(--fuente-titulo); font-weight: 600; font-size: 16px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.lic-ref-home .faq summary::-webkit-details-marker { display: none; }
.lic-ref-home .faq summary::after { content: "+"; font-size: 21px; color: var(--magenta); font-weight: 700; transition: var(--transicion); }
.lic-ref-home .faq details[open] summary::after { content: "–"; }
.lic-ref-home .faq .respuesta { padding: 0 20px 18px; color: var(--tinta-suave); font-size: 15px; }


/* ==========================================================================
   HERO 2 — configurador (azul/amarillo; recolorear luego)
   ========================================================================== */
.lic-ref-home .hero2 { --h2-blue:#2563eb; --h2-navy:#172554; --h2-gold:#f6b400; --h2-tinta:#1f2430; position:relative; overflow:hidden; background:#fff; }
.lic-ref-home .hero2-bg { position:absolute; inset:0; z-index:0; pointer-events:none; }
.lic-ref-home .hero2-brush-blue { position:absolute; top:0; right:0; height:100%; width:60%; }
.lic-ref-home .hero2-brush-gold { position:absolute; top:-14px; left:-34px; width:160px; height:140px; }
.lic-ref-home .hero2-dots { position:absolute; left:10px; top:46%; width:110px; height:150px; background-image:radial-gradient(#2563eb 2px, transparent 2px); background-size:16px 16px; opacity:.30; }
.lic-ref-home .hero2-grid { position:relative; z-index:1; display:grid; grid-template-columns:1fr .82fr 358px; gap:24px; align-items:center; padding:46px 0 58px; }

.lic-ref-home .hero2-badge { display:inline-flex; align-items:center; gap:9px; font-family:var(--fuente-titulo); font-weight:800; font-size:13px; letter-spacing:.10em; text-transform:uppercase; color:var(--h2-blue); margin-bottom:20px; }
.lic-ref-home .hero2-badge__check { width:26px; height:26px; border-radius:50%; background:var(--h2-blue); color:#fff; display:grid; place-items:center; font-size:14px; }
.lic-ref-home .hero2-title { font-family:var(--fuente-titulo); font-weight:800; font-size:clamp(38px,5vw,62px); line-height:1.04; letter-spacing:-.02em; margin:0 0 20px; }
.lic-ref-home .hero2-title .c-a { color:var(--h2-navy); }
.lic-ref-home .hero2-title .c-b { color:var(--h2-blue); }
.lic-ref-home .hero2-sub { font-size:18px; color:#5b6472; margin:0 0 28px; max-width:360px; }
.lic-ref-home .hero2-ctas { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.lic-ref-home .btn2 { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--fuente-titulo); font-weight:700; font-size:16px; padding:15px 26px; border-radius:10px; text-decoration:none; transition:transform .15s ease,box-shadow .15s ease; cursor:pointer; border:2px solid transparent; }
.lic-ref-home .btn2-gold { background:var(--h2-gold); color:var(--h2-navy); box-shadow:0 6px 16px rgba(246,180,0,.35); }
.lic-ref-home .btn2-gold:hover { transform:translateY(-2px); box-shadow:0 9px 22px rgba(246,180,0,.5); }
.lic-ref-home .btn2-ghost { background:#fff; color:var(--h2-blue); border-color:var(--h2-blue); }
.lic-ref-home .btn2-ghost:hover { background:rgba(37,99,235,.06); }
.lic-ref-home .hero2-precio { font-family:var(--fuente-titulo); font-size:13px; letter-spacing:.08em; color:#7a828b; margin:6px 0 0; }
.lic-ref-home .hero2-precio b { color:var(--h2-blue); font-size:18px; }

.lic-ref-home .hero2-prenda { display:grid; place-items:center; }
.lic-ref-home .hero2-shirt-wrap { position:relative; width:100%; max-width:400px; }
.lic-ref-home .hero2-shirt-wrap > img { width:100%; height:auto; filter:drop-shadow(0 16px 30px rgba(0,0,0,.18)); }
.lic-ref-home .hero2-print { position:absolute; left:50%; top:37%; transform:translateX(-50%); width:46%; }
.lic-ref-home .hero2-print svg { width:100%; height:auto; }

.lic-ref-home .hero2-panel { background:#fff; border:1px solid #e7e9ee; border-radius:20px; padding:20px; box-shadow:0 24px 60px rgba(23,37,84,.18); }
.lic-ref-home .hero2-block { padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid #eef0f4; }
.lic-ref-home .hero2-block:last-of-type { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.lic-ref-home .hero2-block__t { font-family:var(--fuente-titulo); font-weight:700; font-size:14px; color:var(--h2-navy); margin:0 0 12px; }
.lic-ref-home .hero2-block__t b { color:var(--h2-blue); }
.lic-ref-home .hero2-swatches { display:flex; gap:10px; flex-wrap:wrap; }
.lic-ref-home .hero2-sw { width:30px; height:30px; border-radius:50%; background:var(--sw); border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.12); cursor:pointer; transition:transform .12s ease,box-shadow .12s ease; }
.lic-ref-home .hero2-sw.is-light { box-shadow:0 0 0 1px #d7d9df; }
.lic-ref-home .hero2-sw:hover { transform:scale(1.12); }
.lic-ref-home .hero2-sw.is-active { box-shadow:0 0 0 2px #fff,0 0 0 4px var(--h2-blue); }
.lic-ref-home .hero2-tabs { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.lic-ref-home .hero2-tab { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:7px 10px; border-radius:8px; background:#f4f5f8; color:#5b6472; text-decoration:none; }
.lic-ref-home .hero2-tab.is-active { background:rgba(37,99,235,.10); color:var(--h2-blue); }
.lic-ref-home .hero2-design { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.lic-ref-home .hero2-drop { display:grid; justify-items:center; align-content:center; gap:3px; text-align:center; padding:14px 8px; border:2px dashed #d3d7de; border-radius:12px; text-decoration:none; color:#7a828b; }
.lic-ref-home .hero2-drop:hover { border-color:var(--h2-blue); }
.lic-ref-home .hero2-drop__ic { font-size:22px; color:var(--h2-blue); }
.lic-ref-home .hero2-drop b { color:var(--h2-navy); font-size:13px; }
.lic-ref-home .hero2-drop span { font-size:10px; }
.lic-ref-home .hero2-mini { border:1px solid #eef0f4; border-radius:12px; display:grid; place-items:center; padding:8px; background-color:#fbfcff; background-image:linear-gradient(#eef0f6 1px,transparent 1px),linear-gradient(90deg,#eef0f6 1px,transparent 1px); background-size:12px 12px; }
.lic-ref-home .hero2-mini svg { width:82%; height:auto; }
.lic-ref-home .hero2-tools { display:flex; gap:8px; margin-top:12px; }
.lic-ref-home .hero2-tools span { width:34px; height:34px; border:1px solid #e7e9ee; border-radius:8px; display:grid; place-items:center; font-size:15px; color:#5b6472; }
.lic-ref-home .hero2-previews { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.lic-ref-home .hero2-pv { border:2px solid #eef0f4; border-radius:10px; overflow:hidden; aspect-ratio:1/1; background:#fff; }
.lic-ref-home .hero2-pv.is-active { border-color:var(--h2-blue); }
.lic-ref-home .hero2-pv img { width:100%; height:100%; object-fit:contain; }

.lic-ref-home .hero2-trust { background:#2563eb; color:#fff; }
.lic-ref-home .hero2-trust .contenedor { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px 40px; padding-top:18px; padding-bottom:18px; }
.lic-ref-home .hero2-trust__i { display:inline-flex; align-items:center; gap:10px; font-family:var(--fuente-titulo); font-weight:600; font-size:15px; }
.lic-ref-home .hero2-trust__i .ic { font-size:20px; }

@media (max-width:1024px) { .lic-ref-home .hero2-grid { grid-template-columns:1fr 340px; } .lic-ref-home .hero2-prenda { display:none; } }
@media (max-width:720px) { .lic-ref-home .hero2-grid { grid-template-columns:1fr; text-align:center; padding:32px 0 40px; } .lic-ref-home .hero2-ctas,.lic-ref-home .hero2-badge,.lic-ref-home .hero2-swatches { justify-content:center; } .lic-ref-home .hero2-sub { margin-left:auto; margin-right:auto; } .lic-ref-home .hero2-brush-blue { display:none; } }

/* ==========================================================================
   HERO PORTADA v9 — mockup literal (fondos + brochazos) + camiseta recolorable
   encima + TARJETA real separada de la camiseta. Capado a 1440 y centrado.
   ========================================================================== */
.lic-sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.lic-ref-home .ph, .lic-ref-home .ph-trust{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.lic-ref-home .ph{ position:relative; background:linear-gradient(to right,#fff 0 50%,#005ef7 50% 100%); }
.lic-ref-home .ph-inner{ position:relative; max-width:1440px; margin:0 auto; }
.lic-ref-home .ph-stage{ position:relative; line-height:0; font-size:0; }
.lic-ref-home .ph-bg{ display:block; width:100%; height:auto; }
.lic-ref-home .ph-shirt{ position:absolute; left:47.92%; top:2.31%; width:22.92%; height:auto; z-index:2; }
.lic-ref-home .ph-hot{ position:absolute; z-index:3; display:block; border-radius:12px; }
.lic-ref-home .ph-hot--dis{ left:6.25%; top:77.5%; width:18.9%; height:10.2%; }
.lic-ref-home .ph-hot--ver{ left:26.74%; top:77.5%; width:14.1%; height:10.2%; }
.lic-ref-home .ph-hot:focus-visible{ outline:3px solid #ffce1f; outline-offset:2px; }

.lic-ref-home .ph-panel{ position:absolute; z-index:4; right:16px; top:50%; transform:translateY(-50%); width:330px; background:#fff; border-radius:20px; box-shadow:0 26px 60px rgba(8,18,55,.30); padding:18px; line-height:1.5; }
.lic-ref-home .ph-step + .ph-step{ margin-top:15px; padding-top:15px; border-top:1px solid #eef0f6; }
.lic-ref-home .ph-step__t{ font-family:var(--fuente-titulo); font-size:15px; font-weight:700; margin-bottom:11px; color:#1a1a2e; }
.lic-ref-home .ph-step__t b{ color:#005ef7; margin-right:4px; }
.lic-ref-home .ph-sw{ display:flex; gap:11px; }
.lic-ref-home .ph-sw__b{ width:32px; height:32px; border-radius:50%; border:2px solid #e2e5ee; cursor:pointer; padding:0; }
.lic-ref-home .ph-sw__b.is-on{ outline:2px solid #005ef7; outline-offset:2px; border-color:#fff; }
.lic-ref-home .ph-tabs{ display:flex; gap:8px; margin-bottom:12px; }
.lic-ref-home .ph-tabs a{ flex:1; text-align:center; font-size:12px; font-weight:600; padding:9px 4px; border-radius:9px; border:1px solid #e6e8f0; color:#5a5a72; text-decoration:none; }
.lic-ref-home .ph-tabs a.is-on{ border-color:#005ef7; color:#005ef7; background:#f2f6ff; }
.lic-ref-home .ph-design{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.lic-ref-home .ph-drop{ border:2px dashed #cfd6e6; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:14px 6px; text-align:center; color:#8a90a6; text-decoration:none; }
.lic-ref-home .ph-drop b{ color:#2b2b3d; font-size:14px; }
.lic-ref-home .ph-drop small{ font-size:10px; }
.lic-ref-home .ph-drop__ic{ font-size:22px; }
.lic-ref-home .ph-mini{ border:1px solid #eef0f6; border-radius:12px; background:repeating-linear-gradient(#eef1f8 0 1px,#fff 1px 14px); display:grid; place-items:center; padding:8px; }
.lic-ref-home .ph-mini img{ max-width:100%; height:auto; display:block; }
.lic-ref-home .ph-tools{ display:flex; gap:9px; margin-top:11px; color:#9aa0b4; }
.lic-ref-home .ph-tools span{ width:32px; height:29px; border:1px solid #e6e8f0; border-radius:8px; display:grid; place-items:center; font-size:14px; }
.lic-ref-home .ph-pv{ display:flex; gap:9px; }
.lic-ref-home .ph-pv span{ flex:1; border:1px solid #e6e8f0; border-radius:10px; padding:5px; display:grid; place-items:center; }
.lic-ref-home .ph-pv span.is-on{ border-color:#005ef7; }
.lic-ref-home .ph-pv img{ max-width:100%; height:auto; display:block; }

.lic-ref-home .ph-trust{ background:#005ef7; }
.lic-ref-home .ph-trust__in{ max-width:1440px; margin:0 auto; display:flex; padding:18px 40px; }
.lic-ref-home .ph-ti{ flex:1; display:flex; align-items:center; justify-content:center; gap:12px; color:#fff; font-family:var(--fuente-titulo); font-weight:600; font-size:16px; position:relative; }
.lic-ref-home .ph-ti + .ph-ti::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:32px; background:rgba(255,255,255,.3); }
.lic-ref-home .ph-ti svg{ width:28px; height:28px; color:#ffce1f; flex:none; }

/* Tablet/móvil: la tarjeta baja debajo del escenario (la camiseta sigue alineada) */
@media (max-width:1080px){
  .lic-ref-home .ph-panel{ position:static; transform:none; width:auto; max-width:420px; margin:-56px auto 26px; }
}
@media (max-width:760px){
  .lic-ref-home .ph-panel{ margin:-28px 16px 24px; }
  .lic-ref-home .ph-trust__in{ flex-wrap:wrap; padding:16px; }
  .lic-ref-home .ph-ti{ flex:1 1 50%; justify-content:flex-start; font-size:14px; gap:9px; margin:6px 0; }
  .lic-ref-home .ph-ti + .ph-ti::before{ display:none; }
}

/* ==========================================================================
   PORTADA CORPORATIVA APROBADA — aislada a Home
   ========================================================================== */
.page-template-template-home .barra-cmyk{display:none}
.page-template-template-home [hidden]{display:none!important}
.lic-corp-header{position:relative;z-index:50;background:#fffffc;border-bottom:1px solid #e6e8e8;font-family:var(--fuente-titulo,Outfit,sans-serif)}
.page-template-template-home .lic-corp-header{display:block!important;position:relative!important;top:0!important;overflow:visible!important;visibility:visible!important;opacity:1!important}
.lic-corp-header__inner{max-width:1320px;height:72px;margin:auto;padding:0 28px;display:grid;grid-template-columns:230px 1fr 230px;align-items:center}
.lic-corp-header__logo{display:block;width:188px;height:54px;overflow:hidden}
.lic-corp-header__logo img{width:100%;height:100%;object-fit:contain}
.lic-corp-header__nav{display:flex;align-items:center;justify-content:center;gap:34px}
.lic-corp-header__nav a,.lic-corp-mobile a{color:#292a2d;text-decoration:none;font-size:15px;font-weight:700}
.lic-corp-header__nav a:hover{color:#199ea2}
.lic-corp-header__actions{display:flex;justify-content:flex-end;align-items:center;gap:8px}
.lic-corp-header__icon,.lic-corp-header__menu{position:relative;width:40px;height:40px;border:0;background:transparent;color:#292a2d;padding:8px;display:grid;place-items:center;cursor:pointer}
.lic-corp-header__icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lic-corp-header__count{position:absolute;right:1px;top:0;min-width:17px;height:17px;border-radius:9px;padding:0 4px;background:#a32047;color:#fff;font-size:10px;line-height:17px;text-align:center}
.lic-corp-header__menu{display:none}.lic-corp-header__menu span{display:block;width:22px;height:2px;background:#292a2d;margin:2px}
.lic-corp-header__search{position:absolute;right:max(28px,calc((100vw - 1264px)/2));top:64px;width:310px;padding:12px;background:#fffffc;border:1px solid #e6e8e8;border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.12)}
.lic-corp-header__search input[type=search]{width:100%;height:42px;border:1px solid #cbd5d5;border-radius:7px;padding:0 13px}
.lic-corp-mobile{display:grid;padding:8px 22px 18px;border-top:1px solid #eee}.lic-corp-mobile a{padding:12px 4px}

.lic-ref-home .ph,.lic-ref-home .ph-trust{width:100%;margin-left:0;margin-right:0}
.lic-ref-home .ph{--turq:#199ea2;--wine:#a32047;--orange:#f7a51f;--white:#fffffc;position:relative;overflow:hidden;background:linear-gradient(105deg,var(--white) 0 43%,var(--turq) 43% 100%);min-height:585px}
.lic-ref-home .ph-inner{position:relative;max-width:1320px;min-height:585px;margin:auto;padding:36px 34px 30px;display:grid;grid-template-columns:minmax(440px,1.1fr) minmax(330px,.9fr) 340px;gap:20px;align-items:center}
.lic-ref-home .ph-copy{position:relative;z-index:3;align-self:center}
.lic-ref-home .ph-badge{display:flex;align-items:center;gap:10px;margin:0 0 21px;color:var(--turq);font-size:13px;font-weight:800;letter-spacing:.09em}
.lic-ref-home .ph-badge span{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:var(--turq);color:#fff;font-size:14px}
.lic-ref-home .ph-copy h1{margin:0;font-size:clamp(46px,3.7vw,54px);line-height:1.05;letter-spacing:-.045em;font-weight:900}
.lic-ref-home .ph-copy h1 span{display:block;color:var(--wine)}.lic-ref-home .ph-copy h1 span:last-child{color:var(--orange)}
.lic-ref-home .ph-lead{max-width:430px;margin:22px 0 27px;color:#4e5559;font-size:18px;line-height:1.5}
.lic-ref-home .ph-ctas{display:flex;gap:13px;flex-wrap:wrap}
.lic-ref-home .ph-btn{min-height:52px;padding:0 23px;display:inline-flex;align-items:center;justify-content:center;gap:16px;border-radius:8px;font-size:15px;font-weight:800;text-decoration:none}
.lic-ref-home .ph-btn--primary{background:var(--orange);color:#402e0c;box-shadow:0 8px 18px rgba(247,165,31,.26)}.lic-ref-home .ph-btn--secondary{background:#fff;color:var(--turq);border:2px solid var(--turq)}
.lic-ref-home .ph-product{position:relative;z-index:2;height:500px;display:grid;place-items:center}
.lic-ref-home .ph-brush{position:absolute;width:115%;height:91%;background:#128f94;clip-path:polygon(8% 3%,95% 0,100% 11%,94% 22%,99% 34%,95% 47%,100% 61%,93% 76%,98% 91%,12% 98%,1% 88%,6% 74%,0 59%,7% 46%,1% 31%,9% 18%);opacity:.8}
.lic-ref-home .ph-shirt{position:relative;left:auto;top:auto;width:auto;max-width:100%;height:485px;object-fit:contain;filter:drop-shadow(0 20px 20px rgba(48,54,54,.25));z-index:2}
.lic-ref-home .ph-panel{position:relative;right:auto;top:auto;transform:none;width:340px;z-index:4;border-radius:17px;padding:15px;box-shadow:0 18px 45px rgba(49,63,64,.26)}
.lic-ref-home .ph-step+.ph-step{margin-top:11px;padding-top:11px}.lic-ref-home .ph-step__t{font-size:13px;margin-bottom:8px}.lic-ref-home .ph-sw__b{width:27px;height:27px}.lic-ref-home .ph-sw{gap:10px}
.lic-ref-home .ph-step__t b{color:var(--wine)}.lic-ref-home .ph-sw__b.is-on{outline-color:var(--wine)}
.lic-ref-home .ph-tabs button{flex:1;text-align:center;font:600 11px/1.2 inherit;padding:9px 3px;border-radius:8px;border:1px solid #e3e7e7;color:#62696c;background:#fff;cursor:pointer}
.lic-ref-home .ph-tabs button.is-on{border-color:var(--turq);color:var(--turq);background:#edfafa}
.lic-ref-home .ph-drop{font-family:inherit;background:#fff;width:100%;height:130px;cursor:pointer;padding:8px 4px}.lic-ref-home .ph-drop__ic{color:var(--turq)}
.lic-ref-home .ph-design{height:130px}.lic-ref-home .ph-mini{height:130px;box-sizing:border-box;overflow:hidden}.lic-ref-home .ph-mini img{max-height:118px;object-fit:contain}
.lic-ref-home .ph-tools{margin-top:7px}.lic-ref-home .ph-tools span{height:25px;width:28px}.lic-ref-home .ph-pv img{height:62px;object-fit:contain}.lic-ref-home .ph-pv span{height:72px;box-sizing:border-box}
.lic-ref-home .ph-design--message{grid-template-columns:1fr;padding:13px;border:1px dashed #cdd6d6;border-radius:10px;font-size:12px}.lic-ref-home .ph-design--message p{margin:0 0 5px}.lic-ref-home .ph-design--message a{color:var(--wine);font-weight:700}
.lic-ref-home .ph-pv span.is-on{border-color:var(--turq)}
.lic-ref-home .ph-deco{position:absolute;z-index:1;pointer-events:none}.lic-ref-home .ph-deco--orange{left:-30px;top:-45px;width:180px;height:100px;background:var(--orange);transform:rotate(-18deg);clip-path:polygon(0 35%,100% 0,91% 42%,100% 54%,7% 100%)}
.lic-ref-home .ph-deco--dots{left:8px;top:48%;width:92px;height:120px;background-image:radial-gradient(var(--turq) 2px,transparent 2px);background-size:15px 15px;opacity:.4}
.lic-ref-home .ph-deco--stroke{left:-30px;bottom:19px;width:180px;height:36px;border-top:6px solid var(--turq);border-radius:50%;transform:rotate(-10deg)}
.lic-ref-home .ph-trust{background:var(--wine,#a32047)}.lic-ref-home .ph-ti svg{color:#f7a51f}

@media(max-width:1100px){
 .lic-corp-header__inner{grid-template-columns:200px 1fr 150px}.lic-corp-header__nav{gap:18px}
 .lic-ref-home .ph-inner{grid-template-columns:1fr 1fr;gap:20px}.lic-ref-home .ph-panel{grid-column:1/-1;width:min(430px,calc(100% - 32px));margin:-25px auto 20px}.lic-ref-home .ph{min-height:auto}
}
@media(max-width:760px){
 .lic-corp-header__inner{height:64px;padding:0 16px;grid-template-columns:1fr auto}.lic-corp-header__logo{width:155px;height:48px}.lic-corp-header__nav{display:none}.lic-corp-header__menu{display:grid}.lic-corp-header__actions{gap:1px}
 .lic-ref-home .ph{background:linear-gradient(to bottom,#fffffc 0 43%,#199ea2 43% 100%)}
 .lic-ref-home .ph-inner{display:flex;flex-direction:column;min-height:0;padding:38px 18px 26px;gap:22px;align-items:stretch}
 .lic-ref-home .ph-copy{order:1}.lic-ref-home .ph-copy h1{font-size:43px}.lic-ref-home .ph-lead{font-size:16px;margin:18px 0 22px}.lic-ref-home .ph-ctas{gap:10px}.lic-ref-home .ph-btn{flex:1;min-width:155px;padding:0 14px}
 .lic-ref-home .ph-product{order:2;height:410px}.lic-ref-home .ph-shirt{height:400px;max-width:100%}
 .lic-ref-home .ph-panel{order:3;width:100%;margin:0;box-sizing:border-box}.lic-ref-home .ph-deco--dots{top:45%}
 .lic-ref-home .ph-trust__in{display:grid;grid-template-columns:1fr;padding:12px 22px}.lic-ref-home .ph-ti{justify-content:flex-start!important}.lic-ref-home .ph-ti+ .ph-ti{border-top:1px solid rgba(255,255,255,.2);padding-top:11px}
}
@media(max-width:400px){.lic-ref-home .ph-copy h1{font-size:39px}.lic-ref-home .ph-btn{width:100%}.lic-corp-header__icon{width:36px}.lic-corp-header__logo{width:135px}}

/* Corrección de proporciones a la referencia 1586 × 992. */
@media (min-width:1101px){
 .lic-ref-home .ph{min-height:748px;padding:0;background:#fffffc}
 .lic-ref-home .ph::before{content:"";position:absolute;z-index:0;top:-2%;right:-2%;bottom:-2%;left:39%;background:#199ea2;border-radius:38% 0 0 42%/8% 0 0 12%;transform:rotate(-.6deg);transform-origin:right center}
 .lic-ref-home .ph-inner{width:100%;max-width:none;box-sizing:border-box;min-height:748px;padding:39px 32px 33px;grid-template-columns:minmax(0,41fr) minmax(0,33fr) minmax(0,26fr);gap:20px}
 .lic-ref-home .ph-copy{transform:translateX(-4px)}
 .lic-ref-home .ph-badge{margin-bottom:29px;font-size:14px;gap:12px}.lic-ref-home .ph-badge span{width:30px;height:30px}
 .lic-ref-home .ph-copy h1{font-size:clamp(58px,4vw,64px);line-height:1.035}
 .lic-ref-home .ph-lead{max-width:485px;margin:27px 0 31px;font-size:20px;line-height:1.48}
 .lic-ref-home .ph-ctas{gap:16px}.lic-ref-home .ph-btn{min-height:60px;padding:0 30px;font-size:17px;min-width:185px}.lic-ref-home .ph-btn--primary{min-width:245px}
 .lic-ref-home .ph-product{height:660px;transform:translateX(4px)}
 .lic-ref-home .ph-brush{display:none}
 .lic-ref-home .ph-shirt{height:630px;width:auto;max-width:none}
 .lic-ref-home .ph-panel{width:100%;max-width:402px;box-sizing:border-box;justify-self:end;padding:20px;border-radius:19px;transform:none}
 .lic-ref-home .ph-step+.ph-step{margin-top:15px;padding-top:15px}.lic-ref-home .ph-step__t{font-size:15px;margin-bottom:11px}.lic-ref-home .ph-sw__b{width:32px;height:32px}
 .lic-ref-home .ph-tabs button{font-size:13px;padding:11px 4px}.lic-ref-home .ph-design,.lic-ref-home .ph-mini{height:158px}.lic-ref-home .ph-drop{height:158px}.lic-ref-home .ph-mini img{max-height:145px}
 .lic-ref-home .ph-tools{margin-top:10px}.lic-ref-home .ph-tools span{width:33px;height:29px}.lic-ref-home .ph-pv span{height:84px}.lic-ref-home .ph-pv img{height:74px}
 .lic-ref-home .ph-deco--orange{left:-24px;top:-17px;width:250px;height:155px;transform:none;clip-path:none;background:none;fill:none;stroke:#f7a51f;stroke-linecap:round;stroke-linejoin:round}
 .lic-ref-home .ph-deco--orange path:nth-child(1){stroke-width:26}.lic-ref-home .ph-deco--orange path:nth-child(2){stroke-width:13;opacity:.82}.lic-ref-home .ph-deco--orange path:nth-child(3){stroke-width:7;opacity:.7}
 .lic-ref-home .ph-deco--dots{left:-12px;top:49%;width:50px;height:135px;background-size:15px 15px;opacity:.36}
 .lic-ref-home .ph-deco--stroke{left:-8px;bottom:20px;width:245px;height:72px;border:0;transform:none;fill:#199ea2}
 .lic-ref-home .ph-trust__in{max-width:1586px;padding:49px 48px}
 .lic-ref-home .ph-ti{gap:19px;font-size:19px}.lic-ref-home .ph-ti svg{width:41px;height:41px}.lic-ref-home .ph-ti+.ph-ti::before{height:78px}
}

/* ══════════════════════════════════════════════════════════════════
   TAREA C — Parrilla "Compra por categoría" (.lic-catgrid)
   Datos en template-home.php; precios reales desde BD (lic_card_*).
   Alturas iguales garantizadas por min-height reservado en título y
   beneficio + precio anclado abajo. Autocontenido (no depende de
   .lic-ref-home). Tokens reutilizados: --tinta, --tinta-suave, --borde,
   --magenta, --radio, --sombra*.
   ══════════════════════════════════════════════════════════════════ */
.lic-catgrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* la fila final (2 tarjetas) queda centrada, no huérfana a la izquierda */
  gap: 20px;
}
.lic-catcard {
  /* 4 columnas en escritorio */
  flex: 0 1 calc(25% - 15px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-sutil);
  text-decoration: none;
  color: var(--tinta);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lic-catcard:hover { transform: translateY(-4px); box-shadow: var(--sombra-hover); border-color: var(--magenta); }
.lic-catcard:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; }
/* Media 4:3, fondo neutro UNIFORME en las 8, imagen contenida sin recortar */
.lic-catcard__media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  background: #f4f5f7;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lic-catcard__img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lic-catcard__badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--tinta); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 5px 9px; border-radius: 999px; letter-spacing: .02em;
}
.lic-catcard__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;            /* empuja el precio al fondo → misma línea base en toda la fila */
  padding: 14px 16px 16px;
  text-align: center;
}
.lic-catcard__title {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.25;
  color: var(--tinta);
  min-height: 2.5em;         /* reserva 2 líneas: títulos de 1 o 2 líneas ocupan igual */
  display: flex; align-items: center; justify-content: center;
}
.lic-catcard__benefit {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.3;
  color: var(--tinta-suave); /* #4A4A66 sobre #fff ≈ 7,6:1 (AA) */
  min-height: 1.3em;         /* reserva 1 línea */
}
.lic-catcard__price {
  margin-top: auto;          /* anclado abajo */
  padding-top: 10px;
  font-size: 13.5px;
  color: var(--tinta-suave); /* "desde" en gris */
}
.lic-catcard__from { color: var(--tinta-suave); }
.lic-catcard__price b { color: #0e8290; font-size: 16px; font-weight: 800; } /* turquesa de marca un 10% mas oscuro: 4,57:1 sobre blanco (AA). Con var(--magenta) se quedaba en 3,81 desde que esa variable paso a turquesa. */

/* Tablet: 3 columnas; con 8 tarjetas la última fila (2) queda centrada por justify-content */
@media (max-width: 1024px) {
  .lic-catcard { flex-basis: calc(33.333% - 14px); }
}

/* Móvil: carrusel horizontal con scroll-snap; la 2ª tarjeta asoma parcialmente */
@media (max-width: 640px) {
  .lic-catgrid {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding-bottom: 6px;     /* aire para la barra de scroll */
    scroll-padding-left: 4px;
  }
  .lic-catcard {
    flex: 0 0 72%;           /* deja ver el borde de la siguiente */
    scroll-snap-align: start;
  }
}