/* ==========================================================================
   PALMA HI — Design system y componentes
   Sin frameworks. CSS custom properties. Sin jQuery.
   ========================================================================== */

:root {
  /* ---------- COLOR ---------- */
  /* ⚠️ PLACEHOLDER: el naranja corporativo definitivo NO se ha encontrado en
     los archivos del proyecto (no hay logo/branding). Sustituir por el hex exacto.
     Esta variable es el UNICO punto donde se define el color de marca. */
  --ph-brand:            #f26a1b;   /* PLACEHOLDER — sustituir */
  --ph-brand-dark:       #c9530d;   /* PLACEHOLDER (hover) */
  --ph-brand-contrast:   #ffffff;

  --ph-ink:              #14181d;
  --ph-ink-soft:         #4a5460;
  --ph-line:             #e3e6ea;
  --ph-bg:               #ffffff;
  --ph-bg-alt:           #f5f6f8;
  --ph-bg-dark:          #14181d;
  --ph-success:          #1f7a4d;
  --ph-error:            #b3261e;

  /* ---------- TIPOGRAFIA ---------- */
  --ph-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --ph-fs-100: 0.8125rem;  /* 13px */
  --ph-fs-200: 0.9375rem;  /* 15px */
  --ph-fs-300: 1rem;       /* 16px */
  --ph-fs-400: 1.125rem;   /* 18px */
  --ph-fs-500: 1.375rem;   /* 22px */
  --ph-fs-600: 1.75rem;    /* 28px */
  --ph-fs-700: 2.125rem;   /* 34px */
  --ph-fs-800: 2.75rem;    /* 44px */
  --ph-lh-tight: 1.2;
  --ph-lh-body: 1.65;

  /* ---------- ESPACIADO ---------- */
  --ph-space-1: 0.25rem;
  --ph-space-2: 0.5rem;
  --ph-space-3: 0.75rem;
  --ph-space-4: 1rem;
  --ph-space-5: 1.5rem;
  --ph-space-6: 2rem;
  --ph-space-7: 3rem;
  --ph-space-8: 4rem;
  --ph-space-9: 6rem;
  --ph-section-y: var(--ph-space-7);
  --ph-section-y-lg: var(--ph-space-9);

  /* ---------- LAYOUT ---------- */
  --ph-container: 1200px;
  --ph-container-narrow: 780px;
  --ph-header-h: 72px;

  /* ---------- RADIOS / SOMBRAS ---------- */
  --ph-radius-sm: 4px;
  --ph-radius: 8px;
  --ph-radius-lg: 14px;
  --ph-radius-pill: 999px;
  --ph-shadow-sm: 0 1px 2px rgba(20, 24, 29, .06);
  --ph-shadow: 0 4px 14px rgba(20, 24, 29, .08);
  --ph-shadow-lg: 0 12px 32px rgba(20, 24, 29, .12);

  /* ---------- BOTONES ---------- */
  --ph-btn-pad-y: 0.7rem;
  --ph-btn-pad-x: 1.25rem;
  --ph-btn-fs: var(--ph-fs-300);
  --ph-btn-radius: var(--ph-radius);

  /* ---------- TRANSICIONES ---------- */
  --ph-transition: 160ms ease;
}

/* ==========================================================================
   BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ph-font-sans);
  font-size: var(--ph-fs-300);
  line-height: var(--ph-lh-body);
  color: var(--ph-ink);
  background: var(--ph-bg);
  overflow-x: hidden; /* sin scroll horizontal */
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--ph-brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: var(--ph-lh-tight); margin: 0 0 var(--ph-space-3); color: var(--ph-ink); }
p { margin: 0 0 var(--ph-space-4); }
ul, ol { margin: 0 0 var(--ph-space-4); padding-left: 1.25rem; }

.ph-h1 { font-size: var(--ph-fs-700); }
.ph-h2 { font-size: var(--ph-fs-600); }
.ph-h3 { font-size: var(--ph-fs-500); }
.ph-eyebrow {
  font-size: var(--ph-fs-100); text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; color: var(--ph-brand-dark); margin: 0 0 var(--ph-space-2);
}
.ph-pending {
  display: inline-block; padding: .35rem .6rem; border: 1px dashed var(--ph-line);
  border-radius: var(--ph-radius-sm); color: var(--ph-ink-soft);
  font-size: var(--ph-fs-100); background: var(--ph-bg-alt);
}

/* Accesibilidad */
.ph-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ph-ink); color: #fff; padding: .6rem 1rem;
}
.ph-skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--ph-brand); outline-offset: 2px; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.ph-container {
  width: 100%; max-width: var(--ph-container);
  margin: 0 auto; padding-left: var(--ph-space-4); padding-right: var(--ph-space-4);
}
.ph-container--narrow { max-width: var(--ph-container-narrow); }
.ph-section { padding: var(--ph-section-y) 0; }
.ph-section--alt { background: var(--ph-bg-alt); }

.ph-grid { display: grid; gap: var(--ph-space-5); grid-template-columns: 1fr; }
.ph-grid--3, .ph-grid--4 { grid-template-columns: 1fr; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.ph-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--ph-bg); border-bottom: 1px solid var(--ph-line);
  min-height: var(--ph-header-h);
}
/* Móvil: columna centrada — logo arriba, hamburguesa en el centro, teléfono debajo */
.ph-header__inner {
  display: flex; flex-direction: column; align-items: center; gap: 36px;
  min-height: var(--ph-header-h); flex-wrap: wrap;
  max-width: 1240px; margin-inline: auto; padding-inline: 24px; padding-block: var(--ph-space-3);
}
.ph-header__brand { flex: 0 0 auto; display: flex; justify-content: center; }
/* Logo container 250x56 — el logo se ajusta con contain, sin deformar (3.17:1) */
.ph-header__logo { display: block; width: 250px; max-width: 100%; height: 56px; }
.ph-header__logo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.ph-logo-text {
  font-weight: 800; font-size: var(--ph-fs-400); color: var(--ph-ink);
  text-decoration: none; line-height: 1.1; display: block;
}
.ph-logo-text span { display: block; font-size: var(--ph-fs-100); font-weight: 600; color: var(--ph-brand-dark); letter-spacing: .04em; text-transform: uppercase; }
.ph-header__actions { display: flex; width: 100%; justify-content: center; gap: var(--ph-space-3); margin-left: 0; order: 4; flex-basis: auto; }
.ph-header__phone {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-weight: 700; font-size: calc(var(--ph-fs-300) * 1.2); white-space: nowrap; text-decoration: none;
  background: #fe8d1f; color: #fff; border: 2px solid #fe8d1f; border-radius: var(--ph-radius);
  min-height: 54px; padding: 0 26px; transition: background var(--ph-transition), border-color var(--ph-transition), color var(--ph-transition);
  width: fit-content; max-width: calc(100% - 32px);
}
.ph-header__phone:hover, .ph-header__phone:focus-visible { background: #000; border-color: #000; color: #fff; }
.ph-icon { flex: 0 0 auto; }

/* Burger */
.ph-burger {
  margin-left: 0; order: 2; display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 10px; background: none; border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius); cursor: pointer;
}
.ph-burger__bar { display: block; height: 2px; background: var(--ph-ink); border-radius: 2px; transition: transform var(--ph-transition), opacity var(--ph-transition); }
.ph-burger[aria-expanded="true"] .ph-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ph-burger[aria-expanded="true"] .ph-burger__bar:nth-child(2) { opacity: 0; }
.ph-burger[aria-expanded="true"] .ph-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Nav */
.ph-nav {
  display: none; flex-basis: auto; width: 100%; order: 3;
  border-top: 1px solid var(--ph-line); padding: var(--ph-space-3) 0 var(--ph-space-2);
}
.ph-header__brand { order: 1; }
.ph-nav.is-open { display: block; }
.ph-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ph-space-1); }
.ph-menu a, .ph-dropdown__toggle {
  display: block; width: 100%; text-align: left; padding: .7rem .5rem; color: var(--ph-ink);
  font-size: var(--ph-fs-300); font-weight: 600; background: none; border: 0; cursor: pointer;
  border-radius: var(--ph-radius-sm); text-decoration: none; font-family: inherit;
}
.ph-menu a:hover, .ph-dropdown__toggle:hover { background: var(--ph-bg-alt); text-decoration: none; }
.ph-dropdown__toggle { display: flex; align-items: center; justify-content: space-between; }
.ph-caret { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; transition: transform var(--ph-transition); }
.ph-dropdown__toggle[aria-expanded="true"] .ph-caret { transform: rotate(180deg); }
.ph-submenu { list-style: none; margin: 0; padding-left: var(--ph-space-4); display: none; }
.ph-submenu.is-open { display: block; }

/* ==========================================================================
   BOTONES
   ========================================================================== */
