/* global React, Icon, useT */

/* ============== TESTIMONIOS ============== */
/* Reseñas reales recogidas de Booking y Airbnb.
   EDITAR el array `quotes` cuando lleguen reseñas nuevas. */
function Testimonios() {
  const { t, lang } = useT();
  const labels = {
    es: { eyebrow:'Quienes han pasado por aquí', h:'Pequeñas notas de huéspedes.',
          source:'desde', dot:'·' },
    en: { eyebrow:'People who have stayed', h:'Small notes from our guests.',
          source:'from', dot:'·' },
    fr: { eyebrow:'Ceux qui sont passés ici', h:'Quelques mots de nos hôtes.',
          source:'sur', dot:'·' },
  }[lang] || {};

  /* Reseñas reales de Booking y Airbnb. Actualizar manualmente. */
  const quotes = {
    es: [
      { q:'¡Qué hostal más bonito! Elegante y moderno, con dos zonas comunes muy bien acondicionadas. Increíblemente limpio y bien mantenido. Los dueños, muy amables. La nevera estaba llena de pan, mantequilla, mermelada y leche.',
        who:'Kayla', country:'US', month:'mayo 2026', src:'Booking' },
      { q:'Un espacio muy lindo y bien pensado. Muy limpio y amable. Las piezas son lindas, limpias. Todo se ve nuevo. Excelente lugar.',
        who:'Ezequiel', country:'CL', month:'mayo 2026', src:'Booking' },
      { q:'Un establecimiento nuevo, bien amueblado y decorado, que fomenta la convivencia gracias a sus zonas comunes.',
        who:'Marc', country:'FR', month:'abril 2026', src:'Booking' },
      { q:'Desde el primer momento, nos sorprendió la limpieza impecable y el diseño cuidado y con estilo. La zona común es muy acogedora y está equipada con todo lo necesario.',
        who:'Marta', country:'ES', month:'abril 2026', src:'Airbnb' },
      { q:'De los mejores alojamientos en los que me he quedado. Simplemente perfecto. Todo limpio, cuidando hasta el mínimo detalle, y la mejor hospitalidad.',
        who:'Ara', country:'MX', month:'abril 2026', src:'Airbnb' },
    ],
    en: [
      { q:'What a beautiful hostel! Elegant and modern, with two very well-appointed common areas. Incredibly clean and well kept. The owners were very kind. The fridge was full of bread, butter, jam and milk.',
        who:'Kayla', country:'US', month:'May 2026', src:'Booking' },
      { q:'A really lovely, thoughtful space. Very clean and friendly. The rooms are pretty and spotless. Everything looks brand new. Excellent place.',
        who:'Ezequiel', country:'CL', month:'May 2026', src:'Booking' },
      { q:'A new building, beautifully furnished and decorated. The shared areas encourage you to meet other guests.',
        who:'Marc', country:'FR', month:'April 2026', src:'Booking' },
      { q:'From the very first moment, the impeccable cleanliness and the careful, stylish design surprised us. The shared area is very welcoming and equipped with everything you need.',
        who:'Marta', country:'ES', month:'April 2026', src:'Airbnb' },
      { q:'One of the best places I\u2019ve ever stayed. Simply perfect. Everything spotless, attention to every detail, and the best hospitality.',
        who:'Ara', country:'MX', month:'April 2026', src:'Airbnb' },
    ],
    fr: [
      { q:'Quelle belle auberge ! Élégante et moderne, avec deux espaces communs très bien aménagés. Incroyablement propre et bien entretenue. Les propriétaires, très aimables. Le frigo était rempli de pain, de beurre, de confiture et de lait.',
        who:'Kayla', country:'US', month:'mai 2026', src:'Booking' },
      { q:'Un espace très joli et bien pensé. Très propre et accueillant. Les chambres sont jolies et impeccables. Tout a l\u2019air neuf. Excellent endroit.',
        who:'Ezequiel', country:'CL', month:'mai 2026', src:'Booking' },
      { q:'Un établissement neuf, joliment meublé et décoré, qui favorise la convivialité grâce à ses espaces communs.',
        who:'Marc', country:'FR', month:'avril 2026', src:'Booking' },
      { q:'Dès le premier instant, la propreté impeccable et le design soigné et élégant nous ont surpris. L\u2019espace commun est très accueillant et équipé de tout le nécessaire.',
        who:'Marta', country:'ES', month:'avril 2026', src:'Airbnb' },
      { q:'L\u2019un des meilleurs hébergements où j\u2019ai séjourné. Tout simplement parfait. Tout est propre, soigné dans les moindres détails, et la meilleure hospitalité.',
        who:'Ara', country:'MX', month:'avril 2026', src:'Airbnb' },
    ],
  }[lang] || [];

  return (
    <section id="testimonios" style={TS.wrap}>
      <div style={TS.inner}>
        <header style={TS.head}>
          <div style={TS.eyebrow}>{labels.eyebrow}</div>
          <h2 style={TS.h2}>{labels.h}</h2>
        </header>
        <div style={TS.scrollOuter}>
          <div style={TS.grid}>
            {quotes.map((q,i) => (
              <figure key={i} style={TS.card}>
                <blockquote style={TS.quote}>{q.q}</blockquote>
                <figcaption style={TS.cap}>
                  <span style={TS.who}>{q.who}</span>
                  <span style={TS.dot}>{labels.dot}</span>
                  <span style={TS.country}>{q.country}</span>
                  <span style={TS.dot}>{labels.dot}</span>
                  <span style={TS.month}>{q.month}</span>
                  <span style={TS.dot}>{labels.dot}</span>
                  <span style={TS.src}>{labels.source} {q.src}</span>
                </figcaption>
              </figure>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
const TS = {
  wrap:{ padding:'70px 0', background:'#FAFAFA' },
  inner:{ maxWidth:1280, margin:'0 auto', padding:'0 28px' },
  head:{ marginBottom:36, maxWidth:680 },
  eyebrow:{ fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:11,
            letterSpacing:'.22em', textTransform:'uppercase', color:'#6B6B6B' },
  h2:{ fontFamily:'Montserrat, sans-serif', fontWeight:900, fontSize:'clamp(26px,2.8vw,38px)',
       lineHeight:1.1, letterSpacing:'-0.01em', margin:'10px 0 0', color:'#1A1A1A' },
  scrollOuter:{ marginRight:-28, overflow:'hidden' },
  grid:{ display:'flex', gap:14, overflowX:'auto', scrollSnapType:'x mandatory',
         paddingRight:28, paddingBottom:8, scrollbarWidth:'thin' },
  card:{ flex:'0 0 320px', scrollSnapAlign:'start',
         background:'#fff', borderRadius:14, padding:'20px 20px 16px',
         border:'1px solid #ECECEC', margin:0 },
  quote:{ fontFamily:'Inter, sans-serif', fontSize:14, color:'#1A1A1A',
          lineHeight:1.55, margin:'0 0 12px', fontStyle:'italic' },
  cap:{ display:'flex', flexWrap:'wrap', alignItems:'center', gap:'2px 6px',
        fontFamily:'ui-monospace, monospace', fontSize:11, color:'#6B6B6B' },
  who:{ fontWeight:700, color:'#1A1A1A' },
  dot:{ opacity:.45 },
  country:{},
  month:{},
  src:{ background:'#FFFBEA', color:'#8B6F00', padding:'1px 7px', borderRadius:999,
        fontWeight:700, fontSize:10, letterSpacing:'.05em' },
};

/* ============== PARA QUIÉN ES / NO ES ============== */
function ParaQuien() {
  const { lang } = useT();
  const data = {
    es: {
      eyebrow:'Honestidad',
      h:'Antes de reservar.',
      p:'No es para todo el mundo, y eso está bien. Lee esto, así nadie se lleva sorpresas.',
      ideal:'Ideal si',
      noIdeal:'Quizá no es para ti si',
      yes:[
        'Buscas descanso o un sitio tranquilo para trabajar.',
        'Viajas con un grupo y queréis el edificio entero.',
        'Valoras el diseño cuidado y la privacidad.',
        'Estás haciendo el Camino de Santiago.',
        'Te organizas bien con check-in autónomo y código.',
      ],
      no:[
        'Buscas ambiente de fiesta o bar dentro del alojamiento.',
        'Necesitas recepción 24/7 atendida en persona.',
        'Esperas habitaciones grandes con mucho espacio para vivir.',
        'Vienes con mascotas (no se admiten).',
      ],
    },
    en: {
      eyebrow:'Honest fit',
      h:'Before you book.',
      p:'Not for everyone, and that\u2019s fine. Read this so nobody has surprises on arrival.',
      ideal:'Ideal if',
      noIdeal:'Maybe not for you if',
      yes:[
        'You want rest or a quiet place to work.',
        'You\u2019re travelling with a group and want the whole building.',
        'You value careful design and privacy.',
        'You\u2019re walking the Camino de Santiago.',
        'You\u2019re comfortable with self check-in via code.',
      ],
      no:[
        'You\u2019re looking for a party vibe inside the stay.',
        'You need 24/7 staffed reception.',
        'You expect large rooms with lots of living space.',
        'You\u2019re travelling with pets (not allowed).',
      ],
    },
  }[lang] || {};
  return (
    <section id="para-quien" style={PQ.wrap}>
      <div style={PQ.inner}>
        <header style={PQ.head}>
          <div style={PQ.eyebrow}>{data.eyebrow}</div>
          <h2 style={PQ.h2}>{data.h}</h2>
          <p style={PQ.p}>{data.p}</p>
        </header>
        <div style={PQ.cols}>
          <div style={{...PQ.col, ...PQ.colYes}}>
            <div style={PQ.colLbl}>
              <Icon name="check" size={16}/> {data.ideal}
            </div>
            <ul style={PQ.ul}>
              {data.yes && data.yes.map((it,i) => <li key={i} style={PQ.li}>{it}</li>)}
            </ul>
          </div>
          <div style={{...PQ.col, ...PQ.colNo}}>
            <div style={PQ.colLbl}>
              <Icon name="x" size={16}/> {data.noIdeal}
            </div>
            <ul style={PQ.ul}>
              {data.no && data.no.map((it,i) => <li key={i} style={PQ.li}>{it}</li>)}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}
const PQ = {
  wrap:{ padding:'70px 0', background:'#fff' },
  inner:{ maxWidth:1100, margin:'0 auto', padding:'0 28px' },
  head:{ maxWidth:640, marginBottom:32 },
  eyebrow:{ fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:11,
            letterSpacing:'.22em', textTransform:'uppercase', color:'#6B6B6B' },
  h2:{ fontFamily:'Montserrat, sans-serif', fontWeight:900, fontSize:'clamp(28px,3.2vw,44px)',
       lineHeight:1.05, letterSpacing:'-0.02em', margin:'10px 0 14px',
       textTransform:'uppercase', color:'#1A1A1A' },
  p:{ fontFamily:'Inter, sans-serif', fontSize:16, color:'#2B2B2B', lineHeight:1.55, margin:0 },
  cols:{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:18 },
  col:{ borderRadius:16, padding:'22px 22px 24px', border:'1px solid #ECECEC' },
  colYes:{ background:'#F6FBF5', borderColor:'#D4ECCB' },
  colNo:{ background:'#FFF8F5', borderColor:'#F2D6CB' },
  colLbl:{ display:'inline-flex', alignItems:'center', gap:8,
           fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:12,
           letterSpacing:'.18em', textTransform:'uppercase', color:'#1A1A1A',
           marginBottom:14 },
  ul:{ listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:10 },
  li:{ fontFamily:'Inter, sans-serif', fontSize:14.5, color:'#2B2B2B', lineHeight:1.55,
       paddingLeft:14, position:'relative' },
};

/* ============== CAMINO DE SANTIAGO ============== */
function Camino() {
  const { lang } = useT();
  const data = {
    es: {
      eyebrow:'Camino Francés',
      h_a:'En el Camino,',
      h_b:'sin desviarte.',
      p:'El Santo está en la calle Juan de Austria, dentro del trazado oficial del Camino Francés a su paso por Burgos. La etapa hasta nosotros la cierras directamente; al día siguiente, el albergue está pensado para una salida temprana y autónoma.',
      etapaH:'Tu etapa',
      prev:'Etapa anterior',
      here:'Aquí',
      next:'Siguiente etapa',
      prevName:'Atapuerca → Burgos',
      hereName:'El Santo Hostel',
      nextName:'Burgos → Hornillos del Camino',
      prevKm:'21 km',
      nextKm:'21 km',
      hereKm:'Etapa 12',
      svcH:'Servicios para peregrinos',
      svc:[
        ['🛏', 'Habitación 01 adaptada', 'Acceso a nivel desde la calle. Baño accesible.'],
        ['🧺', 'Lavandería gratuita', 'Lavadora y secadora de uso libre 24h.'],
        ['🔑', 'Salida temprana sin recepción', 'Cerradura inteligente. Vete a la hora que necesites.'],
        ['☕', 'Café de cortesía', 'Cafetera lista en la cocina común desde el amanecer.'],
        ['🅿️', 'Bicis seguras', 'Patio interior con cámaras y enchufes para cargar.'],
      ],
      mileH:'Distancias',
      mile:[
        ['Santiago de Compostela','480 km'],
        ['Saint-Jean-Pied-de-Port (inicio)','316 km'],
        ['León (siguiente capital)','180 km'],
      ],
    },
    en: {
      eyebrow:'French Way',
      h_a:'On the Way,',
      h_b:'no detours.',
      p:'El Santo sits on Calle Juan de Austria, within the official trace of the Camino Francés as it crosses Burgos. You finish the stage right at our door; the building is built for an autonomous early departure the next morning.',
      etapaH:'Your stage',
      prev:'Previous stage',
      here:'You are here',
      next:'Next stage',
      prevName:'Atapuerca → Burgos',
      hereName:'El Santo Hostel',
      nextName:'Burgos → Hornillos del Camino',
      prevKm:'21 km',
      nextKm:'21 km',
      hereKm:'Stage 12',
      svcH:'For pilgrims',
      svc:[
        ['🛏', 'Accessible Room 01', 'Step-free access from the street. Adapted bathroom.'],
        ['🧺', 'Free laundry', 'Washer and dryer available 24/7.'],
        ['🔑', 'Early departure, no reception', 'Smart lock. Leave whenever you need to.'],
        ['☕', 'Complimentary coffee', 'Espresso machine ready in the shared kitchen from dawn.'],
        ['🅿️', 'Secure bikes', 'Inner courtyard with cameras and outlets.'],
      ],
      mileH:'Distances',
      mile:[
        ['Santiago de Compostela','480 km'],
        ['Saint-Jean-Pied-de-Port (start)','316 km'],
        ['León (next capital)','180 km'],
      ],
    },
  }[lang] || {};
  return (
    <section id="camino" style={CM.wrap}>
      <div style={CM.inner}>
        <header style={CM.head}>
          <div style={CM.eyebrow}>{data.eyebrow}</div>
          <h2 style={CM.h2}>{data.h_a}<br/>{data.h_b}</h2>
          <p style={CM.p}>{data.p}</p>
        </header>

        {/* Etapa diagram */}
        <div style={CM.etapaWrap}>
          <div style={CM.etapaLbl}>{data.etapaH}</div>
          <div style={CM.etapaRail}>
            <div style={CM.dot}/>
            <div style={CM.dotLine}/>
            <div style={{...CM.dot, ...CM.dotHere}}/>
            <div style={CM.dotLine}/>
            <div style={CM.dot}/>
          </div>
          <div style={CM.etapaCols}>
            <div style={CM.etapaCol}>
              <div style={CM.etapaTag}>{data.prev}</div>
              <div style={CM.etapaName}>{data.prevName}</div>
              <div style={CM.etapaKm}>{data.prevKm}</div>
            </div>
            <div style={{...CM.etapaCol, ...CM.etapaColHere}}>
              <div style={{...CM.etapaTag, color:'#1A1A1A'}}>{data.here}</div>
              <div style={{...CM.etapaName, color:'#1A1A1A'}}>{data.hereName}</div>
              <div style={{...CM.etapaKm, color:'#1A1A1A'}}>{data.hereKm}</div>
            </div>
            <div style={CM.etapaCol}>
              <div style={CM.etapaTag}>{data.next}</div>
              <div style={CM.etapaName}>{data.nextName}</div>
              <div style={CM.etapaKm}>{data.nextKm}</div>
            </div>
          </div>
        </div>

        {/* Two columns: services + distances */}
        <div style={CM.lower}>
          <div style={CM.svcBlock}>
            <div style={CM.blockH}>{data.svcH}</div>
            <ul style={CM.svcList}>
              {data.svc && data.svc.map(([k,h,d],i)=>(
                <li key={i} style={CM.svcLi}>
                  <span style={CM.svcKey}>{k}</span>
                  <div>
                    <div style={CM.svcH}>{h}</div>
                    <div style={CM.svcD}>{d}</div>
                  </div>
                </li>
              ))}
            </ul>
          </div>
          <div style={CM.mileBlock}>
            <div style={CM.blockH}>{data.mileH}</div>
            <ul style={CM.mileList}>
              {data.mile && data.mile.map(([n,km],i)=>(
                <li key={i} style={CM.mileLi}>
                  <span style={CM.mileName}>{n}</span>
                  <span style={CM.mileDots}/>
                  <span style={CM.mileKm}>{km}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}
const CM = {
  wrap:{ padding:'80px 0', background:'#1A1A1A', color:'#fff' },
  inner:{ maxWidth:1280, margin:'0 auto', padding:'0 28px' },
  head:{ maxWidth:760, marginBottom:48 },
  eyebrow:{ fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:11,
            letterSpacing:'.22em', textTransform:'uppercase', color:'#F5C801' },
  h2:{ fontFamily:'Montserrat, sans-serif', fontWeight:900, fontSize:'clamp(36px,4.2vw,58px)',
       lineHeight:.95, letterSpacing:'-0.02em', margin:'14px 0 16px',
       textTransform:'uppercase', color:'#fff' },
  p:{ fontFamily:'Inter, sans-serif', fontSize:16, color:'rgba(255,255,255,.78)',
      lineHeight:1.6, margin:0 },
  etapaWrap:{ marginBottom:48 },
  etapaLbl:{ fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:11,
             letterSpacing:'.22em', textTransform:'uppercase', color:'rgba(255,255,255,.55)',
             marginBottom:18 },
  etapaRail:{ display:'flex', alignItems:'center', gap:0, marginBottom:14,
              padding:'0 8%' },
  dot:{ width:14, height:14, borderRadius:999, background:'rgba(255,255,255,.3)',
        flexShrink:0 },
  dotHere:{ width:22, height:22, background:'#F5C801',
            boxShadow:'0 0 0 6px rgba(245,200,1,.2)' },
  dotLine:{ flex:1, height:2, background:'rgba(255,255,255,.15)' },
  etapaCols:{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:18 },
  etapaCol:{ background:'rgba(255,255,255,.04)', border:'1px solid rgba(255,255,255,.08)',
             borderRadius:12, padding:'16px 18px' },
  etapaColHere:{ background:'#F5C801', borderColor:'#F5C801',
                 transform:'translateY(-6px)' },
  etapaTag:{ fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:10,
             letterSpacing:'.18em', textTransform:'uppercase',
             color:'rgba(255,255,255,.6)', marginBottom:8 },
  etapaName:{ fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:15,
              color:'#fff', marginBottom:4 },
  etapaKm:{ fontFamily:'ui-monospace, monospace', fontSize:12, color:'rgba(255,255,255,.5)' },
  lower:{ display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:36, alignItems:'start' },
  svcBlock:{},
  mileBlock:{ background:'rgba(245,200,1,.06)', border:'1px solid rgba(245,200,1,.18)',
              borderRadius:14, padding:'24px 26px' },
  blockH:{ fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:12,
           letterSpacing:'.2em', textTransform:'uppercase', color:'#F5C801', marginBottom:18 },
  svcList:{ listStyle:'none', padding:0, margin:0,
            display:'grid', gridTemplateColumns:'1fr 1fr', gap:'16px 24px' },
  svcLi:{ display:'flex', gap:12, alignItems:'flex-start' },
  svcKey:{ width:34, height:34, borderRadius:9, background:'rgba(245,200,1,.12)',
           display:'inline-flex', alignItems:'center', justifyContent:'center',
           fontSize:18, flexShrink:0 },
  svcH:{ fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:14,
         color:'#fff', marginBottom:2 },
  svcD:{ fontFamily:'Inter, sans-serif', fontSize:13, color:'rgba(255,255,255,.7)',
         lineHeight:1.5 },
  mileList:{ listStyle:'none', padding:0, margin:0,
             display:'flex', flexDirection:'column', gap:12 },
  mileLi:{ display:'flex', alignItems:'baseline', gap:10 },
  mileName:{ fontFamily:'Inter, sans-serif', fontSize:14, color:'#fff' },
  mileDots:{ flex:1, borderBottom:'1px dotted rgba(255,255,255,.25)',
             margin:'0 4px', transform:'translateY(-3px)' },
  mileKm:{ fontFamily:'ui-monospace, monospace', fontSize:13, fontWeight:700, color:'#F5C801' },
};

window.Testimonios = Testimonios;
window.ParaQuien = ParaQuien;
window.Camino = Camino;

/* ============== FOTO FULL-BLEED ============== */
function FullBleed() {
  const { lang } = useT();
  const cap = {
    es: { eyebrow:'C/ Juan de Austria, 6', sub:'A través del parque de El Parral', main:'A la salida de Burgos por el Camino Francés, rumbo a Hornillos del Camino.' },
    en: { eyebrow:'C/ Juan de Austria, 6', sub:'Through El Parral park', main:'On the way out of Burgos along the French Way, toward Hornillos del Camino.' },
  }[lang] || {};
  return (
    <section id="fullbleed" style={FB.wrap} aria-label="El edificio">
      <img src="img/el-parral.jpeg" alt="Crucero del Camino de Santiago en el parque de El Parral, a la salida de Burgos — Camino Francés" style={FB.img} loading="lazy" decoding="async"/>
      <div style={FB.cap}>
        <div style={FB.capLbl}>{cap.eyebrow}</div>
        <div style={FB.capSub}>{cap.sub}</div>
        <div style={FB.capMain}>{cap.main}</div>
      </div>
    </section>
  );
}
const FB = {
  wrap:{ position:'relative', width:'100%', height:'min(70vh, 640px)', minHeight:360,
         overflow:'hidden', background:'#1A1A1A' },
  img:{ width:'100%', height:'100%', objectFit:'cover', objectPosition:'center 35%', display:'block' },
  cap:{ position:'absolute', left:0, right:0, bottom:0,
        padding:'120px clamp(28px, 7vw, 44px) 40px',
        background:'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 80%)',
        color:'#fff' },
  capLbl:{ fontFamily:'Montserrat, sans-serif', fontWeight:800, fontSize:11,
           letterSpacing:'.22em', textTransform:'uppercase', color:'#F5C801', marginBottom:4 },
  capSub:{ fontFamily:'Montserrat, sans-serif', fontWeight:700, fontSize:12,
           letterSpacing:'.06em', color:'rgba(255,255,255,.82)', marginBottom:10 },
  capMain:{ fontFamily:'Montserrat, sans-serif', fontWeight:800,
            fontSize:'clamp(20px,2.4vw,30px)', maxWidth:780, lineHeight:1.2,
            letterSpacing:'-0.01em', margin:'0 auto', textAlign:'left' },
};
window.FullBleed = FullBleed;

// Responsive overrides — inject once
if (typeof document !== 'undefined' && !document.getElementById('s4-styles')) {
  const st = document.createElement('style');
  st.id = 's4-styles';
  st.textContent = `
    @media (max-width: 780px) {
      #para-quien [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important }
      #camino [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr !important }
      #camino [style*="grid-template-columns: 1.4fr 1fr"] { grid-template-columns: 1fr !important }
      #camino [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important }
      #camino [data-rail-wrap] { display:none }
    }
  `;
  document.head.appendChild(st);
}