/* Pinta Form · Capa de diseño A + B (color vibrante, fotos a sangre, movimiento con resorte).
   Se carga después de styles.css en todas las páginas. No cambia contenido ni links. */
:root {
  --spring: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.4%, 1);
  --v-azul: #2B2BB8; --v-noche: #0E0E2E; --v-turq: #00B4D8; --v-verde: #7ED321; --v-amarillo: #FFC400;
  --v-coral: #FF5A43; --v-magenta: #E5267A; --v-naranja: #FF8A00; --v-esme: #00A36C;
  --c-azul: #2B2BB8; --c-turq: #00B4D8; --c-amarillo: #FFC400; --c-coral: #FF5A43; --c-terra: #E04E2A; --c-esme: #00A36C;
}
/* Fotos con más color en todo el sitio (las locales ya vienen procesadas) */
img[src*="unsplash.com"] { filter: saturate(1.35) contrast(1.08); }

/* Encabezado */
.site-header { background: rgba(255,255,255,.9); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(41,41,112,.08); }
.nav a { position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--v-verde), var(--v-turq), var(--v-magenta)); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--spring); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Botones con resorte y color intenso */
.btn { transition: transform .55s var(--spring), box-shadow .3s, background-color .3s; }
.btn:hover { transform: translateY(-3px) scale(1.03); }
.btn-primary { background: var(--v-azul); box-shadow: 0 12px 26px rgba(43,43,184,.28); }

/* Héroe interior estilo Apple: foto a sangre, oscura, tipografía grande */
.ihero { position: relative; isolation: isolate; min-height: min(74svh, 720px); display: flex; align-items: flex-end; background: var(--v-noche); }
.ihero > .container { position: static; width: 100%; }
.ihero .grid, .ihero .grid.two { display: block; padding-top: 140px; padding-bottom: 72px; max-width: 980px; }
.ihero .ph { position: absolute !important; inset: 0; z-index: -2; border-radius: 0 !important; aspect-ratio: auto !important; background: var(--v-noche); }
.ihero .ph img { width: 100%; height: 100%; object-fit: cover; animation: pf-kb 26s ease-in-out infinite alternate; }
.ihero .ph .tag-ref { position: absolute; right: 20px; top: 96px; }
.ihero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, rgba(14,14,46,.94) 0%, rgba(14,14,46,.62) 42%, rgba(14,14,46,.18) 100%), radial-gradient(70% 60% at 10% 100%, rgba(229,38,122,.35), transparent 70%); }
.ihero:not(:has(.ph))::before { background: radial-gradient(60% 80% at 85% 10%, rgba(0,180,216,.55), transparent 60%), radial-gradient(55% 70% at 5% 100%, rgba(229,38,122,.5), transparent 60%), radial-gradient(40% 50% at 60% 90%, rgba(126,211,33,.35), transparent 60%); }
.ihero h1 { font-size: clamp(42px, 6.4vw, 96px); line-height: .98; letter-spacing: -0.045em; text-wrap: balance; }
.ihero .overline { color: var(--v-amarillo); }
.ihero p.lead { font-size: clamp(18px, 1.6vw, 22px); color: rgba(255,255,255,.9); }
.ihero .btn-primary { background: var(--v-verde); color: #10102E; box-shadow: 0 14px 30px rgba(126,211,33,.35); }
.ihero .btn-outline { border-color: rgba(255,255,255,.7); }
@keyframes pf-kb { from { transform: scale(1); } to { transform: scale(1.05) translate(-.8%, -.5%); } }

/* Héroe de proyectos */
.pj-hero > img { animation: pf-kb 26s ease-in-out infinite alternate; }
.pj-hero h1 { font-weight: 800; letter-spacing: -0.045em; }
.pj-hero .cat { color: var(--v-amarillo); }

/* Títulos y etiquetas */
.overline { color: var(--v-magenta); letter-spacing: .14em; }
main h2 { letter-spacing: -0.035em; }

/* Tarjetas de producto y genéricas: color + resorte */
.pcard2 { border-top: 6px solid var(--v-turq); transition: transform .6s var(--spring), box-shadow .4s; }
.pcard2:nth-child(6n+2) { border-top-color: var(--v-magenta); }
.pcard2:nth-child(6n+3) { border-top-color: var(--v-verde); }
.pcard2:nth-child(6n+4) { border-top-color: var(--v-naranja); }
.pcard2:nth-child(6n+5) { border-top-color: var(--v-azul); }
.pcard2:nth-child(6n+6) { border-top-color: var(--v-amarillo); }
.pcard2:hover { transform: translateY(-8px); box-shadow: 0 26px 50px rgba(20,20,70,.16); }
.pcard2 .btn-primary { background: var(--v-azul); }

/* Pie de página con banda de color */
.site-footer { background: var(--v-noche); position: relative; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--v-verde), var(--v-turq), var(--v-azul), var(--v-magenta), var(--v-naranja), var(--v-amarillo)); }

