/* ===========================================================
   HITO: Metamorfosis de la tienda al estilo AAB (portada, tarjetas, ficha de producto, carrito)
   Va la última, así que manda sobre style.css / home2026.css / tienda2026.css.
   Colores: los de :root de assets/marco.css de la web (--cian, --navy, --profundo…).
   =========================================================== */

/* ---------- Base ---------- */
/* overflow-x:hidden en html/body (tienda2026.css) rompía la cabecera fija: clip recorta igual y deja el sticky vivo */
html,body{overflow-x:clip;}
main#contenido{font-family:var(--letra);color:var(--gris);}
main#contenido h1,main#contenido h2,main#contenido h3{font-family:var(--letra);}
.btn{border-radius:30px;font-weight:700;letter-spacing:0;text-transform:none;}
.btn-primary{background:var(--cian);border-color:var(--cian);color:var(--tinta);box-shadow:0 4px 14px rgba(0,205,254,.45);}
.btn-primary:hover{background:var(--navy);border-color:var(--navy);color:#fff;}
.btn-outline{color:var(--navy);border-color:var(--cian);background:#fff;}
.btn-outline:hover{background:var(--cian-claro);color:var(--navy);}
main#contenido input[type=text],main#contenido input[type=email],main#contenido input[type=tel],main#contenido input[type=password],
main#contenido input[type=number],main#contenido select,main#contenido textarea{border:1px solid var(--cian-borde);border-radius:10px;font-family:var(--letra);}
main#contenido input:focus,main#contenido select:focus,main#contenido textarea:focus{outline:none;border-color:var(--cian);box-shadow:0 0 0 3px rgba(0,205,254,.2);}

/* Títulos de bloque como los de la web: azul, centrados y con una raya cian */
.block-title{color:var(--cian-texto);font-size:1.7rem;font-weight:700;text-align:center;letter-spacing:0;text-transform:none;margin-bottom:30px;}
.block-title::after{content:"";display:block;width:56px;height:4px;border-radius:2px;background:var(--cian);margin:12px auto 0;}

/* ---------- Portada: la entrada se convierte en cabecera con foto, haz de faro y olas ---------- */
section.block-text:has(.a2b-intro){padding:96px 20px 130px !important;
  background:linear-gradient(rgba(0,100,170,.3),rgba(0,80,150,.42)),url("https://psicologia-aab.com/assets/img/cabecera-800.webp?v=2") center/cover no-repeat !important;}
@media (min-width:900px){section.block-text:has(.a2b-intro){background-image:linear-gradient(rgba(0,100,170,.26),rgba(0,80,150,.4)),url("https://psicologia-aab.com/assets/img/cabecera.webp?v=2") !important;}}
/* el haz del faro y las olas están en assets/marco.css de la web (los comparte con la portada) */
main .a2b-intro .a2b-titulo{background:none;box-shadow:none;border-radius:0;padding:0;margin:0 0 18px;text-align:center;color:#fff;
  font-size:clamp(2rem,4.6vw,3rem);font-weight:800;text-shadow:0 2px 14px rgba(0,0,0,.35);}
main .a2b-intro p{color:rgba(255,255,255,.96);font-size:1.15rem;max-width:760px;text-shadow:0 1px 8px rgba(0,0,0,.3);}
main .a2b-intro p strong{color:#fff;}
main .a2b-intro .a2b-tel{margin-top:28px;}
main .a2b-intro .a2b-tel .a2b-wa{background:#fff;color:var(--navy);box-shadow:0 6px 18px rgba(0,0,0,.18);}
main .a2b-intro .a2b-tel .a2b-ll{border:2px solid #fff;color:#fff;background:rgba(255,255,255,.08);}
main .a2b-intro .a2b-tel a:hover{box-shadow:0 10px 24px rgba(0,0,0,.25);}

/* ---------- Opiniones ---------- */
.block-resenas{background:var(--cian-claro);}
.block-resenas .rs-card{background:#fff;border:0;border-top:4px solid var(--cian);border-radius:14px;box-shadow:0 6px 18px rgba(0,119,182,.08);}
.block-resenas .rs-stars,.block-resenas .rs-sello-stars{color:#f5b301;}
.block-resenas .rs-sello-nota{color:var(--navy);}
.block-resenas .rs-name{color:var(--navy);font-weight:700;}
.block-resenas .rs-cta-btn{background:var(--cian);color:var(--tinta);border-radius:30px;}
.block-resenas .rs-cta-btn:hover{background:var(--navy);color:#fff;}

/* ---------- Tarjetas de producto (como las de servicios de la web) ---------- */
/* el fondo de la sección de lado a lado; las tarjetas, al ancho de la cabecera */
.block-product-grid{max-width:none;margin:0;padding:60px 0;background:#fff;}
.block-product-grid .products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px;max-width:var(--ancho);margin:0 auto;padding:0 20px;}
.ft-prod{border:1px solid #e4ebf0;border-radius:14px;box-shadow:0 4px 14px rgba(0,0,0,.05);}
.ft-prod:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(0,119,182,.16);border-color:var(--cian-borde);}
.ft-prod__img{aspect-ratio:16/10;overflow:hidden;background:var(--cian-claro);}
.ft-prod__img img{width:100%;height:100%;object-fit:cover;}
.ft-prod__body{padding:16px 18px 18px;}
.ft-prod__name{color:var(--navy);font-size:1.06rem;font-weight:700;line-height:1.35;}
.ft-prod__price .price{color:var(--profundo);font-weight:800;font-size:1.12rem;}
.ft-prod__cart{background:var(--cian-claro);color:var(--navy);}
.ft-prod:hover .ft-prod__cart,.ft-prod__cart:hover{background:var(--cian);color:#00303f;}

/* ---------- Ficha de producto ---------- */
.breadcrumb{font-size:.85rem;color:#5c6f78;padding:14px 0;}
.breadcrumb a{color:var(--navy);}
.product-page{padding-top:10px;padding-bottom:40px;}
.product-gallery img,.gallery-main{border-radius:16px;}
.product-info h1{color:var(--navy);font-size:clamp(1.7rem,3.2vw,2.3rem);font-weight:800;line-height:1.2;}
.product-price{color:var(--profundo);}
.product-price .price{font-size:1.8rem;font-weight:800;color:var(--profundo);}
.product-trust{display:flex;flex-wrap:wrap;gap:8px;}
.product-trust span{background:var(--cian-claro);color:var(--navy);border-radius:20px;padding:5px 12px;font-size:.85rem;font-weight:600;}
.variant-label{color:var(--navy);font-weight:700;}
.variant-opt{border:2px solid var(--cian-borde);border-radius:30px;background:#fff;color:var(--navy);font-weight:600;padding:8px 16px;}
.variant-opt:hover{border-color:var(--cian);}
.variant-opt.sel{background:var(--cian);border-color:var(--cian);color:var(--tinta);}
.product-description{border-top:1px solid var(--cian-borde);margin-top:26px;padding-top:20px;}
.product-description .pd-titulo{color:var(--navy);font-size:1.3rem;}
.product-description a{color:var(--navy);text-decoration:underline;text-underline-offset:2px;}
.productos-similares{background:var(--gris-claro);max-width:none;}

/* ---------- Llamada final ---------- */
.ft-btn{border-radius:30px;font-weight:700;}

/* ---------- Ancho igual que la cabecera ---------- */
.ft-wrap{max-width:var(--ancho);padding:0 20px;}
#cartWrap{max-width:var(--ancho) !important;padding:0 20px !important;}

/* ---------- Cabecera de categoría: la foto de AAB con el haz del faro y las olas (assets/marco.css) ---------- */
.ft-listhead{background:linear-gradient(rgba(0,100,170,.3),rgba(0,80,150,.42)),url("https://psicologia-aab.com/assets/img/cabecera-800.webp?v=2") center/cover no-repeat;padding-bottom:110px;}
@media (min-width:900px){.ft-listhead{background-image:linear-gradient(rgba(0,100,170,.26),rgba(0,80,150,.4)),url("https://psicologia-aab.com/assets/img/cabecera.webp?v=2");}}
.ft-listhead .ft-blobs{display:none;}
.ft-listhead__title{color:#fff;font-weight:800;text-shadow:0 2px 14px rgba(0,0,0,.35);}
.ft-listhead__desc{color:rgba(255,255,255,.95);}
.ft-migas,.ft-migas a{color:rgba(255,255,255,.9);}
.ft-listhead__search button{background:#fff;color:var(--navy);border-radius:30px;font-weight:700;}

/* Pestañas de categorías */
.ft-catbar__item{border:2px solid var(--cian-borde);border-radius:30px;color:var(--navy);background:#fff;font-weight:600;}
.ft-catbar__item:hover{border-color:var(--cian);color:var(--navy);}
.ft-catbar__item.is-on{background:var(--cian);border-color:var(--cian);color:var(--tinta);}

/* ---------- El pie siempre abajo aunque la página sea corta (carrito vacío, acceso…) ---------- */
body{display:flex;flex-direction:column;min-height:100vh;}
body > *{flex-shrink:0;}
body > main#contenido{flex:1 0 auto;width:100%;}