/* ==========================================================================
   PAHISSA PIÉ — El personalizador, dentro del sistema visual 2026
   --------------------------------------------------------------------------
   El personalizador es una aplicación aparte con sus propios colores y
   tipografías (Montserrat y Open Sans sobre naranja claro). Esta hoja NO
   reescribe la aplicación: aprovecha que sus colores están declarados como
   variables y los sustituye por los de la marca, y le pone la cabecera y el
   pie del rediseño alrededor.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800&family=DM+Sans:wght@400;500;700&display=swap');

/* --- 1. La paleta de la aplicación pasa a ser la de la marca -------------- */
:root,
#root,
.dark {
  /* Naranja tinta #DF4D00 en lugar del naranja claro original */
  --primary: 21 100% 44%;
  --ring: 21 100% 44%;
  --primary-foreground: 40 30% 97%;

  /* Neutros del rediseño */
  --background: 40 30% 96%;      /* blanco roto  #F8F6F2 */
  --foreground: 30 26% 7%;       /* antracita    #18130E */
  --card: 0 0% 100%;
  --card-foreground: 30 26% 7%;
  --popover: 0 0% 100%;
  --popover-foreground: 30 26% 7%;
  --muted: 36 20% 93%;
  --muted-foreground: 30 8% 40%;
  --secondary: 32 63% 89%;       /* arena        #F5E5D3 */
  --secondary-foreground: 30 26% 7%;
  --accent: 32 63% 89%;
  --accent-foreground: 30 26% 7%;
  --border: 30 12% 86%;
  --border-subtle: 30 12% 91%;
  --input: 30 12% 86%;

  /* El azul decorativo pasa al azul taller #005477 */
  --gradient-teal: linear-gradient(135deg, hsl(199 100% 23%), hsl(199 100% 30%));
  --gradient-warm: linear-gradient(135deg, hsl(21 100% 44%), hsl(21 100% 52%));
  --gradient-warm-soft: linear-gradient(135deg, hsl(32 63% 92%), hsl(40 30% 97%));

  --ease-smooth: cubic-bezier(.22, 1, .36, 1);
}

/* --- 2. Tipografía -------------------------------------------------------- */
#root,
#root button,
#root input,
#root select,
#root textarea {
  font-family: "DM Sans", "Open Sans", system-ui, sans-serif;
}
#root h1,
#root h2,
#root h3,
#root h4,
#root .font-display {
  font-family: "Archivo", "Montserrat", system-ui, sans-serif;
  letter-spacing: -0.02em;
}

/* --- 3. Botones con el acabado del sistema -------------------------------- */
#root button:not([class*="rounded-full"]) {
  border-radius: 4px;
}
#root [class*="bg-primary"] {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* --- 4. La aplicación convive con la cabecera y el pie del rediseño ------- */
body.pp-personalizador {
  background: var(--pp-paper, #F8F6F2);
}
body.pp-personalizador #root {
  min-height: 60vh;
  padding-top: clamp(5rem, 9vw, 7rem);   /* hueco para la cabecera fija */
}
body.pp-personalizador .pahissa-server-seo-h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* El pie no debe heredar los estilos de la aplicación. */
body.pp-personalizador > footer {
  margin-top: clamp(3rem, 6vw, 5rem);
}

/* --- 5. Pantalla de carga mientras arranca la aplicación ------------------ */
.pahissa-app-fallback {
  max-width: 82.5rem;
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
}
.pahissa-app-fallback__eyebrow {
  font-family: "Archivo", sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6B6259;
}
.pahissa-app-fallback h1 {
  font-family: "Archivo", sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  margin: .75rem 0 1rem;
}
.pahissa-app-fallback__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.pahissa-app-fallback__card {
  background: #fff;
  border: 1px solid rgba(24, 19, 14, .12);
  border-radius: 4px;
  padding: 1.25rem;
}
.pahissa-app-fallback__card strong {
  display: block;
  font-family: "Archivo", sans-serif;
  margin-bottom: .25rem;
}
.pahissa-app-fallback__card span {
  font-size: .875rem;
  color: #6B6259;
}

/* --- 6. La aplicación trae su propia cabecera ----------------------------- */
/* Al envolverla con la del rediseño habría dos barras de navegación seguidas.
   Se oculta la interna, que duplica enlaces que ya están arriba. */
