/* MyJ Sublimaciones — estilos */
@font-face { font-family: "Anton"; src: url("../fonts/anton-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --tinta: #151515;
  --fondo: #F5F4F2;
  --blanco: #FFFFFF;
  --linea: #DEDBD5;
  --texto-2: #5C5852;
  --rosa: #F20A62;
  --rosa-fuerte: #D10056;
  --rosa-oscuro: #A80045;
  --rosa-claro: #FF6FA3;
  --wa: #128C4A;
  --wa-oscuro: #0E7039;
  --display: "Anton", "Arial Narrow", "Helvetica Neue", sans-serif;
  --texto: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ancho: 1120px;
  --lado: 20px;
}
@media (min-width: 900px) { :root { --lado: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 140px; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--texto); font-size: 17px; line-height: 1.55; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rosa-fuerte); }
a:hover { color: var(--rosa-oscuro); }
:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }

.saltar { position: absolute; left: -9999px; top: 0; background: var(--blanco); color: var(--tinta); padding: 12px 16px; z-index: 100; }
.saltar:focus { left: 12px; top: 12px; }

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 20; background: var(--tinta); padding-top: env(safe-area-inset-top, 0px); }
.cabecera__in { max-width: var(--ancho); margin: 0 auto; padding: 12px var(--lado); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.marca { display: block; }
.marca img { width: 170px; height: auto; }
.menu { order: 3; flex-basis: 100%; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu a { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 44px; padding: 0 11px; border-radius: 999px; border: 1px solid #3A3A3A; color: var(--blanco); font-size: 14px; font-weight: 700; text-decoration: none; }
.menu a:hover { border-color: var(--blanco); color: var(--blanco); }
.menu a[aria-current="page"] { background: var(--blanco); border-color: var(--blanco); color: var(--tinta); }
.cabecera__wa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 999px; background: var(--wa); color: var(--blanco); font-weight: 700; font-size: 15px; text-decoration: none; }
.cabecera__wa:hover { background: var(--wa-oscuro); color: var(--blanco); }
.cabecera__wa span { display: none; }
.menu .largo { display: none; }
@media (min-width: 900px) {
  .cabecera__in { flex-wrap: nowrap; padding-top: 16px; padding-bottom: 16px; }
  .marca img { width: 210px; }
  .menu { order: 0; flex-basis: auto; margin: 0 0 0 auto; padding: 0; overflow: visible; gap: 4px; }
  .menu a { border-color: transparent; font-size: 15px; padding: 0 14px; }
  .cabecera__wa { padding: 0 18px; }
  .cabecera__wa span { display: inline; }
  .menu .largo { display: inline; }
  .menu .corto { display: none; }
}

/* Estructura */
.seccion { padding: 48px 0; }
.seccion--sin-arriba { padding-top: 0; }
.seccion--blanca { background: var(--blanco); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.seccion__in { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--lado); }
.angosto { max-width: 680px; }
.seccion__cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 24px; }
.seccion h2, .intro h1 { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: 1.02; letter-spacing: 0.5px; }
.seccion h2 { font-size: clamp(32px, 5vw, 46px); }
.seccion > .seccion__in > h2 { margin-bottom: 24px; }
.intro { display: grid; gap: 12px; margin-bottom: 32px; }
.intro h1 { font-size: clamp(44px, 8vw, 64px); }
.intro p { color: var(--texto-2); max-width: 60ch; }
.enlace { font-weight: 700; }
.nota { margin-top: 32px; color: var(--texto-2); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 900px) { .seccion { padding: 80px 0; } .seccion--sin-arriba { padding-top: 0; } }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 12px; border: 2px solid transparent; font-family: var(--texto); font-size: 17px; font-weight: 700; text-decoration: none; text-align: center; cursor: pointer; }
.btn--rosa { background: var(--rosa-fuerte); color: var(--blanco); }
.btn--rosa:hover { background: var(--rosa-oscuro); color: var(--blanco); }
.btn--linea-clara { border-color: var(--blanco); color: var(--blanco); }
.btn--linea-clara:hover { background: var(--blanco); color: var(--tinta); }
.btn--linea { border-color: var(--tinta); color: var(--tinta); background: var(--blanco); }
.btn--linea:hover { background: var(--tinta); color: var(--blanco); }
.btn--blanco { background: var(--blanco); color: var(--tinta); }
.btn--blanco:hover { background: var(--tinta); color: var(--blanco); }
.btn--tinta { background: var(--tinta); color: var(--blanco); }
.btn--tinta:hover { background: #333; color: var(--blanco); }
.btn--wa { background: var(--wa); color: var(--blanco); min-height: 56px; }
.btn--wa:hover { background: var(--wa-oscuro); color: var(--blanco); }
.btn--ancho { width: 100%; }

/* Portada */
.portada { background: var(--tinta); color: var(--blanco); }
.portada__in { max-width: var(--ancho); margin: 0 auto; padding: 40px var(--lado) 48px; display: grid; gap: 32px; align-items: center; }
.portada__txt { display: grid; gap: 20px; }
.portada h1 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(46px, 11vw, 80px); line-height: 0.98; letter-spacing: 0.5px; }
.trazo { width: min(362px, 78%); margin-top: -8px; }
.portada p { font-size: 18px; color: #E8E6E1; max-width: 46ch; }
.portada__foto { border-radius: 18px; }
.portada--empresas .portada__in { padding-bottom: 56px; }
@media (min-width: 900px) {
  .portada__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; padding-top: 72px; padding-bottom: 88px; }
  .portada__in--una { grid-template-columns: minmax(0, 1fr); }
}

