/*
Theme Name: FloraVida
Description: Tema de MiCommerce, la tienda de FloraVida para mujeres en edad plateada.
Version: 0.2.0
Text Domain: floravida
*/

/* ------------------------------------------------------------------
   Paleta y tokens. Vienen del prototipo docs/prototipos/micommerce-tienda.dc.html
   y del sistema de diseno de floravida-app/CLAUDE.md: mujeres 45-70, presbicia,
   fatiga visual, artritis. Base 18px, objetivos tactiles de 48px, nada de
   urgencia. Ningun hex fuera de este bloque.
   ------------------------------------------------------------------ */
:root {
  --fv-fondo: #EDE8E0;        /* fondo de la pagina */
  --fv-lienzo: #FAF7F2;       /* tarjetas, cabecera */
  --fv-hundido: #F0EBE3;      /* cajas secundarias, campos */
  --fv-linea: #DDD5C9;
  --fv-arena: #C4BBAD;
  --fv-tinta: #2B2724;        /* texto principal, AAA */
  --fv-tinta-2: #4A433C;      /* texto secundario, AAA */
  --fv-tinta-3: #6E665C;      /* notas */
  --fv-terracota: #9A5433;    /* accion principal */
  --fv-ciruela: #7D5472;      /* premium, contemplacion, hover */
  --fv-salvia: #2F5540;       /* confirmacion, envio a casa */
  --fv-durazno: #F9D5C5;      /* chip activo */
  --fv-aviso: #A8423B;        /* rojo wellness, apagado */
  --fv-aviso-fondo: #F6E3E1;

  --fv-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --fv-sans: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fv-texto: 1rem;           /* 18px */
  --fv-texto-nota: 0.875rem;  /* 15.75px: minimo legible */
  --fv-texto-sub: 1.125rem;   /* 20.25px */
  --fv-texto-titulo: 1.25rem; /* 22.5px */

  --fv-tactil: 48px;
  --fv-radio: 22px;
  --fv-radio-grande: 28px;
  --fv-ancho: 1180px;
  --fv-motion-base: 300ms;
  --fv-suave: cubic-bezier(0.16, 1, 0.3, 1);
}