/* Aparición gradual al hacer scroll (Chrome/Edge) */
@supports (animation-timeline: view()) {
  main > section:not(.ihero):not(.pj-hero) .container > * { animation: pf-in linear both; animation-timeline: view(); animation-range: entry 0% entry 38%; }
  @keyframes pf-in { from { opacity: 0; transform: translateY(46px) scale(.985); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .ihero .ph img, .pj-hero > img { animation: none; }
  main > section .container > * { animation: none !important; }
  .btn:hover, .pcard2:hover { transform: none; }
}
.header-cta .btn { white-space: nowrap; }
.ab .pf-hl, .home-hero .hl { color: var(--v-amarillo) !important; }

/* Visualizador con fotos reales (Color e Inicio) */
.pf-photo { position: relative; width: 100%; overflow: hidden; background: #111; }
.pf-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-tint { position: absolute; inset: 0; mix-blend-mode: multiply; transition: background-color .9s var(--spring); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; pointer-events: none; }
.m-sala { -webkit-mask-image: url(../img/ambientes/sala1-mask.png?v=3); mask-image: url(../img/ambientes/sala1-mask.png?v=3); }
.m-estancia { -webkit-mask-image: url(../img/ambientes/sala2-mask.png?v=3); mask-image: url(../img/ambientes/sala2-mask.png?v=3); }
.m-recamara { -webkit-mask-image: url(../img/ambientes/recamara-mask.png?v=3); mask-image: url(../img/ambientes/recamara-mask.png?v=3); }
.m-comedor { -webkit-mask-image: url(../img/ambientes/comedor-mask.png?v=3); mask-image: url(../img/ambientes/comedor-mask.png?v=3); }
.m-oficina { -webkit-mask-image: url(../img/ambientes/oficina-mask.png?v=3); mask-image: url(../img/ambientes/oficina-mask.png?v=3); }
.m-fachada { -webkit-mask-image: url(../img/ambientes/fachada-mask.png?v=3); mask-image: url(../img/ambientes/fachada-mask.png?v=3); }
.viz-stage { background: var(--v-noche); max-width: 1000px; margin-inline: auto; box-shadow: 0 40px 80px rgba(14,14,46,.3); }
.viz-stage:has(.pf-photo) .viz-svg { max-width: 100%; }
.amb-ph { display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; }
.amb-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--spring); }
.amb:hover .amb-ph img { transform: scale(1.06); }
.amb { transition: transform .6s var(--spring), box-shadow .3s; }
.amb[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--v-magenta), 0 18px 34px rgba(229,38,122,.22); }
.ihero .ph .tag-ref { left: auto; }

/* Animaciones de producto (video ligero tipo GIF) */
.pcard2 .pimg.has-anim { border: 0; padding: 0; overflow: hidden; background: var(--v-noche); }
.pcard2 .pimg.has-anim video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--spring); }
.pcard2:hover .pimg.has-anim video { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .pcard2:hover .pimg.has-anim video { transform: none; } }

/* Inicio en celular: proyectos reales en una sola columna */
@media (max-width: 820px) {
  .ab [style*="repeat(12, minmax(0, 1fr))"] { grid-template-columns: 1fr !important; }
  .ab [style*="grid-column: span"] { grid-column: auto !important; }
  .ab .pf-card[style*="min-height: 600px"] { min-height: 460px !important; }
}
@media (max-width: 420px) {
  .ab [style*="repeat(2, minmax(0, 1fr))"] { gap: 10px !important; }
}
@media (min-width: 900px) { .amb-grid { grid-template-columns: repeat(4, 1fr); } }

/* Ambientes v2 (renders con muros lisos) */
.m-recamara2 { -webkit-mask-image: url(../img/ambientes/amb-recamara2-mask.png?v=6); mask-image: url(../img/ambientes/amb-recamara2-mask.png?v=6); }
.m-cocina { -webkit-mask-image: url(../img/ambientes/amb-cocina-mask.png?v=2); mask-image: url(../img/ambientes/amb-cocina-mask.png?v=2); }
.m-oficina2 { -webkit-mask-image: url(../img/ambientes/amb-oficina2-mask.png?v=7); mask-image: url(../img/ambientes/amb-oficina2-mask.png?v=7); }
.m-recepcion { -webkit-mask-image: url(../img/ambientes/amb-recepcion-mask.png?v=7); mask-image: url(../img/ambientes/amb-recepcion-mask.png?v=7); }
.m-pasillo { -webkit-mask-image: url(../img/ambientes/amb-pasillo-mask.png?v=6); mask-image: url(../img/ambientes/amb-pasillo-mask.png?v=6); }
.m-casa { -webkit-mask-image: url(../img/ambientes/amb-casa-mask.png?v=2); mask-image: url(../img/ambientes/amb-casa-mask.png?v=2); }
.m-condominio { -webkit-mask-image: url(../img/ambientes/amb-condominio-mask.png?v=6); mask-image: url(../img/ambientes/amb-condominio-mask.png?v=6); }