/* Fotos y recuadros de color */
.foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.foto--vacia { display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; }
.foto--vacia span { font-family: var(--display); text-transform: uppercase; font-size: 24px; line-height: 1.05; }
.tinte-rosa { background: #FDE3EC; color: #8A0038; }
.tinte-cian { background: #DDEFF7; color: #0B4F6C; }
.tinte-amarillo { background: #FFF3C4; color: #6B5600; }
.tinte-gris { background: #ECEAE6; color: #4A4741; }
.portada .foto--vacia { aspect-ratio: 5 / 4; }
.portada .foto--vacia span { font-size: 32px; }

/* Promociones */
.grilla-promos { display: grid; gap: 16px; }
@media (min-width: 700px) { .grilla-promos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grilla-promos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.promo { display: flex; flex-direction: column; gap: 14px; padding: 16px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 18px; }
.promo--destacada { border: 2px solid var(--rosa); }
.promo__txt { display: grid; gap: 4px; flex-grow: 1; }
.promo h3 { font-size: 20px; line-height: 1.25; }
.promo__txt p { color: var(--texto-2); font-size: 16px; }
.promo .precio { font-family: var(--display); font-size: 40px; line-height: 1.1; color: var(--tinta); margin-top: 6px; }
.promo--destacada .precio { color: var(--rosa-fuerte); }

/* Categorías */
.grilla-categorias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .grilla-categorias { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.categoria { display: flex; align-items: flex-end; min-height: 104px; padding: 16px; border-radius: 16px; font-size: 18px; font-weight: 700; line-height: 1.25; text-decoration: none; }
.categoria:hover { text-decoration: underline; text-underline-offset: 4px; }
.categoria.tinte-rosa, .categoria.tinte-cian, .categoria.tinte-amarillo, .categoria.tinte-gris { color: var(--tinta); }

/* Pasos */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; counter-reset: paso; }
@media (min-width: 900px) { .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.pasos li { counter-increment: paso; display: grid; gap: 6px; padding-left: 60px; position: relative; }
.pasos li::before { content: counter(paso); position: absolute; left: 0; top: -4px; width: 44px; height: 44px; border-radius: 999px; background: var(--rosa-fuerte); color: var(--blanco); font-family: var(--display); font-size: 22px; display: flex; align-items: center; justify-content: center; }
.pasos h3 { font-size: 19px; }
.pasos p { color: var(--texto-2); font-size: 16px; }

/* Banda empresas */
.banda-empresas { background: #FDE3EC; padding: 44px 0; }
.banda-empresas__in { display: grid; gap: 20px; align-items: center; }
.banda-empresas h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 5vw, 42px); line-height: 1.05; margin-bottom: 8px; }
.banda-empresas p { max-width: 56ch; }
.banda-empresas .btn--blanco { background: var(--tinta); color: var(--blanco); }
.banda-empresas .btn--blanco:hover { background: #333; }
@media (min-width: 900px) { .banda-empresas__in { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; } }

/* Catálogo */
.catalogo { display: grid; gap: 40px; }
@media (min-width: 1000px) { .catalogo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; } }
.seccion h2.catalogo__grupo { font-family: var(--texto); text-transform: none; font-weight: 700; font-size: 24px; letter-spacing: 0; margin-bottom: 16px; }
.lista-items { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.item { display: flex; align-items: center; gap: 14px; padding: 12px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 16px; }
.item__foto { width: 72px; flex-shrink: 0; aspect-ratio: 1; border-radius: 10px; }
.item__foto.foto--vacia { padding: 4px; }
.item__foto.foto--vacia span { font-size: 11px; }
.item__txt { flex-grow: 1; display: grid; gap: 2px; min-width: 0; }
.item h3 { font-size: 17px; line-height: 1.3; }
.item p { font-size: 15px; color: var(--texto-2); line-height: 1.4; }
.item p.desde { color: var(--tinta); font-weight: 700; }
.item .btn { min-height: 44px; padding: 0 14px; font-size: 15px; flex-shrink: 0; }

/* Formularios */
.formulario { display: grid; gap: 32px; }
.formulario fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.formulario legend { font-size: 20px; font-weight: 700; margin-bottom: 12px; padding: 0; }
.formulario label, .etiqueta { font-size: 15px; font-weight: 700; margin-top: 6px; }
.opcional { font-weight: 400; color: var(--texto-2); }
.formulario input[type="text"], .formulario input[type="email"], .formulario input[type="number"], .formulario textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid #A8A296; border-radius: 12px; background: var(--blanco); color: var(--tinta); font: inherit; font-size: 17px; }
.formulario textarea { resize: vertical; }
.formulario input:focus, .formulario textarea:focus { outline: 3px solid var(--rosa); outline-offset: 1px; border-color: var(--tinta); }
.opciones { display: grid; gap: 10px; }
.formulario .opcion { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; margin: 0; padding: 12px 16px; background: var(--blanco); border: 2px solid var(--linea); border-radius: 14px; cursor: pointer; font-size: 17px; font-weight: 400; }
.opcion input, .pastilla input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion__txt { display: grid; gap: 2px; }
.opcion__txt strong { font-size: 17px; }
.opcion__txt small { font-size: 14px; color: var(--texto-2); }
.opcion__precio { font-weight: 700; white-space: nowrap; }
.opcion:has(input:checked) { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
.opcion:has(input:checked) small { color: #D6D3CD; }
.opcion:has(input:focus-visible), .pastilla:has(input:focus-visible) { outline: 3px solid var(--rosa); outline-offset: 2px; }
.cantidad { display: flex; align-items: center; gap: 12px; }
.cantidad__btn { width: 52px; height: 52px; flex-shrink: 0; border-radius: 12px; border: 2px solid var(--tinta); background: var(--blanco); color: var(--tinta); font-size: 26px; font-weight: 700; line-height: 1; cursor: pointer; }
.cantidad__btn--mas { background: var(--tinta); color: var(--blanco); }
.cantidad input[type="number"] { width: 72px; text-align: center; font-family: var(--display); font-size: 28px; padding: 6px; -moz-appearance: textfield; }
.cantidad input::-webkit-outer-spin-button, .cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.total { margin-left: auto; text-align: right; display: grid; }
.total span { font-size: 13px; color: var(--texto-2); }
.total output { font-family: var(--display); font-size: 32px; line-height: 1.1; }
.dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.grilla-marcas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.formulario .pastilla { position: relative; margin: 0; display: flex; }
.pastilla span { flex-grow: 1; display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 8px 12px; border: 2px solid var(--linea); border-radius: 12px; background: var(--blanco); text-align: center; font-size: 16px; font-weight: 700; line-height: 1.25; cursor: pointer; }
.pastilla:has(input:checked) span { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
.mensaje { padding: 16px; border-radius: 14px; background: #E3F4E9; border: 1px solid #9FD3B2; color: #0E3B22; white-space: pre-line; font-size: 16px; }
.consejo { padding: 14px 16px; border-radius: 14px; background: #FFF3C4; color: #3D3200; font-size: 15px; }
.aviso { padding: 16px; border-radius: 14px; background: #FDE3EC; margin-bottom: 24px; }

/* Pie */
.pie { background: var(--tinta); color: #E8E6E1; padding: 48px 0 calc(24px + env(safe-area-inset-bottom, 0px)); }
.pie__in { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--lado); display: grid; gap: 32px; }
@media (min-width: 900px) { .pie__in { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; } }
.pie__marca { display: grid; gap: 16px; justify-items: start; }
.pie__marca img { width: 170px; }
.pie__col { display: grid; gap: 8px; align-content: start; }
.pie h2 { font-size: 15px; color: var(--rosa-claro); margin-bottom: 4px; }
.pie a { color: var(--blanco); font-weight: 700; text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.pie a:hover { text-decoration: underline; color: var(--blanco); }
.pie__legal { max-width: var(--ancho); margin: 40px auto 0; padding: 0 var(--lado); font-size: 14px; color: #A9A59E; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* Contacto */
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.grilla-marcas--una { grid-template-columns: minmax(0, 1fr); }
.formulario .error { color: #A1001F; font-size: 15px; font-weight: 700; }
.formulario [aria-invalid="true"] { border-color: #A1001F; border-width: 2px; }
.exito { padding: 16px; border-radius: 14px; background: #E3F4E9; border: 1px solid #9FD3B2; color: #0E3B22; }
.nota-legal { font-size: 14px; color: var(--texto-2); }
.formulario .nota { margin-top: 4px; }

/* WhatsApp: ambos números */
.banda-wa { background: var(--blanco); border-top: 1px solid var(--linea); padding: 40px 0; }
.banda-wa__in { display: grid; gap: 20px; align-items: center; }
.banda-wa h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(28px, 4.5vw, 38px); line-height: 1.05; margin-bottom: 6px; }
.banda-wa p { color: var(--texto-2); }
.banda-wa__nums { display: grid; gap: 12px; }
.banda-wa .btn--wa { font-size: 19px; letter-spacing: 0.3px; }
@media (min-width: 900px) {
  .banda-wa__in { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; }
  .banda-wa__nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .banda-wa .btn--wa { padding: 0 28px; }
}
.otro-numero { font-size: 15px; color: var(--texto-2); text-align: center; }
.otro-numero a { font-weight: 700; }