/* ═══════════════════════════════════════════════════════════════════════════
   INFO PAGES · Estilos compartidos para servicios, nosotros, contacto, resenas
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero común ───────────────────────────────────────────────────────────── */
.info-hero {
  padding: 10rem 5% 4rem;
  text-align: center;
  background: var(--dark);
  position: relative;
}
.info-hero-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 1.4rem;
}
.info-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  line-height: 1.05;
  color: var(--white);
  margin-bottom: 1.4rem;
  letter-spacing: -.01em;
}
.info-hero-title em {
  font-style: italic;
  color: var(--salmon);
  font-weight: 300;
}
.info-hero-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: .98rem;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255,255,255,.62);
  max-width: 620px;
  margin: 0 auto;
}

@media (max-width: 700px) {
  .info-hero { padding: 7rem 1.4rem 2.5rem; }
  .info-hero-desc { font-size: .88rem; }
}

/* ── Servicios detallados (bandas alternadas) ─────────────────────────────── */
.servicios-detallados {
  padding: 4rem 5% 6rem;
  background: var(--dark);
}
.servicio-detalle {
  max-width: 1320px;
  margin: 0 auto 6rem;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 4rem;
}
.servicio-detalle.reverse {
  direction: rtl;
}
.servicio-detalle.reverse > * { direction: ltr; }
.servicio-detalle:last-child { margin-bottom: 0; }
.sd-media {
  aspect-ratio: 4/5;
  position: relative;
  overflow: hidden;
}
.sd-placeholder {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, rgba(232,197,188,.08), rgba(107,170,155,.06)),
    var(--dark2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.8rem;
  color: rgba(255,255,255,.18);
  letter-spacing: .15em;
}
.sd-content { padding: 1rem 0; }
.sd-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 3rem;
  color: var(--salmon);
  margin-bottom: 1.4rem;
  line-height: 1;
}
.sd-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: .6rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 1rem;
}
.sd-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.05;
  color: var(--white);
  margin-bottom: 1.6rem;
  letter-spacing: -.01em;
}
.sd-title em { font-style: italic; color: var(--salmon); }
.sd-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 300;
  color: rgba(255,255,255,.7);
  margin-bottom: 1.6rem;
}
.sd-desc em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--salmon);
  font-size: 1.05em;
}
.sd-features {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.sd-features li {
  padding: .9rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-family: 'DM Sans', sans-serif;
  font-size: .88rem;
  color: rgba(255,255,255,.78);
  position: relative;
  padding-left: 1.4rem;
}
.sd-features li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--mint);
}
.sd-cta {
  display: inline-flex;
  align-items: center;
  font-family: 'DM Sans', sans-serif;
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--salmon);
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--salmon);
  transition: letter-spacing .4s;
}
.sd-cta:hover { letter-spacing: .38em; }

@media (max-width: 900px) {
  .servicios-detallados { padding: 3rem 1.4rem; }
  .servicio-detalle, .servicio-detalle.reverse {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 4rem;
    direction: ltr;
  }
  .sd-title { font-size: clamp(1.8rem, 6vw, 2.4rem); }
  .sd-num { font-size: 2.2rem; }
}

/* ── Nosotros: misión, valores, proceso ───────────────────────────────────── */
.info-section {
  padding: 7rem 5%;
  background: var(--dark);
}
.info-section.alt { background: var(--dark2); }
.info-section-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: .65rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 1.4rem;
  text-align: center;
}
.info-section-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  line-height: 1.1;
  color: var(--white);
  text-align: center;
  margin-bottom: 1.8rem;
}
.info-section-title em { font-style: italic; color: var(--salmon); }
.info-section-text {
  max-width: 760px;
  margin: 0 auto 2.5rem;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  font-weight: 300;
  color: rgba(255,255,255,.72);
}

.values-grid {
  max-width: 1100px;
  margin: 3rem auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.value-card {
  border: 1px solid rgba(255,255,255,.08);
  padding: 2.6rem 2rem;
  text-align: left;
  transition: border-color .4s, transform .4s;
}
.value-card:hover {
  border-color: var(--salmon);
  transform: translateY(-4px);
}
.value-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 2.2rem;
  color: var(--salmon);
  margin-bottom: 1.2rem;
  line-height: 1;
}
.value-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--white);
  margin-bottom: .8rem;
}
.value-card p {
  font-size: .94rem;
  line-height: 1.7;
  color: rgba(255,255,255,.62);
  font-weight: 300;
}