html { font-size: 18px; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fv-fondo);
  color: var(--fv-tinta);
  font-family: var(--fv-sans);
  font-size: var(--fv-texto);
  line-height: 1.7;
}
a { color: var(--fv-terracota); }
a:hover { color: var(--fv-ciruela); }
button, input, select, textarea { font-family: inherit; font-size: 1rem; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--fv-serif); font-weight: 600; line-height: 1.15; margin: 0 0 0.5em; text-wrap: pretty; }
h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); }
h2 { font-size: 1.9rem; }
h3 { font-size: var(--fv-texto-titulo); font-family: var(--fv-sans); }
p { margin: 0 0 1em; max-width: 65ch; }
:focus-visible { outline: 3px solid var(--fv-ciruela); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.fv-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.fv-contenedor { max-width: var(--fv-ancho); margin: 0 auto; padding-inline: 20px; }

/* ---------- Cabecera y pie ---------- */
.fv-franja { background: var(--fv-tinta); color: var(--fv-hundido); padding: 10px 20px; text-align: center; font-size: var(--fv-texto-nota); }
.fv-cabecera { position: sticky; top: 0; z-index: 40; background: var(--fv-lienzo); border-bottom: 1px solid var(--fv-linea); }
.fv-cabecera__fila { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-block: 14px; }
.fv-marca { text-decoration: none; color: var(--fv-tinta); flex: none; }
.fv-marca__nombre { display: block; font-family: var(--fv-serif); font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.fv-marca__lema { display: block; font-size: var(--fv-texto-nota); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fv-tinta-3); }
.fv-nav { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.fv-pildora, .fv-boton, .fv-boton--linea, .fv-boton--suave, .fv-boton--oscuro, .fv-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--fv-tactil); padding: 0 20px; border-radius: 999px;
  font-weight: 600; font-size: var(--fv-texto-nota); text-decoration: none; cursor: pointer;
  transition: background var(--fv-motion-base) var(--fv-suave), color var(--fv-motion-base) var(--fv-suave), border-color var(--fv-motion-base) var(--fv-suave);
}
.fv-pildora { border: 2px solid transparent; background: none; color: var(--fv-tinta-2); }
.fv-pildora:hover { color: var(--fv-tinta); border-color: var(--fv-linea); }
.fv-pildora[aria-current="page"], .fv-pildora--activa { background: var(--fv-tinta); color: var(--fv-lienzo); }
.fv-boton { border: 2px solid var(--fv-terracota); background: var(--fv-terracota); color: #fff; font-size: var(--fv-texto); padding: 0 26px; min-height: 56px; }
.fv-boton:hover { background: var(--fv-ciruela); border-color: var(--fv-ciruela); color: #fff; }
.fv-boton--linea { border: 2px solid var(--fv-tinta); background: none; color: var(--fv-tinta); font-size: var(--fv-texto); padding: 0 24px; min-height: 56px; }
.fv-boton--linea:hover { background: var(--fv-tinta); color: var(--fv-lienzo); }
.fv-boton--suave { border: 2px solid var(--fv-linea); background: none; color: var(--fv-tinta-2); min-height: var(--fv-tactil); font-size: var(--fv-texto-nota); padding: 0 18px; }
.fv-boton--suave:hover { border-color: var(--fv-terracota); color: var(--fv-tinta); }
.fv-boton--oscuro { border: 2px solid var(--fv-tinta); background: var(--fv-tinta); color: var(--fv-lienzo); min-height: var(--fv-tactil); }
.fv-boton--oscuro:hover { background: var(--fv-terracota); border-color: var(--fv-terracota); color: #fff; }
.fv-boton[disabled], .fv-boton[aria-disabled="true"] { background: var(--fv-arena); border-color: var(--fv-arena); color: var(--fv-tinta); cursor: default; }
.fv-carrito-boton { position: relative; flex: none; }
.fv-carrito-boton__cuenta { font-variant-numeric: tabular-nums; }

.fv-pie { background: var(--fv-tinta); color: var(--fv-arena); margin-top: 60px; }
.fv-pie__malla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; padding-block: 40px; }
.fv-pie__marca { font-family: var(--fv-serif); font-size: 1.35rem; font-weight: 600; color: var(--fv-hundido); margin: 0 0 8px; }
.fv-pie__titulo { font-size: var(--fv-texto-nota); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fv-hundido); margin: 0 0 10px; }
.fv-pie p { font-size: var(--fv-texto-nota); line-height: 1.8; }

/* ---------- Portada ---------- */
.fv-portada { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: center; padding-block: 56px 40px; }
.fv-antetitulo { margin: 0 0 14px; font-size: var(--fv-texto-nota); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fv-terracota); }
.fv-portada__texto { font-size: var(--fv-texto); color: var(--fv-tinta-2); max-width: 46ch; }
.fv-acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.fv-caja { background: var(--fv-lienzo); border: 1px solid var(--fv-linea); border-radius: var(--fv-radio-grande); padding: 32px; }
.fv-caja--hundida { background: var(--fv-hundido); border: none; }
.fv-seccion { padding-block: 52px 0; }
.fv-seccion__titulo { font-size: 1.9rem; margin-bottom: 24px; }
.fv-mas-pedido .fv-seccion__titulo { margin-bottom: 8px; }
.fv-seccion__texto { margin: 0 0 24px; max-width: 52ch; color: var(--fv-tinta-2); }

