/* ============================================================
   TEXTILES PELILEO — Páginas internas con el estilo de la home.
   Se carga DESPUÉS de css/style.css: deja su estructura (galerías,
   FAQ, antes/después, grillas) y le cambia el lenguaje visual.
   ============================================================ */

:root {
  /* Tokens de la home */
  --papel: #F4F1EA;
  --papel-2: #EAE5DA;
  --tinta: #0E1B2A;
  --tinta-2: #1B3A57;
  --texto: #2B3542;
  --gris: #5A6370;
  --linea: rgba(14, 27, 42, .14);
  --linea-clara: rgba(244, 241, 234, .18);
  --laton: #87602E;
  --laton-claro: #D6A85C;
  --titulo: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --gutter: clamp(20px, 4.5vw, 64px);
  --ancho: 1320px;
  --suave: cubic-bezier(.2, .7, .2, 1);

  /* Variables de style.css, llevadas a la paleta nueva */
  --navy-900: #0E1B2A;
  --navy-800: #132436;
  --navy-700: #17324C;
  --navy: #1B3A57;
  --leather: #87602E;
  --leather-dark: #6E4E25;
  --leather-light: #B08652;
  --cream: #F4F1EA;
  --cream-dark: #DCD6C9;
  --sand: #EAE5DA;
  --ink: #2B3542;
  --muted: #5A6370;
  --line: rgba(14, 27, 42, .14);
  --white: #F4F1EA;
  --gold: #D6A85C;
  --font-head: var(--titulo);
  --font-body: var(--titulo);
  --maxw: 1320px;
  --radius: 2px;
  --radius-sm: 2px;
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: none;
}

