/* ===========================================================================
   LA TIENDA — una sola hoja de estilo para todo
   ===========================================================================
   Una sola pagina que se acomoda sola, de 320 puntos de ancho en adelante:
   telefono, tableta y computadora, de Apple y de Android. No hay version
   movil aparte, y no se usa nada que solo tenga un navegador.

   Las medidas crecen con clamp(), asi que no hay saltos feos entre tamaños.
   Los estantes y las galerias se arrastran con el dedo y se frenan en cada
   pieza con scroll-snap, que es lo que hace el telefono de forma natural: sin
   programas detras, no se traba y no gasta bateria.
   =========================================================================== */

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --papel:#F7F3EC; --tinta:#1A1714; --suave:#7E7467; --tenue:#A79C8D;
  --marca:#9C5533; --linea:#E6DED1; --blanco:#FFFDF9;
  --ancho:1180px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--papel);color:var(--tinta);font:16px/1.6 var(--sans);
     -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
.centro{max-width:var(--ancho);margin:0 auto;padding:0 clamp(18px,4vw,40px)}

/* ---------- barra de arriba ---------- */
.barra{position:sticky;top:0;z-index:50;background:rgba(247,243,236,.88);
       -webkit-backdrop-filter:saturate(1.6) blur(12px);
       backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--linea)}
.barra .centro{display:flex;align-items:center;gap:clamp(10px,2vw,20px);
               min-height:58px;padding-top:9px;padding-bottom:9px}
