/* Sección "Reservar en nuestra web tiene ventajas" — Camping El Carlitos
   La sección es la fachada de un mobil-home: cada ventaja es una ventana con
   su toldo y la puerta lleva al contacto.
   Autónomo: no depende del resto de tu CSS. Prefijo .rd
   Requiere: PT Sans, Caveat (Google Fonts, ya enlazadas en el <head>) */

.rd{--rd-tinta:#1a1a1a;--rd-crema:#fdfaf4;--rd-panel:#f6efe2;
  --rd-naranja:#ec7e28;--rd-naranja-osc:#c4601a;--rd-azul:#002e64;--rd-amarillo:#f2c14e;
  --rd-cristal:#e3eeea;--rd-madera:#9a6a42;
  background:var(--rd-crema);margin-top:72.8px;padding-bottom:124.8px;overflow:hidden}
.rd *{box-sizing:border-box}

/* ---------- encabezado ---------- */
.rd__wrap{max-width:1508px;margin-inline:auto;padding-inline:var(--content-padding, clamp(0.77rem, 3.08vw, 2.31rem))}
.rd__head{text-align:center;padding:0 0 46px}
.rd__head h1,.rd__head h2{margin:0;font-family:'Caveat',cursive;font-weight:700;font-size:57.2px;line-height:1;color:var(--rd-tinta);text-wrap:balance}
.rd__head p{margin:7.8px 0 0;font-size:20.8px;color:rgba(0,0,0,.55);text-wrap:balance}

/* ---------- el mobil-home ---------- */
.rd__casa{position:relative;max-width:1240px;margin:0 auto;padding-bottom:3px}
/* línea del suelo */
.rd__casa::after{content:"";position:absolute;left:-48px;right:-48px;bottom:0;height:3px;border-radius:2px;background:var(--rd-tinta)}
.rd__remate{position:relative;z-index:1;height:18px;margin:0 -8px;background:var(--rd-azul);
  border:3px solid var(--rd-tinta);border-radius:10px}
