/* Protec · Anillos Natura — capa sobre anillos.css: formas de hoja, veta de madera, buscador, aplicaciones clave, familias, galerías.
   Todo scopeado bajo .an. Para volver al diseño anterior basta con dejar de cargar este archivo. */

/* ---------- 001 · imagen más natural ---------- */
:root{--leaf:6px 56px 6px 56px;--leaf2:56px 6px 56px 6px;--grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='600'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.004 0.12' numOctaves='3' seed='4' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 .45  0 0 0 0 .28  0 0 0 0 .12  0 0 0 1.5 -.4'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>")}
.an .lt{position:relative;isolation:isolate}
.an .lt::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain);background-size:900px 600px;opacity:.055;pointer-events:none}
.an .rcard .im,.an .pc-card .pc-art,.an .nc .im,.an .ncard .im,.an .cprev{border-radius:var(--leaf);overflow:hidden}
.an .rcard:nth-child(even) .im,.an .pc-card:nth-child(even) .pc-art,.an .ncard:nth-child(even) .im{border-radius:var(--leaf2)}
.an .hmos .hf:first-child{border-radius:6px 88px 6px 88px}
.an .coll figure.a{border-radius:6px 88px 6px 88px}
.an .coll figure.d{border-radius:88px 6px 88px 6px}
.an .fam{border-radius:8px}