/* ---------- Catalogo ---------- */
.fv-catalogo { padding-block: 36px 60px; }
.fv-catalogo__titulo { margin-bottom: 22px; }
.fv-pestanas { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.fv-pestanas .fv-pildora { border-color: var(--fv-linea); }
.fv-chips { display: flex; gap: 8px; margin-bottom: 26px; flex-wrap: wrap; }
.fv-chip { border: 2px solid var(--fv-linea); background: none; color: var(--fv-tinta-2); min-height: 44px; padding: 0 16px; }
.fv-chip:hover { border-color: var(--fv-terracota); color: var(--fv-tinta); }
.fv-chip[aria-current="true"], .fv-chip--activo { border-color: var(--fv-terracota); background: var(--fv-durazno); color: var(--fv-tinta); }
.fv-conteo { margin: 0 0 18px; font-size: var(--fv-texto-nota); color: var(--fv-tinta-3); }
.fv-malla { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; list-style: none; margin: 0; padding: 0; }
.fv-tarjeta { background: var(--fv-lienzo); border: 1px solid var(--fv-linea); border-radius: var(--fv-radio); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.fv-tarjeta__foto { position: relative; display: block; height: 150px; border-radius: 16px; overflow: hidden; background: linear-gradient(150deg, rgba(154, 84, 51, 0.13), rgba(154, 84, 51, 0.33)); }
.fv-tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fv-etiqueta { position: absolute; top: 12px; left: 12px; padding: 5px 12px; border-radius: 999px; font-size: var(--fv-texto-nota); font-weight: 600; background: rgba(250, 247, 242, 0.92); color: var(--fv-salvia); }
.fv-etiqueta--digital { color: var(--fv-ciruela); }
.fv-tarjeta__cuerpo { flex: 1; min-width: 0; }
.fv-tarjeta__nombre { margin: 0 0 4px; font-weight: 600; line-height: 1.35; }
.fv-tarjeta__nombre a { color: inherit; text-decoration: none; }
.fv-tarjeta__nombre a:hover { color: var(--fv-terracota); }
.fv-tarjeta__meta { margin: 0 0 8px; font-size: var(--fv-texto-nota); color: var(--fv-tinta-2); }
.fv-precio { margin: 0; font-weight: 600; color: var(--fv-terracota); font-variant-numeric: tabular-nums; }
.fv-tarjeta__acciones { display: flex; gap: 8px; }
.fv-tarjeta__acciones > * { flex: 1; }
.fv-vacio { border: 1px dashed var(--fv-arena); border-radius: var(--fv-radio); padding: 40px; text-align: center; }
.fv-vacio p { margin-inline: auto; }
.fv-agotado { color: var(--fv-tinta-3); font-weight: 600; font-size: var(--fv-texto-nota); }

/* ---------- Ficha ---------- */
.fv-ficha { padding-block: 28px 60px; }
.fv-volver { display: inline-flex; align-items: center; gap: 8px; min-height: var(--fv-tactil); margin-bottom: 22px; color: var(--fv-tinta-2); font-weight: 600; text-decoration: none; font-size: var(--fv-texto-nota); }
.fv-volver:hover { color: var(--fv-terracota); }
.fv-ficha__malla { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 36px; align-items: start; }
.fv-ficha__hero { position: relative; min-height: 340px; border-radius: 26px; overflow: hidden; background: linear-gradient(150deg, rgba(154, 84, 51, 0.15), rgba(154, 84, 51, 0.37)); }
.fv-ficha__hero img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; display: block; }
.fv-ficha__hero .fv-etiqueta { padding: 7px 16px; top: 20px; left: 20px; }
.fv-ficha__nombre { margin-bottom: 12px; }
.fv-ficha__precio { font-size: 1.25rem; margin-bottom: 18px; }
.fv-ficha__descripcion { color: var(--fv-tinta-2); margin-bottom: 22px; }
.fv-ficha__datos { background: var(--fv-hundido); border-radius: 20px; padding: 20px; margin-bottom: 22px; }
.fv-ficha__datos-titulo { margin: 0 0 10px; font-size: var(--fv-texto-nota); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fv-tinta-3); }
.fv-ficha__datos dl { margin: 0; }
.fv-ficha__datos div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--fv-linea); }
.fv-ficha__datos div:last-child { border-bottom: none; }
.fv-ficha__datos dt { color: var(--fv-tinta-2); font-size: var(--fv-texto-nota); }
.fv-ficha__datos dd { margin: 0; font-weight: 600; text-align: right; font-size: var(--fv-texto-nota); }
.fv-ficha__disponibilidad { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; font-weight: 600; font-size: var(--fv-texto-nota); color: var(--fv-salvia); }
.fv-ficha__disponibilidad--agotado { color: var(--fv-tinta-3); }
.fv-ficha__acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.fv-nota { font-size: var(--fv-texto-nota); color: var(--fv-tinta-3); }
.fv-ficha__invima { margin: 0 0 18px; font-size: var(--fv-texto-nota); color: var(--fv-tinta-2); }
.fv-aviso-experiencia { background: var(--fv-hundido); border-left: 4px solid var(--fv-ciruela); border-radius: 6px 20px 20px 6px; padding: 20px; margin: 22px 0 0; }
.fv-aviso-experiencia p { margin: 0; font-size: var(--fv-texto-nota); color: var(--fv-tinta-2); }
.fv-aviso-experiencia strong { display: block; color: var(--fv-tinta); margin-bottom: 6px; font-size: var(--fv-texto); }

