/* ============================================================
   EL HOGAR DE CARMELITA — styles.css (archivo separado)
   Paleta colonial de Guanajuato:
   terracota #a64e37 · cantera #bd887e · amarillo #d2a13c
   verde #526b4b · azul #4c7180
   Titulos en serif (Bitter). Sin dependencias externas.
   ============================================================ */
:root {
  color-scheme: light;
  --paper: #f6f0e5;
  --surface: #fffaf2;
  --surface-soft: #efe5d5;
  --ink: #342b25;
  --muted: #71665b;
  --line: #dfd1bd;
  --terracotta: #a64e37;
  --terracotta-dark: #843d2d;
  --terracotta-soft: #f3e2d8;
  --cantera: #bd887e;
  --cantera-soft: #f1e2dd;
  --yellow: #d2a13c;
  --yellow-soft: #f6edcf;
  --green: #526b4b;
  --green-soft: #e4e9dc;
  --blue: #4c7180;
  --blue-soft: #e1eaeb;
  --radius: 12px;
  --shadow: 0 12px 32px rgba(62, 43, 29, .09);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

body {
  margin: 0;
  background:
    radial-gradient(ellipse at 12% 18%, rgba(210, 161, 60, .055), transparent 34rem),
    var(--paper);
  color: var(--ink);
  font-family: "Atkinson Hyperlegible", "Trebuchet MS", sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: "Bitter", Georgia, serif;
  font-weight: 600;
  line-height: 1.17;
  text-wrap: balance;
}

a {
  color: var(--terracotta-dark);
  text-underline-offset: .18em;
}

a:hover {
  color: var(--terracotta);
}

img {
  display: block;
  max-width: 100%;
}

button,
[role="button"],
select,
input {
  min-height: 44px;
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

/* A bright, lived-in welcome rather than a full-screen booking banner. */
.hero {
  position: relative;
  padding-bottom: 12px;
}

.hero-photo {
  width: 100%;
  height: min(66vh, 620px);
  min-height: 360px;
  object-fit: cover;
  object-position: center 54%;
}

.hero-card {
  position: relative;
  z-index: 1;
  max-width: 1124px;
  margin: -92px auto 0;
  padding: 0 28px;
}

.hero-inner {
  position: relative;
  padding: 36px 40px 32px;
  border: 1px solid rgba(132, 61, 45, .22);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.hero-inner::before {
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(189, 136, 126, .34);
  content: "";
  pointer-events: none;
}

.hero-top,
.hero-actions,
.facts {
  position: relative;
}

.hero-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.hero h1 {
  max-width: 760px;
  font-size: clamp(2.4rem, 5.3vw, 4.25rem);
  letter-spacing: -.045em;
}

.hero h1 span {
  color: var(--terracotta);
}

.hero-sub {
  max-width: 680px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 1.09rem;
}

.rating {
  min-width: 148px;
  padding: 14px 22px 16px;
  border: 1px solid rgba(82, 107, 75, .24);
  border-radius: 26px;
  background: var(--green-soft);
  box-shadow: 0 4px 14px rgba(62, 43, 29, .06);
  text-align: center;
}

.rating b {
  display: block;
  color: var(--green);
  font-family: "Bitter", Georgia, serif;
  font-size: 2.25rem;
  line-height: 1.1;
}

.rating span {
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.4;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.btn {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 21px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  border-color: var(--terracotta);
  background: var(--terracotta);
  color: #fffaf2;
}

.btn-primary:hover {
  border-color: var(--terracotta-dark);
  background: var(--terracotta-dark);
  color: #fffaf2;
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
}

.btn-ghost:hover {
  border-color: var(--terracotta);
  background: var(--terracotta-soft);
  color: var(--terracotta-dark);
}

.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 28px;
  border-top: 1px solid var(--line);
}

.fact {
  padding: 14px 14px 0 0;
  font-size: .9rem;
}

.fact + .fact {
  padding-left: 16px;
  border-left: 1px solid var(--line);
}

.fact b {
  display: block;
  font-size: .96rem;
}

.fact span {
  color: var(--muted);
}

section {
  padding: 64px 0 4px;
}

.sec-head {
  max-width: 760px;
  margin-bottom: 26px;
}

.sec-head h2 {
  margin-bottom: 10px;
  font-size: clamp(1.9rem, 3.8vw, 2.75rem);
  letter-spacing: -.025em;
}

.sec-head h2::after {
  display: block;
  width: 54px;
  height: 3px;
  margin-top: 14px;
  background: var(--yellow);
  content: "";
}

.sec-head p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

/* Guest rooms: real photos lead, with restrained color accents per room. */
.rooms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 24px;
}

.room {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(62, 43, 29, .06);
}

.room-banner {
  position: relative;
  min-height: 112px;
  padding: 22px 24px 18px;
  border-bottom: 3px double rgba(255, 250, 242, .52);
  color: #fffaf2;
}

.room-banner.caro {
  background: var(--terracotta);
}

.room-banner.male {
  background: var(--green);
}

.room-banner.paty {
  background: #a97828;
}

.room-banner.gaby {
  background: var(--blue);
}

.room-banner h3 {
  color: inherit;
  font-size: 1.8rem;
}

.room-banner p {
  margin: 5px 0 0;
  color: rgba(255, 250, 242, .9);
  font-size: .94rem;
}

.badge {
  position: absolute;
  top: 18px;
  right: 18px;
  max-width: 48%;
  padding: 5px 10px;
  border: 1px solid rgba(52, 43, 37, .1);
  background: var(--surface);
  color: var(--ink);
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.badge.soon {
  background: var(--yellow-soft);
  color: #574216;
}

.room-gallery {
  background: var(--surface-soft);
}

.room-gallery-main {
  width: 100%;
  height: 330px;
  object-fit: cover;
  object-position: center;
}

.room-gallery-label {
  padding: 10px 14px 2px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.room-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 10px 12px;
}

.room-gallery-thumbs figure {
  min-width: 0;
  margin: 0;
}

.room-gallery-thumbs img {
  width: 100%;
  height: 104px;
  object-fit: cover;
}

.room-gallery-thumbs figcaption {
  padding: 5px 2px 0;
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.35;
  text-align: center;
}

.room-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  padding: 22px 24px 24px;
}

.room-body ul {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: .94rem;
}

.room-body ul li {
  margin: 4px 0;
  padding-left: 3px;
}

.room-body ul li::marker {
  color: var(--cantera);
}

.room-body ul li b {
  color: var(--ink);
}

.price-box {
  margin-top: auto;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.price-row + .price-row {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px dashed #cdbda8;
}

.price-row .lbl {
  color: var(--muted);
  font-size: .87rem;
}

.price-row .val {
  color: var(--terracotta-dark);
  font-family: "Bitter", Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  white-space: nowrap;
}

.price-row .val small {
  color: var(--muted);
  font-family: "Atkinson Hyperlegible", "Trebuchet MS", sans-serif;
  font-size: .76rem;
  font-weight: 400;
}

.save {
  color: var(--green);
  font-weight: 700;
}

.note {
  margin-top: 16px;
  color: var(--muted);
  font-size: .91rem;
}

.room.unavailable {
  border-style: dashed;
  background: #faf6ed;
}

.room.unavailable .room-body {
  opacity: .84;
}

.unavailable-box {
  margin-top: auto;
  padding: 14px 16px;
  border: 1px solid #d5bd79;
  background: var(--yellow-soft);
  text-align: center;
}

.unavailable-box b {
  display: block;
  color: #574216;
  font-family: "Bitter", Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.35;
}

.unavailable-box span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: .88rem;
}

/* Details and amenities */
.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.panel,
.loc-card {
  padding: 26px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.panel h3 {
  margin-bottom: 16px;
  font-size: 1.32rem;
}

.checklist {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.ico {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 50%;
  font-size: .9rem;
  font-weight: 700;
}

.ico.yes {
  background: var(--green-soft);
  color: var(--green);
}

.ico.no {
  background: var(--yellow-soft);
  color: #755a1e;
}

.checklist small {
  display: block;
  color: var(--muted);
}

/* Neighborhood */
.loc {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: stretch;
  gap: 22px;
}

.loc-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.loc-photos img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
}

.loc-card h3 {
  margin-bottom: 12px;
  font-size: 1.4rem;
}

.loc-card address {
  margin-bottom: 10px;
  font-size: 1.05rem;
  font-style: normal;
  font-weight: 700;
}

.loc-card p {
  margin: 9px 0;
  color: var(--muted);
}

/* Guest scores */
.scores {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.score {
  padding: 17px 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: center;
}

.score b {
  display: block;
  color: var(--green);
  font-family: "Bitter", Georgia, serif;
  font-size: 1.7rem;
  font-weight: 600;
}

.score span {
  color: var(--muted);
  font-size: .86rem;
}

/* Booking steps */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.step {
  padding: 22px;
  border-top: 2px solid var(--yellow);
  background: var(--surface);
}

.step .num {
  display: grid;
  width: 38px;
  height: 38px;
  margin-bottom: 13px;
  place-items: center;
  border: 1px solid var(--terracotta);
  border-radius: 50%;
  color: var(--terracotta-dark);
  font-family: "Bitter", Georgia, serif;
  font-weight: 600;
}

.step h3 {
  margin-bottom: 7px;
  font-size: 1.13rem;
}

.step p {
  margin: 0;
  color: var(--muted);
  font-size: .94rem;
}

.phone-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid #d9c68e;
  background: var(--yellow-soft);
}

.phone-box b {
  font-size: 1.04rem;
}

/* FAQ and footer */
details {
  margin-bottom: 10px;
  padding: 5px 18px;
  border: 1px solid var(--line);
  background: var(--surface);
}

summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  cursor: pointer;
  font-weight: 700;
}

details[open] summary {
  color: var(--terracotta-dark);
}

details p {
  margin: 0 0 14px;
  color: var(--muted);
}

footer {
  margin-top: 64px;
  padding: 24px 0 36px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .9rem;
}

footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
}

@media (max-width: 900px) {
  .rooms,
  .steps,
  .places {
    grid-template-columns: 1fr;
  }

  .facts {
    grid-template-columns: repeat(2, 1fr);
  }

  .fact:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .fact:nth-child(n + 3) {
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }

  .scores {
    grid-template-columns: repeat(3, 1fr);
  }

  .two-col,
  .loc {
    grid-template-columns: 1fr;
  }

  .hero-inner {
    padding: 30px 28px 26px;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 16px;
  }

  .wrap {
    padding-right: 18px;
    padding-left: 18px;
  }

  .hero-photo {
    height: 48vh;
    min-height: 280px;
  }

  .hero-card {
    margin-top: -48px;
    padding: 0 12px;
  }

  .hero-inner {
    padding: 28px 22px 22px;
  }

  .hero-top {
    gap: 16px;
  }

  .hero h1 {
    font-size: clamp(2.15rem, 10vw, 3rem);
  }

  .hero-sub {
    font-size: 1rem;
  }

  .rating {
    min-width: 0;
    padding: 9px 13px;
  }

  .rating b {
    font-size: 1.8rem;
  }

  .hero-actions .btn {
    flex: 1 1 100%;
  }

  .facts {
    gap: 0;
  }

  .fact {
    padding-right: 8px;
    font-size: .82rem;
  }

  .fact + .fact {
    padding-left: 10px;
  }

  .fact:nth-child(3) {
    padding-left: 0;
  }

  section {
    padding-top: 48px;
  }

  .room-banner {
    min-height: 106px;
    padding: 18px 18px 15px;
  }

  .room-banner h3 {
    font-size: 1.6rem;
  }

  .badge {
    top: 14px;
    right: 14px;
    font-size: .69rem;
  }

  .room-gallery-main {
    height: 250px;
  }

  .room-gallery-thumbs {
    gap: 5px;
    padding: 6px 7px 10px;
  }

  .room-gallery-thumbs img {
    height: 76px;
  }

  .room-gallery-thumbs figcaption {
    font-size: .68rem;
  }

  .room-body,
  .panel,
  .loc-card {
    padding: 19px;
  }

  .scores {
    grid-template-columns: repeat(2, 1fr);
  }

  .loc-photos {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .loc-photos img {
    min-height: 170px;
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
  }
}

/* ===== Navegación principal (nuevo) ===== */
.topbar{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--line)}
.topbar-in{max-width:1180px;margin:0 auto;padding:10px 28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.brand{font-family:"Bitter",Georgia,serif;font-weight:700;font-size:1.2rem;color:var(--ink);text-decoration:none;line-height:1.1}
.brand small{display:block;font-family:"Atkinson Hyperlegible",sans-serif;font-weight:700;font-size:.72rem;color:var(--muted);letter-spacing:.07em}
.brand em{color:var(--terracotta);font-style:normal}
nav.main{margin-left:auto}
nav.main ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px}
nav.main a{color:var(--ink);text-decoration:none;font-weight:700;font-size:.95rem;padding:8px 2px;border-bottom:3px solid transparent}
nav.main a:hover{border-bottom-color:var(--yellow);color:var(--terracotta-dark)}
.talavera{height:12px;opacity:.6;background:repeating-linear-gradient(45deg,var(--blue) 0 8px,transparent 8px 16px),repeating-linear-gradient(-45deg,var(--terracotta) 0 8px,var(--yellow-soft) 8px 16px);border-block:1px solid var(--line)}
.ratings{display:flex;gap:10px;flex-wrap:wrap}
.rating.alt{border-color:rgba(76,113,128,.3);background:var(--blue-soft)}
.rating.alt b{color:var(--blue)}
/* ===== Historia ===== */
.story{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:stretch}
.story-photos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.story-photos img{width:100%;height:100%;min-height:240px;object-fit:cover}
.story-card{padding:26px;border:1px solid var(--line);background:var(--surface)}
.story-card h3{margin-bottom:12px;font-size:1.4rem}
.story-card p{color:var(--muted);margin:0 0 12px}
.story-card p b{color:var(--ink)}
.story-sign{font-family:"Bitter",Georgia,serif;font-style:italic;color:var(--terracotta-dark)}
/* ===== Experiencia ===== */
.places{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.place{padding:22px;border:1px solid var(--line);border-top:3px solid var(--cantera);background:var(--surface)}
.place:nth-child(3n+2){border-top-color:var(--yellow)}
.place:nth-child(3n){border-top-color:var(--green)}
.place h3{font-size:1.15rem;margin-bottom:6px}
.place .dist{font-weight:700;color:var(--terracotta-dark);font-size:.9rem}
.place p{margin:6px 0 0;color:var(--muted);font-size:.94rem}
.terrace-note{margin-top:18px;padding:22px 24px;border:1px solid var(--line);background:var(--cantera-soft)}
.terrace-note h3{font-size:1.22rem;margin-bottom:6px}
.terrace-note p{margin:0;color:var(--muted)}
/* ===== Tarifa semanal ===== */
.week-note{margin-top:20px;padding:20px 24px;border:1px solid rgba(82,107,75,.3);background:var(--green-soft)}
.week-note p{margin:0}
.week-note .gaby-note{margin-top:8px;font-size:.92rem;color:var(--muted)}
/* ===== Galería ===== */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.gallery figure{margin:0;border:1px solid var(--line);background:var(--surface);overflow:hidden}
.gallery img{width:100%;height:230px;object-fit:cover}
.gallery figcaption{padding:10px 14px;font-size:.9rem;color:var(--muted)}
.gallery figcaption b{color:var(--ink)}
/* ===== Opiniones / contacto / pie ===== */
.review-links{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.review-link{padding:20px 22px;border:1px solid var(--line);background:var(--surface)}
.review-link h3{font-size:1.12rem;margin-bottom:4px}
.review-link p{margin:0 0 12px;color:var(--muted);font-size:.94rem}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;margin-top:20px}
.contact-card{padding:26px;border:1px solid var(--line);background:var(--surface)}
.contact-card h3{font-size:1.3rem;margin-bottom:12px}
.contact-card address{font-style:normal;font-weight:700;font-size:1.05rem;margin-bottom:10px}
.contact-card p{color:var(--muted);margin:8px 0}
.contact-card a.mail{font-weight:700;word-break:break-all}
footer .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:100%}
footer h3{font-size:1.02rem;margin-bottom:8px;color:var(--ink)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
footer .legal{width:100%;border-top:1px solid var(--line);padding-top:12px;display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between}
@media (max-width:900px){.places{grid-template-columns:1fr}.story,.contact-grid,.review-links{grid-template-columns:1fr}.gallery{grid-template-columns:1fr 1fr}footer .cols{grid-template-columns:1fr}nav.main{margin-left:0}}
@media (max-width:560px){.gallery{grid-template-columns:1fr}.gallery img{height:auto;max-height:300px}.story-photos{grid-template-columns:1fr}.topbar-in{padding:10px 18px}}

.pol-wrap{max-width:860px;margin:0 auto;padding:28px 28px 56px}
.pol-card{padding:30px 32px;border:2px solid rgba(132,61,45,.52);background:var(--surface);box-shadow:inset 0 0 0 4px var(--surface),inset 0 0 0 5.5px rgba(189,136,126,.36),0 24px 44px rgba(132,61,45,.16)}
.pol-card h1{color:var(--terracotta-dark);font-size:clamp(1.9rem,4vw,2.6rem);letter-spacing:-.02em}
.pol-card h1::after{display:block;width:54px;height:3px;margin-top:14px;background:var(--yellow);content:""}
.pol-card h2{color:var(--terracotta-dark);font-size:1.3rem;margin:26px 0 8px}
.pol-card p,.pol-card li{color:#4e4239;line-height:1.75}
.pol-card ul{margin:6px 0 0;padding-left:20px}
.pol-intro{font-size:1.05rem}
.pol-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.pol-back{display:inline-block;margin-bottom:18px;font-weight:700}
.pol-note{margin-top:18px;padding:16px 18px;background:var(--surface-soft);border:1px solid var(--line)}
.pol-note-text{margin:0}
@media(max-width:560px){.pol-wrap{padding:20px 18px 44px}.pol-card{padding:24px 20px}}
.includes-grid { margin-top: 24px; }
.pay-cta { margin-top: 14px; }
.faq-block { margin-top: 26px; }

/* ===== Menú hamburguesa (solo móvil) ===== */
.nav-toggle{display:none}
@media (max-width:900px){
  html{scroll-padding-top:84px}
  .topbar-in{flex-wrap:wrap;align-items:center;gap:8px 12px}
  .brand{flex:1 1 auto;min-width:0}
  .nav-toggle{display:grid;place-items:center;width:48px;height:48px;min-height:48px;padding:0;border:1px solid var(--line);border-radius:3px;background:var(--surface);color:var(--terracotta-dark);font-size:1.45rem;line-height:1;cursor:pointer}
  .nav-toggle:hover{border-color:var(--terracotta);background:var(--terracotta-soft)}
  nav.main{display:none;flex:1 1 100%;order:3;margin-left:0}
  nav.main.open{display:block}
  nav.main ul{flex-direction:column;flex-wrap:nowrap;gap:0;padding:4px 0 6px}
  nav.main li+li{border-top:1px solid var(--line)}
  nav.main a{display:block;padding:13px 4px;font-size:1rem;border-bottom:0}
  nav.main a:hover{border-bottom:0}
}

/* ===== Historia: fotos con pie (recepción y letrero) ===== */
.story-figure{margin:0;display:flex;flex-direction:column;border:1px solid var(--line);background:var(--surface)}
.story-figure img{width:100%;flex:1;min-height:0;object-fit:cover}
.story-figure figcaption{padding:9px 13px 11px;color:var(--muted);font-size:.88rem;line-height:1.45}
.story-main{grid-column:1/-1}
.story-main img{flex:none;height:340px;object-fit:cover}
.story-sign img{object-fit:contain;background:#f4f0e6}
@media (max-width:560px){
  .story-photos{grid-template-columns:1fr 1fr;gap:8px}
  .story-photos img{min-height:150px}
  .story-figure img{min-height:0}
  .story-main img{height:200px;min-height:0}
  .story-figure figcaption{padding:8px 10px 9px;font-size:.82rem}
}

/* ===== Carrusel de fotos por cuarto ===== */
.carousel{position:relative;background:var(--surface-soft)}
.carousel-label{padding:10px 14px 8px;color:var(--muted);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.carousel-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-slide{flex:0 0 100%;min-width:0;margin:0;scroll-snap-align:start;scroll-snap-stop:always}
.carousel-slide img{width:100%;height:300px;object-fit:cover;object-position:center}
.carousel-slide figcaption{padding:8px 14px 4px;color:var(--muted);font-size:.84rem;line-height:1.4;text-align:center}
.carousel-btn{position:absolute;top:158px;display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:rgba(255,250,242,.94);color:var(--terracotta-dark);font-size:1.5rem;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(62,43,29,.18);z-index:2}
.carousel-btn:hover{background:var(--surface);border-color:var(--terracotta)}
.carousel-btn.prev{left:10px}
.carousel-btn.next{right:10px}
.carousel-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:6px 12px 12px}
.carousel-dot{width:12px;height:12px;min-height:0;padding:0;border:1px solid var(--terracotta);border-radius:50%;background:transparent;cursor:pointer}
.carousel-dot.active{background:var(--terracotta)}
@media (max-width:560px){
  .carousel-slide img{height:250px}
  .carousel-btn{top:133px}
}

/* ===== Paleta del letrero de talavera: azul talavera, blanco crema, negro hierro ===== */
:root{
  --talavera-blue:#23408f;
  --talavera-blue-soft:#e8ecf6;
  --cream:#fffaf0;
  --iron:#211d18;
}
/* ===== Apartado general bajo Booking / TripAdvisor ===== */
.general-note{margin-top:16px;padding:22px 24px;border:1px solid var(--line);background:var(--blue-soft);text-align:center}
.general-note h3{font-size:1.2rem;margin-bottom:6px;color:var(--blue)}
.general-note p{margin:0;font-size:1.02rem}
/* ===== Minimapa en Contacto ===== */
.minimap{margin:14px 0 12px;border:1px solid var(--line);background:var(--surface-soft);overflow:hidden}
.minimap img{display:block;width:100%;height:260px;object-fit:cover}

/* ============================================================
   TALAVERA SOLO EN DOS LUGARES
   1) Boton principal "Ver las habitaciones" (.btn-primary):
      patron talavera estatico, sin movimiento.
   2) Franja del pie (footer .talavera): unico elemento
      animado de la pagina.
   En el resto de la pagina no hay patron talavera: diseno
   colonial limpio en terracota, cantera, amarillo, verde
   y azul, con bordes y fondos solidos.
   ============================================================ */
:root{
  --talavera-band:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Crect width='28' height='28' fill='%23fffaf0'/%3E%3Cpath d='M14 3 L25 14 L14 25 L3 14 Z' fill='none' stroke='%2323408f' stroke-width='1.7'/%3E%3Ccircle cx='14' cy='14' r='3.4' fill='none' stroke='%2323408f' stroke-width='1.3'/%3E%3Ccircle cx='14' cy='14' r='1.3' fill='%23211d18'/%3E%3Ccircle cx='0' cy='0' r='1.6' fill='%2323408f'/%3E%3Ccircle cx='28' cy='0' r='1.6' fill='%2323408f'/%3E%3Ccircle cx='0' cy='28' r='1.6' fill='%2323408f'/%3E%3Ccircle cx='28' cy='28' r='1.6' fill='%2323408f'/%3E%3C/svg%3E");
  --talavera-band-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M14 3 L25 14 L14 25 L3 14 Z' fill='none' stroke='%23fffaf2' stroke-opacity='0.38' stroke-width='1.5'/%3E%3Ccircle cx='14' cy='14' r='1.4' fill='%23fffaf2' fill-opacity='0.38'/%3E%3C/svg%3E");
}
@keyframes talavera-band-move{from{background-position:0 0}to{background-position:280px 0}}

/* --- Sin talavera en el resto de la pagina (reversion limpia) --- */
body{background-image:radial-gradient(ellipse at 12% 18%,rgba(210,161,60,.055),transparent 34rem)}
.topbar{border-bottom:1px solid var(--line)}
.hero-photo{border-bottom:0}
.hero-inner{border:1px solid rgba(132,61,45,.22);background-image:none}
.hero-inner::after{content:none;display:none}
.rating{border:1px solid rgba(82,107,75,.24)}
.rating.alt{border:1px solid rgba(76,113,128,.3)}
.sec-head::before{content:none;display:none}
.sec-head h2::after{width:54px;height:3px;margin-top:14px;background:var(--yellow);border:0}
.story-card{border-top:1px solid var(--line)}
.room{border:1px solid var(--line)}
.room-banner{padding-bottom:18px}
.room-banner::after{content:none;display:none}
.carousel{border-bottom:0}
.carousel-dot{border-color:var(--terracotta)}
.carousel-dot.active{background:var(--terracotta)}
.price-box{border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-left:0;border-right:0;background-image:none}
.badge{border:1px solid rgba(52,43,37,.1);color:var(--ink)}
.btn{border-width:1px}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--terracotta);background:var(--terracotta-soft);background-image:none;color:var(--terracotta-dark)}
.panel{border-top:1px solid var(--line)}
.score{border-bottom:1px solid var(--line)}
.review-link{border-top:1px solid var(--line)}
.contact-card{border-top:1px solid var(--line)}
.week-note{border:1px solid rgba(82,107,75,.3);background-image:none}
.general-note{border:1px solid var(--line);background-image:none}
.step{border:0;border-top:2px solid var(--yellow)}
.step .num{border-color:var(--terracotta);color:var(--terracotta-dark)}
footer{background-image:none;border-top:1px solid var(--line)}
footer .legal{border-top:1px solid var(--line)}

/* --- 1) Talavera estatica SOLO en "Ver las habitaciones" --- */
.btn-primary{animation:none}
.hero-actions .btn-primary{border-color:var(--talavera-blue);background-image:var(--talavera-band-light);background-size:28px 28px;animation:none}
.hero-actions .btn-primary:hover{border-color:var(--iron)}

/* --- 2) Talavera animada SOLO en el pie --- */
.talavera{display:none}
footer .talavera{display:block;height:20px;opacity:1;background-color:var(--cream);background-image:var(--talavera-band);background-size:28px 28px;background-repeat:repeat;border-block:2px solid var(--talavera-blue);animation:talavera-band-move 22s linear infinite}

@media (prefers-reduced-motion: reduce){
  footer .talavera{animation:none}
  .btn-primary{animation:none}
}

/* ============================================================
   AJUSTES FINALES
   1) Menu hamburguesa SIEMPRE (movil y escritorio): la barra
      superior solo muestra el nombre y el boton. El menu se
      despliega dentro de la barra y empuja el contenido, no
      tapa el hero; al tocar una opcion se cierra (ver script).
   2) Division fina talavera rosa justo debajo del menu.
   3) Fondo de pagina: patron talavera muy suave, de baja
      opacidad, estilo Guanajuato colonial pero moderno y
      limpio. Las tarjetas, fotos, Experiencia y Galeria
      conservan sus fondos solidos: el patron solo se ve en
      el fondo general y no compite con el texto.
   ============================================================ */
:root{
  --talavera-bg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cpath d='M42 10 L74 42 L42 74 L10 42 Z' fill='none' stroke='%234c7180' stroke-opacity='0.07' stroke-width='1.4'/%3E%3Cpath d='M42 24 L60 42 L42 60 L24 42 Z' fill='none' stroke='%23a64e37' stroke-opacity='0.05' stroke-width='1.1'/%3E%3Ccircle cx='42' cy='42' r='3' fill='none' stroke='%234c7180' stroke-opacity='0.07' stroke-width='1.1'/%3E%3Ccircle cx='0' cy='0' r='2.2' fill='%23bd887e' fill-opacity='0.08'/%3E%3Ccircle cx='84' cy='0' r='2.2' fill='%23bd887e' fill-opacity='0.08'/%3E%3Ccircle cx='0' cy='84' r='2.2' fill='%23bd887e' fill-opacity='0.08'/%3E%3Ccircle cx='84' cy='84' r='2.2' fill='%23bd887e' fill-opacity='0.08'/%3E%3C/svg%3E");
  --talavera-rosa-band:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' fill='%23f7e7e0'/%3E%3Cpath d='M12 3.5 L20.5 12 L12 20.5 L3.5 12 Z' fill='none' stroke='%23bd887e' stroke-width='1.3'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%23a64e37' fill-opacity='0.55'/%3E%3C/svg%3E");
}

/* --- 3) Fondo talavera suave en toda la pagina --- */
body{
  background-color:var(--paper);
  background-image:var(--talavera-bg),radial-gradient(ellipse at 12% 18%,rgba(210,161,60,.055),transparent 34rem);
  background-size:84px 84px,auto;
  background-repeat:repeat,no-repeat;
}

/* --- 1) Hamburguesa en todos los tamanos --- */
.topbar-in{flex-wrap:wrap;align-items:center;gap:8px 12px}
.brand{flex:1 1 auto;min-width:0}
.nav-toggle{display:grid;place-items:center;width:48px;height:48px;min-height:48px;padding:0;border:1px solid var(--line);border-radius:3px;background:var(--surface);color:var(--terracotta-dark);font-size:1.45rem;line-height:1;cursor:pointer}
.nav-toggle:hover{border-color:var(--terracotta);background:var(--terracotta-soft)}
nav.main{display:none;flex:1 1 100%;order:3;margin-left:0}
nav.main.open{display:block}
nav.main ul{flex-direction:column;flex-wrap:nowrap;gap:0;padding:4px 0 6px}
nav.main li+li{border-top:1px solid var(--line)}
nav.main a{display:block;padding:13px 4px;font-size:1rem;border-bottom:0}
nav.main a:hover{border-bottom:0;color:var(--terracotta-dark)}

/* --- 2) Division fina talavera rosa bajo el menu --- */
/* Va DENTRO de .topbar (position:sticky), asi que se mantiene
   fija arriba junto con el menu, sin cambiar su diseno. */
.talavera-rosa{height:10px;background-color:#f7e7e0;background-image:var(--talavera-rosa-band);background-size:24px 24px;background-repeat:repeat-x;background-position:center;border-bottom:1px solid rgba(189,136,126,.45)}

/* ============================================================
   AJUSTES SEGUN CAPTURAS
   1) Tarjetas de calificacion del hero: forma suave, esquinas
      mucho mas redondeadas (ya no cuadradas).
   2) Los TRES botones del hero comparten el mismo patron
      talavera y el mismo estilo.
   3) PRUEBA solo en Carito: encabezado redisenado con fondo
      colonial de Guanajuato (azul talavera profundo con
      rombos crema y franja dorada), distinto al fondo plano
      de los demas cuartos. Male, Paty y Gaby no cambian.
   ============================================================ */

/* --- 1) Calificaciones suaves y redondeadas --- */
.rating{border-radius:26px}
.rating.alt{border-radius:26px}

/* --- 2) Tres botones del hero, mismo patron talavera --- */
.hero-actions .btn{
  border-color:var(--talavera-blue);
  background-color:var(--terracotta);
  background-image:var(--talavera-band-light);
  background-size:28px 28px;
  color:#fffaf2;
}
.hero-actions .btn:hover{
  border-color:var(--iron);
  background-color:var(--terracotta-dark);
  background-image:var(--talavera-band-light);
  color:#fffaf2;
}

/* --- 3) Carito: encabezado de prueba, fondo colonial distinto --- */
.room-banner.caro{
  min-height:148px;
  padding:24px 24px 20px;
  overflow:hidden;
  border-bottom:4px solid var(--yellow);
  background:
    linear-gradient(118deg, rgba(35,64,143,.96) 0%, rgba(47,84,110,.94) 58%, rgba(76,113,128,.92) 100%);
  isolation:isolate;
}
.room-banner.caro::before{
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:var(--talavera-band-light);
  background-size:34px 34px;
  background-repeat:repeat;
  opacity:.55;
  content:"";
  pointer-events:none;
}
.room-banner.caro::after{
  position:absolute;
  top:-46px;
  right:-30px;
  z-index:-1;
  display:block;
  width:168px;
  height:168px;
  border:2px solid rgba(246,237,207,.35);
  border-radius:50%;
  background:radial-gradient(circle, rgba(210,161,60,.34) 0%, rgba(210,161,60,0) 68%);
  content:"";
  pointer-events:none;
}
.room-banner.caro h3{
  position:relative;
  font-size:2rem;
  letter-spacing:-.01em;
  text-shadow:0 1px 3px rgba(20,26,48,.35);
}
.room-banner.caro p{position:relative}
.room-banner.caro .badge{
  z-index:1;
  border:1px solid rgba(87,66,22,.25);
  border-radius:999px;
  background:var(--yellow-soft);
  color:#574216;
  box-shadow:0 3px 10px rgba(20,26,48,.22);
}
.room-banner.caro .caro-story{
  max-width:34ch;
  margin-top:8px;
  color:rgba(255,250,242,.92);
  font-size:.9rem;
  line-height:1.5;
}
@media (max-width:560px){
  .room-banner.caro{min-height:138px;padding:20px 18px 17px}
  .room-banner.caro .caro-story{max-width:30ch}
}

/* ============================================================
   CALIFICACIONES DEL HERO: AZULEJOS DE TALAVERA
   Ya no son dos cajitas cuadradas de plantilla. Son dos
   azulejos pintados a mano, como los de la casa: fondo crema
   calido, borde azul talavera doble (el exterior grueso y
   uno interior fino, irregular), forma organica suave con
   esquinas desiguales y una leve inclinacion distinta en
   cada uno, sombra calida, numero grande en serif, estrellitas
   doradas y un adorno de hierro forjado con rombo talavera.
   Son enlaces a Booking y a TripAdvisor.
   ============================================================ */
.ratings{
  display:flex;
  flex-wrap:wrap;
  gap:16px 18px;
  align-items:flex-start;
  padding:6px 4px 2px;
}
.rating.tile{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:158px;
  max-width:188px;
  flex:1 1 158px;
  padding:13px 20px 14px;
  border:2.5px solid var(--talavera-blue);
  background:
    radial-gradient(ellipse at 18% 8%, rgba(210,161,60,.14), transparent 55%),
    radial-gradient(ellipse at 88% 96%, rgba(35,64,143,.07), transparent 52%),
    #fff6e3;
  color:var(--ink);
  text-align:center;
  text-decoration:none;
  box-shadow:
    inset 0 0 0 3px #fffaf0,
    inset 0 0 0 4.5px rgba(35,64,143,.38),
    0 10px 22px rgba(132,61,45,.16),
    0 3px 7px rgba(62,43,29,.10);
  transition:transform .2s ease, box-shadow .2s ease;
}
/* Forma organica: cada azulejo con esquinas distintas,
   como una pieza de barro hecha a mano, no un rectangulo. */
.rating.tile-booking{
  border-radius:34px 22px 38px 24px / 26px 36px 24px 34px;
  transform:rotate(-1.3deg);
}
.rating.tile-tripadvisor{
  border-radius:23px 36px 25px 39px / 35px 25px 34px 26px;
  transform:rotate(1.1deg);
  margin-top:7px;
}
.rating.tile:hover{
  color:var(--ink);
  box-shadow:
    inset 0 0 0 3px #fffaf0,
    inset 0 0 0 4.5px rgba(35,64,143,.55),
    0 14px 26px rgba(132,61,45,.20),
    0 4px 8px rgba(62,43,29,.12);
}
.rating.tile-booking:hover{transform:rotate(-.4deg) translateY(-2px)}
.rating.tile-tripadvisor:hover{transform:rotate(.3deg) translateY(-2px)}
.rating.tile:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
/* Puntitos pintados en las esquinas, como el punteo talavera */
.rating.tile::before,
.rating.tile::after{
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--talavera-blue);
  opacity:.55;
  content:"";
  pointer-events:none;
}
.rating.tile::before{top:10px;left:12px}
.rating.tile::after{right:12px;bottom:10px}
.tile-orn{
  display:block;
  width:44px;
  height:14px;
  margin-bottom:1px;
  color:var(--iron);
  opacity:.78;
  line-height:0;
}
.tile-orn svg{display:block;width:44px;height:14px}
.rating.tile b{
  display:block;
  color:var(--talavera-blue);
  font-family:"Bitter",Georgia,serif;
  font-size:2.65rem;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.02em;
}
.rating.tile-tripadvisor b{color:#1f4d3a}
.tile-label{
  display:block;
  margin-top:2px;
  color:var(--ink);
  font-size:.92rem;
  font-weight:700;
  line-height:1.35;
}
.tile-stars{
  display:block;
  margin-top:3px;
  color:var(--yellow);
  font-size:.78rem;
  letter-spacing:.22em;
  text-indent:.22em;
  line-height:1.3;
  text-shadow:0 1px 0 rgba(132,61,45,.18);
}
.tile-count{
  display:block;
  margin-top:1px;
  color:var(--muted);
  font-size:.84rem;
  line-height:1.35;
}
@media (max-width:560px){
  .ratings{gap:12px;width:100%}
  .rating.tile{min-width:0;max-width:none;padding:11px 12px 12px}
  .rating.tile b{font-size:2.15rem}
  .tile-label{font-size:.86rem}
  .tile-count{font-size:.8rem}
}
@media (prefers-reduced-motion: reduce){
  .rating.tile{transition:none}
  .rating.tile:hover{transform:none}
  .rating.tile-booking{transform:rotate(-1.3deg)}
  .rating.tile-tripadvisor{transform:rotate(1.1deg)}
}

/* ============================================================
   AJUSTES: AZULEJOS A LA MITAD Y CORAZON COLONIAL
   1) Azulejos de calificacion del hero: a la mitad de su
      tamano anterior, centrados en su espacio, con los mismos
      datos y enlaces a Booking y TripAdvisor.
   2) Corazon dibujado a mano junto a "Nuestra historia":
      trazo terracota irregular, relleno suave, rombo talavera
      azul al centro y un rizo dorado de hierro forjado.
   ============================================================ */
.ratings{
  justify-content:center;
  align-items:center;
  gap:9px 10px;
  margin-inline:auto;
  padding:3px 2px 1px;
}
.rating.tile{
  min-width:82px;
  max-width:98px;
  flex:0 1 90px;
  padding:7px 10px 8px;
  border-width:1.8px;
  box-shadow:
    inset 0 0 0 2px #fffaf0,
    inset 0 0 0 3px rgba(35,64,143,.38),
    0 5px 11px rgba(132,61,45,.15),
    0 2px 4px rgba(62,43,29,.10);
}
.rating.tile::before,.rating.tile::after{width:3px;height:3px}
.rating.tile::before{top:6px;left:7px}
.rating.tile::after{right:7px;bottom:6px}
.rating.tile-tripadvisor{margin-top:4px}
.tile-orn{width:23px;height:8px;margin-bottom:0}
.tile-orn svg{width:23px;height:8px}
.rating.tile b{font-size:1.35rem;line-height:1.05}
.tile-label{font-size:.62rem;line-height:1.3}
.tile-stars{font-size:.5rem;letter-spacing:.16em;text-indent:.16em;margin-top:2px}
.tile-count{font-size:.58rem;line-height:1.3}
@media (max-width:560px){
  .ratings{justify-content:center}
  .rating.tile{min-width:78px;max-width:96px;padding:6px 8px 7px}
  .rating.tile b{font-size:1.25rem}
}

/* --- Corazon colonial junto al titulo de Historia --- */
.historia-heart{
  display:inline-block;
  width:52px;
  height:46px;
  margin-left:10px;
  vertical-align:-8px;
  transform:rotate(-4deg);
  line-height:0;
}
.historia-heart svg{display:block;width:52px;height:46px;overflow:visible}
@media (max-width:560px){
  .historia-heart{width:42px;height:37px;margin-left:7px;vertical-align:-6px}
  .historia-heart svg{width:42px;height:37px}
}

/* ============================================================
   NUESTRA HISTORIA: CON ALMA, SIN LLENARLA DE COLORES
   La seccion deja de ser una caja blanca plana. Todo el
   conjunto —fotos, texto y cita— vive dentro de
   un marco calido: fondo crema / terracota muy suave, doble
   filete de cantera como los marcos coloniales, sombra calida
   y mucho mas aire. El texto gana jerarquia: titulo mas
   grande en terracota oscuro, parrafos mas amplios y con
   mas interlineado, firma separada. Sin patron talavera
   nuevo: el color es solo un fondo tenue y el corazon
   colonial que ya acompana al titulo.
   ============================================================ */
#historia .sec-head{max-width:820px}
#historia .sec-head p{font-size:1.06rem;color:#5d5147}

#historia .story{
  position:relative;
  gap:30px;
  padding:30px;
  border:1px solid rgba(166,78,55,.32);
  background:
    radial-gradient(ellipse at 96% 0%, rgba(210,161,60,.13), transparent 46%),
    radial-gradient(ellipse at 0% 100%, rgba(189,136,126,.14), transparent 52%),
    linear-gradient(148deg, #fdf6e9 0%, #fbeed9 52%, #f7e3cf 100%);
  box-shadow:0 16px 38px rgba(132,61,45,.13), 0 3px 10px rgba(62,43,29,.06);
}
#historia .story::before{
  position:absolute;
  inset:8px;
  border:1px solid rgba(189,136,126,.42);
  content:"";
  pointer-events:none;
}
#historia .story-photos,
#historia .story-card{position:relative;z-index:1}
#historia .story-figure{
  border:1px solid rgba(166,78,55,.26);
  background:#fffaf0;
  box-shadow:0 8px 20px rgba(132,61,45,.12);
}
#historia .story-figure figcaption{
  padding:11px 14px 12px;
  background:#fffaf0;
  color:#5d5147;
}
#historia .story-photos>img{
  border:1px solid rgba(166,78,55,.22);
  box-shadow:0 8px 20px rgba(132,61,45,.10);
}

