/* Rediseño PuntoCom: portada, listados, pie y aviso de cookies. Todo con prefijo pc- para no afectar las demás páginas. */
:root {
  --pc-azul: #0b9be3;
  --pc-azul-oscuro: #0773b3;
  --pc-azul-claro: #e8f5fd;
  --pc-marino: #10263f;
  --pc-gris: #5b6b80;
  --pc-borde: #dbe6f0;
  --pc-amarillo: #f6c200;
  --pc-verde: #1fa855;
  --pc-fondo: #f5f9fc;
  --pc-radio: 14px;
}

.pc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Botones ---------- */
.pc-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .6rem 1.1rem; border-radius: 10px;
  font-weight: 700; font-size: .95rem; text-decoration: none; border: 2px solid transparent; cursor: pointer; line-height: 1.2; transition: transform .15s, box-shadow .15s, background .15s; }
.pc-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(16, 38, 63, .18); text-decoration: none; }
.pc-btn-amarillo { background: var(--pc-amarillo); color: #1b1b1b; width: 100%; }
.pc-btn-amarillo:hover { background: #ffd21f; color: #000; }
.pc-btn-azul { background: var(--pc-azul); color: #fff; }
.pc-btn-azul:hover { background: var(--pc-azul-oscuro); color: #fff; }
.pc-btn-verde { background: var(--pc-verde); color: #fff; }
.pc-btn-verde:hover { background: #178a46; color: #fff; }
.pc-btn-blanco { background: #fff; color: var(--pc-azul-oscuro); }
.pc-btn-blanco:hover { background: #f0f8fe; color: var(--pc-azul-oscuro); }
.pc-btn-borde { background: #fff; color: var(--pc-marino); border-color: var(--pc-borde); }

/* ---------- Encabezado ---------- */
.custom-navbar { border-radius: 0 !important; background: linear-gradient(90deg, #0a98e0, #19b4f2) !important; box-shadow: 0 2px 10px rgba(7, 115, 179, .25) !important; padding: .55rem 1rem !important; }
.custom-navbar .nav-link { font-size: 1rem !important; font-weight: 600; }
.pc-idioma { display: flex; align-items: center; color: #fff; font-weight: 700; }
.pc-idioma .nav-link { padding: .5rem .35rem !important; }
.pc-idioma-actual { padding: 0 .35rem; color: #fff; border-bottom: 2px solid #fff; }
.pc-idioma-sep { opacity: .6; padding: 0 .1rem; }

/* ---------- Portada: hero ---------- */
.pc-hero { background: linear-gradient(180deg, #fff 0%, var(--pc-fondo) 100%); padding: 2.2rem 0 1.4rem; text-align: center; }
.pc-hero-h1 { font-size: .85rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pc-azul); margin: 0 0 .5rem; }
.pc-hero-pregunta { font-size: clamp(1.9rem, 4.6vw, 3.2rem); font-weight: 800; color: var(--pc-marino); line-height: 1.12; margin: 0 auto .6rem; max-width: 22ch; min-height: 2.3em; display: flex; align-items: center; justify-content: center; }
.pc-hero-texto { color: var(--pc-gris); font-size: 1.02rem; max-width: 62ch; margin: 0 auto 1.1rem; }
.pc-caja-etiqueta { display: inline-flex; align-items: center; gap: .35rem; color: var(--pc-azul); font-weight: 800; margin-bottom: .5rem; }
.pc-caja { display: flex; align-items: center; gap: .5rem; max-width: 820px; margin: 0 auto; background: #fff; border: 2px solid #6fcdf6; border-radius: 999px;
  padding: .45rem .5rem .45rem 1.3rem; box-shadow: 0 6px 24px rgba(11, 155, 227, .22); }
.pc-caja:focus-within { border-color: var(--pc-azul); box-shadow: 0 6px 28px rgba(11, 155, 227, .38); }
.pc-caja input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 1.05rem; color: var(--pc-marino); min-width: 0; padding: .55rem 0; }
.pc-caja input::placeholder { color: #6b7d92; opacity: 1; }
.pc-caja-enviar { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--pc-azul); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .15s, transform .15s; }
.pc-caja-enviar:hover { background: var(--pc-azul-oscuro); transform: scale(1.06); }
.pc-caja-nota { color: var(--pc-gris); font-size: .82rem; margin: .5rem 0 0; }
.pc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1rem; }
.pc-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border: 1.5px solid #6fcdf6; border-radius: 999px; background: #fff; color: var(--pc-marino); font-weight: 700; font-size: .92rem; text-decoration: none; transition: background .15s, transform .15s; }
.pc-chip:hover { background: var(--pc-azul-claro); transform: translateY(-2px); color: var(--pc-marino); }
.pc-chip svg { color: var(--pc-azul); }

/* ---------- Barra de confianza ---------- */
.pc-confianza { padding: 0; background: #fff; border-top: 1px solid var(--pc-borde); border-bottom: 1px solid var(--pc-borde); }
.pc-confianza ul { list-style: none; margin: 0; padding: .9rem 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.pc-confianza li { display: flex; align-items: center; gap: .7rem; padding: .3rem .8rem; border-right: 1px solid var(--pc-borde); }
.pc-confianza li:last-child { border-right: 0; }
.pc-confianza svg { flex: 0 0 auto; color: var(--pc-azul-oscuro); }
.pc-confianza strong { display: block; color: var(--pc-marino); font-size: .98rem; }
.pc-confianza span { display: block; color: var(--pc-gris); font-size: .8rem; }

/* ---------- Secciones ---------- */
.pc-seccion { padding: 2.2rem 0; }
.pc-seccion h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; color: var(--pc-marino); margin: 0 0 1rem; }
.pc-promos { padding: 1.2rem 0 0; }
.pc-promos img { width: 100%; height: auto; border-radius: var(--pc-radio); aspect-ratio: 3 / 1; object-fit: cover; }

/* ---------- Categorías y buscador ---------- */
.pc-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: 1.2rem; }
.pc-pills { display: flex; gap: .5rem; overflow-x: auto; padding: .2rem .1rem .5rem; scrollbar-width: thin; flex: 1 1 520px; }
.pc-pill { flex: 0 0 auto; padding: .45rem .95rem; border: 1.5px solid var(--pc-borde); border-radius: 999px; background: #fff; color: var(--pc-marino); font-weight: 700; font-size: .88rem; text-decoration: none; white-space: nowrap; }
.pc-pill:hover { border-color: var(--pc-azul); color: var(--pc-azul-oscuro); }
.pc-pill.activa { background: var(--pc-azul); border-color: var(--pc-azul); color: #fff; }
.pc-buscar { display: flex; gap: .4rem; flex: 0 1 300px; }
.pc-buscar input { flex: 1; min-width: 0; border: 1.5px solid var(--pc-borde); border-radius: 10px; padding: .45rem .8rem; }
.pc-buscar button { border: 0; background: var(--pc-azul); color: #fff; border-radius: 10px; padding: 0 .9rem; font-weight: 700; }

/* ---------- Tarjetas de producto ---------- */
.pc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.pc-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--pc-borde); border-radius: var(--pc-radio); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.pc-card:hover { box-shadow: 0 10px 26px rgba(16, 38, 63, .13); transform: translateY(-3px); }
.pc-card-img { display: block; background: #fff; aspect-ratio: 4 / 3; padding: .6rem; }
.pc-card-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pc-card-body { display: flex; flex-direction: column; gap: .25rem; padding: .2rem 1rem 1rem; flex: 1; }
.pc-card-marca { font-weight: 800; color: var(--pc-azul-oscuro); font-size: .78rem; margin: 0; text-transform: uppercase; letter-spacing: .04em; }
.pc-card-nombre { font-size: .98rem; font-weight: 800; margin: 0; line-height: 1.25; }
.pc-card-nombre a { color: var(--pc-marino); text-decoration: none; }
.pc-card-desc { color: var(--pc-gris); font-size: .82rem; margin: 0; flex: 1; }
.pc-card-precio { font-weight: 800; color: var(--pc-marino); font-size: 1.05rem; margin: .4rem 0; }

/* ---------- Paginación y migas ---------- */
.pc-paginacion { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 1.6rem 0 0; }
.pc-pag-link { padding: .45rem .85rem; border: 1.5px solid var(--pc-borde); border-radius: 10px; background: #fff; color: var(--pc-marino); font-weight: 700; text-decoration: none; }
.pc-pag-link:hover { border-color: var(--pc-azul); }
.pc-pag-actual { background: var(--pc-azul); border-color: var(--pc-azul); color: #fff; }
.pc-pag-puntos { padding: .45rem .3rem; color: var(--pc-gris); }
.pc-migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 0; padding: 0; font-size: .88rem; color: var(--pc-gris); }
.pc-migas li + li::before { content: "›"; margin-right: .4rem; color: #9fb0c3; }
.pc-migas a { color: var(--pc-azul-oscuro); text-decoration: none; }
.pc-listado-cab h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: var(--pc-marino); margin: .6rem 0 .4rem; }
.pc-listado-cab p { color: var(--pc-gris); max-width: 78ch; }

/* ---------- Servicio técnico ---------- */
.pc-taller { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.5rem; background: #fff; border: 1px solid var(--pc-borde); border-radius: 18px; padding: 1.6rem; align-items: center; }
.pc-taller h2 { margin-bottom: .4rem; }
.pc-taller p.pc-lead { color: var(--pc-gris); margin-bottom: 1rem; }
.pc-taller-lista { list-style: none; padding: 0; margin: 0 0 1.2rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.pc-taller-lista li { display: flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--pc-marino); font-size: .92rem; }
.pc-taller-lista svg { color: var(--pc-azul); flex: 0 0 auto; }
.pc-taller-foto img { width: 100%; border-radius: 14px; display: block; }
.pc-taller-foto { min-height: 160px; border-radius: 14px; background: linear-gradient(135deg, #0a98e0, #19b4f2); display: grid; place-items: center; color: #fff; padding: 1.2rem; text-align: center; font-weight: 800; font-size: 1.15rem; }
.pc-urgente { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; background: #eaf8ef; border: 1px solid #bfe8cf; border-radius: 14px; padding: 1rem 1.2rem; }
.pc-urgente strong { display: block; color: var(--pc-marino); }
.pc-urgente span { color: var(--pc-gris); font-size: .9rem; }

/* ---------- Visítanos ---------- */
.pc-visita { display: grid; grid-template-columns: 1fr 1.1fr; gap: 1.5rem; background: #fff; border: 1px solid var(--pc-borde); border-radius: 18px; padding: 1.6rem; align-items: stretch; }
.pc-visita address { font-style: normal; margin: 0 0 1rem; display: grid; gap: .7rem; color: var(--pc-marino); }
.pc-visita address p { margin: 0; display: flex; gap: .6rem; align-items: flex-start; }
.pc-visita address svg { color: var(--pc-azul); flex: 0 0 auto; margin-top: .1rem; }
.pc-visita-botones { display: flex; flex-wrap: wrap; gap: .6rem; }
.pc-visita-foto img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; border-radius: 14px; display: block; }

/* ---------- Preguntas frecuentes ---------- */
.pc-faq details { background: #fff; border: 1px solid var(--pc-borde); border-radius: 12px; margin-bottom: .6rem; }
.pc-faq summary { cursor: pointer; padding: .9rem 1.1rem; font-weight: 800; color: var(--pc-marino); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.pc-faq summary::-webkit-details-marker { display: none; }
.pc-faq summary::after { content: "+"; color: var(--pc-azul); font-size: 1.3rem; line-height: 1; }
.pc-faq details[open] summary::after { content: "–"; }
.pc-faq details p { margin: 0; padding: 0 1.1rem 1rem; color: var(--pc-gris); }

/* ---------- Pie de página ---------- */
.pc-footer { background: linear-gradient(180deg, #0a98e0, #0789cc); color: #fff; padding: 2.2rem 0 1rem; margin-top: 2rem; }
.pc-footer a { color: #fff; text-decoration: none; }
.pc-footer a:hover { text-decoration: underline; color: #ffe27a; }
/* los botones del pie conservan su propio color (antes «.pc-footer a» los dejaba con letra blanca sobre fondo blanco) */
.pc-footer a.pc-btn-blanco, .pc-footer a.pc-btn-blanco:hover { color: var(--pc-azul-oscuro); text-decoration: none; }
.pc-footer a.pc-btn-amarillo, .pc-footer a.pc-btn-amarillo:hover { color: #1b1b1b; text-decoration: none; }
.pc-footer h2 { font-size: 1rem; font-weight: 800; margin: 0 0 .7rem; color: #fff; }
.pc-footer-grid { display: grid; grid-template-columns: 1.1fr .9fr 1fr 1.3fr .8fr; gap: 1.5rem; }
.pc-footer-grid-en { grid-template-columns: 1.2fr .9fr 1.4fr; }
.pc-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: .9rem; }
.pc-footer-marca img { height: auto; max-width: 160px; }
.pc-footer-lema { font-size: .92rem; margin: .5rem 0 .9rem; }
/* Logo de la barra principal con su frase debajo, centrada respecto al logo */
.pc-marca { display: inline-flex; flex-direction: column; align-items: center; }
.pc-marca-lema { display: block; color: #fff; font-size: .68rem; font-weight: 700; line-height: 1.1; letter-spacing: .01em; white-space: nowrap; margin-top: -.55rem; text-shadow: 0 1px 2px rgba(7, 115, 179, .35); }
@media (max-width: 768px) { .pc-marca-lema { font-size: .56rem; margin-top: -.3rem; } }
.pc-footer address { font-style: normal; font-size: .9rem; }
.pc-footer address p { margin: 0 0 .6rem; }
.pc-footer-botones { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 0; }
.pc-footer-botones .pc-btn { width: auto; }
.pc-footer-copy { text-align: center; margin: 1.6rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .35); font-size: .85rem; }
.pc-redes, .pc-footer .pc-redes { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.pc-redes a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, .16); color: #fff; transition: background .15s, transform .15s, color .15s; }
.pc-redes a:hover { background: #fff; color: var(--pc-azul-oscuro); transform: translateY(-3px); text-decoration: none; }

/* ---------- Aviso de cookies ---------- */
.pc-cookies { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2000; max-width: 760px; margin: 0 auto; background: #fff; color: var(--pc-marino); border: 1px solid var(--pc-borde);
  border-radius: 14px; box-shadow: 0 10px 40px rgba(16, 38, 63, .3); padding: 1rem 1.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; }
.pc-cookies[hidden] { display: none; }
.pc-cookies p { margin: 0; flex: 1 1 320px; font-size: .9rem; }
.pc-cookies a { color: var(--pc-azul-oscuro); }
.pc-cookies-botones { display: flex; gap: .5rem; }

/* ---------- Celular ---------- */
@media (max-width: 991px) {
  .pc-grid { grid-template-columns: repeat(3, 1fr); }
  .pc-taller, .pc-visita { grid-template-columns: 1fr; }
  .pc-footer-grid, .pc-footer-grid-en { grid-template-columns: 1fr 1fr; }
  .pc-confianza ul { grid-template-columns: repeat(2, 1fr); }
  .pc-confianza li:nth-child(2) { border-right: 0; }
}
@media (max-width: 640px) {
  .pc-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .pc-card-body { padding: .1rem .7rem .8rem; }
  .pc-hero { padding-top: 1.4rem; }
  .pc-caja { padding-left: .9rem; }
  .pc-caja input { font-size: .95rem; }
  .pc-footer-grid, .pc-footer-grid-en { grid-template-columns: 1fr; text-align: center; }
  .pc-redes, .pc-footer-botones { justify-content: center; }
  .pc-pills { flex-basis: 100%; }
  .pc-buscar { flex-basis: 100%; }
  .pc-urgente { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-card, .pc-btn, .pc-chip, .pc-redes a, .pc-caja-enviar { transition: none; }
}

/* Enlaces de texto dentro de las secciones nuevas (el tema base los pinta de amarillo) */
.pc-visita a:not(.pc-btn), .pc-seccion p a:not(.pc-btn), .pc-migas a { color: var(--pc-azul-oscuro); }
.pc-visita a:not(.pc-btn):hover { color: var(--pc-marino); }
.pc-btn.pc-btn-azul, .pc-btn.pc-btn-verde { color: #fff; }
.pc-taller .pc-btn { margin: 0 .4rem .4rem 0; }
@media (max-width: 640px) { .pc-card .pc-btn { font-size: .82rem; padding: .55rem .5rem; } }

/* ======================================================================
   Ajustes de fidelidad con el diseño aprobado (portada, tarjetas, secciones)
   ====================================================================== */
.custom-navbar { padding: .45rem 1rem !important; }
.custom-navbar .navbar-nav { align-items: center; }
#cartCount { background: var(--pc-amarillo) !important; color: var(--pc-marino) !important; font-weight: 800; box-shadow: none !important; }

/* Hero */
.pc-hero { padding: 1.1rem 0 .8rem; background: #fff; }
/* Tamaño de la pregunta principal; el subtítulo se calcula SIEMPRE más pequeño a partir de él (en cualquier pantalla) */
.pc-hero { --pc-h: clamp(.8rem, 4.3vw, 1.9rem); }
.pc-hero-pregunta { margin-bottom: .35rem; min-height: 0; max-width: none; white-space: nowrap; font-size: var(--pc-h); line-height: 1.25; }
.pc-ia-marca { display: inline-flex; align-items: center; gap: .2rem; color: var(--pc-azul); font-weight: 700; }
.pc-ia-marca svg { flex: 0 0 auto; }
.pc-hero-h1 { font-size: max(.72rem, calc(var(--pc-h) * .72)); font-weight: 500; letter-spacing: 0; text-transform: none; color: #5b5fa8; margin: 0 0 1.1rem; }
.pc-caja-etiqueta { color: var(--pc-azul); font-weight: 800; font-size: 1.05rem; margin: 0 0 .5rem; }
.pc-caja { max-width: 840px; padding: .4rem .5rem .4rem .8rem; gap: .35rem; }
.pc-caja-icono { flex: 0 0 auto; width: 44px; height: 44px; border: 0; background: transparent; color: var(--pc-azul); display: grid; place-items: center; border-radius: 50%; cursor: pointer; }
.pc-caja-icono:hover { background: var(--pc-azul-claro); }
.pc-caja-icono.escuchando { background: #ffe3e3; color: #d12a2a; animation: pc-pulso 1s infinite; }
.pc-caja-icono[hidden] { display: none; }
@keyframes pc-pulso { 50% { box-shadow: 0 0 0 6px rgba(209, 42, 42, .18); } }
.pc-caja-adjunto { margin: .5rem 0 0; font-size: .88rem; color: var(--pc-marino); }
.pc-caja-adjunto[hidden] { display: none; }
.pc-caja-quitar { border: 0; background: none; color: var(--pc-azul-oscuro); text-decoration: underline; cursor: pointer; padding: 0 .3rem; }
.pc-hero-texto { color: var(--pc-gris); font-size: .9rem; max-width: 70ch; margin: .8rem auto 0; }
.pc-chips { margin-top: 1.1rem; }

/* Barra de confianza: la última, destacada como en el diseño */
.pc-confianza ul { align-items: center; padding: .7rem 0; }
.pc-confianza li { padding: .5rem 1rem; }
.pc-confianza-destacado { background: var(--pc-azul-claro); border-radius: 12px; border-right: 0 !important; }
.pc-confianza strong { font-size: 1rem; }

/* Productos */
.pc-productos-cab { display: flex; flex-direction: column; align-items: center; gap: .9rem 1.5rem; margin-bottom: 1.2rem; text-align: center; }
.pc-productos-titulo { width: 100%; text-align: center; }
.pc-productos-cab h2 { margin: 0; font-size: clamp(1.5rem, 2.8vw, 2rem); }
.pc-productos-titulo h2 { max-width: 34ch; margin-left: auto; margin-right: auto; text-wrap: balance; }
.pc-productos-titulo p { margin: .4rem auto 0; color: var(--pc-gris); font-size: .95rem; max-width: none; text-align: center; }
.pc-pills .pc-pill { display: inline-flex; align-items: center; gap: .4rem; }
.pc-pills .pc-pill svg { flex: 0 0 auto; }
.pc-pill { background: #fff; }
.pc-pill.activa { box-shadow: 0 3px 10px rgba(11, 155, 227, .35); }
.pc-pills { flex: 0 1 auto; justify-content: center; flex-wrap: wrap; overflow: visible; }
.pc-barra .pc-pills { flex: 1 1 520px; justify-content: flex-start; }
.pc-card { border-radius: 12px; border: 1px solid #e3ebf3; }
.pc-card-img { aspect-ratio: 4 / 3; padding: .8rem .8rem .2rem; background: #fff; }
.pc-card-body { padding: .1rem 1rem 1rem; gap: .15rem; }
.pc-card-marca { color: var(--pc-marino); font-size: .78rem; letter-spacing: .03em; }
.pc-card-nombre { font-size: 1rem; }
.pc-card-nombre a { color: #1d5fb8; }
.pc-card-specs { list-style: none; margin: .1rem 0 .3rem; padding: 0; color: var(--pc-gris); font-size: .8rem; line-height: 1.35; flex: 1; }
.pc-card-precio { margin: .2rem 0 .5rem; }
.pc-ver-todo { text-align: center; margin: 1.6rem 0 0; }
.pc-btn-contorno { background: #fff; color: var(--pc-azul-oscuro); border-color: var(--pc-azul); padding: .65rem 1.6rem; border-radius: 999px; }
.pc-btn-contorno:hover { background: var(--pc-azul-claro); color: var(--pc-azul-oscuro); }
.pc-btn-celeste { background: #19a7ee; color: #fff; }
.pc-btn-celeste:hover { background: #0b8fd3; color: #fff; }
.pc-btn-grande { padding: .8rem 1.4rem; font-size: 1.02rem; border-radius: 12px; }

/* Servicio técnico */
.pc-sobretitulo { font-size: .9rem !important; text-transform: uppercase; letter-spacing: .08em; color: var(--pc-azul) !important; margin-bottom: .6rem !important; }
.pc-taller { grid-template-columns: 1fr 1fr; padding: 1.4rem; gap: 1.6rem; }
.pc-taller h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; color: var(--pc-marino); margin: 0 0 .4rem; }
.pc-taller-lista { flex-wrap: nowrap; gap: 1.2rem; }
.pc-taller-lista li { flex-direction: row; align-items: center; font-size: .86rem; line-height: 1.2; font-weight: 700; }
.pc-taller .pc-btn { width: 100%; margin: 0; }
.pc-taller-foto { padding: 0; background: none; min-height: 0; display: block; }
.pc-taller-foto img { width: 100%; height: auto; border-radius: 14px; display: block; }
.pc-urgente { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; background: #eaf8ef; }
.pc-urgente-icono { color: var(--pc-verde); }

/* Visítanos */
.pc-visita { grid-template-columns: 1fr 1fr; gap: 1.2rem 1.6rem; }
.pc-visita h2 { margin-bottom: .8rem; }
.pc-visita-foto img { height: 100%; min-height: 240px; }
.pc-visita-botones .pc-btn { flex: 1 1 200px; }

/* Pie: azul liso como el diseño */
.pc-footer { background: #0a98e0; }

@media (max-width: 991px) {
  .pc-taller { grid-template-columns: 1fr; }
  .pc-taller-lista { flex-wrap: wrap; }
  .pc-visita { grid-template-columns: 1fr; }
  .pc-urgente { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pc-pills { justify-content: center; }
}

/* ---------- Chat con PuntoCom IA ---------- */
.pc-chat { padding: 0; max-width: 840px; margin: 1rem auto 0; background: #fff; border: 1px solid var(--pc-borde); border-radius: 18px; box-shadow: 0 8px 28px rgba(16, 38, 63, .12); text-align: left; overflow: hidden; }
.pc-chat[hidden] { display: none; }
.pc-chat-cab { display: flex; justify-content: space-between; align-items: center; padding: .7rem 1rem; background: var(--pc-azul-claro); color: var(--pc-marino); }
.pc-chat-mensajes { max-height: 360px; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.pc-msg { max-width: 86%; padding: .65rem .9rem; border-radius: 16px; font-size: .95rem; line-height: 1.4; word-wrap: break-word; }
.pc-msg p { margin: 0; }
.pc-msg-usuario { align-self: flex-end; background: var(--pc-azul); color: #fff; border-bottom-right-radius: 4px; }
.pc-msg-asistente { align-self: flex-start; background: #f1f5f9; color: var(--pc-marino); border-bottom-left-radius: 4px; }
.pc-msg a.pc-chat-enlace { color: var(--pc-azul-oscuro); font-weight: 700; text-decoration: underline; }
.pc-msg-usuario a { color: #fff; }
.pc-chat-btn-wa { margin-top: .6rem; width: auto; padding: .5rem .9rem; font-size: .85rem; }
.pc-chat-escribiendo { display: flex; gap: .3rem; padding: 0 1.2rem .8rem; }
.pc-chat-escribiendo[hidden] { display: none; }
.pc-chat-escribiendo span { width: 8px; height: 8px; border-radius: 50%; background: #9fb3c8; animation: pc-punto 1s infinite ease-in-out; }
.pc-chat-escribiendo span:nth-child(2) { animation-delay: .15s; }
.pc-chat-escribiendo span:nth-child(3) { animation-delay: .3s; }
@keyframes pc-punto { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.pc-chat-pie { font-size: .85rem; color: var(--pc-gris); }
.pc-chat-pie a { color: var(--pc-azul-oscuro); font-weight: 700; }
.pc-chat-restan { font-weight: 700; color: var(--pc-marino); }
/* Modo chat (como un chat de IA): sin título ni atajos; la conversación arriba, la caja de escribir debajo y los productos siguen a la vista más abajo */
.pc-hero.modo-chat { padding: 1rem 0 1.2rem; }
.pc-hero.modo-chat .pc-hero-pregunta, .pc-hero.modo-chat .pc-hero-h1, .pc-hero.modo-chat .pc-caja-etiqueta, .pc-hero.modo-chat .pc-chips, .pc-hero.modo-chat .pc-hero-texto { display: none; }
.pc-hero.modo-chat .pc-chat { margin-top: 0; }
.pc-hero.modo-chat .pc-chat-mensajes { max-height: min(52vh, 460px); min-height: 160px; }
.pc-hero.modo-chat .pc-caja { margin-top: .7rem; }
.pc-chat-pie { max-width: 840px; margin: .5rem auto 0; padding: 0; border: 0; text-align: center; }
.pc-chat-pie[hidden] { display: none; }
.pc-msg-asistente { animation: pc-entra .18s ease-out; }
@keyframes pc-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Botón verde de WhatsApp: apagado (contorno) mientras la IA atiende; "encendido" y latiendo al agotarse las preguntas */
.pc-chat-pie a.pc-chat-wa { display: inline-block; margin-left: .3rem; padding: .35rem .8rem; border-radius: 999px; border: 2px solid var(--pc-verde); color: var(--pc-verde); background: #fff; text-decoration: none; }
.pc-chat-pie a.pc-chat-wa.encendido { background: var(--pc-verde); color: #fff; animation: pc-latido 1.6s infinite; }
@keyframes pc-latido { 0% { box-shadow: 0 0 0 0 rgba(23, 138, 70, .55); } 70% { box-shadow: 0 0 0 12px rgba(23, 138, 70, 0); } 100% { box-shadow: 0 0 0 0 rgba(23, 138, 70, 0); } }
.pc-caja.agotado { opacity: .7; }
.pc-caja.enviando { opacity: .75; }
.pc-caja-nota a { color: var(--pc-azul-oscuro); }
@media (prefers-reduced-motion: reduce) { .pc-msg-asistente { animation: none; } .pc-hero.modo-chat .pc-chat-mensajes { scroll-behavior: auto; } .pc-chat-escribiendo span { animation: none; opacity: .6; } .pc-chat-pie a.pc-chat-wa.encendido { animation: none; } }
@media (max-width: 640px) { .pc-msg { max-width: 94%; } .pc-chat-mensajes { max-height: 300px; } }

/* Borde de la caja del chat: un destello que recorre el borde a velocidad CONSTANTE y lenta (se mueve por el contorno, no gira como un
   degradado: así va igual de rápido en los tramos largos, en las curvas y en las puntas). Sin offset-path queda el borde celeste fijo. */
.pc-caja { position: relative; border-color: #6fcdf6; }
.pc-caja-borde { position: absolute; inset: -2px; border-radius: inherit; padding: 2px; overflow: hidden; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.pc-caja-borde i { position: absolute; left: 0; top: 0; width: 170px; height: 16px; border-radius: 8px;
  background: linear-gradient(90deg, rgba(111, 205, 246, 0) 0%, #6fcdf6 45%, #0b9be3 80%, #fff 100%);
  offset-path: inset(0 round 999px); offset-rotate: auto; offset-anchor: 100% 50%; offset-distance: 0%;
  animation: pc-recorre 8s linear infinite; }
@keyframes pc-recorre { to { offset-distance: 100%; } }
.pc-caja:focus-within { border-color: #6fcdf6; }
.pc-caja.agotado .pc-caja-borde { display: none; }

/* Servicios extra de la portada (cámaras y equipos Apple) y su página */
.pc-servicios-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
.pc-servicio-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 1rem; background: #fff; border: 1.5px solid #bfe6fa; border-radius: 16px; padding: .9rem; box-shadow: 0 4px 16px rgba(11, 155, 227, .08); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.pc-servicio-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(11, 155, 227, .18); border-color: var(--pc-azul); }
.pc-servicio-foto { display: block; border-radius: 12px; overflow: hidden; }
.pc-servicio-foto img { display: block; width: 100%; height: auto; transition: transform .35s ease; }
.pc-servicio-card:hover .pc-servicio-foto img { transform: scale(1.05); }
.pc-servicio-texto h3 { font-size: 1.15rem; font-weight: 800; color: var(--pc-marino); margin: 0 0 .35rem; line-height: 1.25; }
.pc-servicio-texto h3 a { color: inherit; text-decoration: none; }
.pc-servicio-texto p { color: var(--pc-gris); font-size: .92rem; margin: 0 0 .7rem; }
.pc-pagina-servicio { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; }
.pc-pagina-servicio-foto img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 8px 28px rgba(16, 38, 63, .12); }
/* Foto del servicio Apple: la foto se funde con un degradado celeste y lleva un sello de garantía */
.pc-foto-bonita { position: relative; margin: 0; border-radius: 22px; overflow: hidden; background: linear-gradient(135deg, #bfe6fa 0%, #e8f5fd 55%, #fff6bf 100%); box-shadow: 0 14px 38px rgba(11, 155, 227, .22); }
.pc-pagina-servicio-foto .pc-foto-bonita img { border-radius: 0; box-shadow: none; mix-blend-mode: multiply; transition: transform .6s ease; }
.pc-foto-bonita:hover img { transform: scale(1.04); }
.pc-foto-sello { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border-radius: 999px; background: var(--pc-azul); color: #fff; font-weight: 800; font-size: .9rem; box-shadow: 0 6px 16px rgba(11, 155, 227, .4); }
.pc-servicio-foto .pc-foto-mac { aspect-ratio: 3 / 2; object-fit: cover; object-position: 62% 50%; }
.pc-servicio-foto .pc-foto-camaras { object-position: 74% 62%; }
.pc-mac-sub { color: var(--pc-gris); margin: 0 0 1rem; max-width: 70ch; }
@media (max-width: 760px) {
  .pc-servicios-extra, .pc-pagina-servicio { grid-template-columns: 1fr; }
  .pc-servicio-card { grid-template-columns: 1fr; text-align: center; }
  .pc-pagina-servicio-foto { order: -1; }
}
@media (prefers-reduced-motion: reduce) { .pc-servicio-card, .pc-servicio-foto img { transition: none; } .pc-servicio-card:hover { transform: none; } }

/* Página «Servicio técnico para tus equipos Apple» */
.pc-mac-hero { padding: 0; background: linear-gradient(180deg, #fff 0%, #f1f9fe 100%); overflow: hidden; }
.pc-mac-hero-grid { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 1rem; min-height: 340px; }
.pc-mac-hero h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 800; color: var(--pc-marino); line-height: 1.08; margin: 0 0 .8rem; }
.pc-mac-eyebrow { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pc-azul); font-weight: 800; margin-bottom: .6rem; line-height: 1.3; }
.pc-mac-lead { color: var(--pc-gris); font-size: 1.1rem; margin: 0; max-width: 38ch; }
.pc-mac-lead strong { color: var(--pc-marino); }
.pc-mac-botones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }
.pc-btn-contorno-verde { background: #fff; color: var(--pc-verde); border: 2px solid var(--pc-verde); }
.pc-btn-contorno-verde:hover { background: #eaf8ef; color: var(--pc-verde); }
.pc-mac-hero-foto img { display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%); mask-image: linear-gradient(90deg, transparent 0, #000 12%); }
.pc-mac-seccion { padding: 1.5rem 0; }
.pc-mac-h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; color: var(--pc-marino); margin: 0 0 1rem; }
.pc-mac-ayuda { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.pc-mac-ayuda article { display: flex; align-items: center; gap: .9rem; background: #fff; border: 1px solid var(--pc-borde); border-radius: 14px; padding: 1rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.pc-mac-ayuda article:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(11, 155, 227, .14); border-color: #8fd3f4; }
.pc-mac-ayuda svg { flex: 0 0 auto; color: var(--pc-azul); }
.pc-mac-ayuda h3 { font-size: 1rem; font-weight: 800; color: var(--pc-marino); margin: 0 0 .15rem; }
.pc-mac-ayuda p { margin: 0; color: var(--pc-gris); font-size: .88rem; }
.pc-mac-pasos { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.7rem; padding: 0; margin: 0; }
.pc-mac-pasos li { position: relative; display: flex; align-items: flex-start; gap: .8rem; background: #fff; border: 1px solid #cfeafb; border-radius: 14px; padding: 1rem; }
.pc-mac-pasos li:not(:last-child)::after { content: "→"; position: absolute; right: -1.35rem; top: 50%; transform: translateY(-50%); color: var(--pc-azul); font-weight: 800; font-size: 1.2rem; }
.pc-mac-num { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: var(--pc-azul); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; }
.pc-mac-pasos h3 { font-size: 1.02rem; font-weight: 800; color: var(--pc-azul-oscuro); margin: 0 0 .2rem; }
.pc-mac-pasos p { margin: 0; color: var(--pc-gris); font-size: .88rem; }
.pc-mac-botones .pc-btn { width: auto; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.pc-mac-empresa .pc-mac-botones { margin-top: .4rem; }
.pc-mac-aviso { text-align: center; color: var(--pc-gris); font-size: .82rem; margin: .8rem 0 0; }
.pc-mac-aviso a { color: var(--pc-azul-oscuro); }
@media (max-width: 900px) {
  .pc-mac-hero-grid { grid-template-columns: 1fr; padding-top: 1rem; }
  .pc-mac-hero-foto img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%); mask-image: linear-gradient(180deg, transparent 0, #000 20%); }
  .pc-mac-ayuda { grid-template-columns: repeat(2, 1fr); }
  .pc-mac-pasos { grid-template-columns: 1fr; gap: 1.5rem; }
  .pc-mac-pasos li:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -1.45rem; transform: translateX(-50%); }
}
@media (max-width: 560px) { .pc-mac-ayuda { grid-template-columns: 1fr; } .pc-mac-botones .pc-btn { flex: 1 1 100%; text-align: center; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .pc-mac-ayuda article { transition: none; } .pc-mac-ayuda article:hover { transform: none; } }

/* Barra «Desde 1999 / Local en Cuenca / Envíos / Compra segura»: al pasar el ratón (o tocar) el ícono se anima y la fila se eleva */
.pc-confianza li { border-radius: 12px; transition: transform .2s ease, background .2s ease; }
.pc-confianza li:hover, .pc-confianza li:active { transform: translateY(-2px); background: var(--pc-azul-claro); }
.pc-confianza-destacado:hover, .pc-confianza-destacado:active { background: #d3ecfb; }
.pc-confianza li svg { transform-origin: center; }
.pc-confianza li:nth-child(1):hover svg, .pc-confianza li:nth-child(1):active svg { animation: pc-ico-calendario .9s ease-in-out infinite; transform-origin: 50% 10%; }
.pc-confianza li:nth-child(2):hover svg, .pc-confianza li:nth-child(2):active svg { animation: pc-ico-pin .85s ease-in-out infinite; transform-origin: 50% 100%; }
.pc-confianza li:nth-child(3):hover svg, .pc-confianza li:nth-child(3):active svg { animation: pc-ico-camion .9s ease-in-out infinite; }
.pc-confianza li:nth-child(4):hover svg, .pc-confianza li:nth-child(4):active svg { animation: pc-ico-escudo 1s ease-in-out infinite; }
@keyframes pc-ico-calendario { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
@keyframes pc-ico-pin { 0%, 100% { transform: translateY(0) scaleY(1); } 35% { transform: translateY(-8px) scaleY(1.06); } 60% { transform: translateY(0) scaleY(.88); } 80% { transform: translateY(-2px) scaleY(1); } }
@keyframes pc-ico-camion { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(6px) translateY(-1px); } 25%, 75% { transform: translateX(1px) translateY(1px); } }
@keyframes pc-ico-escudo { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .pc-confianza li, .pc-confianza li svg { animation: none !important; transition: none; transform: none !important; } }

/* Chat simétrico y adaptable a cualquier pantalla: mismo margen a izquierda y derecha, íconos del mismo tamaño en ambos extremos */
.pc-caja { padding: .4rem .5rem; }
.pc-caja-icono, .pc-caja-enviar { width: 44px; height: 44px; }
.pc-chat-pie > span:empty { display: none; }
@media (max-width: 640px) {
  .pc-caja { gap: .2rem; padding: .35rem .4rem; }
  .pc-caja-icono, .pc-caja-enviar { width: 40px; height: 40px; }
  .pc-caja input { font-size: 1rem; }
  .pc-msg { max-width: 92%; }
  .pc-hero.modo-chat .pc-chat-mensajes { max-height: min(46vh, 380px); padding: .8rem; }
  .pc-chat-cab { padding: .6rem .9rem; }
  .pc-chat-pie { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; }
  .pc-chat-pie a.pc-chat-wa { margin-left: 0; width: 100%; max-width: 360px; text-align: center; padding: .55rem 1rem; }
  .pc-chat-btn-wa { display: block; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .pc-caja-borde { display: none; } }
@supports not (offset-path: inset(0 round 999px)) { .pc-caja-borde { display: none; } }

/* Chat al estilo ChatGPT: neutro y sin colores (solo el logo de PuntoCom IA lleva su azul), la IA responde sin globo y la persona en un globo gris */
.pc-chat { background: #fff; border: 1px solid #e6e6e6; box-shadow: none; }
.pc-chat-cab { justify-content: flex-start; background: #fff; border-bottom: 1px solid #f0f0f0; padding: .75rem 1.1rem; }
.pc-chat-cab .pc-ia-marca { font-size: 1.02rem; gap: .35rem; }
.pc-chat-mensajes { gap: 1.1rem; padding: 1.1rem; }
.pc-msg { max-width: 100%; font-size: .98rem; line-height: 1.6; color: #1f1f1f; }
.pc-msg-usuario { align-self: flex-end; max-width: 82%; background: #f4f4f4; color: #1f1f1f; border-radius: 20px; padding: .65rem 1.05rem; }
.pc-msg-asistente { align-self: stretch; position: relative; background: transparent; border-radius: 0; padding: .1rem .2rem .1rem 2.5rem; }
.pc-msg-asistente::before { content: ""; position: absolute; left: 0; top: .1rem; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #e6e6e6; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230b9be3' d='M12 2l1.9 5.6L19.5 9l-5.6 1.9L12 16.5l-1.9-5.6L4.5 9l5.6-1.4z'/%3E%3C/svg%3E") center / 17px no-repeat; }
.pc-msg a.pc-chat-enlace { color: #1f1f1f; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pc-msg a.pc-chat-enlace:hover { color: #000; }
.pc-chat-escribiendo span { background: #b8b8b8; }
.pc-chat-restan { color: #6b6b6b; font-weight: 600; }
@media (max-width: 640px) {
  .pc-msg-usuario { max-width: 88%; }
  .pc-msg-asistente { padding-left: 2.3rem; }
  .pc-msg-asistente::before { width: 26px; height: 26px; background-size: 15px; }
}

/* Tarjeta de contacto dentro del chat (neutra, como el resto de la conversación) */
.pc-contacto { align-self: stretch; margin-left: 2.5rem; background: #fafafa; border: 1px solid #e6e6e6; border-radius: 16px; padding: 1rem 1.1rem; color: #1f1f1f; }
.pc-contacto strong { display: block; font-size: 1rem; }
.pc-contacto p { margin: .25rem 0 .7rem; color: #5f5f5f; font-size: .9rem; }
.pc-contacto form { display: grid; gap: .55rem; }
.pc-contacto-campo { display: grid; gap: .2rem; font-size: .8rem; color: #5f5f5f; }
.pc-contacto-campo input { width: 100%; border: 1px solid #d9d9d9; border-radius: 10px; padding: .55rem .75rem; font-size: 1rem; background: #fff; color: #1f1f1f; }
.pc-contacto-campo input:focus { outline: 2px solid #1f1f1f; outline-offset: 1px; border-color: #1f1f1f; }
.pc-contacto-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pc-contacto-acepto { display: flex; gap: .55rem; align-items: flex-start; font-size: .82rem; color: #5f5f5f; line-height: 1.4; }
.pc-contacto-acepto input { margin-top: .2rem; width: 18px; height: 18px; flex: 0 0 auto; accent-color: #1f1f1f; }
.pc-contacto-acepto a { color: #1f1f1f; text-decoration: underline; }
.pc-contacto-error { color: #b3261e !important; font-size: .85rem !important; margin: 0 !important; }
.pc-contacto-error[hidden] { display: none; }
.pc-contacto-botones { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.pc-contacto-enviar { border: 0; border-radius: 999px; background: #1f1f1f; color: #fff; font-weight: 700; padding: .6rem 1.2rem; cursor: pointer; }
.pc-contacto-enviar:disabled { opacity: .6; cursor: wait; }
.pc-contacto-no { border: 0; background: none; color: #5f5f5f; text-decoration: underline; cursor: pointer; padding: .4rem .2rem; }
@media (max-width: 640px) { .pc-contacto { margin-left: 2.3rem; padding: .85rem; } .pc-contacto-botones .pc-contacto-enviar { flex: 1 1 100%; } }

@media (min-width: 700px) { .pc-contacto form { grid-template-columns: 1fr 1fr; } .pc-contacto-acepto, .pc-contacto-error, .pc-contacto-botones, .pc-contacto-campo:nth-of-type(3) { grid-column: 1 / -1; } }

/* Tarjetas de producto en el chat: fila horizontal con foto, nombre, precio y botón (neutras, como el resto de la conversación) */
.pc-prods { position: relative; margin: .8rem 0 .2rem -2.5rem; }
.pc-prods-fila { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x proximity; padding: .15rem .1rem .6rem 2.5rem; scrollbar-width: thin; scrollbar-color: #c9c9c9 transparent; -webkit-overflow-scrolling: touch; }
.pc-prod { flex: 0 0 172px; scroll-snap-align: start; display: flex; flex-direction: column; gap: .15rem; background: #fff; border: 1px solid #e6e6e6; border-radius: 16px; padding: .6rem .65rem .7rem; }
.pc-prod-foto { display: block; aspect-ratio: 1 / 1; border-radius: 12px; background: #fff; overflow: hidden; }
.pc-prod-foto img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pc-prod-marca { margin: .35rem 0 0; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #6b6b6b; }
.pc-prod-nombre { margin: .1rem 0 0; font-size: .86rem; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.2em; }
.pc-prod-nombre a { color: #1f1f1f; text-decoration: none; }
.pc-prod-precio { margin: .25rem 0 .4rem; font-size: 1rem; font-weight: 800; color: #1f1f1f; }
.pc-prod-boton { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; border-radius: 10px; border: 2px solid transparent; background: var(--pc-amarillo); color: #1b1b1b; font-weight: 700; font-size: .9rem; line-height: 1.2; padding: .55rem .6rem; text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s; }
.pc-prod-boton:hover { background: #ffd21f; color: #000; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(16, 38, 63, .18); text-decoration: none; }
.pc-prods-flecha { display: none; position: absolute; top: 38%; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #d9d9d9; background: #fff; color: #1f1f1f; font-size: 1.3rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.pc-prods-izq { left: 2.5rem; } .pc-prods-der { right: .3rem; }
.pc-prods-largo .pc-prods-flecha { display: block; }
@media (max-width: 640px) { .pc-prods { margin-left: -2.3rem; } .pc-prods-fila { padding-left: 2.3rem; } .pc-prod { flex-basis: 150px; } .pc-prods-flecha { display: none !important; } .pc-prods-izq { left: 2.3rem; } }