body.pp-personalizador #root > header,
body.pp-personalizador #root > div > header:first-of-type {
  display: none;
}
body.pp-personalizador #root {
  padding-top: clamp(5.5rem, 9vw, 7.5rem);
}

/* La cabecera del rediseño se dibuja con estilos.css; aquí solo se asegura
   que queda por encima de la aplicación. */
body.pp-personalizador > header {
  z-index: 99998;
}

/* --- 7. La cabecera, operativa dentro del personalizador ------------------
   estilos.css se carga antes que el CSS de la aplicación (para que la app
   siga mandando en lo suyo), y eso hace que las utilidades de la app pisen
   las del menú. Aquí se restaura solo lo imprescindible de la cabecera, sin
   JavaScript: el menú de escritorio visible y el panel móvil cerrado. */

/* Menú principal visible a partir de 1280px, como en el resto de la web. */
@media (min-width: 1280px) {
  body.pp-personalizador > header nav[class*="xl:flex"] {
    display: flex !important;
  }
}

/* El panel desplegable del móvil permanece cerrado: sin el script del sitio
   no hay nada que lo abra, y abierto taparía la aplicación. */
body.pp-personalizador > header nav[class*="flex-col"][class*="shell"] {
  display: none !important;
}
body.pp-personalizador > header [class*="translate-x-full"],
body.pp-personalizador > header [id*="menu"][aria-hidden="true"] {
  display: none !important;
}

/* El botón de menú de móvil tampoco sirve sin el script: se oculta y en su
   lugar queda el acceso directo a presupuesto, que es lo que convierte. */
@media (max-width: 1279px) {
  body.pp-personalizador > header button[aria-controls],
  body.pp-personalizador > header button[aria-expanded] {
    display: none !important;
  }
}

/* --- 8. Los dos flotantes no se pisan ------------------------------------
   El personalizador ya tiene el widget de chat abajo a la derecha. Al traer
   el pie del rediseño llega también el botón de WhatsApp, que caía justo
   encima. Se sube para que convivan. */
body.pp-personalizador a[class*="fixed"][class*="bottom-"][href*="wa.me"],
body.pp-personalizador .pp-wa-flotante {
  bottom: 1.5rem;
  right: 1.25rem;
}
@media (max-width: 640px) {
  body.pp-personalizador a[class*="fixed"][class*="bottom-"][href*="wa.me"],
  body.pp-personalizador .pp-wa-flotante {
    bottom: 1.5rem;
    right: 1.25rem;
  }
}

/* Ocultar barra superior redundante del personalizador React (telefono/direccion ya en cabecera corporativa) */
body.pp-personalizador #root .pahissa-square-ui > .border-b,
body.pp-personalizador #root .border-b.border-border.bg-card {
  display: none !important;
}

/* Cabecera solida y estilizada en la pagina del personalizador */
body.pp-personalizador header {
  background-color: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(24, 19, 14, 0.08) !important;
}
body.pp-personalizador header nav a {
  color: rgba(24, 19, 14, 0.8) !important;
}
body.pp-personalizador header nav a:hover {
  color: #df4d00 !important;
}
body.pp-personalizador header .btn-outline-light {
  border-color: rgba(24, 19, 14, 0.2) !important;
  color: #18130e !important;
}
body.pp-personalizador header .btn-outline-light:hover {
  border-color: #df4d00 !important;
  color: #df4d00 !important;
}

/* Forzar logo a color (letras negras + camiseta naranja) en la cabecera blanca del personalizador */
body.pp-personalizador header img {
  content: url("../imagenes/logo-pahissa.png") !important;
  max-height: 52px !important;
  width: auto !important;
}

/* 08/10/2026: el chat flota a 76px del borde; WhatsApp vuelve a su sitio (24px) y queda debajo, sin pisarse. */

/* 08/10/2026: sistema.css pone height:auto a las imagenes sin atributos y anulaba la altura del logo de PayPal en carrito y pago. */
body.pp-personalizador #root img[alt="PayPal"],
body.pp-personalizador #root img.h-5 {
  height: 1.25rem !important;
  width: auto !important;
}