#historia .story-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:38px 40px;
  border:0;
  background:rgba(255,250,240,.66);
  box-shadow:inset 0 0 0 1px rgba(255,250,240,.7);
}
#historia .story-card h3{
  margin-bottom:6px;
  color:var(--terracotta-dark);
  font-size:clamp(1.55rem,2.6vw,1.95rem);
  line-height:1.22;
  letter-spacing:-.015em;
}
#historia .story-card h3::after{
  display:block;
  width:46px;
  height:3px;
  margin-top:14px;
  background:var(--yellow);
  content:"";
}
#historia .story-card p{
  margin:0 0 16px;
  color:#4e4239;
  font-size:1.02rem;
  line-height:1.82;
}
#historia .story-card p:first-of-type{font-size:1.08rem}
#historia .story-card p b{color:#342b25}
#historia .story-card .story-sign{
  margin:8px 0 0;
  padding-top:16px;
  border-top:1px solid rgba(189,136,126,.45);
  color:var(--terracotta-dark);
  font-size:1.08rem;
  line-height:1.5;
}

/* --- Cita destacada de Carmelita, al final de Historia --- */
.carmelita-quote{
  position:relative;
  max-width:860px;
  margin:26px auto 6px;
  padding:40px 48px 34px;
  border:1px solid rgba(166,78,55,.34);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(210,161,60,.14), transparent 62%),
    linear-gradient(160deg, #fff8ea 0%, #f9e7d2 100%);
  box-shadow:0 14px 32px rgba(132,61,45,.12);
  text-align:center;
}
.carmelita-quote::before{
  position:absolute;
  inset:7px;
  border:1px solid rgba(189,136,126,.44);
  content:"";
  pointer-events:none;
}
.carmelita-quote-mark{
  display:block;
  height:34px;
  color:var(--terracotta);
  font-family:"Bitter",Georgia,serif;
  font-size:3.4rem;
  font-weight:700;
  line-height:.8;
}
.carmelita-quote p{
  margin:6px 0 0;
  color:var(--terracotta-dark);
  font-family:"Bitter",Georgia,serif;
  font-size:clamp(1.42rem,3.2vw,1.95rem);
  font-style:italic;
  font-weight:600;
  line-height:1.42;
  text-wrap:balance;
}
.carmelita-quote cite{
  display:block;
  margin-top:16px;
  color:#5d5147;
  font-family:"Bitter",Georgia,serif;
  font-size:1rem;
  font-style:normal;
  font-weight:700;
  letter-spacing:.04em;
}

