/* ============================================================
   Pet Value P.R. — COMPONENTS
   Botones, tarjetas, catálogo de marcas, categorías, pasos,
   tarjeta del formulario (WPForms) y botón flotante.
   Todos los colores salen de tokens.css.
   ============================================================ */

/* Botones genéricos */
.button{display:inline-flex;justify-content:center;align-items:center;gap:14px;min-height:52px;padding:13px 23px;border-radius:13px;font-size:13px;font-weight:800;border:1px solid transparent;transition:transform .2s,background .2s,box-shadow .2s;white-space:nowrap}
.button:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.button-primary{background:var(--blue);color:var(--white)}
.button-primary:hover{background:var(--blue-hover)}
.button-dark{background:var(--navy);color:var(--white)}
.button-outline{background:transparent;border-color:var(--line-strong);color:var(--navy)}
.button-outline:hover{border-color:var(--blue);color:var(--blue)}
.button-whatsapp{background:var(--whatsapp);color:var(--white)}
.button-whatsapp:hover{background:var(--whatsapp-hover)}
.button-light{background:var(--white);color:var(--navy)}
.button span{font-size:18px}
.text-link{font-weight:800;font-size:13px;color:var(--blue);border-bottom:1px solid currentColor;padding-bottom:6px;display:inline-flex;gap:14px;align-items:center}
.text-link span{font-size:19px}

/* Tarjetas de beneficio / ventaja */
.feature-card{background:var(--white);padding:35px 30px;border-radius:var(--radius);min-height:260px;position:relative;border:1px solid var(--line)}
.feature-icon{height:50px;width:50px;display:grid;place-items:center;border-radius:15px;background:var(--blue-soft);color:var(--blue);font-size:24px;margin-bottom:40px}
.feature-icon svg{width:26px;height:26px}
.feature-card h3{font-size:17px;letter-spacing:-.02em;color:var(--navy)}
.feature-card p{font-size:13px;color:var(--muted);line-height:1.7;max-width:270px}
.feature-index{position:absolute;right:30px;top:37px;font-size:11px;color:var(--muted-soft)}

/* Catálogo de marcas: buscador, filtros y tarjetas con logo */
.catalog-controls{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:24px}
.search-field{width:min(100%,350px);position:relative}
.search-field input{background:var(--field-bg);width:100%;border:1px solid var(--line);border-radius:13px;padding:14px 16px 14px 43px;min-height:50px;outline-offset:2px;color:var(--ink)}
.search-icon{position:absolute;left:15px;top:6px;color:var(--muted);font-size:30px}
.search-clear{border:0;background:none;color:var(--blue);font-weight:700;font-size:13px;cursor:pointer;padding:10px 4px;white-space:nowrap;margin-right:auto}
.search-clear:hover{text-decoration:underline}
.filter-row{display:flex;gap:8px;flex-wrap:wrap}
.filter-button{border:1px solid var(--line);border-radius:30px;background:var(--white);padding:11px 17px;color:var(--ink-soft);font-size:12px;font-weight:700}
.filter-button[aria-pressed="true"]{background:var(--navy);color:var(--white);border-color:var(--navy)}
.brand-card{min-height:172px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(155deg,var(--white),var(--bg));padding:26px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .2s,border-color .2s}
.brand-card:hover{transform:translateY(-4px);border-color:var(--blue)}
.brand-card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.brand-card__logo{display:flex;align-items:center;min-height:54px;max-width:86%}
.brand-card__logo img{display:block;max-height:54px;max-width:190px;width:auto;object-fit:contain;object-position:left center}
.brand-card__arrow{font-size:23px;color:var(--blue)}
.brand-card__bottom{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:11px;color:var(--muted);margin-top:18px}
.brand-card__bottom strong{font-size:10px;letter-spacing:.08em;color:var(--ink-soft)}
.empty-state{padding:30px;color:var(--muted)}

/* Categorías (degradados del sistema azul + íconos SVG; sin fotos externas) */
.category-card{height:300px;border-radius:22px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:23px;color:var(--white);transition:transform .2s}
.category-card:hover{transform:translateY(-5px)}
.category-card::before{content:"";position:absolute;inset:0;background:var(--cat-shade)}
.category-icon{position:absolute;top:20px;left:23px;z-index:1;color:var(--white)}
.category-icon svg{width:36px;height:36px;display:block}
.category-perros{background:linear-gradient(150deg,var(--blue),var(--navy))}
.category-gatos{background:linear-gradient(150deg,var(--blue-sky),var(--blue))}
.category-aves{background:linear-gradient(150deg,var(--blue),var(--blue-deep))}
.category-peces{background:linear-gradient(150deg,var(--blue-sky),var(--navy))}
.category-reptiles{background:linear-gradient(150deg,var(--navy),var(--blue-deep))}
.category-pequenos{background:linear-gradient(150deg,var(--blue-deep),var(--blue))}
.category-grooming{background:linear-gradient(150deg,var(--accent),var(--accent-deep))}
.category-equinos{background:linear-gradient(150deg,var(--blue-deep),var(--navy))}
.category-card>span,.category-card>strong{position:relative;z-index:1}
.category-card>span:first-of-type{font-size:9px;letter-spacing:.13em;font-weight:800;margin-bottom:9px}
.category-card strong{font-size:21px;line-height:1.2;letter-spacing:-.02em;max-width:90%;font-family:var(--font-head)}
.category-card .category-arrow{position:absolute;right:20px;bottom:19px;font-size:26px;background:var(--white);color:var(--blue);width:37px;height:37px;border-radius:50%;display:grid;place-items:center;z-index:1}