/* pared de lamas horizontales; la rejilla coloca 5 ventanas + la puerta */
.rd__fachada{position:relative;margin-top:-3px;border:3px solid var(--rd-tinta);border-radius:4px 4px 6px 6px;
  background:repeating-linear-gradient(180deg,#fffcf5 0 22px,#ede3d1 22px 24px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto 32px;
  gap:64px clamp(24px,3.2vw,48px);padding:84px clamp(22px,4vw,56px) 0}
.rd__zocalo{height:34px;margin:0 16px;border:3px solid var(--rd-tinta);border-top:0;
  background:repeating-linear-gradient(90deg,#cdbb9c 0 14px,#a8936f 14px 17px)}

/* ---------- guirnalda de luces ---------- */
.rd__luces{position:absolute;top:0;left:0;right:0;height:60px;pointer-events:none}
.rd__cable{position:absolute;top:0;left:0;width:100%;height:40px;overflow:visible}
.rd__cable path{fill:none;stroke:var(--rd-tinta);stroke-width:2;vector-effect:non-scaling-stroke}
.rd__cable--movil{display:none}
.rd__luces i{position:absolute;left:var(--x);top:var(--y);width:14px;height:14px;margin:7px 0 0 -7px;
  border:2px solid var(--rd-tinta);border-radius:50%;background:var(--rd-amarillo)}
.rd__luces i::before{content:"";position:absolute;left:50%;bottom:100%;width:2px;height:7px;margin-left:-1px;background:var(--rd-tinta)}
.rd__luces i:nth-child(3){--x:5.00%;--y:16.8px}
.rd__luces i:nth-child(4){--x:10.00%;--y:21.0px}
.rd__luces i:nth-child(5){--x:15.00%;--y:16.8px}
.rd__luces i:nth-child(6){--x:25.00%;--y:16.8px}
.rd__luces i:nth-child(7){--x:30.00%;--y:21.0px}
.rd__luces i:nth-child(8){--x:35.00%;--y:16.8px}
.rd__luces i:nth-child(9){--x:45.00%;--y:16.8px}
.rd__luces i:nth-child(10){--x:50.00%;--y:21.0px}
.rd__luces i:nth-child(11){--x:55.00%;--y:16.8px}
.rd__luces i:nth-child(12){--x:65.00%;--y:16.8px}
.rd__luces i:nth-child(13){--x:70.00%;--y:21.0px}
.rd__luces i:nth-child(14){--x:75.00%;--y:16.8px}
.rd__luces i:nth-child(15){--x:85.00%;--y:16.8px}
.rd__luces i:nth-child(16){--x:90.00%;--y:21.0px}
.rd__luces i:nth-child(17){--x:95.00%;--y:16.8px}

/* ---------- ventanas ---------- */
.rd__ventana{display:flex;flex-direction:column}
/* toldo de rayas con festón: el patrón se ajusta al ancho con "round" */
.rd__toldo{position:relative;z-index:1;display:block;height:30px;margin:0 -10px;
  border-top:6px solid var(--rd-tinta);border-radius:3px 3px 0 0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='24' viewBox='0 0 68 24'%3E%3Cpath d='M1 -2V10a16 13 0 0 0 32 0V-2z' fill='%23ec7e28' stroke='%231a1a1a' stroke-width='2'/%3E%3Cpath d='M35 -2V10a16 13 0 0 0 32 0V-2z' fill='%23fff7ea' stroke='%231a1a1a' stroke-width='2'/%3E%3C/svg%3E");background-size:68px 24px;background-repeat:round no-repeat}
.rd__marco{flex:1;display:flex;min-height:160px;margin-top:-6px;padding:8px;background:#fff;
  border:3px solid var(--rd-tinta);border-radius:6px}
.rd__perk{position:relative;flex:1;display:flex;align-items:center;gap:18px;padding:20px 24px;
  background:var(--rd-cristal);border:2px solid var(--rd-tinta);border-radius:3px;transition:background .18s ease}
.rd__ventana:hover .rd__perk{background:#eef5f2}
/* reflejo del cristal */
.rd__perk::before,.rd__perk::after{content:"";position:absolute;height:3px;border-radius:2px;background:#fff;transform:rotate(45deg)}
.rd__perk::before{top:17px;right:6px;width:20px}
.rd__perk::after{top:9px;right:5px;width:9px}
.rd__ico{width:54px;height:54px;flex:0 0 auto;border:2px solid var(--rd-tinta);border-radius:50%;
  background:#fff;display:grid;place-items:center}
.rd__ico svg{width:26px;height:26px}
.rd__ico--naranja{color:var(--rd-naranja-osc)}
.rd__ico--azul{color:var(--rd-azul)}
.rd__perk strong{display:block;font-family:'PT Sans',Arial,sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--rd-tinta);text-wrap:balance}
.rd__perk div span{display:block;margin-top:5px;font-size:16.5px;line-height:1.45;color:rgba(0,0,0,.64);text-wrap:pretty}
.rd__alfeizar{display:block;height:13px;margin:0 -12px;background:var(--rd-azul);border:2px solid var(--rd-tinta);border-radius:3px}

/* ---------- puerta (contacto) ---------- */
.rd__puerta{position:relative;z-index:2;grid-column:3;grid-row:2 / 4;display:flex;flex-direction:column;align-items:center}
.rd__puerta .rd__toldo{width:min(100%,320px);margin:0}
.rd__hoja{position:relative;flex:1;width:min(100% - 40px,270px);margin-top:-6px;padding:28px 24px 20px 34px;
  display:flex;flex-direction:column;gap:12px;background:var(--rd-azul);
  border:3px solid var(--rd-tinta);border-bottom:0;border-radius:8px 8px 0 0}
.rd__hoja p{margin:0 0 2px;font-family:'PT Sans',Arial,sans-serif;font-weight:700;font-size:23px;line-height:1.2;color:#fff;text-wrap:balance}
.rd__hoja a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:8px 14px;
  border:2px solid;border-radius:6px;font-size:17px;font-weight:700;line-height:1.2;text-align:center;text-decoration:none;
  transition:background .18s ease,color .18s ease}
.rd__hoja a:focus-visible{outline:3px solid var(--rd-amarillo);outline-offset:3px}
.rd__hoja .rd__btn--full{background:var(--rd-amarillo);color:var(--rd-tinta);border-color:var(--rd-tinta)}
.rd__hoja .rd__btn--full:hover{background:var(--rd-naranja)}
.rd__hoja .rd__btn--linea{background:transparent;color:#fff;border-color:#fff7ea}
.rd__hoja .rd__btn--linea:hover{background:#fff7ea;color:var(--rd-azul)}
.rd__pomo{position:absolute;left:9px;top:58%;width:11px;height:26px;background:var(--rd-amarillo);
  border:2px solid var(--rd-tinta);border-radius:6px}
.rd__cuarteron{flex:1;min-height:24px;margin-top:4px;border:2px solid #28497a;border-radius:4px}
/* farol junto a la puerta */
.rd__farol{position:absolute;top:50px;left:calc(50% - 160px);width:18px;height:24px;background:var(--rd-amarillo);
  border:2px solid var(--rd-tinta);border-radius:4px 4px 2px 2px;box-shadow:0 0 18px 6px rgba(242,193,78,.45)}
.rd__farol::after{content:"";position:absolute;left:100%;top:8px;width:10px;height:4px;margin-left:2px;background:var(--rd-tinta)}
/* escalones de madera sobre el zócalo */
.rd__escalones{position:absolute;top:calc(100% + 3px);left:50%;width:300px;height:28px;transform:translateX(-50%)}
.rd__escalones::before,.rd__escalones::after{content:"";position:absolute;left:50%;height:13px;transform:translateX(-50%);
  background:var(--rd-madera);border:2px solid var(--rd-tinta);border-radius:2px}
.rd__escalones::before{top:0;width:calc(100% - 50px)}
.rd__escalones::after{top:15px;width:100%}

/* ---------- opiniones: ventanal de tres paneles ---------- */
.rd__opiniones{padding-top:153.4px}
.rd__opiniones-head{display:flex;align-items:center;gap:15.6px;margin-bottom:18.2px}
.rd__opiniones-head h3{margin:0;font-family:'Caveat',cursive;font-weight:700;font-size:46.8px;color:var(--rd-tinta)}
.rd__opiniones-head i{flex:1;border-bottom:2.6px dashed rgba(0,0,0,.2)}
/* carrusel: se desplaza en horizontal y cada opinión encaja con scroll-snap.
   La barra de desplazamiento se oculta: se navega con las flechas. */
.rd__ventanal{display:flex;gap:23.4px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:5.2px;scrollbar-width:none;-ms-overflow-style:none}
.rd__ventanal::-webkit-scrollbar{display:none}
.rd__panel{flex:0 0 calc((100% - 46.8px) / 3);scroll-snap-align:start;
  border:3.9px solid var(--rd-tinta);background:#fff;padding:26px;display:flex;flex-direction:column;gap:13px}
/* flechas */
.rd__flechas{display:flex;gap:10.4px;flex-shrink:0}
.rd__flechas.is-innecesario{display:none}
.rd__flecha{width:49.4px;height:49.4px;flex:0 0 auto;border:2.6px solid var(--rd-tinta);background:#fff;
  border-radius:50%;display:grid;place-items:center;font-size:26px;line-height:1;cursor:pointer;
  color:var(--rd-tinta);transition:background .18s ease,color .18s ease,opacity .18s ease}
.rd__flecha:hover:not(:disabled){background:var(--rd-naranja);color:var(--rd-azul)}
.rd__flecha:disabled{opacity:.28;cursor:default}
.rd__panel-head{display:flex;gap:13px;align-items:center}
.rd__avatar{width:41.6px;height:41.6px;flex:0 0 auto;border:2.6px solid var(--rd-tinta);border-radius:50%;background:#f1ece1}
.rd__panel strong{display:block;font-size:22.1px;font-weight:700;color:var(--rd-tinta)}
.rd__panel time{display:block;font-size:16.9px;color:rgba(0,0,0,.45)}
.rd__estrellas{font-size:19.5px;letter-spacing:2.6px;color:var(--rd-naranja)}
.rd__panel p{margin:0;font-size:18.85px;line-height:1.6;color:rgba(0,0,0,.62);text-wrap:pretty}
.rd__panel p.is-clamped{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.rd__mas{margin-top:-5.2px;align-self:flex-start;background:none;border:none;padding:0;
  font-family:inherit;font-size:17.55px;font-weight:700;color:var(--rd-azul);cursor:pointer;text-decoration:underline}
.rd__mas:hover{color:var(--rd-naranja)}
.rd__nota{margin:10.4px 0 0;font-size:16.9px;color:rgba(0,0,0,.4)}

@media (max-width:1080px){
  .rd__fachada{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto 32px}
  .rd__puerta{grid-column:2;grid-row:3 / 5}
  .rd__panel{flex-basis:calc((100% - 23.4px) / 2)}
}
@media (max-width:760px){
  .rd__opiniones{padding-top:87.36px}
  /* .rd__wrap ya usa padding-inline fluido, no necesita override aquí */
  .rd__panel{flex-basis:100%}
  .rd__head h1,.rd__head h2{font-size:38.08px}
  .rd__head{padding-bottom:36px}
  .rd__fachada{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:40px;padding:76px 18px 0}
  .rd__puerta{grid-column:auto;grid-row:auto;min-height:300px}
  .rd__farol{left:calc(50% - 158px)}
  .rd__zocalo{margin:0 10px}
  .rd__casa::after{left:-16px;right:-16px}
  .rd__perk{padding:18px 20px;gap:14px}
  .rd__perk strong{font-size:20px}
  .rd__perk div span{font-size:15.5px}
  .rd__cable--ancho{display:none}
  .rd__cable--movil{display:block}
  .rd__luces i:nth-child(n+9){display:none}
  .rd__luces i:nth-child(3){--x:12.50%;--y:16.8px}
  .rd__luces i:nth-child(4){--x:25.00%;--y:21.0px}
  .rd__luces i:nth-child(5){--x:37.50%;--y:16.8px}
  .rd__luces i:nth-child(6){--x:62.50%;--y:16.8px}
  .rd__luces i:nth-child(7){--x:75.00%;--y:21.0px}
  .rd__luces i:nth-child(8){--x:87.50%;--y:16.8px}
}
@media (prefers-reduced-motion:reduce){
  .rd__perk,.rd__flecha,.rd__hoja a{transition:none}
  .rd__ventanal{scroll-behavior:auto}
}

/* Zona de pulsacion mas amplia sin cambiar el aspecto */
.rd__mas{position:relative}
.rd__mas::after{content:"";position:absolute;inset:-12px -8px}