@media (max-width:900px){
  #historia .story{padding:22px}
  #historia .story-card{padding:30px 28px}
}
@media (max-width:640px){
  #historia .story{padding:16px;gap:20px}
  #historia .story::before{inset:6px}
  #historia .story-card{padding:26px 20px}
  #historia .story-card p{font-size:1rem;line-height:1.78}
  .carmelita-quote{padding:32px 22px 28px}
}

/* ============================================================
   HABITACIONES: CASITA MINIMALISTA COLONIAL
   Un detalle chiquito junto al titulo "Habitaciones": una
   casita dibujada a mano en terracota, con un rombito de
   talavera azul bajo el techo, en el mismo lenguaje del
   corazon de "Nuestra historia". Discreto, sin robar la
   atencion del titulo ni del contenido.
   ============================================================ */
.habitaciones-mark{
  display:inline-block;
  width:36px;
  height:33px;
  margin-left:8px;
  vertical-align:-3px;
  transform:rotate(-2deg);
  line-height:0;
}
.habitaciones-mark svg{display:block;width:36px;height:33px;overflow:visible}
@media (max-width:560px){
  .habitaciones-mark{width:30px;height:28px;margin-left:6px;vertical-align:-2px}
  .habitaciones-mark svg{width:30px;height:28px}
}