/* Pasos */
.step{border-top:2px solid var(--line-strong);padding:27px 8px 0}
.step>span{font-size:12px;font-weight:800;color:var(--blue)}
.step h3{font-size:19px;margin:35px 0 12px;letter-spacing:-.02em;color:var(--navy)}
.step p{font-size:14px;line-height:1.7;color:var(--muted)}

/* ============================================================
   FORMULARIO — tarjeta + markup real de WPForms.
   ÚNICO lugar del proyecto donde se estila .wpforms-*.
   Diseño aprobado: cajas de 58px, borde 2px, fondo claro,
   etiquetas encima; escritorio: 6 campos en 2 filas de 3 y
   Mensaje (textarea) a fila completa; botones azul y WhatsApp
   idénticos 50/50. La copia de prueba del formulario incluye
   el campo Mensaje — ver integrations/wpforms.md.
   ============================================================ */
.formcard{background:var(--white);color:var(--ink);padding:38px;border-radius:28px;box-shadow:var(--shadow-form)}
.form-heading h3{font-size:25px;letter-spacing:-.03em;margin-bottom:8px;color:var(--navy)}
.form-heading p{color:var(--muted);line-height:1.6;font-size:13px;margin-bottom:26px}

.formcard .wpforms-container{margin:0}
.formcard .wpforms-field{margin:0 0 16px;padding:0}
.formcard .wpforms-field-hp{display:none!important}
.formcard .wpforms-field-label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin:0 0 8px}
.formcard .wpforms-required-label{color:var(--red)}
.formcard .wpforms-field-sublabel{font-weight:500;color:var(--muted)}
.formcard .wpforms-field input[type="text"],
.formcard .wpforms-field input[type="email"],
.formcard .wpforms-field input[type="tel"],
.formcard .wpforms-field input[type="number"],
.formcard .wpforms-field select,
.formcard .wpforms-field textarea{
  width:100%;height:58px;min-height:58px;padding:14px 18px;
  border:2px solid var(--field-border);border-radius:12px;background:var(--field-bg);
  font-size:16px;color:var(--ink);
}
.formcard .wpforms-field textarea{height:auto;min-height:120px;resize:vertical;line-height:1.55}
.formcard .wpforms-field input:focus,
.formcard .wpforms-field select:focus,
.formcard .wpforms-field textarea:focus{border-color:var(--blue);background:var(--white);outline:none}
/* Marcado visual opcional de js/contact.js (no interfiere con el envío) */
.formcard .wpforms-field.pv-filled .wpforms-field-label{color:var(--blue)}

.formcard .wpforms-submit-container{margin:0;padding:0}
.formcard .wpforms-submit{
  width:100%;height:56px;min-height:56px;padding:0 18px;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue);color:var(--white);border:0;border-radius:14px;
  font-family:var(--font-head);font-size:16px;font-weight:800;cursor:pointer;
  transition:background .2s;
}
.formcard .wpforms-submit:hover{background:var(--blue-hover)}
.formcard a.wa{
  display:flex;align-items:center;justify-content:center;
  height:56px;min-height:56px;padding:0 18px;margin-top:14px;
  background:var(--whatsapp);color:var(--white);border-radius:14px;
  font-family:var(--font-head);font-size:16px;font-weight:800;text-align:center;
  transition:background .2s;
}
.formcard a.wa:hover{background:var(--whatsapp-hover)}
.formcard .wpforms-confirmation-container-full,
.formcard .wpforms-confirmation-container{background:var(--blue-soft);border:1px solid var(--line-strong);border-radius:14px;padding:18px 20px;color:var(--ink)}
.formcard .wpforms-error{color:var(--red);font-size:12px}

