/* =====================================================================
 * portada.css — La portada (index.php): el portal de empresas argentinas.
 *
 * Azul y amarillo, como la portada vieja (decisión del dueño, 2026-10-21),
 * pedidos SIEMPRE a las variables de asociame.css. Sin degradés, sin
 * sombras de colores: amarillo de señalización plano, tinta oscura y
 * títulos en Rajdhani, la letra que ya usaba el sitio viejo.
 *
 * Todo con prefijo pt- y por clase: titulo.php se carga después y trae
 * `*{margin:0;padding:0}`. Las tarjetas de producto son las de
 * vidriera.css; acá sólo se las ajusta DENTRO de la portada (.pt-page).
 * ===================================================================== */

.pt-page{ --pt-titular:"Rajdhani","Nunito Sans",Arial,sans-serif; padding-bottom:8px; }
.pt-tit{ font-family:var(--pt-titular); font-weight:700; text-transform:uppercase; letter-spacing:.01em; line-height:1; }
.pt-page ::selection{ background:var(--as-amarillo,#FFCC00); color:var(--as-sobre-amarillo,#1E1810); }

/* ---- Cinta de enlaces ------------------------------------------------ */
.pt-cinta{ list-style:none; margin-top:14px; display:flex; flex-wrap:wrap; justify-content:center;
           border-top:1px solid var(--as-linea,#E6E6E6); border-bottom:1px solid var(--as-linea,#E6E6E6); }
.pt-cinta li{ display:flex; }
.pt-cinta li + li::before{ content:""; width:1px; margin:9px 0; background:var(--as-borde,#BDBDBD); }
.pt-cinta a{ display:inline-flex; align-items:center; gap:7px; padding:9px 18px; font-size:13.5px; font-weight:700;
             color:var(--as-enlace,#1A4FA0); text-decoration:none; }
.pt-cinta a{ border-radius:var(--as-radio-sm,4px); transition:background-color .15s; }
.pt-cinta a:hover{ background:var(--as-superficie,#fff); }

/* ---- Cartel ------------------------------------------------------------ */
/* Titular a la izquierda; a la derecha lo que se hace: buscar o registrarse.
 * Abajo queda un margen amarillo sobre el que se apoya la tira de Gauchito. */
.pt-cartel{ margin-top:14px; padding:44px 48px 112px; background:var(--as-amarillo,#FFCC00); color:var(--as-sobre-amarillo,#1E1810);
            border-radius:var(--as-radio-sm,4px); }
.pt-cartel-txt{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"tit bajada" "tit buscar" "tit registro";
                column-gap:56px; align-items:start; }
.pt-cartel h1{ grid-area:tit; align-self:center; font-size:60px; line-height:.95; }
.pt-cartel h1 span{ display:block; color:var(--as-marca,#1A4FA0); }
.pt-bajada{ grid-area:bajada; font-size:18px; font-weight:600; line-height:1.4; text-wrap:balance; }

.pt-buscar{ grid-area:buscar; margin-top:18px; display:flex; background:var(--as-superficie,#fff);
            border:2px solid var(--as-sobre-amarillo,#1E1810); border-radius:var(--as-radio-sm,4px); overflow:hidden; }
.pt-buscar:focus-within{ box-shadow:0 0 0 3px var(--as-marca,#1A4FA0); }
.pt-buscar input{ flex:1; min-width:0; border:0; padding:0 14px; height:48px; font:inherit; font-size:16px;
                  color:var(--as-tinta,#262626); background:transparent; outline:0; }
.pt-buscar input::placeholder{ color:var(--as-tinta-3,#767676); }
.pt-buscar select{ border:0; border-left:1px solid var(--as-linea,#E6E6E6); padding:0 30px 0 12px; font:inherit; font-size:14px;
                   font-weight:600; color:var(--as-tinta,#262626); cursor:pointer; outline:0; appearance:none;
                   background:var(--as-fondo-2,#F7F6F4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23262626' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/14px; }
.pt-buscar button{ display:flex; align-items:center; gap:8px; border:0; padding:0 20px; cursor:pointer;
                   background:var(--as-accion,#1A4FA0); color:var(--as-sobre-accion,#fff); font:inherit; font-size:15px; font-weight:700; }
.pt-buscar button:hover{ background:var(--as-accion-hover,#133A78); }

.pt-registro{ grid-area:registro; margin-top:18px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; }
.pt-registro p{ font-size:14px; font-weight:600; color:var(--as-sobre-amarillo-2,#3A2C17); max-width:30ch; line-height:1.35; }

/* El botón de la portada: chapa oscura con letra amarilla, como un cartel
 * de fábrica. Se hunde 1px al apretarlo; la flecha avanza al pasar el mouse. */
.pt-btn{ display:inline-flex; align-items:center; gap:10px; padding:13px 20px 12px; border-radius:3px;
         background:var(--as-sobre-amarillo,#1E1810); color:var(--as-amarillo,#FFCC00) !important;
         font-family:var(--pt-titular); font-size:19px; font-weight:700; text-transform:uppercase; letter-spacing:.02em;
         text-decoration:none; line-height:1; transition:background-color .15s; }
.pt-btn .vd-ico{ transition:transform .2s cubic-bezier(.2,.8,.2,1); }
.pt-btn:hover{ background:#000; }
.pt-btn:hover .vd-ico{ transform:translateX(3px); }
.pt-btn:active{ background:#2E2618; }
.pt-btn:focus-visible{ outline:3px solid var(--as-marca,#1A4FA0); outline-offset:2px; }
.pt-btn-amarillo{ background:var(--as-amarillo,#FFCC00); color:var(--as-sobre-amarillo,#1E1810) !important; }
.pt-btn-amarillo:hover, .pt-btn-amarillo:active{ background:var(--as-amarillo-hover,#F0BC00); }
.pt-btn-amarillo:focus-visible{ outline-color:var(--as-superficie,#fff); }

/* Tira de Gauchito: seis tarjetas blancas iguales que cuelgan del borde de
 * abajo del cartel, mitad sobre el amarillo y mitad sobre la página. */
.pt-vitrina{ position:relative; margin-top:-84px; padding:0 48px; }
.pt-vitrina-grilla{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.pt-pieza{ display:flex; flex-direction:column; min-width:0; background:var(--as-superficie,#fff); border-radius:var(--as-radio-sm,4px);
           box-shadow:0 1px 2px rgba(30,24,16,.10), 0 6px 18px rgba(30,24,16,.08); text-decoration:none; color:var(--as-tinta,#262626) !important;
           transition:box-shadow .18s ease-out, transform .18s ease-out; }
.pt-pieza:hover{ transform:translateY(-2px); box-shadow:0 1px 2px rgba(30,24,16,.10), 0 10px 24px rgba(30,24,16,.14); }
.pt-pieza-foto{ aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; position:relative; border-bottom:1px solid var(--as-linea,#E6E6E6); }
.pt-pieza-foto img{ position:absolute; inset:10px 12px; width:calc(100% - 24px); height:calc(100% - 20px); object-fit:contain; transition:transform .3s ease-out; }
.pt-pieza:hover img{ transform:scale(1.04); }
/* El recorte a 2 líneas va con margen y no con relleno: con relleno asoma
 * el pedazo de arriba de la tercera línea. */
.pt-pieza-nom{ margin:9px 12px 11px; font-size:13px; font-weight:700; line-height:1.3; height:2.6em;
               display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pt-pieza:hover .pt-pieza-nom{ color:var(--as-enlace,#1A4FA0); }
.pt-vitrina-de{ display:flex; width:max-content; margin:12px 0 0 auto; align-items:center; gap:5px; font-size:14px; font-weight:700;
                color:var(--as-enlace,#1A4FA0) !important; text-decoration:none; }
.pt-vitrina-de:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ---- Encabezado de sección: título y «ver todos» --------------------- */
.pt-sec{ margin-top:40px; }
.pt-enc{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:14px; }
.pt-enc h2{ font-size:30px; text-transform:none; letter-spacing:0; color:var(--as-tinta,#262626); white-space:nowrap; }
.pt-vermas{ display:inline-flex; align-items:center; gap:5px; font-size:14px; font-weight:700; white-space:nowrap;
            color:var(--as-enlace,#1A4FA0) !important; text-decoration:none; }
.pt-vermas:hover{ text-decoration:underline; text-underline-offset:3px; }
.pt-vermas .vd-ico{ transition:transform .2s cubic-bezier(.2,.8,.2,1); }
.pt-vermas:hover .vd-ico{ transform:translateX(3px); }

.pt-filas{ display:flex; flex-direction:column; gap:14px; }

.pt-cat + .pt-cat{ margin-top:24px; }
.pt-cat-tit{ margin-bottom:10px; font-size:17px; font-weight:800; }
.pt-cat-tit a{ display:inline-flex; align-items:center; gap:4px; color:var(--as-tinta,#262626) !important; text-decoration:none; }
.pt-cat-tit a:hover{ color:var(--as-enlace,#1A4FA0) !important; }

/* ---- Tarjetas de producto, sólo en la portada ------------------------
 * Más «ficha de catálogo» que «tarjeta flotante»: borde fino en vez de
 * sombra, esquinas casi rectas, insignia amarilla en mayúsculas. */
.pt-page .vd-prod{ box-shadow:none; border:1px solid var(--as-linea,#E6E6E6); border-radius:3px; }
.pt-page .vd-prod:hover{ border-color:var(--as-borde,#BDBDBD); box-shadow:0 6px 16px rgba(0,0,0,.10); }
.pt-page .vd-badge:not(.ok){ background:var(--as-amarillo,#FFCC00); color:var(--as-sobre-amarillo,#1E1810); border-radius:2px;
                    font-family:var(--pt-titular); font-size:13px; text-transform:uppercase; letter-spacing:.04em; line-height:1.35; }

/* ---- Algunas empresas: logos en planilla ------------------------------ */
.pt-emps{ display:grid; grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); gap:1px; background:var(--as-linea,#E6E6E6);
          border:1px solid var(--as-linea,#E6E6E6); border-radius:3px; overflow:hidden; }
.pt-emp{ display:flex; align-items:center; gap:10px; padding:12px; background:var(--as-superficie,#fff); text-decoration:none;
         color:var(--as-tinta,#262626) !important; min-width:0; transition:background-color .15s; }
.pt-emp:hover{ background:var(--as-resalte,#FFF4C2); }
.pt-emp-logo{ flex:none; width:52px; height:52px; display:flex; align-items:center; justify-content:center; color:var(--as-tinta-3,#767676); }
.pt-emp-logo img{ max-width:100%; max-height:100%; object-fit:contain; }
.pt-emp-txt{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.pt-emp-txt b{ font-size:13px; font-weight:700; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pt-emp:hover .pt-emp-txt b{ color:var(--as-enlace,#1A4FA0); }
.pt-emp-txt span{ font-size:12px; color:var(--as-tinta-2,#666); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---- Publicá: el cierre, en el azul de marca -------------------------- */
.pt-publica{ margin-top:44px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px 40px; align-items:center;
             padding:32px 40px; background:var(--as-marca,#1A4FA0); color:var(--as-sobre-marca,#fff); border-radius:var(--as-radio-sm,4px); }
.pt-publica h2{ font-size:34px; text-transform:none; letter-spacing:0; max-width:26ch; }
.pt-publica p{ margin-top:10px; font-size:15px; color:var(--as-sobre-marca-2,#D9E4F5); max-width:56ch; line-height:1.5; }

/* ---- Botón flotante de WhatsApp ----------------------------------------
 * Verde de la marca WhatsApp para que se reconozca de un vistazo. En la
 * computadora, al pasar el mouse asoma la leyenda; en el celular sólo el ícono. */
.pt-wa{ position:fixed; right:22px; bottom:22px; z-index:60; display:flex; align-items:center; justify-content:center;
        width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff !important; text-decoration:none;
        box-shadow:0 2px 4px rgba(0,0,0,.18), 0 8px 22px rgba(0,0,0,.18); transition:transform .18s ease-out, background-color .15s; }
.pt-wa svg{ width:31px; height:31px; fill:currentColor; }
.pt-wa:hover{ background:#1EBE5A; transform:translateY(-2px); }
.pt-wa:focus-visible{ outline:3px solid var(--as-marca,#1A4FA0); outline-offset:3px; }
.pt-wa-txt{ position:absolute; right:calc(100% + 12px); top:50%; transform:translate(6px,-50%); white-space:nowrap; pointer-events:none;
            padding:8px 12px; border-radius:var(--as-radio-sm,4px); background:var(--as-sobre-amarillo,#1E1810); color:#fff;
            font-size:13.5px; font-weight:700; opacity:0; transition:opacity .15s, transform .2s cubic-bezier(.2,.8,.2,1); }
.pt-wa:hover .pt-wa-txt, .pt-wa:focus-visible .pt-wa-txt{ opacity:1; transform:translate(0,-50%); }

/* ---- Tamaños ---------------------------------------------------------- */
@media (max-width:1000px){
  .pt-cartel{ padding:32px 28px 96px; }
  .pt-cartel-txt{ grid-template-columns:1fr; grid-template-areas:"tit" "bajada" "buscar" "registro"; }
  .pt-cartel h1{ font-size:48px; }
  .pt-bajada{ margin-top:12px; }
  .pt-vitrina{ margin-top:-72px; padding:0 28px; }
}
@media (max-width:700px){
  .pt-cinta{ justify-content:flex-start; }
  .pt-cinta li{ width:100%; }
  .pt-cinta li + li::before{ display:none; }
  .pt-cinta li + li{ border-top:1px solid var(--as-linea,#E6E6E6); }
  .pt-cinta a{ padding:9px 8px; width:100%; }
  .pt-cartel{ padding:24px 16px 76px; margin-left:-16px; margin-right:-16px; border-radius:0; }
  .pt-cartel h1{ font-size:40px; }
  .pt-bajada{ font-size:15px; }
  .pt-buscar{ flex-wrap:wrap; }
  .pt-buscar input{ flex-basis:100%; border-bottom:1px solid var(--as-linea,#E6E6E6); }
  .pt-buscar select{ flex:1; height:44px; border-left:0; }
  .pt-buscar button{ height:44px; }
  .pt-btn{ width:100%; justify-content:center; }
  /* En el celular la tira se desliza de costado, como las filas de productos. */
  .pt-vitrina{ margin:-56px -16px 0; padding:0; }
  .pt-vitrina-grilla{ display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 16px 10px; scroll-padding-left:16px; scrollbar-width:none; }
  .pt-vitrina-grilla::-webkit-scrollbar{ display:none; }
  .pt-pieza{ flex:0 0 42%; scroll-snap-align:start; }
  .pt-vitrina-de{ margin-right:16px; }
  .pt-sec{ margin-top:32px; }
  .pt-enc{ gap:10px; }
  .pt-enc h2{ font-size:23px; white-space:normal; }
  .pt-emps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pt-emp:nth-child(n+13){ display:none; }
  .pt-page .vd-grilla > :nth-child(n+9){ display:none; }
  .pt-emp{ padding:10px; gap:8px; }
  .pt-emp-logo{ width:40px; height:40px; }
  .pt-publica{ grid-template-columns:1fr; padding:26px 18px; margin-left:-16px; margin-right:-16px; border-radius:0; }
  .pt-publica h2{ font-size:26px; }
  .pt-wa{ right:14px; bottom:14px; width:54px; height:54px; }
  .pt-wa-txt{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .pt-btn .vd-ico, .pt-vermas .vd-ico, .pt-pieza-foto img, .pt-wa, .pt-wa-txt{ transition:none; }
}