/* ============================================================
   HABITACIONES: MALE EN VERDE COLONIAL Y ETIQUETAS CON ALMA
   1) Male hace lo mismo que Carito, pero sin repetirlo:
      fondo verde colonial propio, con un patron de ARCOS
      de cantera en crema (las arcadas de Guanajuato), nada
      de los rombos azules talavera de Carito. Degradado
      verde con profundidad, un gran arco suave dibujado
      abajo a la derecha y filete inferior calido dorado,
      para que no se vea plano ni vacio. Lleva su linea
      propia, como la de Carito, con lo que el cuarto es:
      el mas amplio, dos camas grandes, para la familia.
   2) Etiqueta de Male, "Ideal para familias": se queda el
      texto, pero ya no es una cajita blanca plana. Es una
      etiqueta hecha a mano: fondo crema calido con un
      resplandor dorado, borde calido cantera / ocre con
      doble filete interior, forma suave e irregular, una
      leve inclinacion y sombra calida, con puntitos
      pintados en las esquinas.
   3) Etiqueta de Carito, "Terracita para dos": ya no es
      una pildora amarilla plana. Es una pieza de talavera
      hecha a mano: fondo crema con rombitos azules
      talavera muy tenues, borde terracota grueso con
      filete interior azul, forma organica irregular,
      leve inclinacion contraria a la de Male y sombra
      calida, con puntitos talavera en las esquinas.
   Paty y Gaby no cambian.
   ============================================================ */
:root{
  --male-arches:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M8 36 L8 21 A12 12 0 0 1 32 21 L32 36' fill='none' stroke='%23fffaf2' stroke-opacity='0.36' stroke-width='1.4'/%3E%3Ccircle cx='20' cy='10.5' r='1.6' fill='%23f6edcf' fill-opacity='0.5'/%3E%3Ccircle cx='20' cy='21' r='2.4' fill='none' stroke='%23f6edcf' stroke-opacity='0.32' stroke-width='1'/%3E%3Ccircle cx='0' cy='40' r='1.5' fill='%23fffaf2' fill-opacity='0.3'/%3E%3Ccircle cx='40' cy='40' r='1.5' fill='%23fffaf2' fill-opacity='0.3'/%3E%3C/svg%3E");
  --talavera-mini:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 2 L16 9 L9 16 L2 9 Z' fill='none' stroke='%2323408f' stroke-opacity='0.20' stroke-width='1.1'/%3E%3Ccircle cx='9' cy='9' r='1' fill='%2323408f' fill-opacity='0.20'/%3E%3C/svg%3E");
}

/* --- 1) Male: fondo verde colonial con arcos, diseno propio --- */
.room-banner.male{
  min-height:148px;
  padding:24px 24px 20px;
  overflow:hidden;
  border-bottom:4px solid #d9b96a;
  background:
    linear-gradient(124deg, rgba(36,58,32,.97) 0%, rgba(60,87,52,.95) 56%, rgba(82,107,75,.93) 100%);
  isolation:isolate;
}
.room-banner.male::before{
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:var(--male-arches);
  background-size:40px 40px;
  background-repeat:repeat;
  opacity:.5;
  content:"";
  pointer-events:none;
}
.room-banner.male::after{
  position:absolute;
  right:-24px;
  bottom:-104px;
  z-index:-1;
  display:block;
  width:148px;
  height:196px;
  border:2px solid rgba(246,237,207,.34);
  border-bottom:0;
  border-radius:999px 999px 0 0;
  background:radial-gradient(ellipse at 50% 26%, rgba(210,161,60,.32) 0%, rgba(210,161,60,0) 66%);
  content:"";
  pointer-events:none;
}
.room-banner.male h3{
  position:relative;
  font-size:2rem;
  letter-spacing:-.01em;
  text-shadow:0 1px 3px rgba(16,30,14,.4);
}
.room-banner.male p{position:relative}
.room-banner.male .male-story{
  max-width:36ch;
  margin-top:8px;
  color:rgba(255,250,242,.92);
  font-size:.9rem;
  line-height:1.5;
}

/* --- 2) Male: etiqueta hecha a mano, borde calido --- */
.room-banner.male .badge{
  z-index:1;
  padding:7px 15px 8px;
  border:1.8px solid #a8742c;
  border-radius:16px 7px 17px 8px / 8px 17px 7px 16px;
  background:
    radial-gradient(ellipse at 16% 0%, rgba(210,161,60,.28), transparent 58%),
    linear-gradient(155deg, #fff8e6 0%, #fbeed0 100%);
  color:#43301c;
  box-shadow:
    inset 0 0 0 2px #fffaf0,
    inset 0 0 0 3.5px rgba(189,136,126,.52),
    0 4px 11px rgba(16,30,14,.3);
  transform:rotate(1.1deg);
}
.room-banner.male .badge::before,
.room-banner.male .badge::after{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--terracotta);
  opacity:.62;
  content:"";
  pointer-events:none;
}
.room-banner.male .badge::before{top:5px;left:7px}
.room-banner.male .badge::after{right:7px;bottom:5px}

/* --- 3) Carito: etiqueta talavera / terracota hecha a mano --- */
.room-banner.caro .badge{
  z-index:1;
  padding:7px 15px 8px;
  border:2px solid var(--terracotta-dark);
  border-radius:15px 6px 16px 7px / 7px 16px 6px 15px;
  background-color:#fff6e3;
  background-image:var(--talavera-mini);
  background-size:18px 18px;
  background-repeat:repeat;
  color:var(--terracotta-dark);
  box-shadow:
    inset 0 0 0 2px #fffaf0,
    inset 0 0 0 3.5px rgba(35,64,143,.42),
    0 4px 11px rgba(20,26,48,.26);
  transform:rotate(-1.2deg);
}
.room-banner.caro .badge::before,
.room-banner.caro .badge::after{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--talavera-blue);
  opacity:.6;
  content:"";
  pointer-events:none;
}
.room-banner.caro .badge::before{top:5px;left:7px}
.room-banner.caro .badge::after{right:7px;bottom:5px}

@media (max-width:560px){
  .room-banner.male{min-height:138px;padding:20px 18px 17px}
  .room-banner.male .male-story{max-width:31ch}
  .room-banner.male .badge,
  .room-banner.caro .badge{padding:6px 12px 7px}
}

/* ============================================================
   HABITACIONES: PATY EN OCRE / DORADO, GABY EN AZUL GRISACEO
   Y TARJETAS ORGANICAS, HECHAS A MANO
   1) Paty hace lo mismo que Carito y Male, pero sin repetir
      a ninguno: su color es el ocre / dorado de la casa y su
      patron propio son SOLES chiquitos con rayos, como los
      de las fachadas doradas de Guanajuato al atardecer.
      Nada de los rombos azules de Carito ni de los arcos
      verdes de Male. Degradado ocre con profundidad, un sol
      grande y suave abajo a la derecha y filete inferior
      crema calido. Lleva su linea propia, la de su terraza
      para compartir.
   2) Su etiqueta ya no dice "Con terraza": dice "Terracita
      para compartir", hecha a mano como las demas: fondo
      crema calido con un resplandor dorado, borde ocre
      oscuro con filete interior cantera, forma organica
      irregular, una inclinacion propia y puntitos pintados.
   3) Gaby tambien tiene su diseno propio, con la misma
      alma: azul grisaceo sereno, como la piedra y el agua
      tranquila de la Presa, con un patron de ONDAS suaves
      que tampoco repite a Carito, Male ni Paty. Un resplandor
      redondo y suave arriba a la derecha y filete inferior
      en azul grisaceo claro. Su etiqueta
      tambien es hecha a mano: crema calida, borde azul
      grisaceo con filete interior, forma organica, leve
      inclinacion y puntitos pintados. Gaby sigue sin poder
      reservarse como las demas, a $1,200 MXN por noche y
      con boton de reservar.
   4) Las tarjetas de los cuartos dejan de ser rectangulos
      cuadrados: cada una lleva esquinas mucho mas redondeadas
      y desiguales, distintas entre tarjeta y tarjeta, como
      piezas de barro hechas a mano; borde calido tenue en
      terracota / cantera y sombra calida y suave. Solo cambia
      la FORMA de la tarjeta: ningun patron de un cuarto se
      mete en la tarjeta de otro, los fondos del cuerpo
      siguen limpios y solidos.
   ============================================================ */
:root{
  --paty-suns:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cg fill='none' stroke='%23fffaf2' stroke-opacity='0.34' stroke-width='1.3' stroke-linecap='round'%3E%3Ccircle cx='23' cy='23' r='5.2'/%3E%3Cpath d='M23 12.5 L23 16 M23 30 L23 33.5 M12.5 23 L16 23 M30 23 L33.5 23 M15.6 15.6 L18.1 18.1 M27.9 27.9 L30.4 30.4 M30.4 15.6 L27.9 18.1 M18.1 27.9 L15.6 30.4'/%3E%3C/g%3E%3Ccircle cx='23' cy='23' r='1.6' fill='%23f6edcf' fill-opacity='0.5'/%3E%3Ccircle cx='0' cy='0' r='1.5' fill='%23fffaf2' fill-opacity='0.3'/%3E%3Ccircle cx='46' cy='46' r='1.5' fill='%23fffaf2' fill-opacity='0.3'/%3E%3C/svg%3E");
  --gaby-waves:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='22' viewBox='0 0 44 22'%3E%3Cpath d='M-2 11 Q4.5 4.5 11 11 T24 11 T37 11 T50 11' fill='none' stroke='%23fffaf2' stroke-opacity='0.32' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='11' cy='18.5' r='1.3' fill='%23eef2f0' fill-opacity='0.4'/%3E%3Ccircle cx='33' cy='3.5' r='1.3' fill='%23eef2f0' fill-opacity='0.4'/%3E%3C/svg%3E");
}

/* --- 1) Paty: fondo ocre / dorado con soles, diseno propio --- */
.room-banner.paty{
  min-height:148px;
  padding:24px 24px 20px;
  overflow:hidden;
  border-bottom:4px solid #f0d48a;
  background:
    linear-gradient(122deg, rgba(116,80,17,.97) 0%, rgba(169,120,40,.95) 56%, rgba(198,152,58,.93) 100%);
  isolation:isolate;
}
.room-banner.paty::before{
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:var(--paty-suns);
  background-size:46px 46px;
  background-repeat:repeat;
  opacity:.5;
  content:"";
  pointer-events:none;
}
.room-banner.paty::after{
  position:absolute;
  right:-34px;
  bottom:-58px;
  z-index:-1;
  display:block;
  width:158px;
  height:158px;
  border:2px solid rgba(255,246,222,.4);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,238,190,.5) 0%, rgba(255,238,190,.14) 52%, rgba(255,238,190,0) 70%);
  content:"";
  pointer-events:none;
}
.room-banner.paty h3{
  position:relative;
  font-size:2rem;
  letter-spacing:-.01em;
  text-shadow:0 1px 3px rgba(62,42,4,.42);
}
.room-banner.paty p{position:relative}
.room-banner.paty .paty-story{
  max-width:36ch;
  margin-top:8px;
  color:rgba(255,250,242,.92);
  font-size:.9rem;
  line-height:1.5;
}