.proceso-pasos {
  max-width: 1100px;
  margin: 3rem auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.paso-card {
  text-align: center;
  padding: 2rem 1rem;
  position: relative;
}
.paso-card::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -.5rem;
  width: 1rem;
  height: 1px;
  background: var(--mint);
}
.paso-card:last-child::after { display: none; }
.paso-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 2.8rem;
  color: var(--mint);
  margin-bottom: 1rem;
  line-height: 1;
}
.paso-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.4rem;
  color: var(--white);
  margin-bottom: .8rem;
}
.paso-card p {
  font-size: .86rem;
  color: rgba(255,255,255,.6);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .info-section { padding: 4.5rem 1.4rem; }
  .values-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .proceso-pasos { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
  .paso-card::after { display: none; }
}

/* ── Formularios (contacto, resenas) ──────────────────────────────────────── */
.form-wrapper {
  max-width: 720px;
  margin: 3rem auto 0;
  padding: 0 1rem;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: 1.6rem;
}
.form-field label {
  font-family: 'DM Sans', sans-serif;
  font-size: .62rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.form-field input,
.form-field textarea,
.form-field select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.2);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 300;
  padding: .8rem 0;
  outline: none;
  transition: border-color .35s;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-bottom-color: var(--salmon);
}
.form-field textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.6;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}
.form-row .form-field { margin-bottom: 0; }
.form-rating {
  display: flex;
  gap: .25rem;
  font-size: 1.6rem;
  margin-top: .4rem;
}
.form-rating input { display: none; }
.form-rating label {
  font-size: 1.6rem;
  cursor: pointer;
  color: rgba(255,255,255,.18);
  letter-spacing: 0;
  text-transform: none;
  transition: color .25s, transform .25s;
  padding: 0;
}
.form-rating label:hover,
.form-rating label.active {
  color: var(--salmon);
  transform: scale(1.15);
}
.form-submit {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--salmon);
  color: var(--dark);
  border: 1px solid var(--salmon);
  padding: 1.05rem 2.2rem;
  font-family: 'DM Sans', sans-serif;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .4s cubic-bezier(.4,0,.2,1);
  margin-top: 1.4rem;
}
.form-submit:hover:not(:disabled) {
  background: var(--rose-deep);
  border-color: var(--rose-deep);
  letter-spacing: .34em;
}
.form-submit:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.form-feedback {
  margin-top: 1.4rem;
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem;
  padding: .9rem 1.2rem;
  border-left: 2px solid;
  display: none;
}
.form-feedback.success {
  display: block;
  color: var(--mint);
  border-color: var(--mint);
  background: rgba(107,170,155,.08);
}
.form-feedback.error {
  display: block;
  color: var(--salmon);
  border-color: var(--salmon);
  background: rgba(232,197,188,.08);
}

/* ── Lista de reseñas ─────────────────────────────────────────────────────── */
.resenas-list {
  max-width: 980px;
  margin: 3rem auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}
.resena-item {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.08);
  padding: 2.4rem 2rem;
  position: relative;
}
.resena-item::before {
  content: '\201C';
  position: absolute;
  top: -1rem; left: 1.4rem;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 5rem;
  color: var(--salmon);
  opacity: .4;
  line-height: 1;
}
.resena-item .rt {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--white);
  margin-bottom: 1.4rem;
}
.resena-item .rm {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
}
.resena-item .rs { color: var(--salmon); font-size: .9rem; }
.resena-item .rn {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--white);
}
.resena-item .rd {
  font-size: .65rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mute);
  margin-left: auto;
}

@media (max-width: 700px) {
  .resenas-list { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-row .form-field { margin-bottom: 1.6rem; }
}

/* ── CTA común al final ───────────────────────────────────────────────────── */
.info-cta {
  padding: 7rem 1.4rem;
  text-align: center;
  background: var(--dark);
}
.info-cta-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: .65rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 1.4rem;
}
.info-cta-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 1.6rem;
}
.info-cta-title em { font-style: italic; color: var(--salmon); }
.info-cta-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: .95rem;
  color: rgba(255,255,255,.6);
  margin-bottom: 2.5rem;
}
.info-cta-actions {
  display: inline-flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.info-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: 'DM Sans', sans-serif;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  padding: 1rem 1.8rem;
  border: 1px solid;
  transition: all .4s;
}
.info-cta-btn.primary {
  background: var(--salmon);
  color: var(--dark);
  border-color: var(--salmon);
}
.info-cta-btn.primary:hover { background: var(--rose-deep); border-color: var(--rose-deep); letter-spacing: .34em; }
.info-cta-btn.ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.28);
}
.info-cta-btn.ghost:hover { border-color: var(--salmon); color: var(--salmon); }