/* === PP-MOVIMIENTO-20261008 INICIO ===========================================
   Catalogo del personalizador con mas vida. Para volver atras: borrar desde
   esta linea hasta "PP-MOVIMIENTO-20261008 FIN" (o restaurar
   personalizador.PRE-MOVIMIENTO-20261008.css.bak). */

/* Prenda mas grande y precio con peso */
body.pp-personalizador #root .grid.lg\:grid-cols-4 > button.group > div:first-child { height: 11.5rem !important; }
body.pp-personalizador #root .grid.lg\:grid-cols-4 > button.group > div:first-child > img { height: 10rem !important; width: 10rem !important; }
body.pp-personalizador #root .grid.lg\:grid-cols-4 > button.group h2 + p { margin-top: .4rem; font-size: 1rem; font-weight: 800; color: #df4d00; letter-spacing: 0; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes pp-entra { from { opacity: 0; transform: translateY(18px); } }
  body.pp-personalizador #root .grid.lg\:grid-cols-4 > button.group {
    animation: pp-entra .5s cubic-bezier(.2,.7,.2,1) backwards;
    transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .25s ease !important;
  }
  body.pp-personalizador #root .grid.lg\:grid-cols-4 > button.group:nth-child(2) { animation-delay: 60ms; }
  body.pp-personalizador #root .grid.lg\:grid-cols-4 > button.group:nth-child(3) { animation-delay: 120ms; }
  body.pp-personalizador #root .grid.lg\:grid-cols-4 > button.group:nth-child(4) { animation-delay: 180ms; }
  body.pp-personalizador #root .grid.lg\:grid-cols-4 > button.group:nth-child(5) { animation-delay: 240ms; }
  body.pp-personalizador #root .grid.lg\:grid-cols-4 > button.group:nth-child(6) { animation-delay: 300ms; }
  body.pp-personalizador #root .grid.lg\:grid-cols-4 > button.group:nth-child(7) { animation-delay: 360ms; }
  body.pp-personalizador #root .grid.lg\:grid-cols-4 > button.group:nth-child(8) { animation-delay: 420ms; }
  body.pp-personalizador #root .grid.lg\:grid-cols-4 > button.group > div:first-child > img { transition: transform .35s cubic-bezier(.2,.7,.2,1) !important; }
  body.pp-personalizador #root .grid.lg\:grid-cols-4 > button.group .grid.grid-cols-8 > div { transition: transform .15s ease; }
  body.pp-personalizador #root .grid.lg\:grid-cols-4 > button.group .grid.grid-cols-8 > div:hover { transform: scale(1.3); }
  body.pp-personalizador #root button:not(.group):not(:disabled):active { transform: scale(.97); }
}

@media (hover: hover) {
  body.pp-personalizador #root .grid.lg\:grid-cols-4 > button.group:hover {
    transform: translateY(-6px);
    border-color: #df4d00 !important;
    box-shadow: 0 22px 44px -22px rgba(24, 19, 14, .45) !important;
  }
  body.pp-personalizador #root .grid.lg\:grid-cols-4 > button.group:hover > div:first-child > img { transform: scale(1.1) translateY(-4px) !important; }
  body.pp-personalizador #root .grid.lg\:grid-cols-4 > button.group::after {
    content: "Personalizar \2192";
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: .7rem 0;
    background: #df4d00; color: #fff;
    font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    transform: translateY(100%);
    transition: transform .25s cubic-bezier(.2,.7,.2,1);
  }
  body.pp-personalizador #root .grid.lg\:grid-cols-4 > button.group:hover::after,
  body.pp-personalizador #root .grid.lg\:grid-cols-4 > button.group:focus-visible::after { transform: none; }
}
/* === PP-MOVIMIENTO-20261008 FIN === */

/* === PP-RECOGIDA-20261008 INICIO: "Recogida gratis" / "Envio" sin solaparse (borrar hasta FIN para volver atras) === */
body.pp-personalizador #root .flex.gap-1\.5 > button.flex-1:has(> svg.lucide) {
  letter-spacing: 0 !important;
  font-size: 11px !important;
  gap: 4px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  white-space: nowrap !important;
}
body.pp-personalizador #root .flex.gap-1\.5 > button.flex-1:has(> svg.lucide) > * {
  min-width: auto !important;
  flex-shrink: 0 !important;
}
/* === PP-RECOGIDA-20261008 FIN === */