/* --- 2) Paty: etiqueta "Terracita para compartir", hecha a mano --- */
.room-banner.paty .badge{
  z-index:1;
  padding:7px 15px 8px;
  border:1.8px solid #7c5410;
  border-radius:8px 17px 7px 16px / 16px 8px 17px 7px;
  background:
    radial-gradient(ellipse at 82% 0%, rgba(210,161,60,.32), transparent 58%),
    linear-gradient(155deg, #fff8e6 0%, #f9ebc8 100%);
  color:#4a3410;
  box-shadow:
    inset 0 0 0 2px #fffaf0,
    inset 0 0 0 3.5px rgba(189,136,126,.5),
    0 4px 11px rgba(62,42,4,.32);
  transform:rotate(.9deg);
}
.room-banner.paty .badge::before,
.room-banner.paty .badge::after{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#a97828;
  opacity:.65;
  content:"";
  pointer-events:none;
}
.room-banner.paty .badge::before{top:5px;left:7px}
.room-banner.paty .badge::after{right:7px;bottom:5px}

/* --- 3) Gaby: fondo azul grisaceo con ondas, diseno propio --- */
.room-banner.gaby{
  min-height:148px;
  padding:24px 24px 20px;
  overflow:hidden;
  border-bottom:4px solid #c3d0d8;
  background:
    linear-gradient(124deg, rgba(52,68,82,.97) 0%, rgba(75,95,110,.95) 56%, rgba(93,114,130,.93) 100%);
  isolation:isolate;
}
.room-banner.gaby::before{
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:var(--gaby-waves);
  background-size:44px 22px;
  background-repeat:repeat;
  opacity:.5;
  content:"";
  pointer-events:none;
}
.room-banner.gaby::after{
  position:absolute;
  top:-52px;
  right:-26px;
  z-index:-1;
  display:block;
  width:150px;
  height:150px;
  border:2px solid rgba(238,242,240,.32);
  border-radius:50%;
  background:radial-gradient(circle, rgba(238,242,240,.3) 0%, rgba(238,242,240,0) 66%);
  content:"";
  pointer-events:none;
}
.room-banner.gaby h3{
  position:relative;
  font-size:2rem;
  letter-spacing:-.01em;
  text-shadow:0 1px 3px rgba(18,28,36,.42);
}
.room-banner.gaby p{position:relative}
.room-banner.gaby .gaby-story{
  max-width:36ch;
  margin-top:8px;
  color:rgba(255,250,242,.92);
  font-size:.9rem;
  line-height:1.5;
}

/* --- Gaby: etiqueta "Tranquila para tres", hecha a mano --- */
.room-banner.gaby .badge{
  z-index:1;
  padding:7px 15px 8px;
  border:1.8px solid #43586a;
  border-radius:17px 8px 16px 7px / 7px 16px 8px 17px;
  background:
    radial-gradient(ellipse at 14% 0%, rgba(147,169,184,.3), transparent 58%),
    linear-gradient(155deg, #fdfaf1 0%, #eceee9 100%);
  color:#33424f;
  box-shadow:
    inset 0 0 0 2px #fffaf0,
    inset 0 0 0 3.5px rgba(93,114,130,.45),
    0 4px 11px rgba(18,28,36,.3);
  transform:rotate(-.9deg);
}
.room-banner.gaby .badge::before,
.room-banner.gaby .badge::after{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#5d7282;
  opacity:.62;
  content:"";
  pointer-events:none;
}
.room-banner.gaby .badge::before{top:5px;left:7px}
.room-banner.gaby .badge::after{right:7px;bottom:5px}

@media (max-width:560px){
  .room-banner.paty,
  .room-banner.gaby{min-height:138px;padding:20px 18px 17px}
  .room-banner.paty .paty-story,
  .room-banner.gaby .gaby-story{max-width:31ch}
  .room-banner.paty .badge,
  .room-banner.gaby .badge{padding:6px 12px 7px}
}

/* --- 4) Tarjetas organicas: forma suave, sombra y borde calidos --- */
.room{
  border:1.5px solid rgba(166,78,55,.3);
  background:var(--surface);
  box-shadow:
    0 18px 38px rgba(132,61,45,.14),
    0 4px 10px rgba(62,43,29,.07);
}
/* Cada tarjeta con sus esquinas desiguales, como hecha a mano:
   ninguna comparte exactamente la misma forma. */
.rooms .room:nth-child(1){border-radius:34px 22px 36px 24px / 26px 34px 24px 32px}
.rooms .room:nth-child(2){border-radius:23px 35px 25px 37px / 33px 25px 34px 26px}
.rooms .room:nth-child(3){border-radius:36px 24px 33px 22px / 25px 32px 26px 35px}
.rooms .room:nth-child(4){border-radius:24px 33px 22px 35px / 34px 26px 32px 25px}
/* La caja de precios y el aviso de Gaby acompanan la forma
   suave, con sus propias esquinas redondeadas y calidas. */
.price-box{
  border:1px solid rgba(189,136,126,.4);
  border-radius:18px 11px 19px 12px / 12px 19px 11px 18px;
}
.unavailable-box{
  border:1px solid rgba(166,78,55,.34);
  border-radius:16px 10px 17px 11px / 11px 17px 10px 16px;
  box-shadow:0 6px 16px rgba(132,61,45,.1);
}
/* Gaby conserva su aire sereno: fondo tenue y borde en su
   azul grisaceo, con la misma forma organica de las demas. */
.room.unavailable{
  border:1.5px solid rgba(93,114,130,.42);
  border-style:solid;
  background:#faf8f2;
  box-shadow:
    0 18px 38px rgba(52,68,82,.13),
    0 4px 10px rgba(62,43,29,.06);
}

/* ============================================================
   HERO: "EL HOGAR DE CARMELITA" CON ALMA
   El titulo deja de ser un encabezado generico de plantilla
   y se compone como un letrero pintado a mano de la casa:
   - "El Hogar de" va en serif oscuro calido, mas contenido,
     como la primera linea de un rotulo colonial.
   - "Carmelita" va en terracota, claramente mas grande y
     con peso, con una sombra calida muy suave que lo despega
     del fondo crema sin endurecerlo, como pincel sobre pared.
   - Bajo "Carmelita", una floritura dibujada a mano: un
     trazo ondulado de hierro forjado en terracota con un
     filete dorado debajo, rizos en los extremos y un rombito
     de talavera azul al centro, en el mismo lenguaje del
     corazon de Historia, la casita de Habitaciones y los
     azulejos de calificacion. Sin degradados de texto ni
     efectos que tapen la lectura.
   En movil la composicion se mantiene en dos lineas, con
   tamanos que conservan la jerarquia sin desbordar.
   ============================================================ */
.hero h1{
  max-width:660px;
  font-size:clamp(2.5rem,5.2vw,4.1rem);
  line-height:1.02;
  letter-spacing:-.02em;
}
.hero h1 .hero-name-pre{
  display:block;
  margin-bottom:.1em;
  color:#3b2a20;
  font-size:.53em;
  font-weight:600;
  letter-spacing:.012em;
  line-height:1.12;
  text-shadow:0 1px 0 rgba(255,250,240,.65);
}
.hero h1 .hero-name-main{
  position:relative;
  display:inline-block;
  padding-bottom:.3em;
  color:var(--terracotta);
  font-size:1.3em;
  font-weight:700;
  letter-spacing:-.032em;
  line-height:.98;
  text-shadow:
    0 2px 0 rgba(210,161,60,.22),
    0 10px 24px rgba(166,78,55,.16);
}
.hero-name-flourish{
  position:absolute;
  left:1%;
  bottom:0;
  display:block;
  width:98%;
  height:.23em;
  min-height:11px;
  line-height:0;
  pointer-events:none;
}
.hero-name-flourish svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  filter:drop-shadow(0 1px 1px rgba(132,61,45,.18));
}
@media (max-width:560px){
  .hero h1{
    font-size:clamp(2.3rem,11vw,3.05rem);
    line-height:1.02;
  }
  .hero h1 .hero-name-pre{
    font-size:.54em;
    margin-bottom:.12em;
  }
  .hero h1 .hero-name-main{
    font-size:1.26em;
    padding-bottom:.34em;
    letter-spacing:-.028em;
  }
  .hero-name-flourish{height:.24em;min-height:10px}
}

/* ============================================================
   AJUSTES SEGUN CAPTURAS (4 CAMBIOS)
   1) Fila de datos del hero: los separadores rectos y frios
      se cambian por un filete terracota trazado a mano, con
      un rombito de talavera azul al centro de cada division
      vertical y una linea ondulada hecha a mano arriba de
      la fila. Tenue y calido, sin opacar los datos.
   2) Historia: el texto "Una casa con las puertas abiertas"
      empieza arriba, alineado con la parte superior de las
      fotos de la izquierda, sin el hueco blanco que dejaba
      el centrado vertical.
   3) Habitaciones: fuera los circulos grandes como de luz
      de los encabezados (el dorado de Carito, el arco /
      circulo de Male y los circulos de Paty y Gaby). Cada
      cuarto conserva su fondo con su patron propio.
   4) Cita de Carmelita: nueva paleta suave de la pagina
      (crema, cantera rosa, terracota y azul talavera) y un
      marco de talavera hecho a mano: doble filete, rombo
      talavera rompiendo el borde superior y una cenefa de
      rombitos bajo la firma. Ya no se ve plana.
   ============================================================ */
:root{
  --fact-divider:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='64' viewBox='0 0 12 64'%3E%3Cpath d='M6 3 C4.6 16,7.4 30,6 61' fill='none' stroke='%23a64e37' stroke-opacity='0.55' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M6 25 L10 32 L6 39 L2 32 Z' fill='%23fffaf0' stroke='%2323408f' stroke-width='1.1'/%3E%3Ccircle cx='6' cy='32' r='1.2' fill='%23a64e37'/%3E%3C/svg%3E");
  --fact-top-line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='8' viewBox='0 0 84 8'%3E%3Cpath d='M2 4.2 C14 1.6,28 6.6,42 4.2 C56 1.8,70 6.4,82 4' fill='none' stroke='%23bd887e' stroke-opacity='0.75' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='42' cy='4.2' r='1.4' fill='%23a64e37' fill-opacity='0.6'/%3E%3C/svg%3E");
}

/* --- 1) Datos del hero: separadores con alma --- */
.facts{
  border-top:0;
  padding-top:6px;
}
.facts::before{
  position:absolute;
  top:0;
  right:2px;
  left:2px;
  height:8px;
  background-image:var(--fact-top-line);
  background-repeat:repeat-x;
  background-size:84px 8px;
  background-position:center top;
  content:"";
  pointer-events:none;
}
.fact{position:relative}
.fact + .fact{
  padding-left:20px;
  border-left:0;
}
.fact + .fact::before{
  position:absolute;
  top:12px;
  bottom:2px;
  left:-6px;
  width:12px;
  background-image:var(--fact-divider);
  background-repeat:no-repeat;
  background-size:12px 64px;
  background-position:center top;
  content:"";
  pointer-events:none;
}
@media (max-width:900px){
  .fact:nth-child(3){padding-left:0}
  .fact:nth-child(3)::before{display:none}
  .fact:nth-child(n + 3){
    padding-top:14px;
    border-top:0;
  }
  .fact:nth-child(n + 3)::after{
    position:absolute;
    top:-2px;
    right:12px;
    left:2px;
    height:8px;
    background-image:var(--fact-top-line);
    background-repeat:repeat-x;
    background-size:84px 8px;
    background-position:left top;
    content:"";
    pointer-events:none;
  }
}
@media (max-width:560px){
  .fact + .fact{padding-left:14px}
  .fact:nth-child(3){padding-left:0}
}

/* --- 2) Historia: el texto empieza arriba, como las fotos --- */
#historia .story-card{
  justify-content:flex-start;
  padding:26px 40px 38px;
}
@media (max-width:900px){
  #historia .story-card{padding:22px 28px 30px}
}
@media (max-width:640px){
  #historia .story-card{padding:20px 20px 26px}
}

/* --- 3) Habitaciones: sin circulos grandes de luz --- */
.room-banner.caro::after,
.room-banner.male::after,
.room-banner.paty::after,
.room-banner.gaby::after{
  display:none;
  content:none;
}