body { font-size: 1.0625rem; color: var(--texto); background: var(--papel); text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5 { font-weight: 500; letter-spacing: -.025em; line-height: 1.08; }
h2 em, h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.container { max-width: calc(var(--ancho) + var(--gutter) * 2); padding: 0 var(--gutter); }
:focus-visible { outline: 2px solid var(--laton); outline-offset: 3px; }

/* ---------- Cabecera (igual que la home, siempre sólida) ---------- */
.contenedor { width: 100%; max-width: calc(var(--ancho) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.saltar { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--tinta); color: var(--papel); padding: 10px 16px; }
.saltar:focus { top: 12px; }
.cabecera { position: sticky; top: 0; z-index: 50; background: rgba(244, 241, 234, .94); color: var(--tinta); box-shadow: 0 1px 0 var(--linea); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cabecera__in { max-width: calc(var(--ancho) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); height: 72px; display: flex; align-items: center; gap: 36px; }
.marca { display: block; width: 150px; flex: none; }
.marca img { width: 100%; height: auto; }
.cabecera__nav { display: flex; gap: 30px; margin-left: auto; }
.cabecera__nav a, .cabecera__cta { font-size: .9rem; font-weight: 500; letter-spacing: .01em; }
.cabecera__nav a { opacity: .8; transition: opacity .2s; padding: 6px 0; }
.cabecera__nav a:hover, .cabecera__nav a[aria-current="page"] { opacity: 1; }
.cabecera__nav a[aria-current="page"] { box-shadow: inset 0 -1px 0 currentColor; }
.cabecera__cta { border: 1px solid currentColor; padding: 10px 20px; border-radius: 2px; transition: background .3s, color .3s; white-space: nowrap; }
.cabecera__cta:hover { background: var(--tinta); color: var(--papel); }
.menu-movil { display: none; position: relative; }
.menu-movil summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-content: center; gap: 7px; }
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil summary span { display: block; width: 26px; height: 1.5px; background: currentColor; transition: transform .3s; }
.menu-movil[open] summary span:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-movil[open] summary span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
.menu-movil nav { position: absolute; right: 0; top: 56px; width: min(78vw, 300px); background: var(--papel); color: var(--tinta); padding: 14px 0; box-shadow: 0 20px 50px rgba(14, 27, 42, .18); display: flex; flex-direction: column; }
.menu-movil nav a { padding: 13px 24px; font-weight: 500; border-bottom: 1px solid var(--linea); }
.menu-movil nav a:last-child { border-bottom: 0; }
.menu-movil nav a[aria-current="page"] { color: var(--laton); }
@media (max-width: 1020px) { .cabecera__nav { display: none; } .cabecera__cta { margin-left: auto; } .menu-movil { display: block; } }
@media (max-width: 760px) { .cabecera__in { height: 64px; gap: 14px; } .marca { width: 124px; } .cabecera__cta { display: none; } .menu-movil { margin-left: auto; } }

/* ---------- Pie ---------- */
.pie { background: #09121C; color: rgba(244, 241, 234, .7); padding: 80px 0 30px; font-size: .92rem; }
.pie__in { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 60px; }
.pie__marca img { width: 170px; height: auto; margin-bottom: 20px; }
.pie__marca p { max-width: 34ch; }
.pie__contacto { margin: 22px 0 18px; display: grid; gap: 6px; }
.pie__contacto a:hover, .pie__redes a:hover, .pie nav a:hover { color: var(--papel); }
.pie__redes { display: flex; gap: 18px; }
.pie__redes a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(244, 241, 234, .3); }
.pie nav { display: flex; flex-direction: column; gap: 10px; }
.pie h3 { color: var(--papel); font-family: var(--titulo); font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 8px; }
.pie__legal { border-top: 1px solid var(--linea-clara); padding-top: 26px; font-size: .8rem; color: rgba(244, 241, 234, .5); }
@media (max-width: 860px) { .pie__in { grid-template-columns: 1fr 1fr; } .pie__marca { grid-column: 1 / -1; } }
@media (max-width: 760px) { .pie { padding-bottom: 100px; } }

/* ---------- Barra de contacto ---------- */
.barra { position: fixed; z-index: 40; right: 22px; bottom: 22px; display: flex; gap: 8px; }
.barra a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 20px; font-weight: 600; font-size: .92rem; border-radius: 2px; }
.barra svg { width: 20px; height: 20px; fill: currentColor; }
.barra__wa { background: #25D366; color: #0B2A17; box-shadow: 0 10px 30px rgba(14, 27, 42, .25); }
.barra__tel { display: none !important; }
@media (max-width: 760px) {
  .barra { left: 0; right: 0; bottom: 0; gap: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(244, 241, 234, .96); box-shadow: 0 -1px 0 var(--linea); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .barra a { flex: 1; }
  .barra__wa { box-shadow: none; }
  .barra__tel { display: inline-flex !important; background: var(--tinta); color: var(--papel); margin-left: 8px; }
}
@media (min-width: 761px) { body { padding-bottom: 0; } }

/* ---------- Secciones ---------- */
.section { padding: clamp(72px, 9vw, 128px) 0; }
.section--tight { padding: clamp(48px, 6vw, 80px) 0; }
.bg-white { background: var(--papel); }
.bg-cream, .bg-sand { background: var(--papel-2); }
.bg-navy { background: var(--tinta); color: rgba(244, 241, 234, .82); }
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4 { color: var(--papel); }

.kicker { font-weight: 600; font-size: .75rem; letter-spacing: .18em; color: var(--laton); gap: 14px; margin-bottom: 20px; }
.kicker::before { height: 1px; }
.bg-navy .kicker, .phero .kicker, .cta-block .kicker { color: var(--laton-claro); }

.section-head { max-width: 780px; margin: 0 0 clamp(40px, 6vw, 72px); text-align: left; }
.section-head h2 { font-size: clamp(2rem, 4vw, 3.4rem); margin-bottom: 18px; }
.section-head p { font-size: 1.05rem; max-width: 60ch; }
.text-center .section-head, .section-head.text-center { margin-left: auto; margin-right: auto; text-align: center; }
.text-center .section-head p { margin-left: auto; margin-right: auto; }

.lead { color: var(--gris); }

/* ---------- Héroe de página ---------- */
.phero { background: var(--tinta); padding: clamp(36px, 5vw, 64px) 0 clamp(56px, 7vw, 96px); }
.phero .text-center { text-align: left; }
.phero h1 { font-size: clamp(2.3rem, 5vw, 4.4rem); line-height: 1; letter-spacing: -.035em; margin: 14px 0 22px; max-width: 18ch; }
.phero__lead { color: rgba(244, 241, 234, .76); font-size: 1.1rem; max-width: 56ch; }
.phero .text-center .phero__lead { margin-left: 0; }
.phero__grid { gap: clamp(36px, 6vw, 96px); }
.phero__price { margin: 26px 0 30px; padding-top: 22px; border-top: 1px solid var(--linea-clara); }
.phero__price .amt { font-weight: 500; color: var(--papel); font-size: clamp(2.2rem, 3.4vw, 3rem); letter-spacing: -.03em; }
.phero__price .unit { color: rgba(244, 241, 234, .6); }
.phero__media, .gallery__main { border-radius: 0; background: var(--papel-2); }
.gallery__thumbs button { border-radius: 0; border-width: 1px; background: var(--papel-2); }
.gallery__thumbs button.active { border-color: var(--laton-claro); box-shadow: none; }
.gallery__main .zoom-hint { border-radius: 0; background: rgba(244, 241, 234, .92); color: var(--tinta); }
.breadcrumb { color: rgba(244, 241, 234, .55); font-size: .78rem; letter-spacing: .04em; }
.breadcrumb a:hover { color: var(--papel); }
.bg-cream .breadcrumb, .bg-white .breadcrumb { color: var(--gris); }

/* ---------- Botones ---------- */
.btn { border-radius: 2px; font-weight: 500; letter-spacing: .02em; border-width: 1px; padding: 15px 28px; min-height: 52px; }
.btn--lg { padding: 17px 34px; font-size: 1rem; }
.btn--wa { background: var(--tinta); color: var(--papel); box-shadow: none; }
.btn--wa:hover { background: var(--tinta-2); transform: none; box-shadow: none; }
.btn--wa i { color: #25D366; }
.bg-navy .btn--wa, .phero .btn--wa, .cta-block .btn--wa { background: var(--papel); color: var(--tinta); }
.bg-navy .btn--wa:hover, .phero .btn--wa:hover, .cta-block .btn--wa:hover { background: #fff; }
.bg-navy .btn--wa i, .phero .btn--wa i, .cta-block .btn--wa i { color: #1A9C4A; }
.btn--navy { background: var(--tinta); }
.btn--navy:hover, .btn--leather:hover { transform: none; }
.btn--leather { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.btn--leather:hover { background: var(--tinta); color: var(--papel); }
.btn--outline { border-color: var(--tinta); color: var(--tinta); }
.btn--outline:hover { background: var(--tinta); color: var(--papel); }
.btn--ghost-light { background: transparent; border-color: rgba(244, 241, 234, .5); color: var(--papel); }
.btn--ghost-light:hover { background: var(--papel); color: var(--tinta); }

/* ---------- Etiquetas y badges ---------- */
.tag { background: transparent; color: var(--papel); border: 1px solid var(--linea-clara); border-radius: 2px; font-weight: 500; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; }
.bg-cream .tag, .bg-white .tag { color: var(--tinta); border-color: var(--linea); }
.badge { border-radius: 2px; background: var(--tinta); font-weight: 600; letter-spacing: .1em; }
.badge--gold { background: var(--papel); color: var(--tinta); }
.badge--navy { background: var(--tinta-2); }

/* ---------- Tarjetas de producto ---------- */
.card { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.card:hover { box-shadow: none; }
.card__media { background: var(--cream-dark); }
.card:hover .card__media img { transform: scale(1.04); }
.card__media img { transition: transform 1.2s var(--suave); }
.card__body { padding: 20px 0 0; }
.card__body h3 { font-size: 1.15rem; letter-spacing: -.01em; }
.card__body p { font-size: .94rem; }
.card__meta { color: var(--laton); font-weight: 600; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.card__price { font-weight: 500; font-size: 1.2rem; padding-top: 14px; border-top: 1px solid var(--linea); }
.card__foot .btn { width: 100%; }

.tile { border-radius: 0; }
.tile::after { background: linear-gradient(transparent 40%, rgba(14, 27, 42, .88)); }
.tile__cap h3 { font-weight: 500; }
.tile__cap .go { color: var(--laton-claro); font-weight: 500; }

/* ---------- Bloques de beneficios ---------- */
.feature { background: transparent; border: 0; border-top: 1px solid var(--linea); border-radius: 0; padding: 26px 0 8px; }
.feature:hover { transform: none; box-shadow: none; }
.feature__ico { width: auto; height: auto; background: none; color: var(--laton); font-size: 1.05rem; border-radius: 0; margin-bottom: 18px; place-items: start; }
.feature h3 { font-size: 1.2rem; letter-spacing: -.015em; }
.bg-navy .feature { background: transparent; border-color: var(--linea-clara); }
.bg-navy .feature__ico { background: none; color: var(--laton-claro); }
.bg-navy .feature p { color: rgba(244, 241, 234, .66); }
a.feature:hover h3 { text-decoration: underline; text-underline-offset: 4px; }

.trust-strip { background: var(--tinta); }
.trust-strip__item { border-color: var(--linea-clara) !important; }
.trust-strip__item .n { font-weight: 500; color: var(--papel); letter-spacing: -.03em; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.trust-strip__item .l { color: rgba(244, 241, 234, .55); }

/* ---------- Texto + imagen ---------- */
.split h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); }
.split__media img { border-radius: 0; box-shadow: none; }
.split__media.framed::before { border-width: 1px; border-radius: 0; border-color: var(--laton); }
.bg-navy .split p { color: rgba(244, 241, 234, .72); }
.check-list li { padding: 13px 0 13px 30px; margin: 0; border-top: 1px solid var(--linea); color: var(--tinta); }
.check-list li:last-child { border-bottom: 1px solid var(--linea); }
.check-list li::before { content: ""; width: 14px; height: 1px; border-radius: 0; background: var(--laton); top: 50%; }
.bg-navy .check-list li { color: var(--papel); border-color: var(--linea-clara); }
.bg-navy .check-list li::before { background: var(--laton-claro); }

/* ---------- Fichas, tablas y precios ---------- */
.specs { background: transparent; border: 0; border-top: 1px solid var(--tinta); border-radius: 0; padding: 0; }
.specs div { border-bottom: 1px solid var(--linea); padding: 15px 0; }
.specs div span:last-child { font-weight: 500; }
.table-wrap { border: 0; border-radius: 0; border-top: 1px solid var(--tinta); }
.price-table thead th { background: transparent; color: var(--gris); font-weight: 600; font-size: .72rem; letter-spacing: .14em; border-bottom: 1px solid var(--linea); }
.price-table tbody tr:nth-child(even) { background: transparent; }
.price-table td:first-child { font-weight: 500; }
.price-table .pri { color: var(--tinta); font-weight: 600; }
.note { color: var(--gris); }

.price-card { background: transparent; border: 1px solid var(--linea); border-radius: 0; }
.price-card:hover { transform: none; }
.price-card__tag { border-radius: 2px; background: var(--tinta); color: var(--laton-claro); }
.price-card__tag--alt { background: var(--laton); color: var(--papel); }
.price-card__head h3 { font-weight: 500; }
.price-card__list strong { font-weight: 500; color: var(--tinta); letter-spacing: -.02em; }
.price-card__addons .addon { border-radius: 2px; background: transparent; border-color: var(--linea); font-weight: 500; }

/* ---------- Pasos ---------- */
.step { text-align: left; padding: 22px 0 0; border-top: 1px solid var(--tinta); }
.step__n { width: auto; height: auto; margin: 0 0 22px; background: none; color: var(--laton); font-weight: 600; font-size: .85rem; border-radius: 0; place-items: start; letter-spacing: .08em; }
.step h3 { font-size: 1.25rem; }
.bg-navy .step { border-color: var(--linea-clara); }
.bg-navy .step__n { color: var(--laton-claro); }
.pstep__dot { background: transparent; border: 1px solid var(--laton); color: var(--laton); font-weight: 600; font-size: .95rem; }
.pstep__card { background: transparent; border: 0; border-top: 1px solid var(--linea); border-radius: 0; padding: 18px 0; }
.bg-navy .pstep__dot { border-color: var(--laton-claro); color: var(--laton-claro); }
.bg-navy .pstep__card { border-color: var(--linea-clara); }
.bg-navy .pstep__card p { color: rgba(244, 241, 234, .66); }

/* ---------- Preguntas frecuentes ---------- */
.faq { max-width: 900px; margin: 0; }
.faq__item { background: transparent; border: 0; border-top: 1px solid var(--linea); border-radius: 0; margin: 0; }
.faq__item:last-child { border-bottom: 1px solid var(--linea); }
.faq__q { font-family: var(--titulo); font-weight: 500; font-size: 1.08rem; padding: 22px 0; }
.faq__q .ico { background: none; color: var(--tinta); font-weight: 400; }
.faq__item.open .faq__q .ico { background: none; color: var(--tinta); }
.faq__a p { padding: 0 0 24px; }
.text-center .faq { margin: 0 auto; }

/* ---------- Testimonios ---------- */
.quote { background: transparent; border: 0; border-left: 1px solid var(--linea); border-radius: 0; padding: 4px 0 4px 28px; }
.quote::before { display: none; }
.quote p { font-family: var(--serif); font-size: 1.45rem; line-height: 1.3; color: var(--tinta); }
.quote .stars { color: var(--laton); }
.quote .who .av { background: var(--papel-2); color: var(--tinta); font-weight: 600; }

/* ---------- Llamado final ---------- */
.cta-block { background: var(--tinta); border-radius: 0; padding: clamp(48px, 7vw, 96px) clamp(24px, 6vw, 80px); }
.cta-block::after { display: none; }
.cta-block h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); font-weight: 500; letter-spacing: -.03em; }
.cta-block p { color: rgba(244, 241, 234, .72); }

/* ---------- Filtros del catálogo ---------- */
.filters { justify-content: flex-start; gap: 8px; }
.tab-btn { border-radius: 2px; border-width: 1px; background: transparent; font-family: var(--titulo); font-weight: 500; }
.tab-btn:hover { border-color: var(--tinta); color: var(--tinta); }

/* ---------- Formularios ---------- */
.field input, .field select, .field textarea { border-radius: 2px; border: 1px solid var(--linea); background: #FBFAF6; font-family: var(--titulo); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--tinta); box-shadow: none; }
.map-wrap { border-radius: 0; }

/* ---------- Varios ---------- */
.to-top { border-radius: 2px; background: var(--tinta); box-shadow: none; }
@media (max-width: 760px) { .to-top { bottom: 84px; } }

/* Bloques que el sitio viejo centraba debajo de títulos que ahora van a la izquierda */
.section .maxw-720 { margin-left: 0; }
.section > .container > .text-center:not(.cta-block):not(.section-head) { text-align: left; }

/* Sin JavaScript o con movimiento reducido, nada queda oculto esperando a aparecer */
html:not(.js) .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .card__media img, .tile img { transition: none !important; }
}