.marca{font-weight:800;font-size:12.5px;letter-spacing:.17em;white-space:nowrap}
.buscar{flex:1;min-width:0;background:var(--blanco);border:1px solid var(--linea);
        border-radius:999px;padding:9px 15px;color:var(--tenue);font-size:14px;
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.idiomas{display:flex;gap:3px}
.idiomas a{font-size:11.5px;letter-spacing:.08em;color:var(--tenue);
           padding:5px 7px;border-radius:7px;font-weight:700}
.idiomas a.on{background:var(--tinta);color:var(--papel)}

/* ---------- encabezado de pagina ---------- */
.saludo{padding:clamp(34px,7vw,74px) 0 clamp(20px,4vw,34px)}
.saludo.chico{padding-bottom:clamp(14px,2vw,20px)}
.saludo h1{font:400 clamp(31px,7vw,58px)/1.05 var(--serif);letter-spacing:-.015em;max-width:18ch}
.saludo h1 i{font-style:italic;color:var(--marca)}
.saludo p{margin-top:clamp(13px,2.2vw,20px);color:var(--suave);
          font-size:clamp(15px,1.7vw,19px);max-width:48ch}

/* ---------- bandas por oficio ---------- */
.oficios{display:grid;gap:3px;margin-top:clamp(16px,3vw,28px)}
@media(min-width:880px){.oficios{grid-template-columns:1fr 1fr}
  /* Si el numero de oficios es impar, el ultimo ocupa las dos columnas.
     Si no, queda una banda coja con un hueco al lado. El numero cambia
     solo: hoy el español tiene tres oficios y el frances cuatro. */
  .oficios>.of:last-child:nth-child(odd){grid-column:1 / -1;
                                         min-height:clamp(118px,15vw,180px)}}
.of{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
    min-height:clamp(130px,20vw,224px);padding:clamp(16px,2.4vw,26px);
    overflow:hidden;color:#fff}
.of .fondo{position:absolute;inset:0;background-size:cover;background-position:center;
           transform:scale(1.02);transition:transform .5s ease}
.of:hover .fondo{transform:scale(1.07)}
.of .velo{position:absolute;inset:0}
.of h3{position:relative;font-size:clamp(18px,2.3vw,26px);font-weight:800;
       letter-spacing:-.02em;line-height:1.12;max-width:13ch}
.of span{position:relative;margin-top:7px;font-size:13.5px;
         color:rgba(255,255,255,.78);font-weight:600}

/* ---------- estante que se arrastra con el dedo ---------- */
.titulo{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
        padding:clamp(32px,5vw,54px) 0 clamp(13px,2vw,19px)}
.titulo h2{font:400 clamp(22px,3vw,33px)/1.1 var(--serif);letter-spacing:-.01em}
.titulo span{color:var(--tenue);font-size:13.5px}
.estante{display:flex;gap:clamp(14px,2vw,26px);overflow-x:auto;padding-bottom:12px;
         scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
         scrollbar-width:none}
.estante::-webkit-scrollbar{display:none}
.estante[sangrado]{padding-left:clamp(18px,4vw,40px);padding-right:clamp(18px,4vw,40px);
                   scroll-padding-left:clamp(18px,4vw,40px)}
.estante>*{scroll-snap-align:start;flex:0 0 clamp(146px,38vw,208px)}

/* ---------- el producto, como objeto ---------- */
.libro .obj{aspect-ratio:4/3;background-size:cover;background-position:center;
            border-radius:4px;box-shadow:0 22px 38px -18px rgba(26,23,20,.6);
            transition:transform .35s ease}
.libro:hover .obj{transform:translateY(-5px)}
.libro h4{font:400 clamp(15px,1.7vw,18.5px)/1.25 var(--serif);margin-top:13px}
.libro p{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
         color:var(--tenue);margin-top:6px}
.libro b{display:block;margin-top:6px;font-size:13px;font-weight:700;color:var(--suave)}

/* ---------- catalogo: buscador, filtros y rejilla ---------- */
.campo{width:100%;background:var(--blanco);border:1px solid var(--linea);
       border-radius:14px;padding:15px 17px;font:16px var(--sans);color:var(--tinta)}
.campo::placeholder{color:var(--tenue)}
.campo:focus{outline:2px solid var(--marca);outline-offset:1px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:14px 0 4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{white-space:nowrap;border:1px solid var(--linea);background:var(--blanco);
      border-radius:999px;padding:8px 15px;font-size:13.5px;color:var(--suave);cursor:pointer}
.chip.on{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.rejilla{display:grid;gap:clamp(20px,3vw,34px) clamp(14px,2vw,26px);
         grid-template-columns:repeat(2,1fr);padding:clamp(20px,3vw,34px) 0 0}
@media(min-width:620px){.rejilla{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.rejilla{grid-template-columns:repeat(4,1fr)}}
.nada{padding:40px 0;color:var(--tenue)}

/* ---------- pagina de producto ---------- */
.volver{display:inline-block;padding-top:clamp(16px,3vw,26px);font-size:14px;
        color:var(--suave);font-weight:600}
.ficha{display:grid;gap:clamp(22px,4vw,46px);padding-top:clamp(16px,3vw,26px)}
@media(min-width:880px){.ficha{grid-template-columns:1.05fr .95fr;align-items:start}}
.galeria{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
         -webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:6px}
.galeria::-webkit-scrollbar{display:none}
.galeria img{scroll-snap-align:center;flex:0 0 100%;border-radius:6px;
             box-shadow:0 22px 44px -22px rgba(26,23,20,.55)}
.puntos{display:flex;gap:6px;justify-content:center;margin-top:13px}
.puntos i{width:6px;height:6px;border-radius:50%;background:var(--tenue);opacity:.4}
.puntos i.on{opacity:1;background:var(--tinta)}
.ficha h1{font:400 clamp(26px,4vw,42px)/1.08 var(--serif);letter-spacing:-.015em}
.ficha .cat{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
            color:var(--tenue);margin-bottom:12px}
.ficha .lead{margin-top:15px;color:var(--suave);font-size:clamp(15px,1.7vw,17.5px)}
.precio{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
        margin-top:clamp(18px,3vw,28px)}
.precio b{font-size:clamp(21px,2.8vw,28px);font-weight:800;letter-spacing:-.02em;
          color:var(--suave)}
.precio span{color:var(--tenue);font-size:13.5px}
.comprar{display:block;margin-top:16px;background:var(--tinta);color:var(--papel);
         text-align:center;font-weight:700;font-size:16px;padding:16px;border-radius:12px}
.comprar.apagado{background:#D9D1C3;color:#8C8276;cursor:not-allowed}
.telon{margin-top:10px;font-size:13px;color:var(--tenue);text-align:center}
.trae{margin-top:clamp(22px,3.4vw,32px);border-top:1px solid var(--linea);padding-top:18px}
.trae h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--tenue)}
.trae ul{margin-top:12px;display:grid;gap:9px}
.trae li{list-style:none;padding-left:20px;position:relative;font-size:15px}
.trae li::before{content:'';position:absolute;left:0;top:9px;width:7px;height:7px;
                 border-radius:50%;background:var(--marca)}

/* ---------- mi membresia ---------- */
.caja{background:var(--blanco);border:1px solid var(--linea);border-radius:16px;
      padding:clamp(22px,4vw,34px);margin-top:10px}
.vacio{color:var(--tenue)}
/* El boton de cancelar: discreto, pero ahi. No escondido donde nadie lo
   encuentre: al final de esta pantalla, que es donde se busca. */
.cancelar{margin-top:clamp(40px,7vw,70px);padding-top:20px;border-top:1px solid var(--linea)}
.cancelar a{font-size:14px;color:var(--suave);text-decoration:underline;
            text-underline-offset:4px;cursor:pointer}
.cancelar p{margin-top:9px;font-size:13px;color:var(--tenue);max-width:52ch}

.correo{margin-top:clamp(22px,4vw,34px);font-size:17px}
.correo a{text-decoration:underline;text-underline-offset:4px;color:var(--marca)}

/* ---------- pie ---------- */
footer{margin-top:clamp(44px,7vw,90px);border-top:1px solid var(--linea);
       padding:clamp(28px,4vw,46px) 0 clamp(34px,5vw,56px);color:var(--suave);font-size:14px}
.cols{display:grid;gap:clamp(22px,3vw,30px);grid-template-columns:1fr 1fr}
@media(min-width:760px){.cols{grid-template-columns:repeat(4,1fr)}}
.cols h5{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
         color:var(--tenue);margin-bottom:11px;font-weight:700}
.cols a{display:block;padding:4px 0;font-size:14.5px}
.cols a:hover{color:var(--marca)}
.cierre{margin-top:clamp(26px,4vw,40px);padding-top:18px;border-top:1px solid var(--linea);
        color:var(--tenue);font-size:13px}

/* ---------- para quien prefiere menos movimiento ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* El aviso honesto de la ficha: en que idiomas esta el libro, y si la ficha
   que se esta leyendo no esta en el idioma de la pagina. Discreto, pero
   encima del boton, no escondido al final. */
.idiomas-libro{margin-top:14px;padding:12px 14px;background:var(--blanco);
               border:1px solid var(--linea);border-radius:10px;
               font-size:13.5px;color:var(--suave);line-height:1.5}

/* Las secciones: encima de las categorias, y mas gordas, porque mandan.
   Si solo hay una seccion con algo, el programa no las pinta. */
.chips.secciones{padding-bottom:2px;border-bottom:1px solid var(--linea);margin-bottom:4px}
.chip.gorda{font-size:15px;font-weight:600;padding:10px 18px}
.titulo .vertodo{margin-left:auto;font-size:13.5px;font-weight:700;color:var(--marca);
                 white-space:nowrap}
.seclead{color:var(--suave);font-size:14.5px;max-width:52ch;margin-top:-6px;
         padding-bottom:4px}

/* Las filas de filtros: una por cada forma de buscar. El programa no sabe
   cuantas hay, asi que el estilo tampoco puede suponerlo. */
.chips.eje{align-items:center;padding:9px 0 3px}
.ejenombre{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
           color:var(--tenue);font-weight:700;white-space:nowrap;
           margin-right:10px;flex:0 0 auto}
.chips.eje + .chips.eje{border-top:1px solid var(--linea)}

/* Para quién es, y para quién no. Va debajo de lo que trae, porque se lee
   al final, cuando ya se decidió casi todo. */
.paraquien{margin-top:clamp(18px,2.6vw,26px);border-top:1px solid var(--linea);
           padding-top:18px}
.paraquien h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
              color:var(--tenue)}
.paraquien p{margin-top:10px;font-size:15px;color:var(--suave);max-width:54ch}

/* El numero al lado de cada filtro: cuantos quedarian si le picas. */
.chip .cuantos{margin-left:7px;font-size:11.5px;color:var(--tenue);
               font-variant-numeric:tabular-nums}
.chip.on .cuantos{color:rgba(247,243,236,.65)}
.chip.vacio{opacity:.38;pointer-events:none}

/* Las paginas legales. El texto viene tal cual de donde lo escribio Legal;
   aqui solo se le da el aspecto de la tienda para que no parezca de otra
   casa. Columna estrecha: un contrato se lee mal a lo ancho. */
.legal{max-width:68ch;padding:clamp(28px,5vw,56px) 0 clamp(20px,3vw,32px)}
.legal h1{font:400 clamp(26px,4vw,40px)/1.1 var(--serif);letter-spacing:-.015em}
.legal h2{font:400 clamp(19px,2.3vw,24px)/1.25 var(--serif);margin-top:clamp(26px,3.4vw,36px)}
.legal h3{font-size:16px;font-weight:700;margin-top:20px}
.legal p,.legal li{color:var(--suave);font-size:15.5px;margin-top:11px}
.legal ul,.legal ol{margin-top:11px;padding-left:22px}
.legal .updated{font-size:13px;color:var(--tenue);margin-top:10px}
.legal .card{background:var(--blanco);border:1px solid var(--linea);
             border-radius:14px;padding:clamp(18px,2.4vw,26px);
             margin-top:clamp(18px,2.4vw,24px)}
.legal .card h2{margin-top:0}
.legal table{width:100%;border-collapse:collapse;margin-top:14px;font-size:14.5px}
.legal th,.legal td{border:1px solid var(--linea);padding:8px 10px;text-align:left}
.legal a{color:var(--marca);text-decoration:underline;text-underline-offset:3px}
.legal .aviso{margin-bottom:16px;padding:11px 14px;background:var(--blanco);
              border:1px solid var(--linea);border-radius:10px;
              font-size:13.5px;color:var(--suave)}

/* «Ver más»: la tienda se pinta de 24 en 24. Nadie mira cinco mil cosas de
   una vez, y el navegador tampoco debería tener que dibujarlas. */
.vermas{display:block;margin:clamp(22px,3vw,32px) auto 0;background:var(--blanco);
        border:1px solid var(--linea);border-radius:999px;padding:13px 28px;
        font:600 15px var(--sans);color:var(--tinta);cursor:pointer}
.vermas:hover{border-color:var(--marca);color:var(--marca)}

/* ANTES DE PAGAR. Todo lo material, pegado al boton: lo que se cobra, cada
   cuanto se vuelve a cobrar, como se sale, y los dos textos legales a un
   clic. Va en una caja con borde para que se lea como una sola cosa junto al
   boton, y no como letra chica repartida por la pagina. */
.antesdepagar{margin-top:clamp(20px,3vw,30px);padding:clamp(16px,2.4vw,22px);
  border:1px solid var(--linea);border-radius:10px;background:var(--papel)}
.antesdepagar h3{font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tenue);margin-bottom:10px}
.antesdepagar .cobro{font-size:16px;line-height:1.5}
.antesdepagar .cobro b{font-size:20px;margin-right:6px}
.antesdepagar .salir{margin-top:8px;font-size:14px;color:var(--suave);max-width:60ch}
.antesdepagar .legal{margin-top:10px;font-size:14px}
.antesdepagar .legal a{color:var(--suave);text-decoration:underline}

/* Las casillas. Grandes y faciles de picar: una casilla que cuesta acertar en
   un telefono es una casilla que la gente marca sin querer. */
.antesdepagar label{display:flex;gap:10px;align-items:flex-start;
  margin-top:14px;font-size:15px;line-height:1.45;cursor:pointer}
.antesdepagar label input{width:20px;height:20px;margin-top:2px;flex:none;
  accent-color:var(--tinta);cursor:pointer}
.antesdepagar .notanegocio{margin:6px 0 0 30px;font-size:13px;
  color:var(--tenue);max-width:58ch}
.antesdepagar .faltaaceptar{margin-top:10px;font-size:14px;color:var(--suave)}
.antesdepagar .comprar{margin-top:18px}

/* CANCELAR, de un clic y a la vista. No es un enlace escondido: es un boton
   con borde. Virginia prohibe exigirle al cliente hablar con alguien, y
   California solo deja ofrecer algo para retenerlo si al lado se ensena el
   boton de cancelar. Mas sencillo es no ofrecer nada. */
.cancelar .cancelarya{display:inline-block;font-size:16px;text-decoration:none;
  color:var(--tinta);border:1.5px solid var(--tinta);border-radius:8px;
  padding:11px 20px;margin-bottom:12px}
.cancelar .apple{margin-top:14px}
.cancelar .apple a{font-size:14px;color:var(--suave);text-decoration:underline}
.cancelar .nota{margin-top:14px;font-size:13px;color:var(--tenue)}