/* --- 4) Cita de Carmelita: paleta suave y marco talavera --- */
.carmelita-quote{
  padding:44px 48px 36px;
  border:2px solid rgba(166,78,55,.48);
  border-radius:30px 20px 32px 22px / 22px 30px 20px 32px;
  background:
    radial-gradient(ellipse at 8% 0%, rgba(189,136,126,.20), transparent 52%),
    radial-gradient(ellipse at 96% 100%, rgba(35,64,143,.08), transparent 50%),
    radial-gradient(ellipse at 50% 0%, rgba(210,161,60,.12), transparent 60%),
    linear-gradient(165deg, #fffaf0 0%, #fdf1df 56%, #f7e4d2 100%);
  box-shadow:
    inset 0 0 0 4px #fffaf0,
    inset 0 0 0 5.5px rgba(35,64,143,.26),
    0 18px 38px rgba(132,61,45,.14),
    0 4px 10px rgba(62,43,29,.06);
}
.carmelita-quote::before{
  inset:10px;
  border:1.5px solid rgba(189,136,126,.55);
  border-radius:24px 15px 26px 16px / 16px 24px 15px 26px;
  box-shadow:
    inset 0 0 0 3px rgba(255,250,240,.65),
    inset 0 0 0 4.5px rgba(210,161,60,.32);
}
/* Rombo de talavera rompiendo el borde superior del marco,
   como una pieza puesta a mano sobre el filete. */
.carmelita-quote::after{
  position:absolute;
  top:-13px;
  left:50%;
  width:24px;
  height:24px;
  border:2px solid var(--talavera-blue);
  border-radius:6px;
  background:#fffaf0;
  box-shadow:
    inset 0 0 0 3px #fffaf0,
    inset 0 0 0 5.5px rgba(166,78,55,.55),
    0 4px 10px rgba(132,61,45,.22);
  content:"";
  transform:translateX(-50%) rotate(45deg);
  pointer-events:none;
}
.carmelita-quote-mark{
  color:var(--talavera-blue);
  opacity:.85;
}
.carmelita-quote p{
  color:#503527;
}
.carmelita-quote cite{
  margin-top:18px;
  color:var(--terracotta-dark);
}
/* Cenefa de rombitos talavera bajo la firma */
.carmelita-quote cite::after{
  display:block;
  width:126px;
  height:16px;
  margin:12px auto 0;
  background-image:var(--talavera-mini);
  background-repeat:repeat-x;
  background-size:18px 18px;
  background-position:center;
  opacity:.75;
  content:"";
}
@media (max-width:640px){
  .carmelita-quote{padding:36px 22px 30px}
}

/* ============================================================
   REVERSIONES PEDIDAS
   1) Etiqueta de Carito, "Terracita para dos": vuelve el
      fondo amarillo solido de la pildora original. Sin el
      patron talavera crema que llevaba; solo cambia el
      fondo, el texto y el resto de la etiqueta quedan.
   2) Tarjetas de los cuartos y caja de precios: vuelven a
      ser rectangulos limpios, con esquinas normales (90
      grados), sin las esquinas organicas redondeadas y
      desiguales. Los encabezados de cada cuarto conservan
      su patron y su color propios.
   ============================================================ */
.room-banner.caro .badge{
  background-color:#fff8e6;
  background-image:none;
  color:#574216;
}
.rooms .room:nth-child(1),
.rooms .room:nth-child(2),
.rooms .room:nth-child(3),
.rooms .room:nth-child(4),
.room,
.room.unavailable{
  border-radius:0;
}
.price-box,
.unavailable-box{
  border-radius:0;
}

/* ============================================================
   TARJETAS DE LOS CUARTOS: PROFUNDIDAD 3D
   Cada tarjeta se despega del fondo con una sombra calida
   en capas (una suave y amplia, otra mas cercana y una
   linea de contacto corta) y un borde calido mas marcado,
   de 2px en terracota oscuro. Asi se ven con profundidad,
   como piezas puestas sobre la pagina, sin tocar los
   encabezados: ningun patron de un cuarto se mezcla con
   otro, los fondos de cada banner quedan intactos.
   Gaby conserva su borde en su azul grisaceo, solo mas
   marcado, y comparte la misma sombra calida.
   Las tarjetas siguen siendo rectangulos limpios.
   ============================================================ */
.room{
  border:2px solid rgba(132,61,45,.52);
  box-shadow:
    0 24px 44px rgba(132,61,45,.22),
    0 10px 20px rgba(166,78,55,.18),
    0 3px 6px rgba(62,43,29,.16);
}
.room.unavailable{
  border:2px solid rgba(70,88,102,.55);
  box-shadow:
    0 24px 44px rgba(132,61,45,.20),
    0 10px 20px rgba(166,78,55,.16),
    0 3px 6px rgba(62,43,29,.15);
}

/* ============================================================
   HERO: BOTONES CENTRADOS
   El grupo de los tres botones del hero ("Ver las
   habitaciones", "Galería de fotos" y "Contáctenos") queda
   centrado horizontalmente en el hero: en escritorio, una
   sola fila centrada; en móvil, centrados en columna.
   Solo cambia la alineación del grupo: el estilo de cada
   botón (patrón talavera, color terracota, texto y forma)
   queda exactamente igual.
   ============================================================ */
.hero-actions{
  justify-content:center;
  text-align:center;
}
@media (max-width:560px){
  .hero-actions{
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .hero-actions .btn{
    flex:0 1 auto;
    width:min(100%,340px);
    margin-inline:auto;
  }
}

/* ============================================================
   HISTORIA: FONDO BLANCO HUESO TALAVERA
   La tarjeta / marco de "Nuestra historia" —donde van las
   fotos y el texto "El Hogar de Carmelita es una casa
   familiar..."— deja el fondo beige / melocoton (el degradado
   crema a melocoton) y pasa a blanco hueso talavera, igual
   que el fondo general de la pagina: base hueso limpia
   (var(--paper)) con el patron talavera muy suave de la
   pagina por encima. Se ve limpio y hueso, sin competir
   con las fotos ni con el texto.
   No cambia nada mas: ni el texto, ni las fotos, ni la
   cita de Carmelita, ni el marco (borde terracota, doble
   filete cantera y sombra calida se conservan tal cual).
   La tarjeta interior del texto acompana con un hueso
   semitransparente, para que el patron suave se insinue
   tambien detras del texto sin perder legibilidad.
   ============================================================ */
#historia .story{
  background-color:var(--paper);
  background-image:var(--talavera-bg),radial-gradient(ellipse at 12% 18%,rgba(210,161,60,.045),transparent 34rem);
  background-size:84px 84px,auto;
  background-repeat:repeat,no-repeat;
}
#historia .story-card{
  background:rgba(255,250,240,.58);
}

/* ============================================================
   OPINIONES: WIDGET OFICIAL DE TRIPADVISOR "RECOMENDADO"
   El widget (TA_rated) va dentro de la tarjeta de la derecha
   de Opiniones, debajo del texto "33 opiniones..." y encima
   del botón "Ver opiniones en TripAdvisor". Queda centrado
   horizontalmente en la tarjeta, en escritorio y en móvil,
   sin romper el diseño: la tarjeta lo contiene y el botón
   sigue debajo, intacto.
   ============================================================ */
.ta-widget{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  margin:2px auto 14px;
  max-width:100%;
  overflow:hidden;
}
.ta-widget .TA_rated{
  margin:0 auto;
  text-align:center;
}
.ta-widget .TA_rated ul{
  display:flex;
  justify-content:center;
  margin:0 auto;
  padding:0;
  list-style:none;
}
.ta-widget .TA_rated li{
  margin:0 auto;
  text-align:center;
}
.ta-widget .TA_rated img,
.ta-widget .TA_rated a{
  margin-inline:auto;
}
.ta-widget .TA_rated iframe,
.ta-widget .TA_rated > div{
  margin-inline:auto;
}

/* --- Widget "Fragmentos de opiniones" (TA_selfserveprop),
   junto al "Recomendado", en la misma tarjeta --- */
.ta-widget-fragments{
  margin-top:0;
}
.ta-widget .TA_selfserveprop{
  margin:0 auto;
  text-align:center;
  max-width:100%;
}
.ta-widget .TA_selfserveprop ul{
  display:flex;
  justify-content:center;
  margin:0 auto;
  padding:0;
  list-style:none;
}
.ta-widget .TA_selfserveprop li{
  margin:0 auto;
  text-align:center;
}
.ta-widget .TA_selfserveprop img,
.ta-widget .TA_selfserveprop a{
  margin-inline:auto;
}
.ta-widget .TA_selfserveprop iframe,
.ta-widget .TA_selfserveprop > div{
  margin-inline:auto;
  max-width:100%;
}

/* ============================================================
   OPINIONES LIMPIO, TODO EN UNO (una sola integración)
   Los dos widgets oficiales de TripAdvisor —Recomendado y
   Fragmentos— viven juntos y ordenados dentro de UN solo
   bloque en la tarjeta de TripAdvisor, no pegados uno tras
   otro sobre la tarjeta:
   - Las tarjetas de Opiniones son rectangulares, con borde
     cálido y sombra cálida suave, como las de Habitaciones,
     sobre el fondo blanco hueso talavera de la página.
   - Cada tarjeta mide solo lo que ocupa su contenido
     (align-items:start): la de Booking no se estira vacía
     junto a la de TripAdvisor, más alta por los widgets.
   - El bloque de widgets tiene su propia superficie blanco
     hueso talavera (la misma de la página y de Historia),
     con filete en cantera y aire generoso: primero el
     "Recomendado", centrado; debajo, separado por un filete
     punteado cantera rosa, el de "Fragmentos", centrado.
   - Sin textos ni botones duplicados: un solo título, un
     solo texto (4.8 de 5 · 33 opiniones) y un solo botón,
     debajo del bloque. Los azulejos del hero no se tocan.
   ============================================================ */
.review-links{align-items:start}
.review-link{
  border:1.5px solid rgba(132,61,45,.38);
  border-radius:0;
  background:var(--surface);
  box-shadow:
    0 16px 32px rgba(132,61,45,.13),
    0 4px 10px rgba(62,43,29,.07);
}
.ta-widgets{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  margin:4px 0 16px;
  padding:20px 16px 22px;
  border:1px solid var(--line);
  background-color:var(--paper);
  background-image:var(--talavera-bg);
  background-size:84px 84px;
  background-repeat:repeat;
}
.ta-widgets .ta-widget{
  margin:0 auto;
  width:100%;
}
.ta-widgets .ta-widget-fragments{
  padding-top:18px;
  border-top:1px dashed rgba(189,136,126,.6);
}
@media (max-width:560px){
  .ta-widgets{padding:16px 10px 18px;gap:14px}
  .ta-widgets .ta-widget-fragments{padding-top:14px}
}

/* ============================================================
   OPINIONES: TRIPADVISOR COMO UNA SOLA TARJETA DE LA CASA
   Solo se estiliza el CONTENEDOR que envuelve a los widgets
   oficiales (el codigo, el script, el logo, la atribucion y
   los enlaces de TripAdvisor quedan intactos, sin tocar).
   Lo que cambia es la casa que los recibe:
   - Tarjeta en blanco hueso / crema, como el resto de la
     pagina, con borde calido cantera / terracota suave y
     sombra calida: ningun borde verde la define por fuera.
   - Titulo, texto y boton de la tarjeta, centrados en el
     mismo eje que los widgets, con la tipografia de la
     pagina (Bitter para el titulo, la de texto para el
     resto), para que todo se lea como un solo bloque.
   - Recomendado y Fragmentos viven dentro de UNA sola
     superficie continua: fondo crema uniforme (sin el
     patron talavera detras de ellos, que los hacia ver
     pegados), doble filete interior cantera, mucho aire
     arriba, abajo y a los lados, y entre los dos widgets
     solo una linea fina cantera con un rombito talavera
     al centro, en vez de dos recortes separados.
   - Los widgets quedan centrados, acotados al ancho del
     bloque y con margen para respirar dentro del marco.
   ============================================================ */