/* Escritorio: 2 filas de 3 campos, Mensaje a fila completa, botones 50/50 */
@media(min-width:1021px){
  .formcard{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
  .formcard .form-heading{grid-column:1/-1}
  .formcard .form-heading p{margin-bottom:8px}
  .formcard .wpforms-container{display:contents}
  .formcard .wpforms-form{display:contents}
  .formcard .wpforms-field-container{display:contents}
  .formcard .wpforms-field{grid-column:span 2;min-width:0;margin:0}
  .formcard .wpforms-field-textarea{grid-column:1/-1}
  .formcard .wpforms-submit-container{grid-column:1/4}
  .formcard a.wa{grid-column:4/7;margin-top:0}
}

/* Botón flotante de WhatsApp (sin mensaje prellenado) */
.whatsapp-float{position:fixed;z-index:90;bottom:23px;right:23px;background:var(--whatsapp);color:var(--white);box-shadow:var(--shadow-float);border-radius:40px;padding:14px 19px;display:flex;gap:9px;align-items:center;font-weight:800;font-size:13px}
.whatsapp-float:hover{background:var(--whatsapp-hover)}

/* Logos blancos (versión oficial clara de la marca): fondo oscuro de la
   casa para que se lean sobre la tarjeta — Adams, Multipet, Fluval, Coralife */
.brand-card__logo--dark{background:var(--ink);border-radius:12px;padding:7px 12px}
.brand-card__logo--dark img{max-height:40px}

/* ============================================================
   CATEGORÍAS CON FOTOS (2026-10-23) — variante .cats-v2.
   La fotografía es la protagonista de cada tarjeta; el degradado
   corporativo de la base queda DETRÁS como reserva si la foto
   fallara, y la veladura ponderada al pie (tokens) garantiza
   que número, título y flecha se lean sobre la imagen.
   TODAS las reglas van bajo .cats-v2: la sección base no cambia.
   Orden de capas: foto (0) < veladura ::before (1) < contenido (2).
   ============================================================ */
.cats-v2 .section-top>p{max-width:430px;color:var(--ink-soft);font-size:1.05rem;line-height:1.65}
.cats-v2 .category-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .5s ease}
.cats-v2 .category-card::before{background:var(--cat-photo-shade);z-index:1}
.cats-v2 .category-grooming::before{background:var(--cat-photo-shade-accent)}
.cats-v2 .category-icon,.cats-v2 .category-card>span,.cats-v2 .category-card>strong,.cats-v2 .category-card .category-arrow{z-index:2}
.cats-v2 .category-card>span:not(.category-icon):not(.category-arrow){margin-bottom:10px}
.cats-v2 .category-card strong{font-size:23px;max-width:78%;text-shadow:var(--photo-text-shadow)}
.cats-v2 .category-card:hover{box-shadow:var(--shadow-hover)}
.cats-v2 .category-card:hover .category-photo{transform:scale(1.06)}
.cats-v2 .category-card:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .cats-v2 .category-card,.cats-v2 .category-photo{transition:none}
  .cats-v2 .category-card:hover .category-photo{transform:none}
}

/* HABLEMOS REFINADO — .contact-v2: textos secundarios con contraste
   real (nada de grises pálidos) y tarjeta con un poco más de aire;
   las cajas de 58px y los botones idénticos 50/50 no cambian. */
.contact-v2 .form-heading p{color:var(--ink-soft);font-size:14.5px}
.contact-v2 .formcard .wpforms-field-sublabel{color:var(--ink-soft)}
.contact-v2 .formcard{padding:42px}
@media(min-width:1021px){
  .contact-v2 .formcard{gap:20px}
  .contact-v2 .formcard .wpforms-field textarea{min-height:128px}
}

/* HABLEMOS ABAJO (V6): tarjeta grande debajo, campos uniformes a todo el ancho, botones 50/50 */
.contact-abajo .formcard{padding:48px}
.contact-abajo .form-heading h3{font-size:28px}
.contact-abajo .form-heading p{font-size:15px}
@media(min-width:1021px){
  .contact-abajo .formcard{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .contact-abajo .formcard .form-heading{grid-column:1/-1}
  .contact-abajo .formcard .wpforms-container{display:contents}
  .contact-abajo .formcard .wpforms-form{display:contents}
  .contact-abajo .formcard .wpforms-field-container{display:contents}
  .contact-abajo .formcard .wpforms-field{grid-column:1/-1;min-width:0;margin:0}
  .contact-abajo .formcard .wpforms-field-textarea{grid-column:1/-1}
  .contact-abajo .formcard .wpforms-submit-container{grid-column:1/2}
  .contact-abajo .formcard a.wa{grid-column:2/3;margin-top:0}
  .contact-abajo .formcard .wpforms-field input[type="text"],.contact-abajo .formcard .wpforms-field input[type="email"],.contact-abajo .formcard .wpforms-field input[type="tel"],.contact-abajo .formcard .wpforms-field input[type="number"],.contact-abajo .formcard .wpforms-field select{height:64px;min-height:64px;padding:16px 20px}
  .contact-abajo .formcard .wpforms-field textarea{min-height:150px}
}