/* ---------- buscador de la portada ---------- */
.an .srch{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);padding:clamp(80px,9vw,140px) 0;isolation:isolate}
.an .srch::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain);background-size:900px 600px;opacity:.035;pointer-events:none}
.an .srch .rings{position:absolute;left:-18vw;bottom:-24vw;width:min(70vw,860px);aspect-ratio:1;opacity:.22;pointer-events:none;z-index:-1}
.an .sr-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:end}
.an .sr-in{display:flex;align-items:center;gap:16px;border-bottom:2px solid var(--lima2);padding:6px 0 14px}
.an .sr-in svg{width:30px;height:30px;flex:none;color:var(--lima2)}
.an .sr-in input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--paper);font:400 clamp(34px,4.2vw,64px)/1.1 var(--serif);letter-spacing:-.02em;padding:0}
.an .sr-in input::placeholder{color:rgba(242,237,226,.38)}
.an .sr-lab{display:block;color:var(--mist);margin-bottom:10px}
.an .sr-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:20px}
.an .sr-chips .mono{color:var(--mist);margin-right:4px}
.an .sr-chip{border:1px solid rgba(242,237,226,.4);padding:9px 18px;border-radius:99px;font-size:15px;font-weight:500;transition:background .2s,color .2s}
.an .sr-chip:hover{background:var(--lima2);color:var(--ink);border-color:var(--lima2)}
.an .sr-route{margin-top:clamp(36px,4vw,56px);display:flex;gap:14px 24px;align-items:center;flex-wrap:wrap}
.an .sr-go{display:inline-flex;align-items:center;gap:14px;padding:16px 24px;border:1px solid rgba(169,216,43,.55);border-radius:99px;background:rgba(169,216,43,.08);font-size:17px}
.an .sr-go svg{width:20px;height:20px;color:var(--lima2)}
.an .sr-go .lm{background:none;color:var(--lima2);font-weight:600}
.an .sr-go.none{border-color:var(--dline);background:none;color:var(--mist)}
.an .sr-sum{color:var(--mist);margin-left:auto}
.an .sr-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(20px,2.6vw,40px);margin-top:26px}
.an .sr-g{border-top:2px solid var(--dline)}
.an .sr-g.best{border-color:var(--lima2)}
.an .sr-h{display:flex;justify-content:space-between;align-items:center;padding:16px 0}
.an .sr-h em{font:500 11px var(--mono);font-style:normal;letter-spacing:.06em;background:var(--lima2);color:var(--ink);padding:4px 10px;border-radius:99px}
.an .sr-it{display:flex;gap:16px;align-items:center;padding:12px 0;border-top:1px solid var(--dline)}
.an .sr-it .th{width:84px;height:84px;flex:none;border-radius:6px 32px 6px 32px;overflow:hidden;background:var(--ink3)}
.an .sr-it .th img{width:100%;height:100%;object-fit:cover}
.an .sr-it b{display:block;font:400 clamp(21px,1.8vw,26px)/1.05 var(--serif);letter-spacing:-.01em}
.an .sr-it:hover b{color:var(--lima2)}
.an .sr-it .mono{display:block;margin-top:6px;color:#C9E27A;font-size:11px}
.an .sr-none{margin:0;padding:8px 0 20px;color:var(--mist)}
.an .sr-more{display:inline-block;margin-top:14px;font-weight:600;border-bottom:2px solid var(--lima2);padding-bottom:3px}
@media (max-width:900px){.an .sr-top{grid-template-columns:1fr}.an .sr-sum{margin-left:0}}

/* ---------- 005 · aplicaciones clave (3×3) ---------- */
.an .bn{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(190px,18vw,270px);gap:16px}
.an .bn-t{position:relative;display:block;overflow:hidden;background:var(--ink2);border-radius:6px}
.an .bn-t img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.an .bn-t:hover img{transform:scale(1.05)}
.an .bn-t::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,21,16,.88),rgba(11,21,16,0) 58%)}
.an .bn-c{position:absolute;left:22px;right:22px;bottom:18px;z-index:2;color:var(--paper)}
.an .bn-c b{display:block;font:400 clamp(22px,2vw,28px)/1.05 var(--serif);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.an .bn-c .mono{display:block;margin-top:6px;color:#C9E27A;font-size:11px}
.an .bn-n{position:absolute;left:20px;top:14px;z-index:2;font:400 40px/1 var(--serif);color:var(--paper)}
.an .bn-1{grid-column:1/3;grid-row:1/3;border-radius:6px 110px 6px 110px}
.an .bn-1 .bn-c b{font-size:clamp(32px,3.6vw,50px)}
.an .bn-2,.an .bn-3,.an .bn-4,.an .bn-5{grid-column:auto;grid-row:auto}
.an .bn-3{border-radius:6px 56px 6px 56px}
.an .bn-8{border-radius:6px 56px 6px 56px}
@media (max-width:900px){.an .bn{grid-template-columns:repeat(2,minmax(0,1fr))}.an .bn-1{grid-column:1/3;grid-row:auto;aspect-ratio:16/10}}
@media (max-width:560px){.an .bn{grid-template-columns:1fr;grid-auto-rows:240px}.an .bn-1{grid-column:auto}}
.an .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:clamp(34px,4vw,56px)}
.an .sec-head .h2{margin:0}

/* ---------- 007 · familias de producto ---------- */
.an .fxs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px}
.an .fx{display:block;background:var(--ink2);border:1px solid var(--dline);border-radius:6px 56px 6px 56px;overflow:hidden;transition:border-color .3s,transform .4s var(--ease)}
.an .fx:hover{border-color:var(--lima2);transform:translateY(-4px)}
.an .fx-im{position:relative;display:block;height:clamp(200px,17vw,250px);overflow:hidden;background:var(--ink3)}
.an .fx-im img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.an .fx:hover .fx-im img{transform:scale(1.06)}
.an .fx-im.cad svg{position:absolute;inset:0;width:100%;height:100%}
.an .fx-n{position:absolute;left:22px;top:12px;font:400 52px/1 var(--serif);color:var(--paper);text-shadow:0 1px 18px rgba(0,0,0,.45)}
.an .fx-tx{display:block;padding:20px 26px 26px}
.an .fx-tx b{display:block;font:400 clamp(28px,2.6vw,36px)/1 var(--serif);letter-spacing:-.02em}
.an .fx-tx .mono{display:block;margin-top:12px;color:#C9E27A;font-size:11px}
.an .medida{margin-top:28px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--ink2);border:1px solid var(--dline);border-radius:6px 96px 6px 96px;overflow:hidden}
.an .medida .ph{position:relative;min-height:340px;display:block}
.an .medida .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.an .medida .tx{padding:clamp(30px,4vw,52px);display:flex;flex-direction:column;justify-content:center;gap:18px}
.an .medida .tx p{margin:0;color:var(--mist);max-width:52ch;font-size:17px;line-height:1.6}
@media (max-width:900px){.an .medida{grid-template-columns:1fr}.an .medida .ph{min-height:240px}}

