/* Identidad Taj Mahal (ADN de marca, 2026-10-06).
   Se carga después de todas las hojas: sólo pisa colores y tipografías,
   así los archivos de Franco y Luz quedan intactos y el cambio se revierte sacando este archivo. */

@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fuentes/bodoni-moda.woff2) format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url(fuentes/bodoni-moda-italic.woff2) format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(fuentes/jost.woff2) format("woff2"); }

:root {
  --turquesa: #009A84;        /* pared del local */
  --turquesa-hondo: #00705F;  /* para fondos con texto blanco (contraste AA) */
  --turquesa-suave: #E3F2EE;
  --paper: #F7F4EE;           /* lino */
  --white: #FFFEFB;
  --ink: #1F2A2A;
  --olive: var(--turquesa-hondo);  /* el acento que usa toda la hoja original */
  --line: #DCD6CB;
  --serif: "Bodoni Moda", Didot, "Times New Roman", serif;
  --sans: "Jost", Futura, "Helvetica Neue", Arial, sans-serif;
}

body { font-family: var(--sans); }

/* Ficha: color con botones */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.color-chips-title { margin: 18px 0 8px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.color-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.color-chips button { font: 500 15px/1 var(--sans); padding: 11px 16px; min-height: 44px; background: var(--white); color: var(--ink); border: 1px solid var(--line); cursor: pointer; }
.color-chips button:hover:not(:disabled) { border-color: var(--turquesa-hondo); }
.color-chips button[aria-pressed="true"] { background: var(--turquesa-hondo); border-color: var(--turquesa-hondo); color: #fff; }
.color-chips button:disabled { color: #9a9a92; text-decoration: line-through; cursor: not-allowed; }
.color-chips button:focus-visible { outline: 2px solid var(--turquesa); outline-offset: 2px; }
.color-chips-note { min-height: 1.4em; margin: 8px 0 4px; font-size: 14px; color: var(--turquesa-hondo); font-weight: 500; }

/* Tarjetas: la cantidad de fotos no le sirve a la clienta */
.product-pics { display: none; }

/* Legibilidad: ningún texto que se lea por debajo de 14px, etiquetas en mayúscula
   con peso medio (Jost 400 en mayúsculas chicas se ve fino) y Bodoni sólo en
   tamaños grandes, donde sus trazos finos no se pierden. */
.eyebrow, .product-category, .color-chips-title,
.hero-signature span, .image-caption span, .header-social span,
.footer-note, footer p, dialog label {
  font-size: 14px !important; font-weight: 500; letter-spacing: .08em;
}
.announcement span, .announcement a, .promo-conditions { font-size: 13.5px !important; font-weight: 500; letter-spacing: .06em; }
.wordmark span { font-size: 10px !important; letter-spacing: .38em; font-weight: 500; }
#cartCount { font-size: 11px !important; font-weight: 600; min-width: 18px; height: 18px; line-height: 18px; }
.hero-signature p { font-size: 19px !important; font-weight: 500; }
.studio-name { font-weight: 500; }
.product-name { font-weight: 500; }
.product-amount { font-weight: 500; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Prendas nuevas (sin precio cargado todavía) */
.product-visual { position: relative; }
.new-badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--turquesa-hondo); color: #fff;
  font: 600 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 7px 10px; }
.is-new .product-amount { color: var(--turquesa-hondo); font-weight: 500; }
.nueva-aviso { margin: 4px 0 14px; font-size: 16px; line-height: 1.5; color: var(--ink); max-width: 40ch; }

/* Celular y tablet: que se sienta como una app y no como una página (guía
   mobile-native de Emil Kowalski, 2026-10-07). Todo se agrega acá, sin tocar
   style.css, detalles.css ni auth.css. */

/* 1. Sin mouse no existe "pasar por encima": el navegador deja el efecto
   trabado después de tocar (la foto queda agrandada, el botón de otro color).
   En pantallas táctiles se vuelve al estado de reposo de cada elemento. */
@media (hover: none), (pointer: coarse) {
  .hero-image:hover > img,
  .hero-detail button:hover img,
  .product-button:hover .product-visual img,
  .editorial-image:hover img,
  .category-circle:hover img,
  .fx-vivo.is-visto .category-circle:hover,
  .fx-btn:hover .fx-move,
  .vip-spin-hero:hover,
  .vip-spin-hero:hover .vip-spin-go,
  .vip-pick button:hover,
  .rt-gold:hover { transform: none; }
  .product-button:hover .product-visual .second { opacity: 0; }
  .fx-vivo .category-circle:hover > span::before { filter: none; }
  .vip-flip.vip-card-v2:hover .vip-flip-in { transform: none; }
  .vip-flip.vip-card-v2.is-flipped:hover .vip-flip-in { transform: rotateY(180deg); }
  .vip-spin-hero:hover .vip-wheel { animation-duration: 5s; }
  .button.dark:hover { background: var(--olive); }
  .button.outline:hover,
  .round:hover { background: transparent; }
  .vip-invite:hover { background: var(--white); }
  .header-social:hover,
  .header-contact:hover { color: inherit; }
}

/* 2. Respuesta al apoyar el dedo, no al levantarlo: un leve achique mientras
   se presiona. Se usa la propiedad "scale" (no transform) para no pisar los
   movimientos que ya tienen estos elementos. */
.button:active,
.round:active,
.icon-button:active,
.category-tabs button:active,
.color-chips button:not(:disabled):active,
.floating-contact:active,
.shop-assistant-launch:active,
.share-product:active { scale: .97; }
.product-button:active .product-visual,
.hero-image:active,
.category-circle:active > span { scale: .98; }

/* 3. La ficha de producto, el carrito y "Mi cuenta" scrollean adentro: al
   llegar al final no tienen que arrastrar la página de atrás. */
dialog,
.cart-drawer { overscroll-behavior: contain; }

/* 4. En iPhone y iPad, un campo con letra de menos de 16px hace que la página
   se agrande al tocarlo y no vuelva. La hoja original lo arregla solo hasta
   520px de ancho; acá vale para toda pantalla táctil (tablets incluidas). */
@media (pointer: coarse) {
  #search,
  #sort,
  #productOptions select,
  #assistantInput,
  .contact-form input,
  .contact-form select,
  .contact-form textarea { font-size: 16px; }
}


/* ==========================================================================
   Pulido de diseño, celular primero (diseñadora web de Fragua, 2026-10-07).
   Método: critique + audit de impeccable, después polish / typeset / layout,
   más las guías de Emil Kowalski (design-eng y mobile-native).
   Todo pisa a style.css / detalles.css desde acá, con igual o mayor
   especificidad; sacando este bloque la web vuelve a como estaba.
   ========================================================================== */

/* A. Una sola familia de neutros. La hoja original trae los grises verdosos
   de la plantilla anterior (oliva #3f493b, salvia #e6e9df, #dde1d3, negro
   #080808, dorado #c2a46a, foco marrón #986740) mezclados con el turquesa y
   el lino de Taj Mahal: por eso se ve "armada con partes". Se derivan todos
   del lino y del turquesa (la disciplina de pocos colores de la referencia,
   con la paleta propia). Contrastes medidos con la fórmula WCAG:
   texto secundario #4B5555 sobre lino 7,0:1; borde de campo #7D8380 sobre
   lino 3,5:1 (mínimo 3:1 para bordes de controles). */
:root {
  --lino-2: #EFEBE3;         /* superficies: fondo de fotos, pie, banners */
  --lino-3: #E7E2D8;         /* franjas al costado de las fotos del banner */
  --turquesa-claro: #CDE9E2; /* texto destacado sobre turquesa hondo (4,7:1) */
  --borde-campo: #7D8380;    /* bordes de campos y botones redondos */
  --muted: #4B5555;          /* texto secundario: el gris de la tinta, no oliva */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-cajon: cubic-bezier(.32, .72, 0, 1);  /* curva tipo iOS para paneles */
}
header { background: rgba(247, 244, 238, .95); }
.hero-carousel,
.hero-slide,
.hero-slide:nth-child(2),
.hero-slide:nth-child(3) { background: var(--lino-2); }
.hero-slide .hero-image { background: var(--lino-3); }
.product-visual,
.main-photo-button { background: var(--lino-2); }
.editorial,
.editorial-image { background: var(--turquesa-suave); }   /* "Te vas a enamorar" queda como un momento de marca */
footer { background: var(--lino-2); }
.footer-bottom,
.studio-credit,
.studio-cta { border-color: var(--line); }
.image-caption,
.hero-slide .image-caption,
.main-photo-button > span { background: rgba(247, 244, 238, .95); color: var(--ink); }
.product-visual .product-arrow,
.hero-navigation { background: rgba(247, 244, 238, .92); }
.round,
.assistant-suggestions button,
.contact-form input,
.contact-form select,
.contact-form textarea,
#productOptions select,
#assistantInput,
.shop-assistant-launch { border-color: var(--borde-campo); }
.share-product { border-bottom-color: var(--borde-campo); }
.shop-assistant { border-color: var(--line); }
.assistant-message { background: var(--lino-2); }
.rail-controls .motion-toggle[aria-pressed="true"] { background: var(--turquesa-suave); }
.story-number { border-color: rgba(247, 244, 238, .35); }
.story-copy em { color: var(--turquesa-claro); }
.floating-contact { border-color: rgba(255, 255, 255, .28); box-shadow: 0 6px 20px -6px rgba(31, 42, 42, .45); }
dialog::backdrop { background: rgba(31, 42, 42, .8); }
input::placeholder,
textarea::placeholder { color: #5A6262; }   /* 5,7:1 sobre lino */

/* La barra de avisos pasa del negro al turquesa hondo: el celular ya pinta la
   barra de estado con ese color (meta theme-color #00705F), así que arriba de
   todo se ve una sola franja de marca en vez de turquesa + negro. Blanco sobre
   #00705F: 6,0:1. Texto a 14px (era 13,5) y alto de 44px para que
   "Condiciones" y la pausa se puedan tocar con el dedo. */
.announcement,
.promo-conditions,
.announcement > .motion-toggle { background: var(--turquesa-hondo); }
.announcement > .motion-toggle { border-left-color: rgba(255, 255, 255, .25); }
.announcement.motion-paused > .motion-toggle { color: var(--turquesa-claro); }
.announcement span, .announcement a, .promo-conditions { font-size: 14px !important; }  /* la regla de legibilidad de más arriba usa !important */
@media (prefers-reduced-motion: no-preference) {
  .announcement,
  .promo-conditions,
  .announcement > .motion-toggle { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .announcement, .marquee-window { min-height: 44px; }   /* acá el texto se acomoda en varias líneas: alto libre */
  .announcement > .motion-toggle { height: 44px; }
}

/* Hovers de escritorio que todavía viraban al oliva. Sólo con mouse
   (en táctil ya los neutraliza el bloque de celular de más arriba).
   #005A4C con texto blanco: 8,2:1. */
@media (hover: hover) and (pointer: fine) {
  .button.dark:hover { background: #005A4C; }
  .button.outline:hover,
  .round:hover { background: var(--lino-2); }
  .header-social:hover,
  .header-contact:hover { color: var(--turquesa-hondo); }
}

/* B. Lo que el navegador dibuja solo también lleva la marca: foco, selección,
   cursor de texto, barra de desplazamiento y números de precios. Es la señal
   más barata de que la web se hizo a mano y no se armó con plantilla. */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, div[tabindex]:focus-visible { outline: 2px solid var(--turquesa-hondo); }
.story a:focus-visible,
.announcement a:focus-visible,
.announcement button:focus-visible { outline-color: #fff; }   /* sobre turquesa, el anillo va en blanco */
::selection { background: var(--turquesa-claro); color: var(--ink); }
input, textarea, select { caret-color: var(--turquesa-hondo); accent-color: var(--turquesa-hondo); }
.product-rail { scrollbar-color: rgba(0, 112, 95, .45) transparent; }
.product-amount, .product-price, .cart-subtotal, .cart-line-price, .assistant-price, #cartCount {
  font-variant-numeric: lining-nums tabular-nums;
}

/* C. Tipografía: títulos de dos líneas equilibrados (sin una palabra sola
   colgando abajo) y párrafos sin viudas. Bodoni Moda sólo en tamaños grandes:
   el título de prenda del asistente (18px) pasa a Jost, como pide la ficha. */
h1, h2, h3 { text-wrap: balance; }
.hero-description, #productDescription, .nueva-aviso, .service-link p,
.editorial-copy p, .story-copy p, .product-name { text-wrap: pretty; }
.assistant-product-title { font-family: var(--sans); font-weight: 500; font-size: 17px; line-height: 1.3; }
@media (max-width: 600px) {
  .category-circle strong { font-size: 14px; }   /* bajaba a 13px en el celular */
}

/* D. "Nuevo" en 102 de 135 prendas: una faja turquesa maciza en 3 de cada 4
   fotos deja de avisar y se vuelve ruido sobre la prenda. Se aquieta a una
   etiqueta lino con letra turquesa: la información queda, la foto manda.
   #00705F sobre lino: 5,5:1. Letra a 14px (era 13). */
.new-badge {
  top: 8px; left: 8px;
  background: rgba(247, 244, 238, .94); color: var(--turquesa-hondo);
  font: 500 14px/1 var(--sans); letter-spacing: .08em; padding: 7px 9px;
}

/* E. Encabezado del celular: de 85px a 64px fijos arriba (en un teléfono de
   667px de alto son 21px más de prendas a la vista en todo momento), y los
   íconos pasan de 33px a 44px de ancho para no errarle con el dedo. Para que
   entren, el WhatsApp del encabezado se oculta en celular: el botón flotante
   de WhatsApp ya está siempre visible (la hoja original también lo ocultaba). */
@media (max-width: 800px) {
  html { scroll-padding-top: 76px; }
  header, header.scrolled { height: 64px; grid-template-columns: 44px 1fr 132px; }
  #navigation { top: 64px; }
  .menu-toggle { width: 44px; min-width: 44px; }
  .header-actions .header-contact { display: none; }
  .header-social, .account-toggle, .cart-toggle { width: 44px; min-width: 44px; }
}
@media (max-width: 360px) {
  .wordmark span { letter-spacing: .3em; }   /* que "INDUMENTARIA" no se salga de su columna */
}

/* F. Objetivos táctiles de 44px que faltaban: puntitos del banner (eran de
   8px), pausa del banner (32px), flechas del banner (40px), flechas de
   Destacados (36px), cerrar ficha (40px), flechas de fotos de la ficha,
   orden del catálogo (30px de alto), + y − del carrito (27px), enlaces
   subrayados (39px) y enlaces del pie (22px). El punto se sigue viendo chico:
   lo que crece es la zona que recibe el toque. */
.hero-navigation { gap: 0; padding: 0 6px; }
.hero-slide .image-caption { bottom: 72px; }   /* la botonera ahora mide 44px de alto: el epígrafe sube para no pisarla */
.hero-dots { gap: 0; }
.hero-dots button,
.hero-dots button[aria-pressed="true"] { position: relative; width: 44px; height: 44px; border: 0; border-radius: 0; background: none; }
.hero-dots button::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px; margin: -4px 0 0 -4px; box-sizing: border-box;
  border: 1px solid var(--turquesa-hondo); border-radius: 999px; background: transparent;
  transition: width .24s var(--ease-out), margin .24s var(--ease-out), background-color .2s ease;
}
.hero-dots button[aria-pressed="true"]::before { width: 20px; margin-left: -10px; background: var(--turquesa-hondo); }  /* el activo se estira: se ve cuál es sin contar */
.hero-pause { min-width: 44px; min-height: 44px; color: var(--turquesa-hondo); }
.dialog-close { width: 44px; height: 44px; }
#photoPrev, #photoNext { width: 44px; height: 44px; }
.cart-quantity button { min-width: 44px; min-height: 44px; }
.underlined { padding: 11px 0; }
.footer-top > div > a { display: flex; align-items: center; min-height: 44px; margin: 0; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 800px) {
  .hero-arrow.fx-btn { width: 44px; height: 44px; }
}
@media (max-width: 520px) {
  .rail-controls .round { width: 44px; height: 44px; }
  .sort-label select { min-height: 44px; padding: 3px 8px; }
}

/* G. Flechas y círculos de categoría (detalles.css): el dorado #c2a46a no
   está en la paleta de Taj Mahal y los círculos se movían sin parar (flotan,
   el anillo gira y cruza un brillo), sumados a la barra que corre y a banner,
   Destacados y Novedades que avanzan solos: cinco cosas moviéndose a la vez en
   la portada, mucho para mirar tranquila. Queda la entrada escalonada (un solo
   momento con intención) y un anillo turquesa quieto. */
.fx-btn { background: rgba(247, 244, 238, .88) !important; color: var(--turquesa-hondo) !important;   /* el original usa !important */
  box-shadow: inset 0 0 0 1px rgba(0, 112, 95, .3), 0 8px 22px -12px rgba(31, 42, 42, .5); }
.fx-ring { stroke: var(--turquesa); }
.fx-btn:focus-visible { outline-color: var(--turquesa-hondo); }
.fx-vivo .category-circle > span { animation: none; }
.fx-vivo .category-circle > span::before { animation: none; background: var(--turquesa); opacity: .6; }
.fx-vivo .category-circle > span::after { content: none; }
.fx-vivo .category-circle strong::after { background: var(--turquesa); }

/* H. Respuesta al toque con transición: el achique al presionar (scale .97,
   del bloque de celular) era un salto seco. 160ms con salida rápida, como un
   botón nativo; los colores siguen en 200ms. No se tocan las flechas fx-btn,
   que ya traen su propia transición. */
.button { transition: background-color .2s ease, color .2s ease, border-color .2s ease, scale .16s var(--ease-out); }
.round:not(.fx-btn),
.icon-button,
.category-tabs button,
.color-chips button,
.floating-contact,
.shop-assistant-launch,
.share-product,
.product-button .product-visual,
.hero-image,
.fx-vivo .category-circle > span { transition: background-color .2s ease, scale .16s var(--ease-out); }

/* I. Controles que se sienten de app: sin letra que se seleccione al dejar el
   dedo apoyado en un botón (las fotos sí se pueden mantener apretadas para
   guardarlas o compartirlas: es lo que hacen las clientas por WhatsApp), y
   sin que el teléfono agrande la letra solo al girarlo. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.button, .round, .icon-button, .menu-toggle, .category-tabs button, .hero-dots button,
.hero-pause, .color-chips button, .floating-contact, .shop-assistant-launch {
  -webkit-user-select: none; user-select: none;
}

/* J. Banner del celular: el texto tenía un alto fijo de 290px; con una
   descripción de dos líneas o la letra del teléfono más grande se pisaba con
   la foto. Ahora el texto ocupa lo que necesita y la foto queda en 440px. */
@media (max-width: 520px) {
  .hero-slide { height: auto; grid-template-rows: auto 440px; }
  .hero-slide .hero-text { min-height: 0; }
}

/* K. Aire entre secciones, densidad adentro (lo mejor de la referencia): en
   el celular las secciones de la portada iban pegadas (22 a 30px) y se leían
   como una sola lista larga. Ahora cada una respira como un capítulo. */
@media (max-width: 520px) {
  .category-circles { padding: 28px 5% 32px; }
  .edit-section, .new-section { padding: 48px 5% 40px; }
  .service-strip { padding: 40px 7%; gap: 28px; }
  .service-link { padding-bottom: 24px; }
  .editorial-copy { padding: 44px 7% 48px; }
}

/* L. La ficha en el celular ocupa toda la pantalla, como en una app (antes era
   una caja al 96% con bordes del fondo asomando). En las prendas nuevas sin
   precio, "Pedila por WhatsApp" es el único camino de compra (102 de 135): el
   botón queda pegado abajo mientras se mira la prenda, en vez de quedar
   escondido debajo de la foto. */
@media (max-width: 520px) {
  #productDialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; }
}
@media (max-width: 800px) {
  #askProduct.dark { position: sticky; bottom: 12px; z-index: 3; box-shadow: 0 10px 24px -10px rgba(31, 42, 42, .55); }
}

/* M. Entradas de ficha y carrito: aparecían de golpe. La ficha sube 12px y
   aparece en 280ms; el carrito entra desde la derecha (de donde está su
   botón) con la curva de cajón de iOS; el fondo oscuro se funde en 200ms.
   Sólo la entrada (la salida queda instantánea, que es lo esperable al
   cerrar). Con "reducir movimiento" no se anima nada. */
@media (prefers-reduced-motion: no-preference) {
  #productDialog[open] { transition: opacity .2s ease-out, transform .28s var(--ease-out); }
  .cart-drawer[open] { transition: transform .34s var(--ease-cajon); }
  dialog[open]::backdrop { transition: opacity .2s ease-out; }
  .hero-track { transition: transform .5s var(--ease-cajon); }   /* era .85s: al soltar el dedo el banner tardaba en acomodarse */
  @starting-style {
    #productDialog[open] { opacity: 0; transform: translateY(12px); }
    .cart-drawer[open] { transform: translateX(100%); }
    dialog[open]::backdrop { opacity: 0; }
  }
}

/* Un solo camino de compra en la ficha (07/10/2026, ver ficha.js): cuotas a la vista,
   «Comprar» que lleva a la Tiendanube oficial y «Cómo comprar» en 3 pasos. */
.ficha-cuotas { margin: -6px 0 14px; font-size: 16px; font-weight: 500; color: var(--turquesa-hondo); font-variant-numeric: tabular-nums; }
.como-comprar { margin: 18px 0 6px; padding: 16px 18px; background: var(--turquesa-suave); }
.como-comprar-titulo { margin: 0 0 8px; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--turquesa-hondo); }
.como-comprar ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.como-comprar strong { font-weight: 600; }

/* El carrito local no pasa a Tiendanube: con un solo botón «Comprar» por prenda, el ícono del
   carrito quedaría siempre vacío. Se oculta acá (una línea, se revierte borrándola). */
.cart-toggle { display: none !important; }

/* «Comprar» pasa a ser el botón principal: la hoja original lo dejaba con borde y fondo
   transparente (#buyProduct en style.css) porque antes el principal era «Agregar al carrito».
   En el celular queda fijo abajo, igual que «Pedila por WhatsApp». */
#buyProduct { background: var(--olive); color: var(--white); border: 1px solid var(--olive); width: 100%; margin-bottom: 8px; }
@media (hover: hover) and (pointer: fine) { #buyProduct:hover { background: #005A4C; border-color: #005A4C; } }
@media (max-width: 800px) {
  #buyProduct { position: sticky; bottom: 12px; z-index: 3; box-shadow: 0 10px 24px -10px rgba(31, 42, 42, .55); }
}