/* Paquetes de asesoría (Color) */
.ases-pkgs { display: grid; gap: 10px; margin: 22px 0 6px; }
.ases-pkg { background: #fff; border-radius: 18px; padding: 14px 18px; box-shadow: var(--shadow-sm); border-left: 6px solid var(--v-turq); }
.ases-pkg:nth-child(2) { border-left-color: var(--v-verde); }
.ases-pkg:nth-child(3) { border-left-color: var(--v-magenta); }
.ases-pkg.ases-more { border-left-color: var(--v-azul); }
.ases-pkg summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; }
.ases-pkg summary::-webkit-details-marker { display: none; }
.ases-pkg summary .t { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--azul-600); }
.ases-pkg summary .p { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--turquesa-600); }
.ases-pkg summary .d { grid-column: 1 / -1; font-size: 14px; color: var(--ink-muted); font-weight: 600; }
.ases-pkg .lead { margin: 10px 0 6px; font-weight: 700; color: var(--azul-600); }
.ases-pkg ul { margin: 6px 0 12px; padding-left: 18px; list-style: disc; font-size: 15px; color: var(--ink); }
.ases-pkg li { margin: 4px 0; }
.ases-pkg .btn { min-height: 44px; font-size: 15px; }

/* Posts de producto (Esmaltes a Tráfico) */
.pcard2 .pimg.has-post { aspect-ratio: 4 / 5; border: 0; padding: 0; overflow: hidden; background: #1A1A48; }
.pcard2 .pimg.has-post img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--spring); }
.pcard2:hover .pimg.has-post img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .pcard2:hover .pimg.has-post img { transform: none; } }
/* Etiqueta pequeña en héroes interiores (abajo a la derecha, sin estirarse) */
.ihero .ph .tag-ref { top: auto !important; bottom: 20px !important; left: auto !important; right: 20px !important; height: auto; }

/* Tienda: fotos reales del local */
.tienda-fotos { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; margin-top: 40px; height: 420px; }
.tienda-fotos figure { margin: 0; position: relative; border-radius: 22px; overflow: hidden; background: #eef6f9; }
.tienda-fotos img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--spring, ease); }
.tienda-fotos figure:hover img { transform: scale(1.04); }
.tienda-fotos figcaption { position: absolute; left: 14px; bottom: 14px; background: rgba(14,14,46,.72); color: #fff; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
@media (max-width: 760px) {
  .tienda-fotos { grid-template-columns: 1fr 1fr; height: auto; gap: 12px; }
  .tienda-fotos figure { aspect-ratio: 3 / 4; }
  .tienda-fotos .tf-ancha { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
}

/* Slogan Pinta Form en el pie de página */
.site-footer .slogan { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.35; color: #A2D680; margin: 14px 0 6px; }

/* Productos: imágenes cuadradas rediseñadas (catálogo Pinta Form) */
.pcard2 .pimg.has-sq { aspect-ratio: 1 / 1; border: 0; padding: 0; overflow: hidden; background: #14143a; }
.pcard2 .pimg.has-sq img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--spring); }
.pcard2:hover .pimg.has-sq img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .pcard2:hover .pimg.has-sq img { transform: none; } }

/* Tienda: bloque del sistema tintométrico */
.tinto-box { display: grid; grid-template-columns: minmax(0,420px) 1fr; gap: 40px; align-items: center; margin-top: 48px; }
.tinto-box img { width: 100%; height: auto; border-radius: 22px; display: block; }
.tinto-box h2 { margin: 8px 0 12px; }
@media (max-width: 760px) { .tinto-box { grid-template-columns: 1fr; gap: 20px; } }

/* Pie de página: redes sociales */
.site-footer .social { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.site-footer .social span { font-weight: 700; font-size: 15px; }
.site-footer .social a { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; transition: background .25s, transform .25s; }
.site-footer .social a:hover, .site-footer .social a:focus-visible { background: #76C442; color: #1A1A48; transform: translateY(-2px); }
.site-footer .social svg { width: 22px; height: 22px; display: block; }

/* Color: aviso de precios con asesor */
.ases-precio { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; background: #EEF8F1; border-left: 5px solid #76C442; border-radius: 16px; padding: 16px 20px; margin: 0 0 16px; color: #1A1A48; }
.ases-precio .btn { margin-left: auto; }
@media (max-width: 600px) { .ases-precio .btn { margin-left: 0; } }