/* ---------- 006 · noticias con galería ---------- */
.an .nms{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(24px,3vw,40px)}
.an .nm{display:block}
.an .nm .mo{display:grid;gap:8px;height:300px}
.an .nm .mo.m1{grid-template-columns:1fr}
.an .nm .mo.m2{grid-template-columns:1fr 1fr}
.an .nm .mo.m3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
.an .nm .mo.m3 .mi:first-child{grid-row:1/3}
.an .nm .mi{position:relative;display:block;overflow:hidden;border-radius:6px;background:var(--ink2)}
.an .nm .mo .mi:first-child{border-radius:6px 56px 6px 56px}
.an .nm .mi img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.an .nm:hover .mi img{transform:scale(1.05)}
.an .nm .more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(11,21,16,.66);color:var(--paper)}
.an .nm .k{display:block;margin:18px 0 8px;color:var(--lima2)}
.an .nm .t{display:block;font:400 clamp(26px,2.4vw,34px)/1.02 var(--serif);letter-spacing:-.015em}
.an .nm:hover .t{color:var(--lima2)}
.an .nx-gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,16vw,230px);gap:14px}
.an .nx-gal a{position:relative;display:block;overflow:hidden;border-radius:6px;background:var(--ink2)}
.an .nx-gal a:first-child{grid-column:1/3;grid-row:1/3;border-radius:6px 110px 6px 110px}
.an .nx-gal img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.an .nx-gal a:hover img{transform:scale(1.05)}
.an .nx-gal.one{grid-template-columns:1fr;grid-auto-rows:auto}
.an .nx-gal.one a:first-child{grid-column:auto;grid-row:auto;aspect-ratio:16/9}
@media (max-width:900px){.an .nx-gal{grid-template-columns:repeat(2,minmax(0,1fr))}.an .nx-gal a:first-child{grid-column:1/3;grid-row:auto;aspect-ratio:16/10}}
.an .nx-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.lbx{position:fixed;inset:0;z-index:100001;background:rgba(8,17,13,.96);display:flex;flex-direction:column;padding:20px}
.lbx[hidden]{display:none}
.lbx-top{display:flex;justify-content:space-between;align-items:center;color:#F2EDE2}
.lbx-c{font:500 12px 'Geist Mono',monospace;letter-spacing:.08em}
.lbx-mid{flex:1;min-height:0;display:flex;align-items:center;gap:14px;margin-top:14px}
.lbx-img{flex:1;min-width:0;height:100%;display:grid;place-items:center}
.lbx-img img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.lbx button{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:0;cursor:pointer;background:#A9D82B;color:#0B1510;flex:none}
.lbx .lbx-x{background:#F2EDE2}
html.lbx-on{overflow:hidden}
@media (max-width:640px){.lbx-p,.lbx-n{position:absolute;bottom:22px}.lbx-p{left:20px}.lbx-n{right:20px}.lbx-mid{margin-bottom:60px}}

/* ---------- 008 · fichas de producto por tipo ---------- */
.an .tipo{display:inline-block;padding:5px 12px;border-radius:99px;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.an .tipo.std{background:var(--lima2);color:var(--ink)}
.an .tipo.med{background:var(--oak);color:var(--ink)}
.an .carr{position:relative}
.an .cr-stage{position:relative;height:clamp(320px,46vw,640px);border-radius:6px 130px 6px 130px;overflow:hidden;background:var(--ink2)}
.an .cr-s{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease);pointer-events:none}
.an .cr-s.on{opacity:1;pointer-events:auto}
.an .cr-s img{width:100%;height:100%;object-fit:cover}
.an .cr-s::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,21,16,.78),rgba(11,21,16,0) 45%)}
.an .cr-cap{position:absolute;left:clamp(20px,3vw,40px);bottom:clamp(18px,2.4vw,34px);z-index:2;color:var(--paper);right:200px}
.an .cr-cap b{display:block;font:400 clamp(26px,3.2vw,48px)/1.02 var(--serif);margin-top:8px}
.an .cr-cap .mono{color:#DCE9B8}
.an .cr-arrows{position:absolute;right:clamp(16px,2vw,30px);bottom:clamp(16px,2vw,30px);z-index:3;display:flex;gap:10px;align-items:center}
.an .cr-arrows .cr-c{font:500 13px var(--mono);color:#fff;margin-right:8px}
.an .cr-arrows button{width:54px;height:54px;border-radius:50%;background:rgba(242,237,226,.95);color:var(--ink);display:grid;place-items:center}
.an .cr-arrows button:hover{background:var(--lima2)}
.an .cr-th{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;margin-top:12px}
.an .cr-th button{height:clamp(80px,9vw,130px);border-radius:6px;overflow:hidden;opacity:.7;outline:2px solid transparent;outline-offset:2px;transition:opacity .2s,outline-color .2s}
.an .cr-th button.on{opacity:1;outline-color:var(--lima2)}
.an .cr-th img{width:100%;height:100%;object-fit:cover}
.an .steps4{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px}
.an .steps4 .st4{border-top:2px solid var(--ink);padding-top:18px}
.an .steps4 .n{font:400 clamp(48px,5vw,64px)/1 var(--serif);color:var(--hoja)}
.an .steps4 b{display:block;font:400 clamp(24px,2.2vw,30px)/1.05 var(--serif);margin:10px 0 8px}
.an .steps4 p{margin:0;font-size:16px;line-height:1.55;color:#26332B}
.an .medida-cta{margin-top:clamp(36px,4vw,56px);background:var(--ink);color:var(--paper);border-radius:6px 80px 6px 80px;padding:clamp(28px,3.4vw,44px) clamp(26px,3.6vw,52px);display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap}
.an .medida-cta .serif{font-size:clamp(30px,3.4vw,50px);line-height:1;max-width:20ch}
.an .medida-cta .serif em{color:var(--lima2)}

/* ---------- 009 · productos relacionados ---------- */
.an .relp .rcard .k{color:var(--hoja)}

/* ---------- catálogo: familias, aplicaciones clave ---------- */
.an .pc-fams{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 18px}
.an .pc-fams[hidden]{display:none}
.an .pc-fams .mono{color:var(--mist);margin-right:6px}
.an .pc-fam{border:1px solid rgba(242,237,226,.4);padding:9px 16px;border-radius:99px;font-size:14.5px;font-weight:500;transition:background .2s,color .2s}
.an .pc-fam[aria-pressed="true"],.an .pc-fam:hover{background:var(--lima2);color:var(--ink);border-color:var(--lima2)}
.an .pc-fam b{font:500 11px var(--mono);margin-left:8px;opacity:.7}
.an .pc-more{display:flex;justify-content:center;align-items:center;gap:22px;flex-wrap:wrap;margin-top:44px}
.an .pc-more[hidden]{display:none}
.an .pc-more .mono{color:var(--mist)}

/* insignia de nº de fotos en las tarjetas de noticias */
.an .ncard .im,.an .rcard .im{position:relative}
.an .nf{position:absolute;right:12px;top:12px;z-index:2;background:rgba(11,21,16,.72);backdrop-filter:blur(6px);color:var(--paper);padding:6px 11px;border-radius:99px;font-size:11px}
.an .nx-gal.c2{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(220px,28vw,420px)}
.an .nx-gal.c2 a:first-child{grid-column:auto;grid-row:auto}
.an .nx-gal.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.an .nx-gal.c2,.an .nx-gal.c3{grid-template-columns:repeat(2,minmax(0,1fr))}.an .nx-gal.c2 a:first-child{grid-column:auto}}