.review-link-ta{
  padding:26px 26px 28px;
  border:1.5px solid rgba(166,78,55,.42);
  background:#fffaf0;
  box-shadow:
    0 16px 32px rgba(132,61,45,.13),
    0 4px 10px rgba(62,43,29,.07);
  text-align:center;
}
.review-link-ta h3{
  color:var(--terracotta-dark);
  font-family:"Bitter",Georgia,serif;
}
.review-link-ta p{
  max-width:36ch;
  margin-right:auto;
  margin-left:auto;
  font-family:"Atkinson Hyperlegible","Trebuchet MS",sans-serif;
}
.review-link-ta .btn{
  margin-right:auto;
  margin-left:auto;
}
.ta-widgets{
  gap:0;
  margin:18px 0 20px;
  padding:30px 22px 28px;
  border:1px solid rgba(189,136,126,.62);
  background:#fffdf6;
  background-image:linear-gradient(168deg,#fffdf6 0%,#fdf3e1 100%);
  background-size:auto;
  background-repeat:no-repeat;
  box-shadow:
    inset 0 0 0 4px #fffaf0,
    inset 0 0 0 5px rgba(189,136,126,.38),
    0 10px 22px rgba(132,61,45,.10);
  font-family:"Atkinson Hyperlegible","Trebuchet MS",sans-serif;
  color:var(--ink);
  text-align:center;
}
.ta-widgets .ta-widget{
  display:flex;
  width:100%;
  max-width:100%;
  margin:0 auto;
  padding:2px 6px;
  align-items:center;
  justify-content:center;
  background:transparent;
  overflow:visible;
}
.ta-widgets .ta-widget-fragments{
  position:relative;
  margin-top:26px;
  padding-top:28px;
  border-top:1px solid rgba(189,136,126,.5);
}
.ta-widgets .ta-widget-fragments::before{
  position:absolute;
  top:-6px;
  left:50%;
  width:9px;
  height:9px;
  border:1.5px solid var(--talavera-blue);
  background:#fffaf0;
  content:"";
  transform:translateX(-50%) rotate(45deg);
  pointer-events:none;
}
.ta-widgets .TA_rated,
.ta-widgets .TA_selfserveprop{
  max-width:100%;
}
.ta-widgets img{
  max-width:100%;
  height:auto;
}
@media (max-width:560px){
  .review-link-ta{padding:22px 16px 24px}
  .ta-widgets{padding:24px 12px 22px;margin:14px 0 16px}
  .ta-widgets .ta-widget{padding:2px 2px}
  .ta-widgets .ta-widget-fragments{margin-top:22px;padding-top:24px}
}

/* ============================================================
   FRAGMENTOS DE TRIPADVISOR: MANITA DE GATO AL INTERIOR
   El parámetro del script ya va en border=false, así que
   TripAdvisor ya no pinta su borde verde. Lo demás se hace
   desde el contenedor: el interior que genera TripAdvisor
   (clases widSSP* dentro de #TA_selfserveprop515) se recibe
   en una superficie crema / blanco hueso continua con el
   bloque, sin fondos blancos de recorte ni bordes verdes,
   con la tipografía de la página y el texto en café cálido.
   Solo se suavizan fondo, borde, fuente, color, alineación
   y aire: NO se cambia ningún texto, NO se oculta el logo,
   la atribución ni los enlaces "Lee opiniones" /
   "Escribe una opinión" (solo toman el color terracota de
   la casa, como cualquier enlace de la página). El widget
   "Recomendado" (TA_rated) no se toca en esta sección.
   Nota: parte del interior lo pinta TripAdvisor con estilos
   propios / en línea; estos selectores usan la especificidad
   del contenedor y, donde hace falta, !important solo sobre
   fondo, borde, fuente y color — nunca sobre contenido.
   ============================================================ */
.ta-widgets .ta-widget-fragments{
  padding:30px 18px 10px;
}
.ta-widgets .ta-widget-fragments .TA_selfserveprop{
  width:100%;
  max-width:560px;
  margin:0 auto;
  padding:8px 12px 6px;
  background:transparent;
  color:var(--ink);
  font-family:"Atkinson Hyperlegible","Trebuchet MS",sans-serif;
  font-size:1.06rem;
  text-align:center;
}
/* Superficie interior: fuera el blanco / verde de recorte,
   dentro el crema hueso del bloque, sin borde propio. */
.ta-widgets .ta-widget-fragments .TA_selfserveprop > div,
.ta-widgets .ta-widget-fragments .widSSPData,
.ta-widgets .ta-widget-fragments .widSSPBranding,
.ta-widgets .ta-widget-fragments .widSSPContents,
.ta-widgets .ta-widget-fragments .widSSPTitle,
.ta-widgets .ta-widget-fragments .widSSPBody,
.ta-widgets .ta-widget-fragments .widSSPLegal{
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  border-color:transparent !important;
  box-shadow:none !important;
  color:var(--ink) !important;
  font-family:"Atkinson Hyperlegible","Trebuchet MS",sans-serif !important;
  text-align:center !important;
}
.ta-widgets .ta-widget-fragments .widSSPData{
  width:auto !important;
  max-width:100% !important;
  margin:0 auto !important;
  padding:4px 2px 0 !important;
  line-height:1.55 !important;
}
/* Título del negocio dentro del widget: serif de la casa,
   en café / terracota cálido, centrado y con aire. */
.ta-widgets .ta-widget-fragments .widSSPTitle,
.ta-widgets .ta-widget-fragments .widSSPTitle *{
  font-family:"Bitter",Georgia,serif !important;
}
.ta-widgets .ta-widget-fragments .widSSPTitle a,
.ta-widgets .ta-widget-fragments .widSSPContents a{
  color:var(--terracotta-dark) !important;
}
/* Cuerpo: clasificación y títulos de opiniones recientes.
   Mismo texto de TripAdvisor, solo más legible y cálido:
   café cálido, interlineado amplio y centrado. */
.ta-widgets .ta-widget-fragments .widSSPContents,
.ta-widgets .ta-widget-fragments .widSSPContents *,
.ta-widgets .ta-widget-fragments .widSSPBody,
.ta-widgets .ta-widget-fragments .widSSPBody *{
  color:#4e4239 !important;
  font-family:"Atkinson Hyperlegible","Trebuchet MS",sans-serif !important;
  font-size:1.02rem !important;
  line-height:1.65 !important;
  text-align:center !important;
}
.ta-widgets .ta-widget-fragments .widSSPContents ul,
.ta-widgets .ta-widget-fragments .widSSPContents li,
.ta-widgets .ta-widget-fragments .widSSPBody ul,
.ta-widgets .ta-widget-fragments .widSSPBody li{
  margin-right:auto !important;
  margin-left:auto !important;
  list-style-position:inside;
}
/* Enlaces del interior —incluidos "Lee opiniones" y
   "Escribe una opinión"— en terracota de la casa. */
.ta-widgets .ta-widget-fragments .TA_selfserveprop a{
  color:var(--terracotta-dark) !important;
  font-family:"Atkinson Hyperlegible","Trebuchet MS",sans-serif !important;
  text-underline-offset:.18em;
}
.ta-widgets .ta-widget-fragments .TA_selfserveprop a:hover{
  color:var(--terracotta) !important;
}
/* Logo / atribución de TripAdvisor: intactos, solo
   centrados y con aire para que no se vean pegados. */
.ta-widgets .ta-widget-fragments .widSSPBranding,
.ta-widgets .ta-widget-fragments .TA_links{
  display:flex !important;
  flex-wrap:wrap;
  justify-content:center !important;
  align-items:center;
  gap:6px;
  margin:0 auto 6px !important;
  padding:0 !important;
  text-align:center !important;
}
.ta-widgets .ta-widget-fragments img{
  margin-inline:auto;
}
@media (max-width:560px){
  .ta-widgets .ta-widget-fragments{padding:26px 8px 6px}
  .ta-widgets .ta-widget-fragments .TA_selfserveprop{padding:4px 4px 2px}
}

/* ============================================================
   FRAGMENTOS ANCHO (TA_selfserveprop144, iswide=true)
   Sustituye al anterior angosto (uniq=515, nreviews=5,
   iswide=false) por el mismo widget en su versión ancha
   (uniq=144, nreviews=4, iswide=true), con border=false en
   el script para que TripAdvisor no pinte el borde verde.
   Solo cambia el CONTENEDOR: más ancho, centrado y con
   aire sobre el fondo crema / blanco hueso del bloque,
   tipografía de la página un poco más grande y texto en
   café cálido, enlaces en terracota. El logo, la
   atribución, los textos de las reseñas y los enlaces de
   TripAdvisor quedan intactos, sin alterar su contenido.
   En móvil el widget se acota al 100% del bloque para que
   nunca provoque scroll horizontal.
   ============================================================ */
.ta-widgets .ta-widget-fragments{
  width:100%;
  padding:32px 20px 12px;
}
.ta-widgets .ta-widget-fragments .TA_selfserveprop,
.ta-widgets .ta-widget-fragments #TA_selfserveprop144{
  width:100%;
  max-width:560px;
  margin-inline:auto;
  text-align:center;
}
.ta-widgets .ta-widget-fragments .TA_selfserveprop > div,
.ta-widgets .ta-widget-fragments .widSSP,
.ta-widgets .ta-widget-fragments .widSSPData{
  max-width:100% !important;
  margin-inline:auto !important;
  text-align:center !important;
}
.ta-widgets .ta-widget-fragments .widSSPTitle,
.ta-widgets .ta-widget-fragments .widSSPTitle *{
  font-size:1.28rem !important;
  line-height:1.3 !important;
}
.ta-widgets .ta-widget-fragments .widSSPContents *,
.ta-widgets .ta-widget-fragments .widSSPBody *{
  text-align:center !important;
}
.ta-widgets .ta-widget-fragments .widSSPContents ul,
.ta-widgets .ta-widget-fragments .widSSPBody ul,
.ta-widgets .ta-widget-fragments .widSSPContents li,
.ta-widgets .ta-widget-fragments .widSSPBody li{
  text-align:center !important;
}
@media (max-width:560px){
  .ta-widgets .ta-widget-fragments{padding:26px 6px 8px}
  .ta-widgets .ta-widget-fragments .TA_selfserveprop,
  .ta-widgets .ta-widget-fragments #TA_selfserveprop144{max-width:100%}
  .ta-widgets .ta-widget-fragments .widSSPTitle,
  .ta-widgets .ta-widget-fragments .widSSPTitle *{font-size:1.14rem !important}
  .ta-widgets .ta-widget-fragments .widSSPContents *,
  .ta-widgets .ta-widget-fragments .widSSPBody *{font-size:.98rem !important}
}

/* ============================================================
   GABY RENTABLE: boton de reservar en su tarjeta (Booking.com),
   bajo su caja de precios completa (noche, semana -12% y
   equivalente por noche), como cuarto rentable mas.
   ============================================================ */
.room-reserve{margin-top:2px;align-self:stretch}

/* ============================================================
   CIERRE DE LA PAGINA: EL MISMO ESTILO DE ARRIBA, DE LA
   CIERRE DE LA PAGINA
   Desde Habitaciones hasta el pie, las secciones
   reciben el lenguaje que ya tienen el hero, Historia y
   las tarjetas de Habitaciones:
   - Fondo blanco hueso con el patron talavera suave de la
     pagina (el que ya trae el body, sin cambiarlo).
   - Tarjetas RECTANGULARES con linea notoria: borde calido
     de 2px en terracota oscuro y sombra calida en capas,
     como las tarjetas de los cuartos (.room).
   - Doble filete interior de cantera rosa, como el marco
     de Historia y la cita de Carmelita.
   - Titulos en la serif de la casa (Bitter) en terracota
     oscuro, con su filete dorado debajo.
   - Botones con el mismo patron talavera terracota de los
     botones del hero.
   - Iconos y detalles hechos a mano: rombitos de talavera
     azul rompiendo los bordes, puntitos pintados, piezas
     con una leve inclinacion, nada de plantilla.
   Solo cambian ESTILOS de estas secciones. No cambia
   ningun texto, precio, foto ni enlace por dentro.
   El hero, Historia, Habitaciones, el menu
   hamburguesa y la division rosa fija no se tocan: todos
   los selectores van acotados a
   #experiencia, #galeria, #opiniones, #contacto y footer.
   ============================================================ */

/* --- Titulos de seccion de la parte baja, con alma --- */
#experiencia .sec-head h2,
#galeria .sec-head h2,
#opiniones .sec-head h2,
#contacto .sec-head h2{
  color:var(--terracotta-dark);
  letter-spacing:-.025em;
}
#experiencia .sec-head h2::after,
#galeria .sec-head h2::after,
#opiniones .sec-head h2::after,
#contacto .sec-head h2::after{
  width:64px;
  height:4px;
  margin-top:13px;
  background:var(--yellow);
  box-shadow:10px 0 0 -1px var(--terracotta);
}
#experiencia .sec-head p,
#galeria .sec-head p,
#opiniones .sec-head p,
#contacto .sec-head p{
  color:#5d5147;
  font-size:1.02rem;
}

/* --- Botones de la parte baja: patron talavera terracota,
   como los tres botones del hero --- */
#opiniones .btn,
#contacto .btn{
  border-color:var(--talavera-blue);
  background-color:var(--terracotta);
  background-image:var(--talavera-band-light);
  background-size:28px 28px;
  color:#fffaf2;
  box-shadow:0 8px 18px rgba(132,61,45,.18), 0 2px 5px rgba(62,43,29,.10);
}
#opiniones .btn:hover,
#contacto .btn:hover{
  border-color:var(--iron);
  background-color:var(--terracotta-dark);
  background-image:var(--talavera-band-light);
  color:#fffaf2;
}

/* --- "Si incluye" / "Para que lo tengas en cuenta" --- */
.includes-grid .panel{
  position:relative;
  padding:28px 28px 26px;
  border:2px solid rgba(132,61,45,.52);
  background:var(--surface);
  box-shadow:
    inset 0 0 0 4px var(--surface),
    inset 0 0 0 5.5px rgba(189,136,126,.36),
    0 24px 44px rgba(132,61,45,.16),
    0 10px 20px rgba(166,78,55,.12),
    0 3px 6px rgba(62,43,29,.11);
}
.includes-grid .panel h3{
  color:var(--terracotta-dark);
  font-size:1.42rem;
  letter-spacing:-.015em;
}
.includes-grid .panel h3::after{
  display:block;
  width:46px;
  height:3px;
  margin-top:11px;
  background:var(--yellow);
  content:"";
}
.includes-grid .checklist{gap:16px}
.includes-grid .checklist b{color:var(--ink)}
.includes-grid .checklist small{color:#5d5147;font-size:.93rem}

/* Iconos hechos a mano de las listas de la parte baja:
   piezas con doble filete, forma suave e irregular y una
   leve inclinacion alternada, con puntito pintado. */
.includes-grid .ico,
#contacto .contact-card .ico{
  position:relative;
  width:32px;
  height:32px;
  flex-basis:32px;
  border:1.6px solid rgba(82,107,75,.65);
  border-radius:11px 6px 12px 7px / 7px 12px 6px 11px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(210,161,60,.20), transparent 60%),
    var(--green-soft);
  color:var(--green);
  box-shadow:
    inset 0 0 0 2px #fffaf0,
    inset 0 0 0 3px rgba(189,136,126,.35),
    0 3px 8px rgba(62,43,29,.12);
  transform:rotate(-2deg);
}
.includes-grid .checklist li:nth-child(even) .ico,
#contacto .contact-card .checklist li:nth-child(even) .ico{
  transform:rotate(2deg);
}
.includes-grid .ico.no,
#contacto .contact-card .ico.no{
  border-color:rgba(166,116,44,.7);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(210,161,60,.26), transparent 60%),
    var(--yellow-soft);
  color:#755a1e;
}

/* --- Experiencia / Que hacer: tarjetas con profundidad --- */
#experiencia .place{
  padding:24px 24px 22px;
  border:1.5px solid rgba(132,61,45,.42);
  border-top:3px solid var(--cantera);
  background:var(--surface);
  box-shadow:
    inset 0 0 0 3px var(--surface),
    inset 0 0 0 4.5px rgba(189,136,126,.30),
    0 18px 34px rgba(132,61,45,.13),
    0 4px 10px rgba(62,43,29,.07);
}
#experiencia .place h3{
  color:var(--terracotta-dark);
  font-size:1.22rem;
  letter-spacing:-.01em;
}
#experiencia .place .dist{
  display:inline-block;
  margin-top:7px;
  padding:3px 11px 4px;
  border:1.4px solid rgba(166,116,44,.55);
  border-radius:13px 6px 14px 7px / 7px 14px 6px 13px;
  background:
    radial-gradient(ellipse at 16% 0%, rgba(210,161,60,.24), transparent 60%),
    var(--yellow-soft);
  color:#574216;
  font-size:.85rem;
  box-shadow:inset 0 0 0 2px #fffaf0, 0 3px 8px rgba(62,43,29,.09);
  transform:rotate(-.6deg);
}
#experiencia .place:nth-child(even) .dist{transform:rotate(.6deg)}
#experiencia .place p{color:#5d5147}
#experiencia .terrace-note{
  position:relative;
  margin-top:22px;
  padding:26px 28px;
  border:2px solid rgba(132,61,45,.45);
  background:
    radial-gradient(ellipse at 96% 0%, rgba(210,161,60,.13), transparent 48%),
    linear-gradient(150deg, #fdf3e3 0%, var(--cantera-soft) 100%);
  box-shadow:
    inset 0 0 0 4px #fffaf0,
    inset 0 0 0 5.5px rgba(189,136,126,.42),
    0 18px 34px rgba(132,61,45,.13),
    0 4px 10px rgba(62,43,29,.07);
}
#experiencia .terrace-note::after{
  position:absolute;
  top:-10px;
  right:34px;
  width:18px;
  height:18px;
  border:2px solid var(--talavera-blue);
  border-radius:5px;
  background:#fffaf0;
  box-shadow:inset 0 0 0 3px #fffaf0, inset 0 0 0 4.5px rgba(166,78,55,.55), 0 4px 10px rgba(132,61,45,.2);
  content:"";
  transform:rotate(45deg);
  pointer-events:none;
}
#experiencia .terrace-note h3{
  color:var(--terracotta-dark);
  font-size:1.3rem;
}
#experiencia .terrace-note h3::after{
  display:block;
  width:46px;
  height:3px;
  margin-top:10px;
  background:var(--yellow);
  content:"";
}
#experiencia .terrace-note p{color:#4e4239}

/* --- Galeria: marcos de foto con linea y sombra calidas --- */
#galeria .gallery figure{
  border:2px solid rgba(132,61,45,.45);
  background:var(--surface);
  box-shadow:
    0 18px 34px rgba(132,61,45,.14),
    0 4px 10px rgba(62,43,29,.08);
}
#galeria .gallery img{
  border-bottom:1px solid rgba(189,136,126,.5);
}
#galeria .gallery figcaption{
  padding:12px 15px 13px;
  background:
    radial-gradient(ellipse at 8% 0%, rgba(210,161,60,.10), transparent 55%),
    #fffaf0;
  color:#5d5147;
}
#galeria .gallery figcaption b{
  color:var(--terracotta-dark);
  font-family:"Bitter",Georgia,serif;
}