.ph-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: var(--ph-btn-pad-y) var(--ph-btn-pad-x);
  font-size: var(--ph-btn-fs); font-weight: 700; font-family: inherit; line-height: 1.2;
  border-radius: var(--ph-btn-radius); border: 2px solid transparent;
  text-decoration: none; cursor: pointer; transition: background var(--ph-transition), color var(--ph-transition), border-color var(--ph-transition);
  min-height: 44px; /* touch target */
}
.ph-btn:hover { text-decoration: none; }
.ph-btn--primary { background: var(--ph-brand); color: var(--ph-brand-contrast); }
.ph-btn--primary:hover { background: var(--ph-brand-dark); }
.ph-btn--ghost { background: transparent; color: var(--ph-ink); border-color: var(--ph-line); }
.ph-btn--ghost:hover { border-color: var(--ph-ink); }
.ph-btn--light { background: #fff; color: var(--ph-ink); }
.ph-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.ph-btn--outline-light:hover { border-color: #fff; }
.ph-btn--whatsapp { background: #25d366; color: #04361a; }
.ph-btn--whatsapp:hover { background: #1eb757; }
.ph-btn--sm { padding: .5rem .8rem; font-size: var(--ph-fs-100); min-height: 38px; }
.ph-btn--lg { padding: .85rem 1.5rem; font-size: var(--ph-fs-400); }

/* ==========================================================================
   HERO
   ========================================================================== */
.ph-hero { position: relative; background: var(--ph-bg-dark); color: #fff; overflow: hidden; }
.ph-hero__media { position: absolute; inset: 0; }
/* BQC-001: zona media neutra (placeholder sin texto) — no se superpone al H1 */
.ph-hero__media--pattern {
  background-color: #2b3038;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 14px, rgba(255, 255, 255, 0) 14px 28px),
    linear-gradient(180deg, rgba(20, 24, 29, .35) 0%, rgba(20, 24, 29, .75) 100%);
}
.ph-hero__img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.ph-hero__inner { position: relative; padding: var(--ph-space-8) var(--ph-space-4); }
.ph-hero__content { max-width: 720px; }
.ph-hero__title { color: #fff; font-size: var(--ph-fs-700); margin-bottom: var(--ph-space-3); }
.ph-hero__subtitle { color: rgba(255,255,255,.9); font-size: var(--ph-fs-400); margin-bottom: var(--ph-space-5); }
.ph-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ph-space-3); margin: 0; }
.ph-hero--small .ph-hero__inner { padding: var(--ph-space-7) var(--ph-space-4); }
.ph-hero--service .ph-hero__inner { padding: var(--ph-space-7) var(--ph-space-4); }

/* ==========================================================================
   COMPONENTES
   ========================================================================== */
.ph-section-heading { margin-bottom: var(--ph-space-6); max-width: 760px; }
.ph-section-heading__title { font-size: var(--ph-fs-600); }
.ph-section-heading__text { color: var(--ph-ink-soft); }

/* Cards */
.ph-service-cards { display: grid; gap: var(--ph-space-5); grid-template-columns: 1fr; }
.ph-decorative-cards { display: grid; gap: var(--ph-space-5); grid-template-columns: 1fr; }
.ph-card { background: var(--ph-bg); border: 1px solid var(--ph-line); border-radius: var(--ph-radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.ph-card--plain { padding: var(--ph-space-5); }
.ph-card__media { aspect-ratio: 4 / 3; background: var(--ph-bg-alt); }
.ph-card__media--placeholder { background: repeating-linear-gradient(45deg, #eef0f3, #eef0f3 10px, #e6e9ed 10px, #e6e9ed 20px); }
.ph-card__body { padding: var(--ph-space-5); display: flex; flex-direction: column; gap: var(--ph-space-2); flex: 1; }
.ph-card__title { font-size: var(--ph-fs-400); margin: 0; }
.ph-card__title a { color: var(--ph-ink); }
.ph-card__text { color: var(--ph-ink-soft); margin: 0; font-size: var(--ph-fs-200); }
.ph-card__more { margin: auto 0 0; }
.ph-link { font-weight: 700; }

/* Media placeholder */
.ph-media-placeholder {
  aspect-ratio: 4 / 3; width: 100%; border-radius: var(--ph-radius);
  background: repeating-linear-gradient(45deg, #eef0f3, #eef0f3 10px, #e6e9ed 10px, #e6e9ed 20px);
}

/* Image + text (en movil: imagen arriba, texto abajo) */
.ph-image-text { padding: var(--ph-section-y) 0; }
.ph-image-text__grid { display: grid; gap: var(--ph-space-6); grid-template-columns: 1fr; }
.ph-image-text__media { order: 1; }
.ph-image-text__body { order: 2; }

/* Swatches (acabados) */
.ph-swatch { background: var(--ph-bg); border: 1px solid var(--ph-line); border-radius: var(--ph-radius); padding: var(--ph-space-3); }
.ph-swatch__img { aspect-ratio: 1 / 1; border-radius: var(--ph-radius-sm); margin-bottom: var(--ph-space-2); background: repeating-linear-gradient(45deg, #eef0f3, #eef0f3 10px, #e6e9ed 10px, #e6e9ed 20px); }
.ph-swatch__label { margin: 0; font-size: var(--ph-fs-200); text-align: center; color: var(--ph-ink-soft); }

/* Steps */
.ph-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--ph-space-5); grid-template-columns: 1fr; }
.ph-step { position: relative; padding: var(--ph-space-5); background: var(--ph-bg); border: 1px solid var(--ph-line); border-radius: var(--ph-radius-lg); }
.ph-step__num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--ph-radius-pill); background: var(--ph-brand); color: var(--ph-brand-contrast); font-weight: 800; margin-bottom: var(--ph-space-3); }
.ph-step__title { font-size: var(--ph-fs-400); }
.ph-step__text { color: var(--ph-ink-soft); margin: 0; }

/* Zones */
.ph-zones { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--ph-space-2); }
.ph-zone { padding: .45rem .85rem; border: 1px solid var(--ph-line); border-radius: var(--ph-radius-pill); font-size: var(--ph-fs-200); background: var(--ph-bg); }

/* Price cards */
.ph-price-card { background: var(--ph-bg); border: 1px solid var(--ph-line); border-radius: var(--ph-radius-lg); padding: var(--ph-space-5); display: flex; flex-direction: column; gap: var(--ph-space-3); }
.ph-price-card__title { margin: 0; font-size: var(--ph-fs-400); }
.ph-price-card__price { font-size: var(--ph-fs-600); font-weight: 800; color: var(--ph-brand-dark); margin: 0; }
.ph-price-card__list { margin: 0; padding-left: 1.1rem; color: var(--ph-ink-soft); font-size: var(--ph-fs-200); }
.ph-price-card__cta { margin: auto 0 0; }

/* Testimonials */
/* HOME-TESTIMONIALS-001 — tarjetas: avatar circular + caja gris + nombre + zona */
.ph-testimonials {
  display: grid; gap: 40px; grid-template-columns: 1fr;
  margin-top: 52px;
}
.ph-testimonial {
  position: relative; margin: 0; background: none; border: 0; padding: 48px 0 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
/* placeholder circular temporal (mismo tamaño en las 3 tarjetas) */
.ph-testimonial__avatar {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 96px; height: 96px; border-radius: 50%;
  background: #e4e4e4;              /* neutro, sin caras ni iniciales */
  z-index: 1;
}
/* caja gris clara con el texto de la opinión (solapa bajo el círculo).
   Las tres cajas se igualan en altura y el texto queda centrado verticalmente. */
.ph-testimonial__box {
  background: #f3f3f3; border-radius: 18px;
  padding: 62px 24px 28px; width: 100%;
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
}
.ph-testimonial__text { margin: 0; text-align: center; color: var(--ph-ink); }
.ph-testimonial__meta { display: flex; flex-direction: column; gap: 2px; margin-top: 16px; align-items: center; }
.ph-testimonial__author { font-weight: 700; }
.ph-testimonial__zone { color: var(--ph-ink-soft); font-size: var(--ph-fs-200); }

/* FAQ */
.ph-faq { display: grid; gap: var(--ph-space-2); }
.ph-faq__item { border: 1px solid var(--ph-line); border-radius: var(--ph-radius); background: var(--ph-bg); padding: 0; }
.ph-faq__q { cursor: pointer; padding: var(--ph-space-4) var(--ph-space-5); font-weight: 700; list-style: none; position: relative; padding-right: 3rem; }
.ph-faq__q::-webkit-details-marker { display: none; }
.ph-faq__q::after { content: "+"; position: absolute; right: var(--ph-space-5); top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--ph-brand-dark); line-height: 1; }
.ph-faq__item[open] .ph-faq__q::after { content: "\2212"; }
.ph-faq__a { padding: 0 var(--ph-space-5) var(--ph-space-5); color: var(--ph-ink-soft); }

/* CTA */
.ph-cta { background: var(--ph-bg-dark); color: #fff; padding: var(--ph-section-y) 0; }
.ph-cta__inner { text-align: center; }
.ph-cta__title { color: #fff; font-size: var(--ph-fs-600); }
.ph-cta__text { color: rgba(255,255,255,.85); max-width: 640px; margin: 0 auto var(--ph-space-5); }
.ph-cta__actions { display: flex; flex-wrap: wrap; gap: var(--ph-space-3); justify-content: center; margin: 0; }

/* Form */
.ph-form { display: grid; gap: var(--ph-space-4); }
.ph-form__row { margin: 0; display: flex; flex-direction: column; gap: var(--ph-space-1); }
.ph-form label { font-weight: 600; font-size: var(--ph-fs-200); }
.ph-form input[type="text"], .ph-form input[type="tel"], .ph-form input[type="email"],
.ph-form select, .ph-form textarea {
  width: 100%; padding: .7rem .8rem; font: inherit; font-size: var(--ph-fs-300);
  border: 1px solid var(--ph-line); border-radius: var(--ph-radius); background: var(--ph-bg); color: var(--ph-ink);
  min-height: 44px;
}
.ph-form input:focus, .ph-form select:focus, .ph-form textarea:focus { border-color: var(--ph-brand); outline: none; box-shadow: 0 0 0 3px rgba(242,106,27,.18); }
.ph-form__check { display: flex; gap: var(--ph-space-2); align-items: flex-start; margin: 0; }
.ph-form__check input { width: 20px; height: 20px; margin-top: .25rem; flex: 0 0 auto; }
.ph-form__check label { font-weight: 400; font-size: var(--ph-fs-200); }
.ph-req { color: var(--ph-error); }
.ph-form__notice { margin: 0; font-size: var(--ph-fs-200); }
.ph-form__notice.is-ok { color: var(--ph-success); }
.ph-form__notice.is-err { color: var(--ph-error); }

/* Contacto */
.ph-contact { display: grid; gap: var(--ph-space-6); grid-template-columns: 1fr; }

/* Honeypot (D-018): oculto visualmente pero presente en el DOM para bots.
   No se usa display:none para no delatar el campo. */
.ph-form__hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; margin: 0; }

.ph-form__notice--visible { padding: var(--ph-space-3) var(--ph-space-4); border: 1px solid var(--ph-line); border-left: 3px solid var(--ph-brand); border-radius: var(--ph-radius); background: var(--ph-bg-alt); color: var(--ph-ink); }

.ph-contact__response { color: var(--ph-ink-soft); }
.ph-contact__maplink { margin-top: var(--ph-space-3); }
.ph-map-placeholder {
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1px dashed var(--ph-line); border-radius: var(--ph-radius-lg); background: var(--ph-bg-alt);
  color: var(--ph-ink-soft); padding: var(--ph-space-4);
}
.ph-map-placeholder__text { margin: 0; font-size: var(--ph-fs-200); }
.ph-contact__info { list-style: none; padding: 0; margin: var(--ph-space-4) 0 0; display: grid; gap: var(--ph-space-1); font-size: var(--ph-fs-200); }

/* Legal */
.ph-legal { background: var(--ph-bg); }
.ph-content--legal { max-width: 100%; }
.ph-content--legal h2 { font-size: var(--ph-fs-500); margin-top: var(--ph-space-6); }
.ph-content--legal h3 { font-size: var(--ph-fs-400); margin-top: var(--ph-space-5); }

/* 404 */
.ph-404 { text-align: center; }
.ph-404__title { font-size: var(--ph-fs-700); }
.ph-404__text { color: var(--ph-ink-soft); }
.ph-404__phone { margin-top: var(--ph-space-4); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
/* GLOBAL-FOOTER-001: pie con fondo BLANCO (antes oscuro) */
.ph-footer { background: #ffffff; color: var(--ph-ink-soft); border-top: 1px solid var(--ph-line); padding-top: var(--ph-space-7); }
.ph-footer__grid { display: grid; gap: var(--ph-space-6); grid-template-columns: 1fr; }
.ph-footer__title { color: var(--ph-ink); font-size: var(--ph-fs-300); font-weight: 700; line-height: var(--ph-lh-tight); margin: 0 0 var(--ph-space-3); }
.ph-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ph-space-1); font-size: var(--ph-fs-200); }
.ph-footer__list a { color: var(--ph-ink-soft); }
.ph-footer__list a:hover, .ph-footer__list a:focus-visible { color: #fe8d1f; }
/* logo del pie: imagen, NO clicable, sin deformar */
.ph-footer__logoimg { display: block; width: 100%; max-width: 144px; height: auto; margin: 0 auto; object-fit: contain; }  /* R1: 60% del tamaño anterior (240px) */
/* R1: bloque de dirección en 2 líneas, con separación interna más pequeña que el gap normal */
.ph-footer__address span { display: block; }
.ph-footer__address span + span { margin-top: 3px; }

/* --- navegación vertical del pie (4 items + submenú de servicios) --- */
.ph-footer__col--nav { justify-self: end; }                       /* R1: la columna se pega al borde derecho del contenedor */
.ph-fnav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; text-align: right; }  /* R1: items alineados a la derecha */
.ph-fnav__link { text-align: right; }
.ph-fnav__link {
  display: inline-block; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; font-size: var(--ph-fs-200); font-weight: 700; color: var(--ph-ink); text-decoration: none;
  transition: color var(--ph-transition);
}
.ph-fnav__link:hover, .ph-fnav__link:focus-visible, .ph-fnav__item--sub.is-open .ph-fnav__link { color: #fe8d1f; }
.ph-fdrop { position: relative; }
.ph-footer__bottom {
  /* Barra legal + copyright con fondo NEGRO (petición del owner). El resto del pie sigue en blanco. */
  background: #000000; color: rgba(255,255,255,.82);
  margin-top: var(--ph-space-7); border-top: 0; padding: var(--ph-space-4) 0;
}
.ph-legal-links a:hover, .ph-legal-links a:focus-visible, .ph-footer__bottom a:hover, .ph-footer__bottom a:focus-visible { color: #fe8d1f; }
.ph-footer__bottom-inner { display: flex; flex-wrap: wrap; gap: var(--ph-space-3); align-items: center; justify-content: space-between; font-size: calc(var(--ph-fs-100) * 0.8); }   /* -20% (13px → 10.4px) */
.ph-legal-links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--ph-space-4); margin: 0; padding: 0; }
.ph-legal-links a { color: rgba(255,255,255,.82); }
.ph-copyright { margin: 0; color: rgba(255,255,255,.6); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablet >= 768 */
@media (min-width: 768px) {
  .ph-section { padding: var(--ph-section-y) 0; }
  .ph-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .ph-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .ph-service-cards { grid-template-columns: repeat(2, 1fr); }
  .ph-decorative-cards { grid-template-columns: repeat(2, 1fr); }
  .ph-steps { grid-template-columns: repeat(2, 1fr); }
  .ph-footer__grid { grid-template-columns: 1.2fr .8fr 1fr; }
  .ph-footer__col--brand { text-align: center; align-self: start; }
  .ph-image-text__grid { grid-template-columns: 1fr 1fr; align-items: center; }
  .ph-contact { grid-template-columns: 1fr 1fr; align-items: start; }
  .ph-testimonials { grid-template-columns: repeat(2, 1fr); }
  .ph-hero__title { font-size: var(--ph-fs-800); }
}

/* Desktop >= 1024 — navegacion horizontal, sin burger */
@media (min-width: 1024px) {
  .ph-burger { display: none; }
  /* Desktop: logo izquierda / navegación centro / teléfono derecha */
  .ph-header__inner { flex-direction: row; align-items: center; gap: var(--ph-space-5); padding-inline: 30px; padding-block: 0; max-width: 1280px; }
  .ph-header__brand { order: 0; margin-right: 0; }
  .ph-header__logo { width: 250px; height: 56px; }
  .ph-header__logo img { object-position: left center; }
  .ph-nav { display: flex; flex: 1 1 auto; justify-content: center; width: auto; flex-basis: auto; order: 0; border-top: 0; padding: 0; margin-left: 0; }
  .ph-menu { flex-direction: row; align-items: center; gap: 32px; justify-content: center; }
  .ph-menu > li { position: relative; }
  .ph-menu a, .ph-dropdown__toggle { padding: .5rem 0; width: auto; }
  .ph-header__actions { order: 0; width: auto; flex-basis: auto; justify-content: flex-end; margin-left: 0; }
  .ph-header__phone { width: auto; max-width: none; padding: 0 26px; min-height: 54px; }
  .ph-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .ph-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .ph-service-cards { grid-template-columns: repeat(3, 1fr); }
  .ph-decorative-cards { grid-template-columns: repeat(3, 1fr); }
  .ph-steps { grid-template-columns: repeat(4, 1fr); }
  .ph-testimonials { grid-template-columns: repeat(3, 1fr); }

  /* Hover/focus en nav: acento #fe8d1f */
  .ph-menu a:hover, .ph-dropdown__toggle:hover { background: transparent; color: #fe8d1f; }
  .ph-menu a:focus-visible, .ph-dropdown__toggle:focus-visible { color: #fe8d1f; }
  .ph-dropdown:hover > .ph-dropdown__toggle,
  .ph-dropdown:focus-within > .ph-dropdown__toggle { color: #fe8d1f; }

  /* Dropdown desktop: zona hover contigua (trigger + panel) + transición suave */
  .ph-submenu {
    position: absolute; top: 100%; left: 0; min-width: 300px; z-index: 20;
    background: #333333; border: 0; border-radius: var(--ph-radius);
    box-shadow: var(--ph-shadow-lg); padding: 6px 0; margin: 0;
    display: block; visibility: hidden; opacity: 0; transform: translateY(6px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  }
  /* puente invisible: evita que el panel se cierre al mover el cursor trigger -> panel */
  .ph-submenu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
  .ph-dropdown:hover .ph-submenu,
  .ph-dropdown:focus-within .ph-submenu,
  .ph-submenu.is-open {
    visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto;
  }
  /* items del panel: texto claro, una línea, divisor fino */
  .ph-submenu a {
    display: block; width: 100%; color: #f2f2f2; font-weight: 500; background: transparent;
    padding: 12px 20px; border-radius: 0; border-bottom: 1px solid rgba(255, 255, 255, .16);
    white-space: nowrap;
  }
  .ph-submenu li:last-child a { border-bottom: 0; }
  .ph-submenu a:hover, .ph-submenu a:focus-visible { background: rgba(255, 255, 255, .07); color: #fe8d1f; }
}

/* Large >= 1280 */
@media (min-width: 1280px) {
  .ph-container { padding-left: var(--ph-space-5); padding-right: var(--ph-space-5); }
}

/* ---------- CONTENIDO LARGO (homepage ACTIVE) ---------- */
.ph-section__text { max-width: 78ch; margin-bottom: var(--ph-space-4); color: var(--ph-ink); line-height: var(--ph-lh-body); }
.ph-section__text:last-child { margin-bottom: 0; }
.ph-section__text strong { font-weight: 700; }

.ph-content { display: grid; gap: var(--ph-space-6); grid-template-columns: 1fr; margin-top: var(--ph-space-6); }
.ph-content__item { border-top: 2px solid var(--ph-line); padding-top: var(--ph-space-4); }
.ph-content__title { font-size: var(--ph-fs-500); line-height: var(--ph-lh-tight); margin-bottom: var(--ph-space-2); }
.ph-content__text { color: var(--ph-ink-soft); line-height: var(--ph-lh-body); }
.ph-content__text strong { color: var(--ph-ink); font-weight: 700; }

.ph-pending { color: var(--ph-ink-soft); font-style: italic; margin-top: var(--ph-space-4); }

/* Listas de contenido ACTIVE */
.ph-list { margin: 0 0 var(--ph-space-5); padding-left: 1.25rem; display: grid; gap: var(--ph-space-2); color: var(--ph-ink-soft); line-height: var(--ph-lh-body); }
.ph-list li::marker { color: var(--ph-brand); }
.ph-list strong { color: var(--ph-ink); }
.ph-content__item .ph-list { margin-top: var(--ph-space-2); margin-bottom: 0; }
.ph-content__item .ph-list:last-child, .ph-section__text + .ph-list { margin-bottom: 0; }

/* ---------- PRECIOS ---------- */
.ph-price { margin-top: var(--ph-space-6); }
.ph-price__table { width: 100%; border-collapse: collapse; background: var(--ph-bg); }
.ph-price__table th,
.ph-price__table td { padding: var(--ph-space-3) var(--ph-space-4); border-bottom: 1px solid var(--ph-line); text-align: left; vertical-align: top; }
.ph-price__table th { font-size: var(--ph-fs-200); text-transform: uppercase; letter-spacing: .04em; color: var(--ph-ink-soft); }
.ph-price__table td:nth-child(2) { white-space: nowrap; font-weight: 700; }

@media (min-width: 768px) {
  .ph-content { grid-template-columns: repeat(2, 1fr); }
}

/* D-013: en mobile el precio se muestra como tarjetas verticales, sin scroll horizontal */
@media (max-width: 767px) {
  .ph-price__table,
  .ph-price__table tbody,
  .ph-price__table tr,
  .ph-price__table td { display: block; width: 100%; }
  .ph-price__table thead { display: none; }
  .ph-price__table tr { border: 1px solid var(--ph-line); border-radius: var(--ph-radius); padding: var(--ph-space-3) var(--ph-space-4); margin-bottom: var(--ph-space-4); background: var(--ph-bg); }
  .ph-price__table tr:last-child { margin-bottom: 0; }
  .ph-price__table td { border: none; padding: var(--ph-space-1) 0; white-space: normal; }
  .ph-price__table td::before { content: attr(data-label); display: block; font-size: var(--ph-fs-100); text-transform: uppercase; letter-spacing: .04em; color: var(--ph-ink-soft); margin-bottom: 2px; }
  .ph-price__table td:nth-child(2) { white-space: normal; }
  .ph-price__table tr { overflow-wrap: anywhere; }
}

/* Reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}


/* ==========================================================================
   HERO DE PORTADA (homepage) — fondo placeholder + 2 columnas (texto + form)
   Estructura lista para futura rotación de fotografías: cada slide es
   .ph-herohome__bg-slide. Ahora solo hay un placeholder sólido.
   ========================================================================== */
.ph-herohome {
  position: relative; overflow: hidden;
  min-height: 680px; display: flex; align-items: center;
  padding: 40px 0;
}
.ph-herohome__bg { position: absolute; inset: 0; z-index: 0; }
.ph-herohome__bg-slide { position: absolute; inset: 0; background: #d9d9d9; }
.ph-herohome__inner {
  position: relative; z-index: 1; width: 100%;
  /* % de cada pista se calcula sobre (ancho − gap); con gap 48px estos valores
     producen ~59% / ~33% del ancho interior (spec: 58–60% / 32–34%) */
  display: grid; grid-template-columns: 61.4% 34.4%; gap: 48px;
  align-items: start; justify-content: space-between;
}
.ph-herohome__left {
  background: rgba(51, 51, 51, .85); color: #fff;
  padding: var(--ph-space-6); border-radius: var(--ph-radius-lg);
}
.ph-herohome__title { color: #fff; margin: 0 0 var(--ph-space-4); font-size: var(--ph-fs-600); line-height: 1.15; }
.ph-herohome__text p { color: #f4f4f4; margin: 0 0 var(--ph-space-3); font-size: var(--ph-fs-200); line-height: 1.65; }
.ph-herohome__text p:last-child { margin-bottom: var(--ph-space-5); }
.ph-herohome__cta { margin: 0; }

/* Botón teléfono del hero: naranja + borde blanco fino */
.ph-btn--hero-phone {
  display: inline-flex; align-items: center; gap: .6rem;
  background: #fe8d1f; color: #fff; font-weight: 700;
  font-size: calc(var(--ph-fs-300) * 1.2);
  border: 2px solid #ffffff; border-radius: var(--ph-radius);
  padding: 0 24px; min-height: 56px; text-decoration: none;
}
.ph-btn--hero-phone:hover, .ph-btn--hero-phone:focus-visible { background: #000; border-color: #000; color: #fff; }

/* Panel del formulario (hero + contacto): panel gris translúcido compacto */
.ph-herohome__right { align-self: start; }
.ph-form-card {
  background: rgba(51, 51, 51, .85); color: #fff;
  padding: var(--ph-space-5); border-radius: var(--ph-radius-lg);
}
.ph-form-card__title { color: #fff; margin: 0 0 var(--ph-space-4); font-size: var(--ph-fs-400); font-weight: 700; line-height: 1.3; }
.ph-form-card .ph-form__check label { color: #f2f2f2; }
.ph-form-card .ph-form__check a { color: #ffb066; }

/* Placeholder claro y accesible (valor único para todos los campos) */
.ph-form input::placeholder, .ph-form textarea::placeholder { color: #bfbfbf; opacity: 1; }

/* Campos compactos sin etiquetas externas */
.ph-form__row input, .ph-form__row textarea { width: 100%; }
.ph-form__row textarea { min-height: 120px; resize: vertical; }

/* Botón "Enviar" del formulario */
.ph-form__submit .ph-btn { background: #fe8d1f; border-color: #fe8d1f; color: #fff; }
.ph-form__submit .ph-btn:hover { background: #000; border-color: #000; }

/* Desktop: botón Enviar casi a todo el ancho del panel del formulario,
   centrado y con pequeños márgenes simétricos (móvil conserva width:100%). */
.ph-form__submit { margin: 0; }
.ph-form__submit .ph-btn { display: flex; justify-content: center; width: calc(100% - 24px); margin-inline: auto; }

/* Header: borde negro fino en el botón de teléfono (solo borde) */
.ph-header__phone { border-color: #000000; }

/* Móvil: una columna — primero texto, después formulario */
@media (max-width: 1023px) {
  .ph-herohome { min-height: 0; padding: var(--ph-space-5) 0; }
  .ph-herohome__inner { grid-template-columns: 1fr; gap: 28px; }
  .ph-herohome__left, .ph-form-card { padding: var(--ph-space-4); }
  .ph-herohome__title { font-size: var(--ph-fs-500); }
  .ph-form__submit .ph-btn { width: 100%; }
}


/* ==========================================================================
   HOME-CONDITIONS-001 — bloque solo texto (H2 + 6 subsecciones H3/p)
   Sin tarjetas, sin bordes, sin fondos, sin iconos. Solo tipografía.
   ========================================================================== */
.ph-section-heading--center { text-align: center; margin-inline: auto; }
.ph-section-heading--center .ph-section-heading__title { margin-inline: auto; text-align: center; }

.ph-conditions {
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: 44px;  /* spec: 36–48px */
  row-gap: 60px;     /* spec: 56–64px entre filas */
  margin-top: 52px;  /* spec: 48–56px tras el H2 */
}
.ph-conditions__item { border: 0; background: none; padding: 0; text-align: left; }
.ph-conditions__title { text-align: center; font-size: var(--ph-fs-400); line-height: var(--ph-lh-tight); margin: 0 0 var(--ph-space-3); color: var(--ph-ink); }
.ph-conditions__text { margin: 0; color: var(--ph-ink-soft); line-height: var(--ph-lh-body); }

/* Tablet: 2 columnas x 3 filas (mismo orden de origen) */
@media (max-width: 1023px) and (min-width: 700px) {
  .ph-conditions { grid-template-columns: repeat(2, 1fr); column-gap: 36px; row-gap: 48px; margin-top: 44px; }
}
/* Móvil: 1 columna x 6 */
@media (max-width: 699px) {
  .ph-conditions { grid-template-columns: 1fr; row-gap: 40px; margin-top: 36px; }
  .ph-conditions__title { text-align: center; }
}


/* ==========================================================================
   HOME-SERVICES-001 — 2 grupos × 6 tarjetas estáticas (SIN enlaces)
   Shell gris claro + imagen placeholder 4:3 + H3 + párrafo. Solo texto.
   ========================================================================== */
.ph-scards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px;         /* spec 24–32px */
  margin-top: 52px;  /* H2 → grid: 48–56px */
}
.ph-scard {
  background: #f3f3f3;               /* spec #f2f2f2–#f5f5f5 */
  border: 0;                         /* sin borde pesado */
  border-radius: 18px;               /* spec 16–20px */
  padding: 18px;                     /* spec 16–20px */
  display: flex; flex-direction: column;
}
.ph-scard__media {
  aspect-ratio: 4 / 3;
  background: #e4e4e4;               /* placeholder sólido (sin fotos reales) */
  border-radius: 14px;               /* spec 12–16px */
  margin-bottom: 18px;               /* imagen → H3: 16–20px */
}
.ph-scard__body { display: flex; flex-direction: column; }
.ph-scard__title {
  text-align: center; font-size: var(--ph-fs-400); line-height: var(--ph-lh-tight);
  margin: 0 0 14px; color: var(--ph-ink);   /* H3 → párrafo: 12–16px */
}
.ph-scard__text { text-align: left; margin: 0; color: var(--ph-ink-soft); font-size: var(--ph-fs-200); line-height: var(--ph-lh-body); }
.ph-scard__text strong { color: var(--ph-ink); }

/* Tablet: 2 columnas × 3 filas por grupo */
@media (max-width: 1023px) and (min-width: 700px) {
  .ph-scards { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
/* Móvil: 1 columna × 6 */
@media (max-width: 699px) {
  .ph-scards { grid-template-columns: 1fr; gap: 20px; margin-top: 36px; }
}


/* ==========================================================================
   HOME-PROBLEMS-001 — 8 puntos: icono circular + H3 + párrafo
   Sin tarjetas, sin bordes, sin fondos, sin sombras, sin enlaces.
   ========================================================================== */
.ph-problems {
  display: grid; grid-template-columns: repeat(2, 1fr);   /* desktop: 2 × 4 */
  column-gap: 72px;   /* spec 64–80px */
  row-gap: 64px;      /* spec 56–72px */
  margin-top: 52px;   /* H2 → primera fila: 48px aprox (spec 40–56px) */
}
.ph-problem { display: flex; align-items: flex-start; gap: 19px; }  /* spec 18–20px */
.ph-problem__icon {
  flex: 0 0 auto; width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
}
/* PALMA-HOME-PROBLEMS-ICONS-001: icono WebP cuadrangular (fondo naranja propio, pictograma
   blanco, 1:1). object-fit: contain evita estirado y recorte del pictograma blanco. */
.ph-problem__icon img {
  display: block; width: 40px; height: 40px; object-fit: contain;
}
/* Respaldo: si algún día no hubiera fichero, el pictograma SVG conserva el círculo naranja. */
.ph-problem__icon svg {
  width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: #fe8d1f;
  box-sizing: border-box;
}
.ph-problem__body { display: block; }
.ph-problem__title { text-align: left; font-size: var(--ph-fs-400); line-height: var(--ph-lh-tight); margin: 0 0 10px; color: var(--ph-ink); }
.ph-problem__text { text-align: left; margin: 0; color: var(--ph-ink-soft); font-size: var(--ph-fs-200); line-height: var(--ph-lh-body); }

/* Tablet: se mantienen 2 columnas con menos separación */
@media (max-width: 1023px) {
  .ph-problems { column-gap: 40px; row-gap: 48px; }
}
/* Móvil: 1 columna × 8, el icono sigue a la izquierda */
@media (max-width: 699px) {
  .ph-problems { grid-template-columns: 1fr; row-gap: 36px; margin-top: 36px; }
  .ph-problem { gap: 16px; }
}


/* ==========================================================================
   HOME-PRICING-001 — intro (1 párrafo) → tabla → 3 párrafos en columnas
   Solo texto: sin tarjetas, bordes, cajas grises, iconos ni H3.
   ========================================================================== */
.ph-intro { max-width: 850px; margin-inline: auto; }   /* spec R2: ≈850px, contenedor centrado */
/* El <p> hereda max-width:78ch del estilo global, lo que lo dejaba anclado a la izquierda
   dentro de la caja (centro del <p> 68px a la izquierda del centro de la sección).
   Se neutraliza SOLO dentro del intro del bloque de precios. */
.ph-intro .ph-section__text {
  max-width: none;
  margin-inline: auto;
  text-align: center;
  margin-bottom: 0;
}
.ph-intro + .ph-price { margin-top: 44px; }            /* intro → tabla: 40–48px */
.ph-lower {
  display: grid; grid-template-columns: repeat(3, 1fr);  /* desktop: 3 columnas iguales */
  gap: 36px;                                             /* spec 32–40px */
  margin-top: 52px;                                      /* tabla → grupo inferior: 48–56px */
  align-items: start;
}
.ph-lower__text { margin: 0; text-align: left; color: var(--ph-ink-soft); font-size: var(--ph-fs-200); line-height: var(--ph-lh-body); }

/* Tablet: 2 + 1, conservando el orden de origen */
@media (max-width: 1023px) and (min-width: 700px) {
  .ph-lower { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
/* Móvil: una columna, en orden */
@media (max-width: 699px) {
  .ph-lower { grid-template-columns: 1fr; gap: 28px; margin-top: 44px; }
  .ph-intro .ph-section__text { text-align: left; }   /* en móvil el párrafo centrado se lee peor */
}


/* ==========================================================================
   HOME-PROCESS-001 — "Cómo trabajamos": imagen izquierda + 4 pasos derecha
   Sin tarjetas, bordes, cajas grises, iconos, CTAs ni enlaces.
   ========================================================================== */
.ph-process {
  display: grid;
  grid-template-columns: 40% 1fr;      /* spec: imagen 38–42% / texto 58–62% */
  column-gap: 56px;                    /* spec 48–64px */
  align-items: start;                  /* alineación superior */
  margin-top: 48px;
}
.ph-process__media {
  aspect-ratio: 4 / 5;                 /* vertical; la altura deriva del ancho */
  background: #e4e4e4;                 /* placeholder sólido (sin foto real) */
  border-radius: var(--ph-radius-lg);
  width: 100%;
}
.ph-process__steps { display: block; }  /* sin cajas: solo H3 + párrafo */
.ph-process__step + .ph-process__step { margin-top: 36px; }   /* spec 32–40px entre pasos */
.ph-process__title { text-align: left; font-size: var(--ph-fs-400); line-height: var(--ph-lh-tight); margin: 0 0 12px; color: var(--ph-ink); }  /* H3 → párrafo 10–14px */
.ph-process__text { text-align: left; margin: 0; color: var(--ph-ink-soft); font-size: var(--ph-fs-200); line-height: var(--ph-lh-body); }

/* Tablet: se mantienen 2 columnas, con separación algo menor */
@media (max-width: 1023px) and (min-width: 768px) {
  .ph-process { grid-template-columns: 40% 1fr; column-gap: 36px; }
}

/* Móvil (<768px): la imagen se OCULTA por completo y los pasos van en una columna */
@media (max-width: 767px) {
  .ph-process { grid-template-columns: 1fr; column-gap: 0; row-gap: 0; margin-top: 36px; }
  .ph-process__media { display: none; }
  .ph-process__step + .ph-process__step { margin-top: 30px; }
}


/* ==========================================================================
   HOME-CHOOSING-MAINTENANCE-001 — 4 elementos [imagen 3:2 | H3 + párrafo]
   Sin card shells: solo imagen, whitespace y estructura de grid.
   ========================================================================== */
.ph-choose {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* desktop: 2 × 2 */
  column-gap: 56px;                        /* spec 48–64px */
  row-gap: 52px;                           /* R1: 48–56px (bloque más compacto) */
  margin-top: 52px;                        /* spec H2 → primera fila 48–56px */
}
.ph-choose__item { display: grid; grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr); column-gap: 20px; align-items: start; }  /* R1: imagen 38–40% / texto 60–62% / gap 20px */
.ph-choose__item { background: none; border: 0; box-shadow: none; }   /* sin card shell */
.ph-choose__media {
  aspect-ratio: 5 / 4;             /* R2: imagen más alta; la altura deriva del ancho (sin altura fija) */
  background: #e4e4e4;             /* placeholder sólido */
  border-radius: var(--ph-radius-lg);
  width: 100%;
}
.ph-choose__body { display: block; }
.ph-choose__title { text-align: left; font-size: var(--ph-fs-400); line-height: var(--ph-lh-tight); margin: 0 0 12px; color: var(--ph-ink); }
.ph-choose__text { text-align: left; margin: 0; color: var(--ph-ink-soft); font-size: var(--ph-fs-200); line-height: var(--ph-lh-body); }

/* Tablet: 1 columna × 4, manteniendo la composición horizontal imagen|texto */
@media (max-width: 1023px) {
  .ph-choose { grid-template-columns: 1fr; row-gap: 48px; }
  .ph-choose__item { grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr); column-gap: 20px; }   /* tablet: misma proporción 40/60 */
}

/* Móvil (<768px): 1 columna × 4, imagen ARRIBA del texto (no se oculta) */
@media (max-width: 767px) {
  .ph-choose { row-gap: 44px; margin-top: 36px; }
  .ph-choose__item { grid-template-columns: 1fr; row-gap: 0; }
  .ph-choose__media { margin-bottom: 18px; }        /* imagen → H3: 16–20px */
  .ph-choose__title { margin-bottom: 12px; }        /* H3 → párrafo: 10–14px */
}


/* ==========================================================================
   HOME-PROPERTIES-001 — 6 elementos con alternancia [imagen|texto] + párrafo final
   Placeholders sólidos 4:3. Sin enlaces, botones, iconos ni negritas.
   ========================================================================== */
.ph-prop {
  display: grid;
  grid-template-columns: 1fr;              /* R1: 6 filas completas (1 elemento por fila) */
  row-gap: 64px;                           /* spec R1: 56–72px */
  margin-top: 52px;
}
.ph-prop__item {
  display: grid;
  grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr);   /* imagen 44% / texto 56% */
  column-gap: 40px;                                             /* separación cómoda entre columnas */
  align-items: start;                                           /* imagen y texto alineados arriba */
}
/* alternancia: posiciones pares → texto primero (columna ancha), imagen a la derecha.
   Se invierte el ORDEN DE COLUMNAS (no solo el order) para que el placeholder conserve
   EXACTAMENTE el mismo tamaño que en los elementos no invertidos. */
.ph-prop__item--flip { grid-template-columns: minmax(0, 0.56fr) minmax(0, 0.44fr); }
.ph-prop__item--flip .ph-prop__media { order: 2; }
.ph-prop__item--flip .ph-prop__body  { order: 1; }
.ph-prop__media {
  aspect-ratio: 16 / 9;             /* R2: más bajo (≈ −25% de altura); altura derivada del ancho */
  background: #e4e4e4;              /* placeholder sólido, igual que en los demás bloques */
  border-radius: var(--ph-radius-lg);
  width: 100%;
}
.ph-prop__body { display: block; }
.ph-prop__title { text-align: left; font-size: var(--ph-fs-400); line-height: var(--ph-lh-tight); margin: 0 0 12px; color: var(--ph-ink); }
.ph-prop__text { text-align: left; margin: 0; color: var(--ph-ink-soft); font-size: var(--ph-fs-200); line-height: var(--ph-lh-body); }

/* párrafo final: sin H3, sin imagen, centrado y con ancho de lectura limitado */
.ph-prop__outro {
  grid-column: 1 / -1;                 /* ocupa el ancho completo del grid */
  max-width: 820px;
  margin: 64px auto 0;                 /* separación vertical amplia respecto a los 6 elementos */
  text-align: center;
  color: var(--ph-ink-soft);
  font-size: var(--ph-fs-200);
  line-height: var(--ph-lh-body);
}

/* Tablet: una columna, conservando la composición horizontal imagen|texto */
@media (max-width: 1023px) {
  .ph-prop { row-gap: 52px; }        /* sigue siendo 1 elemento por fila (nunca 2 items por fila) */
}
/* Móvil: una columna, imagen ARRIBA del texto, sin alternancia; párrafo final a la izquierda */
@media (max-width: 767px) {
  .ph-prop { row-gap: 40px; margin-top: 36px; }
  .ph-prop__item { grid-template-columns: 1fr; row-gap: 0; }
  .ph-prop__item--flip .ph-prop__media { order: 0; }
  .ph-prop__item--flip .ph-prop__body  { order: 0; }
  .ph-prop__media { margin-bottom: 18px; }
  .ph-prop__outro { max-width: none; margin-top: 44px; text-align: left; }
}


/* ==========================================================================
   HOME-TESTIMONIALS-001 — ajustes móviles (<768px)
   (al final del archivo para que gane en cascada sobre las reglas base)
   ========================================================================== */
@media (max-width: 767px) {
  .ph-testimonials { gap: 32px; margin-top: 36px; }
  .ph-testimonial { padding-top: 40px; }
  .ph-testimonial__avatar { width: 80px; height: 80px; }
  .ph-testimonial__box { padding: 52px 18px 22px; }
}


/* ==========================================================================
   HOME-FINAL-CTA-001-R1 — botón del CTA final
   Reutiliza el componente de la botonera superior (fondo naranja, borde negro,
   radio, tipografía, altura, hover) y añade una línea blanca INTERIOR muy fina
   (1px) — más delgada que el borde blanco de 2px del botón del hero.
   ========================================================================== */
.ph-cta__phone { box-shadow: inset 0 0 0 1px #ffffff; }


/* ==========================================================================
   GLOBAL-FOOTER-001 — submenú de Servicios en el pie
   Desktop (>=1024): panel flotante que se abre HACIA ARRIBA + puente invisible
   para que el puntero pueda pasar del trigger al panel sin que se cierre.
   ========================================================================== */
@media (min-width: 1024px) {
  .ph-fsub {
    position: absolute; bottom: 100%; right: 0; left: auto; min-width: 220px; z-index: 20;   /* R1: anclado a la derecha del trigger */
    list-style: none; margin: 0 0 10px; padding: 6px 0;
    background: #333333; border-radius: var(--ph-radius); box-shadow: var(--ph-shadow-lg);
    visibility: hidden; opacity: 0; transform: translateY(6px); pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  }
  /* puente: cubre el hueco entre el trigger y el panel */
  .ph-fsub::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }
  .ph-fdrop:hover .ph-fsub,
  .ph-fdrop:focus-within .ph-fsub,
  .ph-fsub.is-open { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; }
  .ph-fsub li + li { border-top: 1px solid rgba(255,255,255,.16); }
  .ph-fsub a { display: block; padding: 10px 20px; color: #f2f2f2; font-size: var(--ph-fs-200); text-decoration: none; white-space: nowrap; }
  .ph-fsub a:hover, .ph-fsub a:focus-visible { color: #fe8d1f; }
}

/* Móvil/tablet: el panel va en el flujo normal, asociado al trigger.
   Al abrirse se muestra ARRIBA del trigger (column-reverse mantiene el orden del DOM). */
@media (max-width: 1023px) {
  /* El panel ya NO va en el flujo: se posiciona SOBRE el trigger, así el cuerpo de la
     página no cambia de altura ni se desplaza al abrirlo. */
  .ph-fnav__item--sub .ph-fdrop { position: relative; }
  .ph-fsub {
    position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
    list-style: none; margin: 0; padding: 6px 0;
    width: max-content; max-width: calc(100vw - 24px);   /* ancho según el texto, sin cortarlo */
    background: #333333; border-radius: var(--ph-radius); box-shadow: var(--ph-shadow-lg); z-index: 30;
    visibility: hidden; opacity: 0; pointer-events: none;
    transition: opacity 180ms ease, visibility 180ms;
  }
  /* los nombres de servicio van en UNA sola línea */
  .ph-fsub a { white-space: nowrap; }
  .ph-fsub li + li { border-top: 1px solid rgba(255,255,255,.16); }
  .ph-fsub a { display: block; padding: 9px 16px; color: #f2f2f2; font-size: var(--ph-fs-200); text-decoration: none; }
  .ph-fsub a:hover, .ph-fsub a:focus-visible { color: #fe8d1f; }
  /* Garantía de dirección: el contenedor del trigger es una columna flex y el panel
     lleva order:-1, de modo que el panel queda SIEMPRE por encima de "Servicios"
     aunque el orden del marcado fuese el antiguo (protección contra HTML en caché). */
  /* el panel es absoluto: no necesita reordenar el DOM ni invertir el orden */
  /* (el estado abierto se define arriba con visibility/opacity) */
  .ph-fnav__item--sub.is-open .ph-fsub {
    visibility: visible; opacity: 1; pointer-events: auto;
  }
}


/* ==========================================================================
   GLOBAL-FOOTER-001-R2 — pie en móvil
   Apilado estricto (contacto → logo → navegación), todo centrado, y el submenú
   de Servicios sigue apareciendo POR ENCIMA del trigger (flujo normal).
   No afecta a desktop ni a tablet (breakpoint < 768).
   ========================================================================== */
@media (max-width: 767px) {
  .ph-footer__grid { grid-template-columns: 1fr; gap: 36px; }   /* separación entre bloques 36px */
  .ph-footer__col--company,
  .ph-footer__col--brand,
  .ph-footer__col--nav { justify-self: center; text-align: center; width: 100%; }
  .ph-footer__title { text-align: center; }
  .ph-footer__list { justify-items: center; text-align: center; }   /* datos de contacto centrados */
  .ph-footer__address span { text-align: center; }                  /* dirección en 2 líneas, centrada */
  .ph-footer__logoimg { margin-left: auto; margin-right: auto; }    /* logo centrado (tamaño R1 intacto) */
  .ph-fnav__list { align-items: center; text-align: center; }       /* navegación centrada, ya no a la derecha */
  .ph-fnav__link { text-align: center; }
  .ph-fsub { text-align: center; }
  .ph-fsub a { text-align: center; }
  .ph-fnav__item--sub.is-open .ph-fsub { margin-left: auto; margin-right: auto; }
  .ph-fnav__item--sub.is-open .ph-fdrop { align-items: center; }
}


/* ==========================================================================
   GLOBAL-HEADER-001-R1 — cabecera compacta en móvil/tablet (< 1024px)
   Estructura nueva:
     FILA 1:  [ LOGO (izquierda) ]              [ HAMBURGUESA (derecha) ]
     FILA 2:  [ CTA de teléfono, compacta y centrada ]
     FILA 3:  menú principal (sólo cuando se abre; flujo normal, sin drawer)
   No afecta a escritorio (>= 1024px).
   ========================================================================== */
/* --- EXPERIMENTO: una sola fila (logo vertical + teléfono + hamburguesa) --- */
/* la especificidad debe superar a la regla base ".ph-header__logo img" */
.ph-header__logo .ph-header__logo-img--vertical { display: none; }   /* en escritorio no se usa */

@media (max-width: 1023px) {
  .ph-header__logo .ph-header__logo-img--horizontal { display: none; }
  .ph-header__logo .ph-header__logo-img--vertical { display: block; }

  .ph-header__inner {
    position: relative;                  /* referencia para centrar el teléfono */
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 10px;
    padding-block: 12px;
    padding-inline: 16px;                /* logo un poco más a la izquierda (antes 24px) */
  }
  /* una sola fila: logo (izq) · teléfono (CENTRADO en el ancho) · hamburguesa (der) */
  .ph-header__brand { order: 1; justify-content: flex-start; }
  .ph-header__logo { width: 70px; height: 69px; }          /* vertical: otro -30% (100 → 70px) */
  .ph-header__logo img { object-position: center; }
  /* El teléfono se ancla a la PRIMERA fila (top = padding superior, alto = alto del logo),
     así no se mueve cuando se abre el menú y la cabecera crece hacia abajo. */
  .ph-header__actions {
    order: 2; position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
    height: 69px; display: flex; align-items: center; justify-content: center;
    width: auto; flex-basis: auto; margin-left: 0;
  }
  .ph-header__phone { width: fit-content; max-width: none; padding: 0 15px; min-height: 36px; font-size: 13.4px; }
  .ph-header__phone .ph-icon { width: 21px; height: 21px; }
  /* La hamburguesa se separa del borde derecho lo justo para que el hueco
     "teléfono → hamburguesa" sea igual al hueco "logo → teléfono".
     Con el teléfono centrado y el logo de 70px, la posición necesaria es:
        hueco derecho = ancho del logo - ancho de la hamburguesa
     (= 70 - 44 = 26px de margen derecho). Así ambos huecos quedan idénticos. */
  .ph-burger { order: 3; margin-right: calc(70px - 44px - 3px); }   /* 3px más a la derecha, a petición del owner */
  .ph-nav { order: 4; flex-basis: 100%; width: 100%; }
}


/* ==========================================================================
   GLOBAL-FOOTER-001-R8 — el panel de Servicios en tablet
   En 768–1023px el menú del pie está alineado a la DERECHA, así que el panel
   (centrado) se salía por el borde derecho. Aquí se ancla a la derecha del trigger
   y crece hacia la izquierda: nunca sale de la pantalla.
   ========================================================================== */
@media (max-width: 1023px) and (min-width: 768px) {
  .ph-fsub { left: auto; right: 0; transform: none; }
}


/* ==========================================================================
   GLOBAL-FOOTER-001-R10 — el logo del pie, centrado EXACTAMENTE en el medio
   La columna central no está en el centro geométrico (izquierda 435px / centro 290px /
   derecha 363px), así que el logo se ancla al 50% del contenedor del pie.
   Sólo escritorio (>=1024px); en móvil/tablet sigue igual.
   ========================================================================== */
@media (min-width: 1024px) {
  .ph-footer__grid { position: relative; }
  .ph-footer__col--brand {
    position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  }
  /* la columna central sale del flujo, así que la de navegación debe fijarse
     EXPLÍCITAMENTE al tercer carril; si no, el navegador la coloca en el segundo
     y el menú se va hacia el centro. */
  .ph-footer__col--nav { grid-column: 3; }
}


/* ==========================================================================
   GLOBAL-FOOTER-001-R13 — barra legal en móvil: todo centrado y el copyright
   en su propia línea (a petición del owner). Sólo < 768px.
   ========================================================================== */
@media (max-width: 767px) {
  .ph-footer__bottom-inner {
    flex-direction: column;          /* enlaces en una línea y copyright en la siguiente */
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
  }
  .ph-legal-links { justify-content: center; }
  .ph-copyright { text-align: center; }
}


/* ==========================================================================
   GLOBAL-FOOTER-001-R14 — columna izquierda del pie en escritorio: texto -20%
   (título "Palma Hormigon Impreso" + datos: razón social, dirección, teléfono, email).
   Sólo >= 1024px; móvil y tablet mantienen el tamaño anterior.
   ========================================================================== */
@media (min-width: 1024px) {
  .ph-footer__col--company .ph-footer__title { font-size: calc(var(--ph-fs-300) * 0.8); }
  .ph-footer__col--company .ph-footer__list  { font-size: calc(var(--ph-fs-200) * 0.8); }
}


/* ==========================================================================
   SERVICE-EXTERIOR-HERO-001 — hero de página de servicio SIN formulario:
   una única panel de texto ancha (65–75% del área de contenido), alineada a la
   izquierda, con el mismo lenguaje visual que el hero de la portada.
   ========================================================================== */
.ph-herohome--no-form .ph-herohome__inner { grid-template-columns: minmax(0, 1fr); }
.ph-herohome--no-form .ph-herohome__left { width: 72%; max-width: 72%; }
@media (max-width: 1023px) {
  .ph-herohome--no-form .ph-herohome__left { width: 100%; max-width: 100%; }
}
/* enlace interno dentro del texto del hero (portada) #2: contraste legible sobre el panel */
.ph-herohome__text a { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; font-weight: inherit; }
.ph-herohome__text a:hover, .ph-herohome__text a:focus-visible { color: #fe8d1f; }

/* ==========================================================================
   SERVICE-EXTERIOR-WHY-US-001 — sección «Por qué elegirnos…» de la página Exterior
   (sólo composición: texto a la izquierda + formulario compartido a la derecha).
   ========================================================================== */
.ph-whyus__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.ph-whyus__left { min-width: 0; }
.ph-whyus__left .ph-section-heading { margin-bottom: var(--ph-space-5); }
.ph-whyus__cta { margin: 32px 0 0; }            /* última viñeta → CTA: 32px (28–36) */
.ph-whyus__right { min-width: 0; }
@media (min-width: 1024px) {
  .ph-whyus__inner { grid-template-columns: 61fr 34fr; gap: 48px; align-items: start; }
}


/* ==========================================================================
   SERVICE-EXTERIOR-CTA-BORDER-001/002 — el color del contorno del CTA depende del
   fondo sobre el que está la botonera (criterio del owner):
     · fondo oscuro (panel del hero)  → contorno BLANCO;
     · fondo blanco (sección)         → contorno NEGRO, igual que la botonera fija
                                        de la cabecera (.ph-header__phone).
   Sólo se aplica en la página Exterior; la portada no se toca.
   ========================================================================== */
.ph-herohome--no-form .ph-btn--hero-phone { border-color: #ffffff; }   /* fondo oscuro → blanco */
.ph-whyus .ph-btn--hero-phone { border-color: #000000; box-shadow: none; }   /* fondo blanco → negro */


/* ==========================================================================
   SERVICE-EXTERIOR-APPLICATIONS-001 — sección «Aplicaciones…» de la página
   Exterior: H2 centrado, intro, y 5 filas consecutivas imagen-izquierda /
   texto-derecha (sin alternancia, sin rejilla de tarjetas).
   ========================================================================== */
.ph-apps__intro { max-width: 900px; margin: 0 auto var(--ph-space-6); text-align: left; }
.ph-apps__rows { display: grid; gap: 64px; }                 /* ritmo entre filas 64px (56–72) */
.ph-apps__row { display: grid; grid-template-columns: 38fr 62fr; gap: 40px; align-items: center; }   /* texto centrado verticalmente respecto a la imagen */
.ph-apps__media {
  aspect-ratio: 16 / 9;                /* formato horizontal, igual que otros placeholders */
  background: #e4e4e4;
  border-radius: var(--ph-radius-lg);
  width: 100%;
}
.ph-apps__body { min-width: 0; }
.ph-apps__title { margin: 0 0 12px; }                        /* H3 → párrafo: 12px (10–14) */
.ph-apps__text { margin: 0; }
@media (max-width: 1023px) {
  .ph-apps__rows { gap: 44px; }
  .ph-apps__row { grid-template-columns: 1fr; gap: 18px; }   /* imagen arriba, texto abajo */
}


/* ==========================================================================
   SERVICE-EXTERIOR-PROCESS-001 — variante «exterior» del componente de proceso.
   Misma rejilla, gap, radios y ritmos que en la portada; sólo cambia:
     · la imagen se estira a la altura real de los 4 pasos (textos más largos);
     · en móvil la imagen SÍ aparece, encima de los pasos.
   La portada (.ph-process sin modificador) no se ve afectada.
   ========================================================================== */
.ph-process--exterior { align-items: stretch; }
.ph-process--exterior .ph-process__media { aspect-ratio: auto; align-self: stretch; min-height: 420px; }

@media (max-width: 767px) {
  .ph-process--exterior { grid-template-columns: 1fr; row-gap: 26px; }
  .ph-process--exterior .ph-process__media { display: block; aspect-ratio: 4 / 3; min-height: 0; }
}


/* ==========================================================================
   SERVICE-EXTERIOR-FINISHES-002 — intro de la sección «Acabados…» centrado bajo
   el H2 (el bloque se centra; el texto dentro sigue alineado a la izquierda).
   ========================================================================== */
.ph-intro--center { margin-left: auto; margin-right: auto; }


/* ==========================================================================
   SERVICE-EXTERIOR-TRENDS-001 — espejo de la sección de aplicaciones:
   texto a la IZQUIERDA (≈55–60%) e imagen a la DERECHA (≈40–45%);
   en móvil/tablet: H3 → texto → imagen. Mismas imágenes (16:9, radio 14px).
   ========================================================================== */
.ph-apps--media-right .ph-apps__row { grid-template-columns: 58fr 42fr; }
.ph-apps--media-right .ph-apps__body { grid-column: 1; grid-row: 1; }
.ph-apps--media-right .ph-apps__media { grid-column: 2; grid-row: 1; }

@media (max-width: 1023px) {
  .ph-apps--media-right .ph-apps__row { grid-template-columns: 1fr; }
  .ph-apps--media-right .ph-apps__body { grid-column: 1; grid-row: 1; }
  .ph-apps--media-right .ph-apps__media { grid-column: 1; grid-row: 2; }
}


/* ==========================================================================
   SERVICE-PAGES-SYSTEM-002 — rejilla de «Acabados» capaz de manejar un número
   IMPAR de elementos: si el último queda solo en su fila, conserva EXACTAMENTE
   el ancho de una columna y se centra. No se estira, no crece, no cambia de
   estructura. Con número par (Exterior, 4 elementos) no se aplica nada.
   Sólo en el modo de 2 columnas (≥1024px), que es donde el bloque las usa.
   ========================================================================== */
@media (min-width: 1024px) {
  .ph-choose__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc((100% - 56px) / 2);   /* 56px = column-gap de .ph-choose */
    justify-self: center;
  }
}

/* ============================================================================
   PALMA-HOME-MEDIA-INSTALL-PERF-001 — imágenes reales de la portada (27 WebP).
   Las <img> sustituyen a los placeholders sólidos dentro de los mismos
   contenedores: se conserva el recorte (cover) y las dimensiones del slot,
   con width/height explícitos para evitar saltos de layout.
   ============================================================================ */
.ph-herohome__bg-slide img,
.ph-scard__media img,
.ph-process__media img,
.ph-choose__media img,
.ph-prop__media img,
.ph-testimonial__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* el aviso de "placeholder" desaparece donde ya hay foto */
.ph-scard__media:has(img),
.ph-choose__media:has(img),
.ph-prop__media:has(img),
.ph-process__media:has(img) { background: none; }

/* El contenedor tiene overflow:visible, así que la <img> hereda su radio
   (14px) para no tapar las esquinas redondeadas del bloque. */
.ph-scard__media img,
.ph-choose__media img,
.ph-prop__media img,
.ph-process__media img { border-radius: inherit; }

.ph-testimonial__avatar img { border-radius: 50%; }

/* PALMA-HOME-LCP-FIX-001 — el <picture> del logo no debe alterar la caja del header:
   display:contents hace que la <img> se comporte como hija directa de .ph-header__logo
   (todas las reglas existentes del logo siguen aplicándose sin cambios). */
.ph-header__logo-pic { display: contents; }


/* ==========================================================
   Cookie consent — aviso informativo (PALMA-LEGAL-COOKIES-001)
   El sitio no usa cookies en navegación pública: no hay categorías
   opcionales ficticias. Solo se registra la decisión en localStorage.
   ========================================================== */
.ph-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
  padding: var(--ph-space-3);
  background: rgba(20, 24, 29, .45);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.ph-consent[hidden] { display: none; }
.ph-consent__box {
  max-width: 900px; margin: 0 auto;
  background: var(--ph-bg);
  border: 1px solid var(--ph-line);
  border-radius: 10px;
  padding: var(--ph-space-5) var(--ph-space-5) var(--ph-space-4);
  box-shadow: 0 12px 32px rgba(20, 24, 29, .18);
}
.ph-consent__title {
  margin: 0 0 .4rem; font-size: var(--ph-fs-500); font-weight: 700;
  color: var(--ph-ink); line-height: 1.25;
}
.ph-consent__text {
  margin: 0 0 var(--ph-space-4); font-size: var(--ph-fs-200);
  color: var(--ph-ink-soft); line-height: 1.55; max-width: 68ch;
}
.ph-consent__actions { display: flex; flex-wrap: wrap; gap: var(--ph-space-3); }
.ph-consent__actions--panel { margin-top: var(--ph-space-4); }
.ph-consent__btn { min-height: 44px; }
/* Regla de contorno: fondo blanco del contenedor -> contorno negro 2px */
.ph-consent__btn--primary {
  background: #fe8d1f; color: #fff; border: 2px solid #fe8d1f;
}
.ph-consent__btn--primary:hover { background: #e57a12; border-color: #e57a12; color: #fff; }
.ph-consent__btn--secondary {
  background: #fff; color: var(--ph-ink); border: 2px solid var(--ph-ink);
}
.ph-consent__btn--secondary:hover { background: var(--ph-bg-alt); color: var(--ph-ink); }
.ph-consent__btn--config {
  background: transparent; color: var(--ph-ink); border: 2px solid var(--ph-line);
}
.ph-consent__btn--config:hover { border-color: var(--ph-ink); }
.ph-consent__link {
  margin: var(--ph-space-3) 0 0; font-size: var(--ph-fs-100);
}
.ph-consent__link a { color: #c9530d; text-decoration: underline; }
.ph-consent__link a:hover { color: var(--ph-ink); }
.ph-consent__panel {
  margin-top: var(--ph-space-4); padding-top: var(--ph-space-4);
  border-top: 1px solid var(--ph-line);
}
.ph-consent__panel[hidden] { display: none; }
.ph-consent__panel-title {
  margin: 0 0 var(--ph-space-3); font-size: var(--ph-fs-300); font-weight: 700; color: var(--ph-ink);
}
.ph-consent__cats { list-style: none; margin: 0 0 var(--ph-space-3); padding: 0; }
.ph-consent__cat {
  background: var(--ph-bg-alt); border-radius: 8px; padding: var(--ph-space-3) var(--ph-space-4);
}
.ph-consent__cat-head {
  display: flex; flex-wrap: wrap; gap: var(--ph-space-2);
  align-items: baseline; justify-content: space-between;
}
.ph-consent__cat-name { font-size: var(--ph-fs-200); font-weight: 700; color: var(--ph-ink); }
.ph-consent__cat-state {
  font-size: var(--ph-fs-100); font-weight: 700; color: var(--ph-success);
  background: rgba(31, 122, 77, .1); border-radius: 999px; padding: .15rem .6rem;
}
.ph-consent__cat-desc {
  margin: .35rem 0 0; font-size: var(--ph-fs-100); color: var(--ph-ink-soft); line-height: 1.5;
}
.ph-consent__note {
  margin: 0; font-size: var(--ph-fs-100); color: var(--ph-ink-soft); line-height: 1.5;
}
/* Enlace del footer */
.ph-consent-open {
  font: inherit; font-size: inherit; color: rgba(255, 255, 255, .82);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: none;
}
.ph-consent-open:hover, .ph-consent-open:focus-visible { color: #fe8d1f; text-decoration: underline; }
.ph-consent-open:focus-visible { outline: 2px solid #fe8d1f; outline-offset: 2px; }
.ph-consent :focus-visible,
.ph-consent-open:focus-visible { outline: 2px solid #fe8d1f; outline-offset: 2px; }

@media (max-width: 767px) {
  .ph-consent { padding: var(--ph-space-1); }
  .ph-consent__box { padding: var(--ph-space-3); max-height: 78vh; overflow-y: auto; }
  /* Botones en una sola fila y mas compactos */
  .ph-consent__actions { flex-direction: row; flex-wrap: nowrap; gap: 6px; }
  .ph-consent__actions .ph-consent__btn {
    width: auto; flex: 1 1 auto; min-width: 0;
    min-height: 34px; padding: .3rem .4rem; line-height: 1.15;
    white-space: nowrap;
  }
  /* Todos los textos un 20% mas pequenos que en el estado movil anterior */
  .ph-consent__actions .ph-consent__btn { font-size: 12.8px; }   /* 16   -> 12.8 */
  .ph-consent__title { font-size: 14.4px; }                      /* 18   -> 14.4 */
  .ph-consent__text { font-size: 12px; }                         /* 15   -> 12   */
  .ph-consent__link { font-size: 10.4px; margin-top: 6px; }       /* 13   -> 10.4 */
  .ph-consent__panel-title { font-size: 12.8px; }                 /* 16   -> 12.8 */
  .ph-consent__cat-name { font-size: 12px; }                      /* 15   -> 12   */
  .ph-consent__cat-state { font-size: 10.4px; }                   /* 13   -> 10.4 */
  .ph-consent__cat-desc { font-size: 10.4px; }                    /* 13   -> 10.4 */
  .ph-consent__note { font-size: 10.4px; }                        /* 13   -> 10.4 */
  .ph-consent__cat { padding: var(--ph-space-2) var(--ph-space-3); }
  .ph-consent__panel { margin-top: var(--ph-space-3); padding-top: var(--ph-space-3); }
  .ph-consent__text { margin-bottom: var(--ph-space-3); }
  /* Alineacion en movil: titulo y texto centrados, enlace a la derecha */
  .ph-consent__title { text-align: center; }
  .ph-consent__text { text-align: center; margin-left: auto; margin-right: auto; }
  .ph-consent__link { text-align: right; }
}

/* Desktop: tarjeta ajustada al ancho del texto y contenido centrado */
@media (min-width: 768px) {
  .ph-consent__box {
    width: fit-content; max-width: min(96vw, 660px);
    margin-left: auto; margin-right: auto;
  }
  .ph-consent__title,
  .ph-consent__text,
  .ph-consent__note,
  .ph-consent__panel-title,
  .ph-consent__cat-head,
  .ph-consent__cat-desc { text-align: center; }
  .ph-consent__link { text-align: right; }
  .ph-consent__text { margin-left: auto; margin-right: auto; }
  .ph-consent__actions { justify-content: center; }
  .ph-consent__btn { flex: 0 1 auto; }
  .ph-consent__cat-head { justify-content: center; }
  .ph-consent__cats { text-align: center; }
}

/* ---------- Consent: категория и переключатель аналитики (PALMA-ANALYTICS-CONSENT-001) ---------- */
.ph-consent__switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}
.ph-consent__switch input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #fe8d1f;
  cursor: pointer;
}
.ph-consent__switch-text { color: #333; }
.ph-consent__cat + .ph-consent__cat {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e5e7eb;
}
@media (max-width: 767px) {
  .ph-consent__switch { font-size: 13px; }
}