/* ---------- Carrito ---------- */
.fv-carrito { max-width: 900px; margin: 0 auto; padding: 40px 20px 70px; }
.fv-carrito__vacio { border: 1px dashed var(--fv-arena); border-radius: var(--fv-radio-grande); padding: 52px 24px; text-align: center; }
.fv-carrito__vacio p { margin-inline: auto; }
.fv-linea { background: var(--fv-lienzo); border: 1px solid var(--fv-linea); border-radius: 20px; padding: 18px; display: flex; gap: 16px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.fv-linea__foto { width: 64px; height: 64px; border-radius: 16px; flex: none; overflow: hidden; background: linear-gradient(150deg, rgba(154, 84, 51, 0.13), rgba(154, 84, 51, 0.33)); }
.fv-linea__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fv-linea__cuerpo { flex: 1; min-width: 150px; }
.fv-linea__nombre { margin: 0 0 3px; font-weight: 600; line-height: 1.35; }
.fv-linea__tipo { margin: 0; font-size: var(--fv-texto-nota); color: var(--fv-tinta-2); }
.fv-cantidad { display: flex; align-items: center; gap: 10px; }
.fv-cantidad__boton { width: 46px; height: 46px; border: 2px solid var(--fv-linea); border-radius: 999px; background: none; color: var(--fv-tinta-2); font-size: 1.2rem; font-weight: 600; cursor: pointer; }
.fv-cantidad__boton:hover { border-color: var(--fv-terracota); color: var(--fv-tinta); }
.fv-cantidad__numero { min-width: 28px; text-align: center; font-weight: 600; }
.fv-linea__subtotal { min-width: 118px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.fv-linea__quitar { font-size: var(--fv-texto-nota); color: var(--fv-tinta-3); min-height: 44px; display: inline-flex; align-items: center; }
.fv-resumen { background: var(--fv-hundido); border-radius: var(--fv-radio-grande); padding: 26px; margin-top: 20px; }
.fv-resumen__fila { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--fv-linea); }
.fv-resumen__fila--total { border-bottom: none; padding: 16px 0 20px; font-size: var(--fv-texto-sub); font-weight: 600; }
.fv-resumen__fila--total .fv-precio { font-size: inherit; }
.fv-resumen .fv-boton { width: 100%; min-height: 60px; }
.fv-resumen .fv-nota { margin: 16px 0 0; }

/* ---------- Mensajes ---------- */
.fv-mensaje { border-radius: 16px; padding: 16px 20px; margin: 0 0 20px; background: var(--fv-hundido); border-left: 4px solid var(--fv-salvia); }
.fv-mensaje--error { border-left-color: var(--fv-aviso); background: var(--fv-aviso-fondo); }
.fv-mensaje p { margin: 0; }
.fv-mensaje ul { margin: 8px 0 0; padding-left: 20px; }
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-error, .woocommerce-info { list-style: none; border-radius: 16px; padding: 16px 20px; margin: 0 0 20px; background: var(--fv-hundido); border-left: 4px solid var(--fv-salvia); }
.woocommerce-error { border-left-color: var(--fv-aviso); background: var(--fv-aviso-fondo); }
.woocommerce-message .button, .woocommerce-error .button { margin-left: 12px; }

/* ---------- Contenido generico (paginas de WooCommerce sin plantilla propia) ---------- */
.floravida-main { padding-block: 36px 60px; }
.floravida-main article { background: var(--fv-lienzo); border: 1px solid var(--fv-linea); border-radius: var(--fv-radio-grande); padding: 32px; }
.floravida-main input[type="text"], .floravida-main input[type="email"], .floravida-main input[type="tel"], .floravida-main input[type="password"], .floravida-main textarea, .floravida-main select {
  width: 100%; min-height: var(--fv-tactil); padding: 10px 14px; border: 2px solid var(--fv-linea); border-radius: 14px; background: #fff; color: var(--fv-tinta);
}
.floravida-main .button, .floravida-main button[type="submit"] { min-height: var(--fv-tactil); padding: 0 24px; border-radius: 999px; border: 2px solid var(--fv-terracota); background: var(--fv-terracota); color: #fff; font-weight: 600; cursor: pointer; }

/* Buscador de la cabecera (US-048): un campo grande, un boton, sin lupa escondida. */
.fv-buscador { display: flex; gap: 0.5rem; flex: 1 1 260px; min-width: 0; }
.fv-buscador__campo {
  flex: 1 1 auto; min-width: 0; min-height: var(--fv-tactil);
  padding: 0 1rem; border: 1px solid var(--fv-linea); border-radius: var(--fv-radio);
  background: var(--fv-hundido); color: var(--fv-tinta);
}
.fv-buscador__campo::placeholder { color: var(--fv-tinta-3); }
.fv-buscador__campo:focus { outline: 3px solid var(--fv-ciruela); outline-offset: 2px; }
.fv-buscador__boton { flex: 0 0 auto; }
.fv-busqueda-aviso { max-width: 60ch; margin: 0 0 1rem; }

/* Formulario corto y bienvenida (US-021, US-023): un solo paso, campos de 56px, texto grande. */
.fv-unete { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; padding-block: 40px; align-items: start; }
.fv-unete__texto h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.fv-unete__caja { padding: 32px; }
.fv-formulario--unete .fv-campo { margin-bottom: 22px; }
.fv-formulario--unete label { display: block; font-weight: 600; margin-bottom: 8px; }
.fv-formulario--unete input[type="text"], .fv-formulario--unete input[type="email"], .fv-formulario--unete input[type="tel"] {
  width: 100%; min-height: 56px; padding: 0 18px; font-size: var(--fv-texto-sub);
  border: 2px solid var(--fv-linea); border-radius: 16px; background: var(--fv-lienzo); color: var(--fv-tinta);
}
.fv-formulario--unete input:focus { outline: 3px solid var(--fv-ciruela); outline-offset: 2px; }
.fv-campo--error input { border-color: var(--fv-aviso); }
.fv-campo__error { color: var(--fv-aviso); font-weight: 600; margin: 8px 0 0; }
.fv-campo__ayuda { color: var(--fv-tinta-3); font-size: var(--fv-texto-nota); margin: 8px 0 0; }
.fv-casilla { display: flex; gap: 14px; align-items: flex-start; font-weight: 500 !important; cursor: pointer; }
.fv-casilla input { width: 28px; height: 28px; flex: none; margin: 4px 0 0; accent-color: var(--fv-terracota); }
.fv-formulario__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.fv-formulario__acciones .fv-boton, .fv-formulario__acciones .fv-boton--linea { flex: 1 1 220px; }
.fv-bienvenida { padding-block: 48px; max-width: 760px; }
.fv-bienvenida__caja { padding: 36px; }
.fv-bienvenida h1 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); }
.fv-bienvenida__gloria { margin: 18px 0 26px; }
.fv-bienvenida__paso .fv-boton { width: 100%; min-height: 60px; justify-content: center; }
.fv-bienvenida .fv-nota { margin: 14px 0 0; }