/* --- Opiniones: calificaciones como piezas con marco --- */
#opiniones .score{
  padding:20px 12px 18px;
  border:2px solid rgba(132,61,45,.45);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(210,161,60,.10), transparent 62%),
    var(--surface);
  box-shadow:
    inset 0 0 0 3px var(--surface),
    inset 0 0 0 4.5px rgba(189,136,126,.34),
    0 14px 28px rgba(132,61,45,.12),
    0 3px 8px rgba(62,43,29,.07);
}
#opiniones .score b{font-size:1.9rem}
#opiniones .score:last-child b{color:var(--talavera-blue)}
#opiniones .score span{color:#5d5147}
#opiniones .review-link{
  border:2px solid rgba(132,61,45,.52);
  box-shadow:
    0 24px 44px rgba(132,61,45,.16),
    0 10px 20px rgba(166,78,55,.12),
    0 3px 6px rgba(62,43,29,.11);
}
#opiniones .review-link h3{
  color:var(--terracotta-dark);
  font-size:1.22rem;
  letter-spacing:-.01em;
}
#opiniones .review-link p{color:#5d5147}
#opiniones .general-note{
  position:relative;
  margin-top:20px;
  padding:26px 28px;
  border:2px solid rgba(35,64,143,.42);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(35,64,143,.07), transparent 60%),
    linear-gradient(165deg, #fffaf0 0%, var(--talavera-blue-soft) 100%);
  box-shadow:
    inset 0 0 0 4px #fffaf0,
    inset 0 0 0 5.5px rgba(189,136,126,.40),
    0 18px 34px rgba(132,61,45,.12),
    0 4px 10px rgba(62,43,29,.07);
}
#opiniones .general-note::after{
  position:absolute;
  top:-10px;
  left:50%;
  width:18px;
  height:18px;
  border:2px solid var(--talavera-blue);
  border-radius:5px;
  background:#fffaf0;
  box-shadow:inset 0 0 0 3px #fffaf0, inset 0 0 0 4.5px rgba(166,78,55,.55), 0 4px 10px rgba(132,61,45,.2);
  content:"";
  transform:translateX(-50%) rotate(45deg);
  pointer-events:none;
}
#opiniones .general-note h3{
  color:var(--talavera-blue);
  font-size:1.28rem;
}
#opiniones .general-note p{color:#4e4239}

/* --- Contacto: pasos, tarjetas y preguntas con la casa --- */
#contacto .step{
  padding:24px 24px 22px;
  border:2px solid rgba(132,61,45,.48);
  border-top:2px solid rgba(132,61,45,.48);
  background:var(--surface);
  box-shadow:
    inset 0 0 0 3px var(--surface),
    inset 0 0 0 4.5px rgba(189,136,126,.30),
    0 18px 34px rgba(132,61,45,.13),
    0 4px 10px rgba(62,43,29,.07);
}
#contacto .step .num{
  width:42px;
  height:42px;
  border:2px solid var(--terracotta-dark);
  border-radius:14px 7px 15px 8px / 8px 15px 7px 14px;
  background-color:#fff6e3;
  background-image:var(--talavera-mini);
  background-size:18px 18px;
  color:var(--terracotta-dark);
  font-size:1.15rem;
  box-shadow:
    inset 0 0 0 2px #fffaf0,
    inset 0 0 0 3.5px rgba(35,64,143,.35),
    0 4px 10px rgba(132,61,45,.18);
  transform:rotate(-2deg);
}
#contacto .step:nth-child(2) .num{transform:rotate(1.6deg)}
#contacto .step:nth-child(3) .num{transform:rotate(-1deg)}
#contacto .step h3{
  color:var(--terracotta-dark);
  font-size:1.2rem;
}
#contacto .step p{color:#5d5147}
#contacto .contact-card{
  padding:28px 28px 26px;
  border:2px solid rgba(132,61,45,.52);
  background:var(--surface);
  box-shadow:
    inset 0 0 0 4px var(--surface),
    inset 0 0 0 5.5px rgba(189,136,126,.36),
    0 24px 44px rgba(132,61,45,.16),
    0 10px 20px rgba(166,78,55,.12),
    0 3px 6px rgba(62,43,29,.11);
}
#contacto .contact-card h3{
  color:var(--terracotta-dark);
  font-size:1.4rem;
  letter-spacing:-.015em;
}
#contacto .contact-card h3::after{
  display:block;
  width:46px;
  height:3px;
  margin-top:11px;
  background:var(--yellow);
  content:"";
}
#contacto .contact-card p{color:#5d5147}
#contacto .contact-card .checklist b{color:var(--ink)}
#contacto .contact-card .checklist small{color:#5d5147;font-size:.93rem}
#contacto .minimap{
  border:2px solid rgba(132,61,45,.45);
  box-shadow:0 10px 22px rgba(132,61,45,.12);
}
#contacto .faq-block details{
  margin-bottom:12px;
  padding:6px 20px;
  border:1.5px solid rgba(132,61,45,.42);
  background:
    radial-gradient(ellipse at 98% 0%, rgba(210,161,60,.08), transparent 46%),
    var(--surface);
  box-shadow:0 10px 22px rgba(132,61,45,.09), 0 3px 7px rgba(62,43,29,.06);
}
#contacto .faq-block summary{
  color:var(--terracotta-dark);
  font-family:"Bitter",Georgia,serif;
  font-size:1.05rem;
}
#contacto .faq-block details[open]{
  background:
    radial-gradient(ellipse at 98% 0%, rgba(210,161,60,.10), transparent 46%),
    #fffaf0;
}
#contacto .faq-block details p{color:#5d5147}

/* --- Pie: crema talavera suave y filetes de la casa --- */
footer{
  margin-top:72px;
  padding:0 0 40px;
  border-top:0;
  background-color:var(--paper);
  background-image:var(--talavera-bg);
  background-size:84px 84px;
  background-repeat:repeat;
  color:#5d5147;
}
footer .wrap{padding-top:30px}
footer h3{
  color:var(--terracotta-dark);
  font-family:"Bitter",Georgia,serif;
  font-size:1.12rem;
  letter-spacing:-.01em;
}
footer h3::after{
  display:block;
  width:38px;
  height:3px;
  margin-top:8px;
  background:var(--yellow);
  content:"";
}
footer a{color:var(--terracotta-dark)}
footer .legal{
  margin-top:8px;
  padding-top:16px;
  border-top:1px dashed rgba(189,136,126,.65);
  color:#5d5147;
}

@media (max-width:560px){
  .includes-grid .panel,
  #contacto .contact-card{padding:22px 18px 20px}
  #experiencia .place{padding:20px 18px}
  #experiencia .terrace-note{padding:22px 18px}
  #experiencia .terrace-note::after{right:22px}
  #opiniones .general-note{padding:22px 18px}
  #contacto .step{padding:20px 18px}
  #contacto .faq-block details{padding:5px 16px}
}


/* ============================================================
   RESERVA TODO EN BOOKING + WHATSAPP + POLITICAS
   - Boton "Reservar en Booking.com" en las 4 habitaciones
     (regla .room-reserve ya existente, se mantiene para todas).
   - WhatsApp: boton discreto en Contacto y enlace en el pie,
     telefono en letra chica, nunca como titular.
   - Enlace a Politicas de reserva como pagina aparte.
   ============================================================ */
.contact-phone{margin:6px 0 0 !important}
.contact-phone small{font-size:.86rem;color:var(--muted)}
.contact-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.btn-whatsapp{border-color:#3f6b35;background-color:#527a46;background-image:var(--talavera-band-light);background-size:28px 28px;color:#fffaf2;box-shadow:0 8px 18px rgba(62,43,29,.16)}
.btn-whatsapp:hover{border-color:var(--iron);background-color:#426636;color:#fffaf2}
#contacto .btn-whatsapp{border-color:#3f6b35;background-color:#527a46}
#contacto .btn-whatsapp:hover{border-color:var(--iron);background-color:#426636}
footer .footer-whatsapp{font-weight:700}
footer li small{font-size:.84rem}
.room .room-reserve{align-self:stretch;text-align:center;justify-content:center}
footer .footer-whatsapp{min-height:40px;padding:8px 14px;font-size:.88rem;margin-top:4px}

/* ============================================================
   HISTORIA: UNA SOLA FOTO (recepción con los ángeles)
   La columna de fotos deja de ser una cuadrícula de 4 y pasa
   a una sola foto que ocupa todo el alto de la tarjeta de
   texto, bien proporcionada y sin huecos: la figura se
   estira a la altura de la fila y la imagen crece (flex:1)
   para llenarla, con el pie siempre pegado abajo.
   ============================================================ */
#historia .story-photos{grid-template-columns:1fr;grid-template-rows:1fr;gap:0}
#historia .story-main{grid-column:1/-1;height:100%}
#historia .story-main img{flex:1 1 auto;height:auto;min-height:380px}
@media (max-width:900px){
  #historia .story-main img{min-height:300px}
}
@media (max-width:560px){
  #historia .story-photos{grid-template-columns:1fr}
  #historia .story-main img{flex:none;height:260px;min-height:0}
}

/* ============================================================
   TOURS DESDE LA CASA
   Tres recorridos del cartel del hotel, en tarjetas con el
   mismo lenguaje de la página: borde cálido, doble filete
   cantera, sombra cálida, títulos en Bitter terracota y
   precio destacado. Sin foto del cartel, sin botones.
   ============================================================ */
#tours .sec-head h2{color:var(--terracotta-dark)}
#tours .sec-head h2::after{width:64px;height:4px;margin-top:13px;background:var(--yellow);box-shadow:10px 0 0 -1px var(--terracotta)}
.tours{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.tour{padding:24px 24px 22px;border:2px solid rgba(132,61,45,.52);background:var(--surface);box-shadow:inset 0 0 0 4px var(--surface),inset 0 0 0 5.5px rgba(189,136,126,.36),0 18px 34px rgba(132,61,45,.13),0 4px 10px rgba(62,43,29,.07)}
.tour-1{border-top:4px solid var(--terracotta)}
.tour-2{border-top:4px solid var(--green)}
.tour-3{border-top:4px solid var(--talavera-blue)}
.tour-num{display:inline-block;padding:3px 11px 4px;border:1.4px solid rgba(166,116,44,.55);border-radius:13px 6px 14px 7px / 7px 14px 6px 13px;background:radial-gradient(ellipse at 16% 0%, rgba(210,161,60,.24), transparent 60%),var(--yellow-soft);color:#574216;font-size:.82rem;font-weight:700;box-shadow:inset 0 0 0 2px #fffaf0,0 3px 8px rgba(62,43,29,.09)}
.tour h3{margin-top:12px;color:var(--terracotta-dark);font-size:1.28rem;line-height:1.25;letter-spacing:-.01em}
.tour-price{margin:10px 0 0;color:var(--terracotta-dark);font-family:"Bitter",Georgia,serif;font-size:1.9rem;font-weight:700;line-height:1.1}
.tour-price small{color:var(--muted);font-family:"Atkinson Hyperlegible","Trebuchet MS",sans-serif;font-size:.86rem;font-weight:400}
.tour-meta{margin:10px 0 0;padding:10px 0;border-top:1px dashed #cdbda8;border-bottom:1px dashed #cdbda8;color:#5d5147;font-size:.92rem;line-height:1.55}
.tour-meta b{color:var(--ink)}
.tour ul{margin:12px 0 0;padding-left:20px;color:#5d5147;font-size:.94rem;line-height:1.55}
.tour ul li{margin:3px 0;padding-left:3px}
.tour ul li::marker{color:var(--cantera)}
.tours-note{margin:14px 0 0;color:var(--muted);font-size:.92rem;font-style:italic}
@media (max-width:900px){.tours{grid-template-columns:1fr}}
@media (max-width:560px){.tour{padding:20px 18px}}

/* ============================================================
   TOURS: DETALLE DECORATIVO, FOTOS Y GALERIA CON "VER MAS"
   1) Junto al titulo "Tours desde la casa", un mini detalle
      dibujado a mano en el lenguaje de la pagina, como el
      corazon de Historia y la casita de Habitaciones: un
      caminito de puntitos terracota que nace en un rombito
      de talavera azul y llega a un autobusito de trazo
      terracota oscuro con su farito dorado. Pequeno y
      discreto, sin robar la atencion del titulo.
   2) Cada tarjeta de tour lleva arriba una foto real del
      lugar del recorrido (sin la foto del cartel), a todo
      el ancho de la tarjeta y con el marco calido de la
      casa: filete cantera bajo la foto y la sombra de la
      tarjeta. Nada mas cambia en las tarjetas.
   3) La Galeria muestra al inicio solo las primeras 6
      fotos; el boton "Ver mas" despliega todas las demas
      y se convierte en "Ver menos" para volver a cerrar
      (la logica va en script.js).
   ============================================================ */

/* --- 1) Mini detalle de tour junto al titulo --- */
.tours-mark{
  display:inline-block;
  width:50px;
  height:40px;
  margin-left:10px;
  vertical-align:-7px;
  transform:rotate(-2deg);
  line-height:0;
}
.tours-mark svg{display:block;width:50px;height:40px;overflow:visible}
@media (max-width:560px){
  .tours-mark{width:42px;height:33px;margin-left:7px;vertical-align:-5px}
  .tours-mark svg{width:42px;height:33px}
}

/* --- 2) Foto arriba de cada tarjeta de tour --- */
.tour-photo{
  margin:-24px -24px 18px;
  border-bottom:1px solid rgba(189,136,126,.55);
  background:var(--surface-soft);
  overflow:hidden;
}
.tour-photo img{
  width:100%;
  height:172px;
  object-fit:cover;
  object-position:center;
}
.tour-photo-tall img{object-position:center 18%}
@media (max-width:560px){
  .tour-photo{margin:-20px -18px 16px}
  .tour-photo img{height:190px}
}

/* --- 3) Galeria: solo las primeras 6 fotos al inicio --- */
#galeria .gallery:not(.gallery-open) figure:nth-child(n+7){display:none}
.gallery-more{margin-top:20px;text-align:center}
.gallery-toggle{min-width:180px;cursor:pointer}